modern-canvas 0.4.19 → 0.4.21

package/dist/index.cjs

@@ -2155,13 +2155,13 @@ class Vector3 extends Vector {
   }
 }
 
-var __defProp$H = Object.defineProperty;
-var __decorateClass$P = (decorators, target, key, kind) => {
+var __defProp$J = Object.defineProperty;
+var __decorateClass$R = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$H(target, key, result);
+  if (result) __defProp$J(target, key, result);
   return result;
 };
 class MainLoop extends CoreObject {
@@ -2204,10 +2204,10 @@ class MainLoop extends CoreObject {
     this.stop();
   }
 }
-__decorateClass$P([
+__decorateClass$R([
   property({ default: 24 })
 ], MainLoop.prototype, "fps");
-__decorateClass$P([
+__decorateClass$R([
   property({ default: 1 })
 ], MainLoop.prototype, "speed");
 
@@ -2228,19 +2228,15 @@ class Renderer {
     return related;
   }
   resize(width, height, updateStyle = true) {
-    const viewWidth = Math.floor(width * this.pixelRatio);
-    const viewHeight = Math.floor(height * this.pixelRatio);
-    const screenWidth = viewWidth / this.pixelRatio;
-    const screenHeight = viewHeight / this.pixelRatio;
     if (this.view) {
-      this.view.width = viewWidth;
-      this.view.height = viewHeight;
+      this.view.width = Math.floor(width * this.pixelRatio);
+      this.view.height = Math.floor(height * this.pixelRatio);
     }
-    this.screen.width = screenWidth;
-    this.screen.height = screenHeight;
+    this.screen.width = width;
+    this.screen.height = height;
     if (updateStyle && this.view) {
-      this.view.style.width = `${screenWidth}px`;
-      this.view.style.height = `${screenHeight}px`;
+      this.view.style.width = `${width}px`;
+      this.view.style.height = `${height}px`;
     }
   }
 }
@@ -4513,13 +4509,13 @@ class Geometry extends Resource {
   }
 }
 
-var __defProp$G = Object.defineProperty;
-var __decorateClass$O = (decorators, target, key, kind) => {
+var __defProp$I = Object.defineProperty;
+var __decorateClass$Q = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$G(target, key, result);
+  if (result) __defProp$I(target, key, result);
   return result;
 };
 class IndexBuffer extends Resource {
@@ -4563,20 +4559,20 @@ class IndexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$O([
+__decorateClass$Q([
   protectedProperty({ default: null })
 ], IndexBuffer.prototype, "data");
-__decorateClass$O([
+__decorateClass$Q([
   protectedProperty({ default: false })
 ], IndexBuffer.prototype, "dynamic");
 
-var __defProp$F = Object.defineProperty;
-var __decorateClass$N = (decorators, target, key, kind) => {
+var __defProp$H = Object.defineProperty;
+var __decorateClass$P = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$F(target, key, result);
+  if (result) __defProp$H(target, key, result);
   return result;
 };
 class VertexBuffer extends Resource {
@@ -4620,20 +4616,20 @@ class VertexBuffer extends Resource {
     return result;
   }
 }
-__decorateClass$N([
+__decorateClass$P([
   protectedProperty({ default: null })
 ], VertexBuffer.prototype, "data");
-__decorateClass$N([
+__decorateClass$P([
   protectedProperty({ default: false })
 ], VertexBuffer.prototype, "dynamic");
 
-var __defProp$E = Object.defineProperty;
-var __decorateClass$M = (decorators, target, key, kind) => {
+var __defProp$G = Object.defineProperty;
+var __decorateClass$O = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$E(target, key, result);
+  if (result) __defProp$G(target, key, result);
   return result;
 };
 class VertexAttribute extends Resource {
@@ -4670,25 +4666,25 @@ class VertexAttribute extends Resource {
     return result;
   }
 }
-__decorateClass$M([
+__decorateClass$O([
   protectedProperty()
 ], VertexAttribute.prototype, "buffer");
-__decorateClass$M([
+__decorateClass$O([
   protectedProperty({ default: 0 })
 ], VertexAttribute.prototype, "size");
-__decorateClass$M([
+__decorateClass$O([
   protectedProperty({ default: false })
 ], VertexAttribute.prototype, "normalized");
-__decorateClass$M([
+__decorateClass$O([
   protectedProperty({ default: "float" })
 ], VertexAttribute.prototype, "type");
-__decorateClass$M([
+__decorateClass$O([
   protectedProperty()
 ], VertexAttribute.prototype, "stride");
-__decorateClass$M([
+__decorateClass$O([
   protectedProperty()
 ], VertexAttribute.prototype, "offset");
-__decorateClass$M([
+__decorateClass$O([
   protectedProperty()
 ], VertexAttribute.prototype, "divisor");
 
@@ -4932,13 +4928,13 @@ class UvGeometry extends Geometry {
   }
 }
 
-var __defProp$D = Object.defineProperty;
-var __decorateClass$L = (decorators, target, key, kind) => {
+var __defProp$F = Object.defineProperty;
+var __decorateClass$N = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$D(target, key, result);
+  if (result) __defProp$F(target, key, result);
   return result;
 };
 class Texture2D extends Resource {
@@ -5064,22 +5060,22 @@ class Texture2D extends Resource {
     }
   }
 }
-__decorateClass$L([
+__decorateClass$N([
   protectedProperty()
 ], Texture2D.prototype, "source");
-__decorateClass$L([
+__decorateClass$N([
   property({ default: 0 })
 ], Texture2D.prototype, "width");
-__decorateClass$L([
+__decorateClass$N([
   property({ default: 0 })
 ], Texture2D.prototype, "height");
-__decorateClass$L([
+__decorateClass$N([
   property({ default: "linear" })
 ], Texture2D.prototype, "filterMode");
-__decorateClass$L([
+__decorateClass$N([
   property({ default: "clamp_to_edge" })
 ], Texture2D.prototype, "wrapMode");
-__decorateClass$L([
+__decorateClass$N([
   property({ default: 1 })
 ], Texture2D.prototype, "pixelRatio");
 
@@ -5109,13 +5105,13 @@ class AnimatedTexture extends Resource {
   }
 }
 
-var __defProp$C = Object.defineProperty;
-var __decorateClass$K = (decorators, target, key, kind) => {
+var __defProp$E = Object.defineProperty;
+var __decorateClass$M = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$C(target, key, result);
+  if (result) __defProp$E(target, key, result);
   return result;
 };
 class CanvasTexture extends Texture2D {
@@ -5134,7 +5130,7 @@ class CanvasTexture extends Texture2D {
     super._updateProperty(key, value, oldValue, declaration);
   }
 }
-__decorateClass$K([
+__decorateClass$M([
   property({ default: 2 })
 ], CanvasTexture.prototype, "pixelRatio");
 
@@ -5282,23 +5278,27 @@ class PixelsTexture extends Texture2D {
   _updateProperty(key, value, oldValue, declaration) {
     switch (key) {
       case "width":
-        this.source.width = Math.round(value * this.pixelRatio);
+        this.source.width = Math.round(this.width * this.pixelRatio);
         break;
       case "height":
-        this.source.height = Math.round(value * this.pixelRatio);
+        this.source.height = Math.round(this.height * this.pixelRatio);
+        break;
+      case "pixelRatio":
+        this.source.width = Math.round(this.width * this.pixelRatio);
+        this.source.height = Math.round(this.height * this.pixelRatio);
         break;
     }
     super._updateProperty(key, value, oldValue, declaration);
   }
 }
 
-var __defProp$B = Object.defineProperty;
-var __decorateClass$J = (decorators, target, key, kind) => {
+var __defProp$D = Object.defineProperty;
+var __decorateClass$L = (decorators, target, key, kind) => {
   var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$B(target, key, result);
+  if (result) __defProp$D(target, key, result);
   return result;
 };
 function resolveOptions(options) {
@@ -5542,10 +5542,10 @@ const _VideoTexture = class _VideoTexture extends Texture2D {
     }
   }
 };
-__decorateClass$J([
+__decorateClass$L([
   protectedProperty({ default: true })
 ], _VideoTexture.prototype, "autoUpdate");
-__decorateClass$J([
+__decorateClass$L([
   protectedProperty({ default: 0 })
 ], _VideoTexture.prototype, "fps");
 let VideoTexture = _VideoTexture;
@@ -5554,14 +5554,14 @@ class ViewportTexture extends PixelsTexture {
   //
 }
 
-var __defProp$A = Object.defineProperty;
-var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
-var __decorateClass$I = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(target, key) : target;
+var __defProp$C = Object.defineProperty;
+var __getOwnPropDesc$I = Object.getOwnPropertyDescriptor;
+var __decorateClass$K = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$I(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$A(target, key, result);
+  if (kind && result) __defProp$C(target, key, result);
   return result;
 };
 const tagUidMap = {};
@@ -6066,36 +6066,36 @@ exports.Node = class Node extends CoreObject {
     return node;
   }
 };
-__decorateClass$I([
+__decorateClass$K([
   protectedProperty()
 ], exports.Node.prototype, "name", 2);
-__decorateClass$I([
+__decorateClass$K([
   property()
 ], exports.Node.prototype, "mask", 2);
-__decorateClass$I([
+__decorateClass$K([
   property({ default: "inherit" })
 ], exports.Node.prototype, "processMode", 2);
-__decorateClass$I([
+__decorateClass$K([
   property({ default: "default" })
 ], exports.Node.prototype, "processSortMode", 2);
-__decorateClass$I([
+__decorateClass$K([
   property({ default: "inherit" })
 ], exports.Node.prototype, "renderMode", 2);
-__decorateClass$I([
+__decorateClass$K([
   property({ default: "default" })
 ], exports.Node.prototype, "internalMode", 2);
-exports.Node = __decorateClass$I([
+exports.Node = __decorateClass$K([
   customNode("Node")
 ], exports.Node);
 
-var __defProp$z = Object.defineProperty;
-var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
-var __decorateClass$H = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(target, key) : target;
+var __defProp$B = Object.defineProperty;
+var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
+var __decorateClass$J = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$z(target, key, result);
+  if (kind && result) __defProp$B(target, key, result);
   return result;
 };
 exports.TimelineNode = class TimelineNode extends exports.Node {
@@ -6155,30 +6155,30 @@ exports.TimelineNode = class TimelineNode extends exports.Node {
     this._updateCurrentTime();
   }
 };
-__decorateClass$H([
+__decorateClass$J([
   property({ default: 0 })
 ], exports.TimelineNode.prototype, "delay", 2);
-__decorateClass$H([
+__decorateClass$J([
   property({ default: 0 })
 ], exports.TimelineNode.prototype, "duration", 2);
-__decorateClass$H([
+__decorateClass$J([
   property({ default: false })
 ], exports.TimelineNode.prototype, "paused", 2);
-__decorateClass$H([
+__decorateClass$J([
   protectedProperty()
 ], exports.TimelineNode.prototype, "insideTimeRange", 2);
-exports.TimelineNode = __decorateClass$H([
+exports.TimelineNode = __decorateClass$J([
   customNode("TimelineNode")
 ], exports.TimelineNode);
 
-var __defProp$y = Object.defineProperty;
-var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
-var __decorateClass$G = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(target, key) : target;
+var __defProp$A = Object.defineProperty;
+var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
+var __decorateClass$I = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$y(target, key, result);
+  if (kind && result) __defProp$A(target, key, result);
   return result;
 };
 exports.Viewport = class Viewport extends exports.Node {
@@ -6208,9 +6208,9 @@ exports.Viewport = class Viewport extends exports.Node {
     const { pixelRatio } = renderer;
     this._framebuffers.forEach((framebuffer) => {
       const texture = framebuffer.texture;
-      texture.pixelRatio = pixelRatio;
       texture.width = width;
       texture.height = height;
+      texture.pixelRatio = pixelRatio;
       texture.upload(renderer);
     });
     return {
@@ -6316,30 +6316,30 @@ exports.Viewport = class Viewport extends exports.Node {
     return this._projection.toArray(transpose);
   }
 };
-__decorateClass$G([
+__decorateClass$I([
   property({ default: 0 })
 ], exports.Viewport.prototype, "x", 2);
-__decorateClass$G([
+__decorateClass$I([
   property({ default: 0 })
 ], exports.Viewport.prototype, "y", 2);
-__decorateClass$G([
+__decorateClass$I([
   property({ default: 0 })
 ], exports.Viewport.prototype, "width", 2);
-__decorateClass$G([
+__decorateClass$I([
   property({ default: 0 })
 ], exports.Viewport.prototype, "height", 2);
-exports.Viewport = __decorateClass$G([
+exports.Viewport = __decorateClass$I([
   customNode("Viewport")
 ], exports.Viewport);
 
-var __defProp$x = Object.defineProperty;
-var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
-var __decorateClass$F = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(target, key) : target;
+var __defProp$z = Object.defineProperty;
+var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
+var __decorateClass$H = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$x(target, key, result);
+  if (kind && result) __defProp$z(target, key, result);
   return result;
 };
 exports.Effect = class Effect extends exports.TimelineNode {
@@ -6580,69 +6580,35 @@ exports.Effect = class Effect extends exports.TimelineNode {
     }
   }
 };
-__decorateClass$F([
+__decorateClass$H([
   protectedProperty()
 ], exports.Effect.prototype, "material", 2);
-__decorateClass$F([
+__decorateClass$H([
   property()
 ], exports.Effect.prototype, "effectMode", 2);
-__decorateClass$F([
+__decorateClass$H([
   property({ default: "" })
 ], exports.Effect.prototype, "glsl", 2);
-__decorateClass$F([
+__decorateClass$H([
   property({ default: "" })
 ], exports.Effect.prototype, "glslSrc", 2);
-exports.Effect = __decorateClass$F([
+exports.Effect = __decorateClass$H([
   customNode("Effect")
 ], exports.Effect);
 
-var __defProp$w = Object.defineProperty;
-var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
-var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$w(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$E = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$C(target, key) : target;
+var __defProp$y = Object.defineProperty;
+var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
+var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$y(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$G = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$w(target, key, result);
+  if (kind && result) __defProp$y(target, key, result);
   return result;
 };
-var __publicField$h = (obj, key, value) => __defNormalProp$h(obj, typeof key !== "symbol" ? key + "" : key, value);
-const vertX = `attribute vec2 position;
-attribute vec2 uv;
-varying vec2 vUv[9];
-uniform float strength;
-
-void main(void) {
-  gl_Position = vec4(position, 0, 1);
-  vUv[0] = uv + vec2(-4.0 * strength, 0.0);
-  vUv[1] = uv + vec2(-3.0 * strength, 0.0);
-  vUv[2] = uv + vec2(-2.0 * strength, 0.0);
-  vUv[3] = uv + vec2(-1.0 * strength, 0.0);
-  vUv[4] = uv + vec2(0.0 * strength, 0.0);
-  vUv[5] = uv + vec2(1.0 * strength, 0.0);
-  vUv[6] = uv + vec2(2.0 * strength, 0.0);
-  vUv[7] = uv + vec2(3.0 * strength, 0.0);
-  vUv[8] = uv + vec2(4.0 * strength, 0.0);
-}`;
-const vertY = `attribute vec2 position;
-attribute vec2 uv;
-uniform float strength;
-varying vec2 vUv[9];
-
-void main(void) {
-  gl_Position = vec4(position, 0, 1);
-  vUv[0] = uv + vec2(0.0, -4.0 * strength);
-  vUv[1] = uv + vec2(0.0, -3.0 * strength);
-  vUv[2] = uv + vec2(0.0, -2.0 * strength);
-  vUv[3] = uv + vec2(0.0, -1.0 * strength);
-  vUv[4] = uv + vec2(0.0, 0.0 * strength);
-  vUv[5] = uv + vec2(0.0, 1.0 * strength);
-  vUv[6] = uv + vec2(0.0, 2.0 * strength);
-  vUv[7] = uv + vec2(0.0, 3.0 * strength);
-  vUv[8] = uv + vec2(0.0, 4.0 * strength);
-}`;
-const frag = `varying vec2 vUv[9];
+var __publicField$i = (obj, key, value) => __defNormalProp$i(obj, typeof key !== "symbol" ? key + "" : key, value);
+const frag$2 = `varying vec2 vUv[9];
 uniform sampler2D sampler;
 
 void main(void) {
@@ -6678,6 +6644,10 @@ void main(void) {
   }
 }`;
 exports.BlurEffect = class BlurEffect extends exports.Effect {
+  constructor(properties, children = []) {
+    super();
+    this.setProperties(properties).append(children);
+  }
   apply(renderer, source) {
     source.redraw(renderer, () => {
       QuadUvGeometry.draw(renderer, exports.BlurEffect.materialX, {
@@ -6693,45 +6663,73 @@ exports.BlurEffect = class BlurEffect extends exports.Effect {
     });
   }
 };
-__publicField$h(exports.BlurEffect, "materialX", new Material({
-  vert: vertX,
-  frag
+__publicField$i(exports.BlurEffect, "materialX", new Material({
+  vert: `attribute vec2 position;
+attribute vec2 uv;
+varying vec2 vUv[9];
+uniform float strength;
+
+void main(void) {
+  gl_Position = vec4(position, 0, 1);
+  vUv[0] = uv + vec2(-4.0 * strength, 0.0);
+  vUv[1] = uv + vec2(-3.0 * strength, 0.0);
+  vUv[2] = uv + vec2(-2.0 * strength, 0.0);
+  vUv[3] = uv + vec2(-1.0 * strength, 0.0);
+  vUv[4] = uv + vec2(0.0 * strength, 0.0);
+  vUv[5] = uv + vec2(1.0 * strength, 0.0);
+  vUv[6] = uv + vec2(2.0 * strength, 0.0);
+  vUv[7] = uv + vec2(3.0 * strength, 0.0);
+  vUv[8] = uv + vec2(4.0 * strength, 0.0);
+}`,
+  frag: frag$2
 }));
-__publicField$h(exports.BlurEffect, "materialY", new Material({
-  vert: vertY,
-  frag
+__publicField$i(exports.BlurEffect, "materialY", new Material({
+  vert: `attribute vec2 position;
+attribute vec2 uv;
+uniform float strength;
+varying vec2 vUv[9];
+
+void main(void) {
+  gl_Position = vec4(position, 0, 1);
+  vUv[0] = uv + vec2(0.0, -4.0 * strength);
+  vUv[1] = uv + vec2(0.0, -3.0 * strength);
+  vUv[2] = uv + vec2(0.0, -2.0 * strength);
+  vUv[3] = uv + vec2(0.0, -1.0 * strength);
+  vUv[4] = uv + vec2(0.0, 0.0 * strength);
+  vUv[5] = uv + vec2(0.0, 1.0 * strength);
+  vUv[6] = uv + vec2(0.0, 2.0 * strength);
+  vUv[7] = uv + vec2(0.0, 3.0 * strength);
+  vUv[8] = uv + vec2(0.0, 4.0 * strength);
+}`,
+  frag: frag$2
 }));
-__decorateClass$E([
-  property({ default: 8 })
-], exports.BlurEffect.prototype, "strength", 2);
-__decorateClass$E([
+__decorateClass$G([
   property({ default: 4 })
+], exports.BlurEffect.prototype, "strength", 2);
+__decorateClass$G([
+  property({ default: 3 })
 ], exports.BlurEffect.prototype, "quality", 2);
-exports.BlurEffect = __decorateClass$E([
+exports.BlurEffect = __decorateClass$G([
   customNode("BlurEffect")
 ], exports.BlurEffect);
 
-var __defProp$v = Object.defineProperty;
-var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
-var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$v(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$D = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(target, key) : target;
+var __defProp$x = Object.defineProperty;
+var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
+var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$x(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$F = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$v(target, key, result);
+  if (kind && result) __defProp$x(target, key, result);
   return result;
 };
-var __publicField$g = (obj, key, value) => __defNormalProp$g(obj, key + "" , value);
+var __publicField$h = (obj, key, value) => __defNormalProp$h(obj, key + "" , value);
 exports.ColorAdjustEffect = class ColorAdjustEffect extends exports.Effect {
-  saturation = 1;
-  contrast = 1;
-  brightness = 1;
-  red = 1;
-  green = 1;
-  blue = 1;
-  alpha = 1;
-  gamma = 1;
+  constructor(properties, children = []) {
+    super();
+    this.setProperties(properties).append(children);
+  }
   apply(renderer, source) {
     source.redraw(renderer, () => {
       QuadUvGeometry.draw(renderer, exports.ColorAdjustEffect.material, {
@@ -6748,7 +6746,7 @@ exports.ColorAdjustEffect = class ColorAdjustEffect extends exports.Effect {
     });
   }
 };
-__publicField$g(exports.ColorAdjustEffect, "material", new Material({
+__publicField$h(exports.ColorAdjustEffect, "material", new Material({
   vert: `precision mediump float;
 attribute vec2 position;
 attribute vec2 uv;
@@ -6783,51 +6781,51 @@ void main(void) {
   gl_FragColor = c * alpha;
 }`
 }));
-__decorateClass$D([
-  property()
+__decorateClass$F([
+  property({ default: 1 })
 ], exports.ColorAdjustEffect.prototype, "saturation", 2);
-__decorateClass$D([
-  property()
+__decorateClass$F([
+  property({ default: 1 })
 ], exports.ColorAdjustEffect.prototype, "contrast", 2);
-__decorateClass$D([
-  property()
+__decorateClass$F([
+  property({ default: 1 })
 ], exports.ColorAdjustEffect.prototype, "brightness", 2);
-__decorateClass$D([
-  property()
+__decorateClass$F([
+  property({ default: 1 })
 ], exports.ColorAdjustEffect.prototype, "red", 2);
-__decorateClass$D([
-  property()
+__decorateClass$F([
+  property({ default: 1 })
 ], exports.ColorAdjustEffect.prototype, "green", 2);
-__decorateClass$D([
-  property()
+__decorateClass$F([
+  property({ default: 1 })
 ], exports.ColorAdjustEffect.prototype, "blue", 2);
-__decorateClass$D([
-  property()
+__decorateClass$F([
+  property({ default: 1 })
 ], exports.ColorAdjustEffect.prototype, "alpha", 2);
-__decorateClass$D([
-  property()
+__decorateClass$F([
+  property({ default: 1 })
 ], exports.ColorAdjustEffect.prototype, "gamma", 2);
-exports.ColorAdjustEffect = __decorateClass$D([
+exports.ColorAdjustEffect = __decorateClass$F([
   customNode("ColorAdjustEffect")
 ], exports.ColorAdjustEffect);
 
-var __defProp$u = Object.defineProperty;
-var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
-var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$u(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$C = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$A(target, key) : target;
+var __defProp$w = Object.defineProperty;
+var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
+var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$w(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$E = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$C(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$u(target, key, result);
+  if (kind && result) __defProp$w(target, key, result);
   return result;
 };
-var __publicField$f = (obj, key, value) => __defNormalProp$f(obj, key + "" , value);
+var __publicField$g = (obj, key, value) => __defNormalProp$g(obj, key + "" , value);
 exports.ColorFilterEffect = class ColorFilterEffect extends exports.Effect {
   _colorMatrix = new ColorMatrix();
-  constructor(properties) {
+  constructor(properties, children = []) {
     super();
-    this.setProperties(properties);
+    this.setProperties(properties).append(children);
   }
   apply(renderer, source) {
     if (!this.filter)
@@ -6872,7 +6870,7 @@ exports.ColorFilterEffect = class ColorFilterEffect extends exports.Effect {
     });
   }
 };
-__publicField$f(exports.ColorFilterEffect, "material", new Material({
+__publicField$g(exports.ColorFilterEffect, "material", new Material({
   vert: `precision mediump float;
 attribute vec2 position;
 attribute vec2 uv;
@@ -6899,30 +6897,32 @@ void main(void) {
   );
 }`
 }));
-__decorateClass$C([
-  property({ default: "" })
+__decorateClass$E([
+  property()
 ], exports.ColorFilterEffect.prototype, "filter", 2);
-exports.ColorFilterEffect = __decorateClass$C([
+exports.ColorFilterEffect = __decorateClass$E([
   customNode("ColorFilterEffect")
 ], exports.ColorFilterEffect);
 
-var __defProp$t = Object.defineProperty;
-var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
-var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$B = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$z(target, key) : target;
+var __defProp$v = Object.defineProperty;
+var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
+var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$v(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$D = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$t(target, key, result);
+  if (kind && result) __defProp$v(target, key, result);
   return result;
 };
-var __publicField$e = (obj, key, value) => __defNormalProp$e(obj, key + "" , value);
+var __publicField$f = (obj, key, value) => __defNormalProp$f(obj, key + "" , value);
 const MAX_COLORS$1 = 50;
 exports.ColorOverlayEffect = class ColorOverlayEffect extends exports.Effect {
-  colors = [];
-  alpha = 0.5;
   _color = new Color();
+  constructor(properties, children = []) {
+    super();
+    this.setProperties(properties).append(children);
+  }
   apply(renderer, source) {
     source.redraw(renderer, () => {
       const colors = this.colors.map((val) => {
@@ -6941,7 +6941,7 @@ exports.ColorOverlayEffect = class ColorOverlayEffect extends exports.Effect {
     });
   }
 };
-__publicField$e(exports.ColorOverlayEffect, "material", new Material({
+__publicField$f(exports.ColorOverlayEffect, "material", new Material({
   vert: `precision mediump float;
 attribute vec2 position;
 attribute vec2 uv;
@@ -6988,32 +6988,34 @@ void main(void) {
   gl_FragColor = vec4(mix(color.rgb, mask.rgb, color.a * mask.a), color.a);
 }`
 }));
-__decorateClass$B([
-  property()
+__decorateClass$D([
+  property({ default: [] })
 ], exports.ColorOverlayEffect.prototype, "colors", 2);
-__decorateClass$B([
-  property()
+__decorateClass$D([
+  property({ default: 0.5 })
 ], exports.ColorOverlayEffect.prototype, "alpha", 2);
-exports.ColorOverlayEffect = __decorateClass$B([
+exports.ColorOverlayEffect = __decorateClass$D([
   customNode("ColorOverlayEffect")
 ], exports.ColorOverlayEffect);
 
-var __defProp$s = Object.defineProperty;
-var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$s(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$A = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$y(target, key) : target;
+var __defProp$u = Object.defineProperty;
+var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
+var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$u(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$C = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$A(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$s(target, key, result);
+  if (kind && result) __defProp$u(target, key, result);
   return result;
 };
-var __publicField$d = (obj, key, value) => __defNormalProp$d(obj, key + "" , value);
+var __publicField$e = (obj, key, value) => __defNormalProp$e(obj, key + "" , value);
 exports.ColorRemoveEffect = class ColorRemoveEffect extends exports.Effect {
-  colors = [];
-  epsilon = 0.5;
   _color = new Color();
+  constructor(properties, children = []) {
+    super();
+    this.setProperties(properties).append(children);
+  }
   apply(renderer, source) {
     const maxColors = 50;
     const originalColors = new Float32Array(maxColors * 3);
@@ -7038,7 +7040,7 @@ exports.ColorRemoveEffect = class ColorRemoveEffect extends exports.Effect {
     });
   }
 };
-__publicField$d(exports.ColorRemoveEffect, "material", new Material({
+__publicField$e(exports.ColorRemoveEffect, "material", new Material({
   vert: `precision mediump float;
 attribute vec2 position;
 attribute vec2 uv;
@@ -7071,33 +7073,35 @@ void main(void) {
   gl_FragColor = color;
 }`
 }));
-__decorateClass$A([
-  property()
+__decorateClass$C([
+  property({ default: [] })
 ], exports.ColorRemoveEffect.prototype, "colors", 2);
-__decorateClass$A([
-  property()
+__decorateClass$C([
+  property({ default: 0.5 })
 ], exports.ColorRemoveEffect.prototype, "epsilon", 2);
-exports.ColorRemoveEffect = __decorateClass$A([
+exports.ColorRemoveEffect = __decorateClass$C([
   customNode("ColorRemoveEffect")
 ], exports.ColorRemoveEffect);
 
-var __defProp$r = Object.defineProperty;
-var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$z = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$x(target, key) : target;
+var __defProp$t = Object.defineProperty;
+var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
+var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$B = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$z(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$r(target, key, result);
+  if (kind && result) __defProp$t(target, key, result);
   return result;
 };
-var __publicField$c = (obj, key, value) => __defNormalProp$c(obj, key + "" , value);
+var __publicField$d = (obj, key, value) => __defNormalProp$d(obj, key + "" , value);
 const MAX_COLORS = 50;
 exports.ColorReplaceEffect = class ColorReplaceEffect extends exports.Effect {
-  colors = [];
-  epsilon = 0.05;
   _color = new Color();
+  constructor(properties, children = []) {
+    super();
+    this.setProperties(properties).append(children);
+  }
   apply(renderer, source) {
     const colors = this.colors.map((val) => {
       this._color.value = val[0];
@@ -7136,7 +7140,7 @@ exports.ColorReplaceEffect = class ColorReplaceEffect extends exports.Effect {
     });
   }
 };
-__publicField$c(exports.ColorReplaceEffect, "material", new Material({
+__publicField$d(exports.ColorReplaceEffect, "material", new Material({
   vert: `precision mediump float;
 attribute vec2 position;
 attribute vec2 uv;
@@ -7176,626 +7180,756 @@ void main(void) {
   }
 }`
 }));
-__decorateClass$z([
-  property()
+__decorateClass$B([
+  property({ default: [] })
 ], exports.ColorReplaceEffect.prototype, "colors", 2);
-__decorateClass$z([
-  property()
+__decorateClass$B([
+  property({ default: 0.05 })
 ], exports.ColorReplaceEffect.prototype, "epsilon", 2);
-exports.ColorReplaceEffect = __decorateClass$z([
+exports.ColorReplaceEffect = __decorateClass$B([
   customNode("ColorReplaceEffect")
 ], exports.ColorReplaceEffect);
 
-var __defProp$q = Object.defineProperty;
-var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$y = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$w(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$q(target, key, result);
-  return result;
-};
-var __publicField$b = (obj, key, value) => __defNormalProp$b(obj, key + "" , value);
-exports.EmbossEffect = class EmbossEffect extends exports.Effect {
-  strength;
-  constructor(strength = 5) {
-    super();
-    this.strength = strength;
-  }
-  apply(renderer, source) {
-    source.redraw(renderer, () => {
-      QuadUvGeometry.draw(renderer, exports.EmbossEffect.material, {
-        sampler: 0,
-        strength: this.strength,
-        inputSize: [source.width, source.height, 1 / source.width, 1 / source.height]
+class CanvasContext extends modernPath2d.Path2D {
+  textureTransform;
+  fillStyle;
+  strokeStyle;
+  lineCap;
+  lineJoin;
+  lineWidth;
+  miterLimit;
+  _defaultStyle = Texture2D.EMPTY;
+  _draws = [];
+  stroke() {
+    let texture = this._defaultStyle;
+    if (this.strokeStyle) {
+      if (this.strokeStyle instanceof Texture2D) {
+        texture = this.strokeStyle;
+      } else {
+        texture = new ColorTexture(this.strokeStyle);
+      }
+    }
+    if (this.curves.length) {
+      this._draws.push({
+        type: "stroke",
+        path: new modernPath2d.Path2D(this),
+        texture,
+        textureTransform: this.textureTransform,
+        style: {
+          alignment: 0.5,
+          cap: this.lineCap ?? "butt",
+          join: this.lineJoin ?? "miter",
+          width: this.lineWidth ?? 1,
+          miterLimit: this.miterLimit ?? 10
+        }
       });
-    });
+      super.reset();
+    }
   }
-};
-__publicField$b(exports.EmbossEffect, "material", new Material({
-  vert: `precision mediump float;
-attribute vec2 position;
-attribute vec2 uv;
-varying vec2 vUv;
-void main() {
-  gl_Position = vec4(position, 0.0, 1.0);
-  vUv = uv;
-}`,
-  frag: `precision mediump float;
-uniform sampler2D sampler;
-uniform vec4 inputSize;
-uniform float strength;
-varying vec2 vUv;
-
-void main(void) {
-    vec2 onePixel = inputSize.zw;
-    vec4 color;
-    color.rgb = vec3(0.5);
-    color -= texture2D(sampler, vUv - onePixel) * strength;
-    color += texture2D(sampler, vUv + onePixel) * strength;
-    color.rgb = vec3((color.r + color.g + color.b) / 3.0);
-    float alpha = texture2D(sampler, vUv).a;
-    gl_FragColor = vec4(color.rgb * alpha, alpha);
-}`
-}));
-__decorateClass$y([
-  property()
-], exports.EmbossEffect.prototype, "strength", 2);
-exports.EmbossEffect = __decorateClass$y([
-  customNode("EmbossEffect")
-], exports.EmbossEffect);
-
-var __defProp$p = Object.defineProperty;
-var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$x = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$v(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$p(target, key, result);
-  return result;
-};
-var __publicField$a = (obj, key, value) => __defNormalProp$a(obj, key + "" , value);
-exports.GlitchEffect = class GlitchEffect extends exports.Effect {
-  _canvas;
-  _texture;
-  _sizes;
-  _offsets;
-  _needsRedraw = false;
-  slices = 10;
-  sampleSize = 512;
-  offset = 100;
-  direction = 0;
-  fillMode = 2;
-  seed = 0;
-  red = [2, 2];
-  green = [-10, 4];
-  blue = [10, -4];
-  constructor() {
-    super();
-    this._canvas = document.createElement("canvas");
-    this._canvas.width = 4;
-    this._canvas.height = this.sampleSize;
-    this._texture = new Texture2D(this._canvas);
-    this._sizes = new Float32Array(this.slices);
-    this._offsets = new Float32Array(this.slices);
+  fillRect(x, y, width, height) {
+    this.rect(x, y, width, height).fill();
   }
-  redraw() {
-    const size = this.sampleSize;
-    const texture = this._texture;
-    const ctx = this._canvas.getContext("2d");
-    ctx.clearRect(0, 0, 8, size);
-    let offset;
-    let y = 0;
-    for (let i = 0; i < this.slices; i++) {
-      offset = Math.floor(this._offsets[i] * 256);
-      const height = this._sizes[i] * size;
-      const red = offset > 0 ? offset : 0;
-      const green = offset < 0 ? -offset : 0;
-      ctx.fillStyle = `rgba(${red}, ${green}, 0, 1)`;
-      ctx.fillRect(0, y >> 0, size, height + 1 >> 0);
-      y += height;
-    }
-    texture.requestUpload();
+  strokeRect(x, y, width, height) {
+    this.rect(x, y, width, height).stroke();
   }
-  apply(renderer, source) {
-    if (!this._needsRedraw) {
-      this._needsRedraw = true;
-      this.redraw();
-    }
-    const width = source.width;
-    const height = source.height;
-    const radians = this.direction * (Math.PI / 180);
-    const sinDir = Math.sin(radians);
-    const cosDir = Math.cos(radians);
-    source.redraw(renderer, () => {
-      this._texture.activate(renderer, 1);
-      QuadUvGeometry.draw(renderer, exports.GlitchEffect.material, {
-        sampler: 0,
-        filterClamp: [0, 0, 1, 1],
-        filterArea: [width, height, 0, 0],
-        dimensions: [width, height],
-        aspect: height / width,
-        displacementMap: 1,
-        offset: this.offset,
-        sinDir,
-        cosDir,
-        fillMode: this.fillMode,
-        seed: this.seed,
-        red: this.red,
-        green: this.green,
-        blue: this.blue
-      });
+  fill() {
+    let texture = this._defaultStyle;
+    if (this.fillStyle) {
+      if (this.fillStyle instanceof Texture2D) {
+        texture = this.fillStyle;
+      } else {
+        texture = new ColorTexture(this.fillStyle);
+      }
+    }
+    this._draws.push({
+      type: "fill",
+      path: new modernPath2d.Path2D(this),
+      texture,
+      textureTransform: this.textureTransform
     });
+    super.reset();
   }
-};
-__publicField$a(exports.GlitchEffect, "material", new Material({
-  vert: `precision mediump float;
-attribute vec2 position;
-attribute vec2 uv;
-varying vec2 vUv;
-void main() {
-  gl_Position = vec4(position, 0.0, 1.0);
-  vUv = uv;
-}`,
-  frag: `precision mediump float;
-
-varying vec2 vUv;
-uniform sampler2D sampler;
-
-uniform vec4 filterArea;
-uniform vec4 filterClamp;
-uniform vec2 dimensions;
-uniform float aspect;
-
-uniform sampler2D displacementMap;
-uniform float offset;
-uniform float sinDir;
-uniform float cosDir;
-uniform int fillMode;
-
-uniform float seed;
-uniform vec2 red;
-uniform vec2 green;
-uniform vec2 blue;
-
-const int TRANSPARENT = 0;
-const int ORIGINAL = 1;
-const int LOOP = 2;
-const int CLAMP = 3;
-const int MIRROR = 4;
-
-void main(void) {
-  vec2 coord = (vUv * filterArea.xy) / dimensions;
-
-  if (coord.x > 1.0 || coord.y > 1.0) {
-      return;
+  copy(source) {
+    super.copy(source);
+    this.strokeStyle = source.strokeStyle;
+    this.fillStyle = source.fillStyle;
+    this.textureTransform = source.textureTransform;
+    this.lineCap = source.lineCap;
+    this.lineJoin = source.lineJoin;
+    this.lineWidth = source.lineWidth;
+    this.miterLimit = source.miterLimit;
+    this._draws = source._draws.slice();
+    return this;
   }
-
-  float cx = coord.x - 0.5;
-  float cy = (coord.y - 0.5) * aspect;
-  float ny = (-sinDir * cx + cosDir * cy) / aspect + 0.5;
-
-  // displacementMap: repeat
-  // ny = ny > 1.0 ? ny - 1.0 : (ny < 0.0 ? 1.0 + ny : ny);
-
-  // displacementMap: mirror
-  ny = ny > 1.0 ? 2.0 - ny : (ny < 0.0 ? -ny : ny);
-
-  vec4 dc = texture2D(displacementMap, vec2(0.5, ny));
-
-  float displacement = (dc.r - dc.g) * (offset / filterArea.x);
-
-  coord = vUv + vec2(cosDir * displacement, sinDir * displacement * aspect);
-
-  if (fillMode == CLAMP) {
-    coord = clamp(coord, filterClamp.xy, filterClamp.zw);
-  } else {
-    if (coord.x > filterClamp.z) {
-      if (fillMode == TRANSPARENT) {
-        discard;
-      } else if (fillMode == LOOP) {
-        coord.x -= filterClamp.z;
-      } else if (fillMode == MIRROR) {
-        coord.x = filterClamp.z * 2.0 - coord.x;
+  reset() {
+    super.reset();
+    this.strokeStyle = void 0;
+    this.fillStyle = void 0;
+    this.textureTransform = void 0;
+    this.lineCap = void 0;
+    this.lineJoin = void 0;
+    this.lineWidth = void 0;
+    this.miterLimit = void 0;
+    this._draws.length = 0;
+    return this;
+  }
+  buildUvs(start, vertices, uvs, texture, textureTransform) {
+    if (texture) {
+      const w = texture.width;
+      const h = texture.height;
+      for (let len = vertices.length, i = start; i < len; i += 2) {
+        const x = vertices[i];
+        const y = vertices[i + 1];
+        let uvX;
+        let uvY;
+        if (textureTransform) {
+          [uvX, uvY] = textureTransform?.applyToPoint(x, y);
+        } else {
+          [uvX, uvY] = [x / w, y / h];
+        }
+        uvs.push(uvX, uvY);
       }
-    } else if (coord.x < filterClamp.x) {
-      if (fillMode == TRANSPARENT) {
-        discard;
-      } else if (fillMode == LOOP) {
-        coord.x += filterClamp.z;
-      } else if (fillMode == MIRROR) {
-        coord.x *= -filterClamp.z;
+    } else {
+      for (let len = vertices.length, i = start; i < len; i += 2) {
+        uvs.push(0, 0);
       }
     }
-
-    if (coord.y > filterClamp.w) {
-      if (fillMode == TRANSPARENT) {
-        discard;
-      } else if (fillMode == LOOP) {
-        coord.y -= filterClamp.w;
-      } else if (fillMode == MIRROR) {
-        coord.y = filterClamp.w * 2.0 - coord.y;
+  }
+  toBatchables() {
+    const batchables = [];
+    let vertices = [];
+    let indices = [];
+    let uvs = [];
+    let texture;
+    const push = (type) => {
+      batchables.push({
+        type,
+        vertices,
+        indices,
+        uvs,
+        texture
+      });
+      vertices = [];
+      indices = [];
+      uvs = [];
+      texture = void 0;
+    };
+    for (let len = this._draws.length, i = 0; i < len; i++) {
+      const draw = this._draws[i];
+      const prev = this._draws[i - 1];
+      if (vertices.length && prev && prev?.type !== draw.type) {
+        push(prev.type);
       }
-    } else if (coord.y < filterClamp.y) {
-      if (fillMode == TRANSPARENT) {
-        discard;
-      } else if (fillMode == LOOP) {
-        coord.y += filterClamp.w;
-      } else if (fillMode == MIRROR) {
-        coord.y *= -filterClamp.w;
+      const oldTexture = texture;
+      if (!oldTexture) {
+        texture = draw.texture;
+      }
+      if (vertices.length && oldTexture !== draw.texture && !oldTexture?.is(draw.texture)) {
+        push(draw.type);
+      }
+      const start = vertices.length;
+      if (draw.type === "fill") {
+        draw.path.fillTriangulate({
+          vertices,
+          indices
+        });
+        this.buildUvs(start, vertices, uvs, draw.texture, draw.textureTransform);
+      } else {
+        draw.path.strokeTriangulate({
+          vertices,
+          indices,
+          lineStyle: draw.style,
+          flipAlignment: false,
+          closed: true
+        });
+        this.buildUvs(start, vertices, uvs, draw.texture, draw.textureTransform);
       }
     }
+    const last = this._draws[this._draws.length - 1];
+    if (last && vertices.length) {
+      push(last.type);
+    }
+    return batchables;
+  }
+}
+
+var __defProp$s = Object.defineProperty;
+var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
+var __decorateClass$A = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$y(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$s(target, key, result);
+  return result;
+};
+exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
+  _parentGlobalVisible;
+  _globalVisible;
+  get globalVisible() {
+    return this._globalVisible ?? true;
+  }
+  _parentGlobalOpacity;
+  _globalOpacity;
+  get globalOpacity() {
+    return this._globalOpacity ?? 1;
+  }
+  _modulate = new Color(4294967295);
+  _backgroundImage;
+  // Batch render
+  context = new CanvasContext();
+  _resetContext = true;
+  _redrawing = false;
+  _relayouting = false;
+  _repainting = false;
+  _originalBatchables = [];
+  _layoutedBatchables = [];
+  _batchables = [];
+  constructor(properties, nodes = []) {
+    super();
+    this.setProperties(properties).append(nodes);
+  }
+  _updateProperty(key, value, oldValue, declaration) {
+    super._updateProperty(key, value, oldValue, declaration);
+    switch (key) {
+      case "modulate":
+        this._modulate.value = value;
+        this.requestRepaint();
+        break;
+      case "blendMode":
+        this.requestRepaint();
+        break;
+      case "opacity":
+        this._updateGlobalOpacity();
+        break;
+      case "visible":
+      case "insideTimeRange":
+        this._updateGlobalVisible();
+        break;
+    }
+  }
+  show() {
+    this.visible = true;
+  }
+  hide() {
+    this.visible = false;
+  }
+  isVisibleInTree() {
+    return this.globalOpacity > 0 && this.globalVisible;
+  }
+  canRender() {
+    return super.canRender() && this.isVisibleInTree();
+  }
+  requestRedraw() {
+    this._redrawing = true;
+    this.requestUpdate();
+  }
+  requestRelayout() {
+    this._relayouting = true;
+    this.requestUpdate();
+  }
+  requestRepaint() {
+    this._repainting = true;
+    this.requestUpdate();
+  }
+  _updateGlobalVisible() {
+    this._parentGlobalVisible = this.getParent()?.globalVisible;
+    this._globalVisible = (this._parentGlobalVisible ?? true) && this.visible && this.insideTimeRange;
+  }
+  _updateGlobalOpacity() {
+    this._parentGlobalOpacity = this.getParent()?.opacity;
+    const globalOpacity = clamp(0, this.opacity, 1) * (this._parentGlobalOpacity ?? 1);
+    if (this._globalOpacity !== globalOpacity) {
+      this._globalOpacity = globalOpacity;
+      this.requestRepaint();
+    }
+  }
+  _draw() {
+    this.emit("draw");
+  }
+  _redraw() {
+    this._tree?.log(this.name, "redrawing");
+    this._draw();
+    return this.context.toBatchables();
+  }
+  _relayout(batchables) {
+    this._tree?.log(this.name, "relayouting");
+    return batchables;
+  }
+  _repaint(batchables) {
+    this._tree?.log(this.name, "repainting");
+    return batchables.map((batchable) => {
+      return {
+        ...batchable,
+        modulate: this._modulate.toArgb(this.globalOpacity, true),
+        blendMode: this.blendMode
+      };
+    });
+  }
+  _process(delta) {
+    super._process(delta);
+    const parent = this.getParent();
+    if (this._parentGlobalVisible !== parent?.globalVisible) {
+      this.requestUpdate();
+    }
+    if (this._parentGlobalOpacity !== parent?.globalOpacity) {
+      this.requestUpdate();
+    }
+  }
+  _update() {
+    const parent = this.getParent();
+    if (this._parentGlobalVisible !== parent?.globalVisible) {
+      this._updateGlobalVisible();
+    }
+    if (this._parentGlobalOpacity !== parent?.globalOpacity) {
+      this._updateGlobalOpacity();
+    }
+    const redrawing = this._redrawing;
+    let relayouting = this._relayouting;
+    let repainting = this._repainting;
+    let batchables;
+    if (redrawing) {
+      this._originalBatchables = this._redraw();
+      relayouting = true;
+    }
+    if (relayouting) {
+      this._layoutedBatchables = this._relayout(this._originalBatchables);
+      repainting = true;
+    }
+    if (repainting) {
+      batchables = this._repaint(this._layoutedBatchables);
+    }
+    if (redrawing) {
+      if (this._resetContext) {
+        this.context.reset();
+      }
+    }
+    if (batchables) {
+      this._batchables = batchables;
+      this._redrawing = false;
+      this._relayouting = false;
+      this._repainting = false;
+    }
+  }
+  _render(renderer) {
+    this._batchables.forEach((batchable) => {
+      batchable.texture?.upload(renderer);
+      renderer.batch2D.render({
+        ...batchable,
+        texture: batchable.texture?._glTexture(renderer)
+      });
+    });
+    super._render(renderer);
+  }
+};
+__decorateClass$A([
+  property()
+], exports.CanvasItem.prototype, "modulate", 2);
+__decorateClass$A([
+  property()
+], exports.CanvasItem.prototype, "blendMode", 2);
+__decorateClass$A([
+  protectedProperty({ default: true })
+], exports.CanvasItem.prototype, "visible", 2);
+__decorateClass$A([
+  protectedProperty({ default: 1 })
+], exports.CanvasItem.prototype, "opacity", 2);
+exports.CanvasItem = __decorateClass$A([
+  customNode("CanvasItem")
+], exports.CanvasItem);
+
+class RenderStack {
+  currentCall;
+  calls = [];
+  createCall(renderable) {
+    return {
+      renderable,
+      parentCall: this.currentCall,
+      fn: renderable.render.bind(renderable),
+      calls: []
+    };
+  }
+  push(renderable) {
+    const call = this.createCall(renderable);
+    (this.currentCall?.calls ?? this.calls).push(call);
+    return call;
+  }
+  render(renderer) {
+    this.calls.forEach(function render(call) {
+      call.fn(renderer, () => {
+        call.calls.forEach(render);
+      });
+    });
+    this.calls = [];
+  }
+}
+
+var __defProp$r = Object.defineProperty;
+var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
+var __decorateClass$z = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$x(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$r(target, key, result);
+  return result;
+};
+exports.Timeline = class Timeline extends exports.Node {
+  static from(range, loop = false) {
+    const [startTime, endTime] = range ? Array.isArray(range) ? range : [0, range] : [];
+    return new exports.Timeline({
+      startTime,
+      endTime,
+      loop
+    });
+  }
+  constructor(properties) {
+    super();
+    this.setProperties(properties);
+  }
+  _updateProperty(key, value, oldValue) {
+    super._updateProperty(key, value, oldValue);
+    switch (key) {
+      case "startTime":
+        this.startTime = Math.min(value, this.endTime);
+        break;
+      case "endTime":
+        this.endTime = value || Number.MAX_SAFE_INTEGER;
+        break;
+    }
+  }
+  addTime(delta) {
+    const start = this.startTime;
+    const end = this.endTime;
+    let current = this.currentTime;
+    current = current + delta;
+    if (this.loop && current > end) {
+      current = start + current % end;
+    }
+    current = clamp(start, current, end);
+    this.currentTime = current;
+    this.emit("updateCurrentTime", current, delta);
+    return this;
+  }
+  _process(delta) {
+    super._process(delta);
+    this.addTime(delta);
+  }
+};
+__decorateClass$z([
+  property({ default: 0 })
+], exports.Timeline.prototype, "startTime", 2);
+__decorateClass$z([
+  property({ default: 0 })
+], exports.Timeline.prototype, "currentTime", 2);
+__decorateClass$z([
+  property({ default: Number.MAX_SAFE_INTEGER })
+], exports.Timeline.prototype, "endTime", 2);
+__decorateClass$z([
+  property({ default: false })
+], exports.Timeline.prototype, "loop", 2);
+exports.Timeline = __decorateClass$z([
+  customNode("Timeline")
+], exports.Timeline);
+
+var __defProp$q = Object.defineProperty;
+var __decorateClass$y = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp$q(target, key, result);
+  return result;
+};
+class SceneTree extends MainLoop {
+  input = new Input();
+  renderStack = new RenderStack();
+  root = new exports.Viewport(true).setTree(this);
+  timeline;
+  _backgroundColor = new Color();
+  _currentViewport;
+  getCurrentViewport() {
+    return this._currentViewport;
+  }
+  setCurrentViewport(viewport) {
+    this._currentViewport = viewport;
+  }
+  constructor(timeline = new exports.Timeline()) {
+    super();
+    this.timeline = timeline.setTree(this);
+  }
+  _updateProperty(key, value, oldValue, declaration) {
+    super._updateProperty(key, value, oldValue, declaration);
+    switch (key) {
+      case "backgroundColor":
+        this._backgroundColor.value = value;
+        break;
+    }
+  }
+  log(...args) {
+    if (this.debug) {
+      console.log(`[modern-canvas]`, ...args);
+    }
+  }
+  _process(delta = 0) {
+    this.timeline.emit("process", delta);
+    this.emit("processing");
+    this.root.emit("process", delta);
+    this.emit("processed");
+  }
+  _render(renderer) {
+    this.emit("rendering");
+    renderer.program.uniforms.projectionMatrix = this.root.toProjectionArray(true);
+    this.renderStack.render(renderer);
+    this._renderScreen(renderer);
+    this.emit("rendered");
+  }
+  _renderScreen(renderer) {
+    renderer.state.reset();
+    renderer.framebuffer.bind(null);
+    renderer.viewport.bind({
+      x: 0,
+      y: 0,
+      width: this.root.width * renderer.pixelRatio,
+      height: this.root.height * renderer.pixelRatio
+    });
+    if (this.backgroundColor) {
+      renderer.gl.clearColor(...this._backgroundColor.toArray());
+    }
+    renderer.clear();
+    if (this.backgroundColor) {
+      renderer.gl.clearColor(0, 0, 0, 0);
+    }
+    const texture = this.root.texture;
+    texture.activate(renderer, 0);
+    QuadUvGeometry.draw(renderer);
+    renderer.texture.unbind(texture);
   }
-
-  gl_FragColor.r = texture2D(sampler, coord + red * (1.0 - seed * 0.4) / filterArea.xy).r;
-  gl_FragColor.g = texture2D(sampler, coord + green * (1.0 - seed * 0.3) / filterArea.xy).g;
-  gl_FragColor.b = texture2D(sampler, coord + blue * (1.0 - seed * 0.2) / filterArea.xy).b;
-  gl_FragColor.a = texture2D(sampler, coord).a;
-}`
-}));
-__decorateClass$x([
-  property()
-], exports.GlitchEffect.prototype, "slices", 2);
-__decorateClass$x([
-  property()
-], exports.GlitchEffect.prototype, "sampleSize", 2);
-__decorateClass$x([
-  property()
-], exports.GlitchEffect.prototype, "offset", 2);
-__decorateClass$x([
-  property()
-], exports.GlitchEffect.prototype, "direction", 2);
-__decorateClass$x([
-  property()
-], exports.GlitchEffect.prototype, "fillMode", 2);
-__decorateClass$x([
-  property()
-], exports.GlitchEffect.prototype, "seed", 2);
-__decorateClass$x([
-  property()
-], exports.GlitchEffect.prototype, "red", 2);
-__decorateClass$x([
-  property()
-], exports.GlitchEffect.prototype, "green", 2);
-__decorateClass$x([
+  free() {
+    super.free();
+    this.root.getChildren(true).forEach((node) => this.root.removeChild(node));
+    this.input.removeEventListeners();
+  }
+}
+__decorateClass$y([
+  property({ default: false })
+], SceneTree.prototype, "processPaused");
+__decorateClass$y([
   property()
-], exports.GlitchEffect.prototype, "blue", 2);
-exports.GlitchEffect = __decorateClass$x([
-  customNode("GlitchEffect")
-], exports.GlitchEffect);
+], SceneTree.prototype, "backgroundColor");
+__decorateClass$y([
+  protectedProperty({ default: false })
+], SceneTree.prototype, "debug");
 
-var __defProp$o = Object.defineProperty;
-var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$w = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(target, key) : target;
+var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
+var __decorateClass$x = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$w(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$o(target, key, result);
+      result = (decorator(result)) || result;
   return result;
 };
-var __publicField$9 = (obj, key, value) => __defNormalProp$9(obj, key + "" , value);
-exports.GodrayEffect = class GodrayEffect extends exports.Effect {
-  angle = 30;
-  gain = 0.5;
-  lacunarity = 2.5;
-  parallel = true;
-  center = [0, 0];
-  alpha = 1;
-  apply(renderer, source) {
-    const radians = this.angle * (Math.PI / 180);
-    const light = this.parallel ? [Math.cos(radians), Math.sin(radians)] : this.center;
-    source.redraw(renderer, () => {
-      QuadUvGeometry.draw(renderer, exports.GodrayEffect.material, {
-        sampler: 0,
-        inputSize: [source.width, source.height, 0, 0],
-        gain: this.gain,
-        lacunarity: this.lacunarity,
-        parallel: this.parallel,
-        alpha: this.alpha,
-        light,
-        aspect: source.height / source.width
-      });
-    });
+exports.Transition = class Transition extends exports.Effect {
+  constructor(properties, children = []) {
+    super();
+    this.setProperties(properties).append(children);
   }
 };
-__publicField$9(exports.GodrayEffect, "material", new Material({
-  vert: `precision mediump float;
-attribute vec2 position;
-attribute vec2 uv;
-varying vec2 vUv;
-void main() {
-  gl_Position = vec4(position, 0.0, 1.0);
-  vUv = uv;
-}`,
-  frag: `varying vec2 vUv;
-uniform sampler2D sampler;
-uniform vec4 inputSize;
-uniform vec2 light;
-uniform bool parallel;
-uniform float aspect;
-uniform float gain;
-uniform float lacunarity;
-uniform float uTime;
-uniform float alpha;
-
-vec3 mod289(vec3 x) {
-  return x - floor(x * (1.0 / 289.0)) * 289.0;
-}
-
-vec4 mod289(vec4 x) {
-  return x - floor(x * (1.0 / 289.0)) * 289.0;
-}
-
-vec4 permute(vec4 x) {
-  return mod289(((x * 34.0) + 1.0) * x);
-}
-
-vec4 taylorInvSqrt(vec4 r) {
-  return 1.79284291400159 - 0.85373472095314 * r;
-}
-
-vec3 fade(vec3 t) {
-  return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);
-}
-
-float pnoise(vec3 P, vec3 rep) {
-  vec3 Pi0 = mod(floor(P), rep); // Integer part, modulo period
-  vec3 Pi1 = mod(Pi0 + vec3(1.0), rep); // Integer part + 1, mod period
-  Pi0 = mod289(Pi0);
-  Pi1 = mod289(Pi1);
-  vec3 Pf0 = fract(P); // Fractional part for interpolation
-  vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
-  vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
-  vec4 iy = vec4(Pi0.yy, Pi1.yy);
-  vec4 iz0 = Pi0.zzzz;
-  vec4 iz1 = Pi1.zzzz;
-  vec4 ixy = permute(permute(ix) + iy);
-  vec4 ixy0 = permute(ixy + iz0);
-  vec4 ixy1 = permute(ixy + iz1);
-  vec4 gx0 = ixy0 * (1.0 / 7.0);
-  vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
-  gx0 = fract(gx0);
-  vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
-  vec4 sz0 = step(gz0, vec4(0.0));
-  gx0 -= sz0 * (step(0.0, gx0) - 0.5);
-  gy0 -= sz0 * (step(0.0, gy0) - 0.5);
-  vec4 gx1 = ixy1 * (1.0 / 7.0);
-  vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
-  gx1 = fract(gx1);
-  vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
-  vec4 sz1 = step(gz1, vec4(0.0));
-  gx1 -= sz1 * (step(0.0, gx1) - 0.5);
-  gy1 -= sz1 * (step(0.0, gy1) - 0.5);
-  vec3 g000 = vec3(gx0.x, gy0.x, gz0.x);
-  vec3 g100 = vec3(gx0.y, gy0.y, gz0.y);
-  vec3 g010 = vec3(gx0.z, gy0.z, gz0.z);
-  vec3 g110 = vec3(gx0.w, gy0.w, gz0.w);
-  vec3 g001 = vec3(gx1.x, gy1.x, gz1.x);
-  vec3 g101 = vec3(gx1.y, gy1.y, gz1.y);
-  vec3 g011 = vec3(gx1.z, gy1.z, gz1.z);
-  vec3 g111 = vec3(gx1.w, gy1.w, gz1.w);
-  vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
-  g000 *= norm0.x;
-  g010 *= norm0.y;
-  g100 *= norm0.z;
-  g110 *= norm0.w;
-  vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
-  g001 *= norm1.x;
-  g011 *= norm1.y;
-  g101 *= norm1.z;
-  g111 *= norm1.w;
-  float n000 = dot(g000, Pf0);
-  float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
-  float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
-  float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
-  float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
-  float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
-  float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
-  float n111 = dot(g111, Pf1);
-  vec3 fade_xyz = fade(Pf0);
-  vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
-  vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
-  float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
-  return 2.2 * n_xyz;
-}
-float turb(vec3 P, vec3 rep, float lacunarity, float gain) {
-  float sum = 0.0;
-  float sc = 1.0;
-  float totalgain = 1.0;
-  for (float i = 0.0; i < 6.0; i++)
-  {
-    sum += totalgain * pnoise(P * sc, rep);
-    sc *= lacunarity;
-    totalgain *= gain;
-  }
-  return abs(sum);
-}
-
-void main(void) {
-  vec4 color = texture2D(sampler, vUv);
-  vec2 coord = vUv;
-  float d;
-  if (parallel) {
-    d = (light.x * coord.x) + (light.y * coord.y * aspect);
-  } else {
-    float dx = coord.x - light.x / inputSize.x;
-    float dy = (coord.y - light.y / inputSize.y) * aspect;
-    float dis = sqrt(dx * dx + dy * dy) + 0.00001;
-    d = dy / dis;
-  }
-  vec3 dir = vec3(d, d, 0.0);
-  float noise = turb(dir + vec3(uTime, 0.0, 62.1 + uTime) * 0.05, vec3(480.0, 320.0, 480.0), lacunarity, gain);
-  noise = mix(noise, 0.0, 0.3);
-  vec4 mist = vec4(noise, noise, noise, 1.0) * (1.0 - coord.y);
-  mist.a = 1.0;
-  mist *= alpha;
-  gl_FragColor = vec4(color.rgb + mist.rgb, color.a);
-}`
-}));
-__decorateClass$w([
-  property()
-], exports.GodrayEffect.prototype, "angle", 2);
-__decorateClass$w([
-  property()
-], exports.GodrayEffect.prototype, "gain", 2);
-__decorateClass$w([
-  property()
-], exports.GodrayEffect.prototype, "lacunarity", 2);
-__decorateClass$w([
-  property()
-], exports.GodrayEffect.prototype, "parallel", 2);
-__decorateClass$w([
-  property()
-], exports.GodrayEffect.prototype, "center", 2);
-__decorateClass$w([
-  property()
-], exports.GodrayEffect.prototype, "alpha", 2);
-exports.GodrayEffect = __decorateClass$w([
-  customNode("GodrayEffect")
-], exports.GodrayEffect);
+exports.Transition = __decorateClass$x([
+  customNode("Transition", {
+    effectMode: "transition",
+    processMode: "pausable",
+    duration: 2e3
+  })
+], exports.Transition);
 
-var __defProp$n = Object.defineProperty;
-var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$v = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(target, key) : target;
+var __defProp$p = Object.defineProperty;
+var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
+var __decorateClass$w = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$v(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$n(target, key, result);
+  if (kind && result) __defProp$p(target, key, result);
   return result;
 };
-var __publicField$8 = (obj, key, value) => __defNormalProp$8(obj, key + "" , value);
-exports.MaskEffect = class MaskEffect extends exports.Effect {
-  texture;
+const frag$1 = `varying vec2 vUv;
+uniform sampler2D sampler;
+uniform vec2 uOffset;
+
+void main(void) {
+    vec4 color = vec4(0.0);
+    color += texture2D(sampler, vec2(vUv.x - uOffset.x, vUv.y + uOffset.y));
+    color += texture2D(sampler, vec2(vUv.x + uOffset.x, vUv.y + uOffset.y));
+    color += texture2D(sampler, vec2(vUv.x + uOffset.x, vUv.y - uOffset.y));
+    color += texture2D(sampler, vec2(vUv.x - uOffset.x, vUv.y - uOffset.y));
+    color *= 0.25;
+    gl_FragColor = color;
+}`;
+const clampFrag = `precision highp float;
+varying vec2 vUv;
+uniform sampler2D sampler;
+uniform vec2 uOffset;
+uniform vec4 uInputClamp;
+void main(void) {
+    vec4 color = vec4(0.0);
+    color += texture2D(sampler, clamp(vec2(vUv.x - uOffset.x, vUv.y + uOffset.y), uInputClamp.xy, uInputClamp.zw));
+    color += texture2D(sampler, clamp(vec2(vUv.x + uOffset.x, vUv.y + uOffset.y), uInputClamp.xy, uInputClamp.zw));
+    color += texture2D(sampler, clamp(vec2(vUv.x + uOffset.x, vUv.y - uOffset.y), uInputClamp.xy, uInputClamp.zw));
+    color += texture2D(sampler, clamp(vec2(vUv.x - uOffset.x, vUv.y - uOffset.y), uInputClamp.xy, uInputClamp.zw));
+    color *= 0.25;
+    gl_FragColor = color;
+}`;
+exports.KawaseBlurEffect = class KawaseBlurEffect extends exports.Effect {
+  material;
+  _kernels = [0];
   constructor(properties, children = []) {
     super();
+    this.material = new Material({
+      vert: `precision mediump float;
+attribute vec2 position;
+attribute vec2 uv;
+varying vec2 vUv;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+  vUv = uv;
+}`,
+      frag: properties?.clamp ? clampFrag : frag$1
+    });
     this.setProperties(properties).append(children);
-  }
-  async load() {
-    this.texture = void 0;
-    if (this.src) {
-      this.texture = await assets.texture.load(this.src);
-    }
+    this._generateKernels();
   }
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
     switch (key) {
-      case "src":
-        this.load();
-        break;
-      case "texture":
-        oldValue?.free?.();
+      case "quality":
+      case "strength":
+        this._generateKernels();
         break;
     }
   }
-  apply(renderer, source, context) {
-    if (this.texture && context.targetArea) {
+  /** Auto generate kernels by blur & quality */
+  _generateKernels() {
+    const blur = Math.max(1, Math.round(this.strength));
+    const quality = Math.max(1, Math.round(this.quality));
+    const kernels = [blur];
+    if (blur > 0) {
+      let k = blur;
+      const step = blur / quality;
+      for (let i = 1; i < quality; i++) {
+        k -= step;
+        kernels.push(k);
+      }
+    }
+    this._kernels = kernels;
+  }
+  apply(renderer, source) {
+    const uvX = this.pixelSize[0] / source.width;
+    const uvY = this.pixelSize[1] / source.height;
+    let offset;
+    if (this.quality === 1 || this.strength === 0) {
+      offset = this._kernels[0] + 0.5;
       source.redraw(renderer, () => {
-        this.texture.activate(renderer, 1);
-        QuadUvGeometry.draw(renderer, exports.MaskEffect.material, {
+        QuadUvGeometry.draw(renderer, this.material, {
           sampler: 0,
-          mask: 1,
-          area: context.targetArea,
-          rotation: context.target?.globalRotation ?? 0
+          uOffset: [
+            offset * uvX,
+            offset * uvY
+          ],
+          uInputClamp: [0, 0, 1, 1]
         });
-        renderer.texture.unbind(1);
+      });
+    } else {
+      const last = this.quality - 1;
+      for (let i = 0; i < last; i++) {
+        offset = this._kernels[i] + 0.5;
+        source.redraw(renderer, () => {
+          QuadUvGeometry.draw(renderer, this.material, {
+            sampler: 0,
+            uOffset: [
+              offset * uvX,
+              offset * uvY
+            ],
+            uInputClamp: [0, 0, 1, 1]
+          });
+        });
+      }
+      offset = this._kernels[last] + 0.5;
+      QuadUvGeometry.draw(renderer, this.material, {
+        sampler: 0,
+        uOffset: [
+          offset * uvX,
+          offset * uvY
+        ],
+        uInputClamp: [0, 0, 1, 1]
       });
     }
   }
 };
-__publicField$8(exports.MaskEffect, "material", new Material({
-  vert: `precision mediump float;
-attribute vec2 position;
-attribute vec2 uv;
-varying vec2 vUv;
-void main() {
-  gl_Position = vec4(position, 0.0, 1.0);
-  vUv = uv;
-}`,
-  frag: `varying vec2 vUv;
-uniform sampler2D sampler;
-uniform sampler2D mask;
-uniform float area[4];
-uniform float rotation;
-
-vec2 rotateUV(vec2 uv, float angle) {
-    uv -= 0.5;
-    float cosAngle = cos(angle);
-    float sinAngle = sin(angle);
-    mat2 rotationMatrix = mat2(
-        cosAngle, -sinAngle,
-        sinAngle,  cosAngle
-    );
-    uv = rotationMatrix * uv;
-    uv += 0.5;
-    return uv;
-}
-
-void main(void) {
-  if (
-    vUv.x > area[0]
-    && vUv.x < (area[0] + area[2])
-    && (1.0 - vUv.y) > area[1]
-    && (1.0 - vUv.y) < (area[1] + area[3])
-  ) {
-    vec4 color = texture2D(sampler, vUv);
-    vec2 uv = vec2(
-      (vUv.x - area[0]) / area[2],
-      ((1.0 - vUv.y) - area[1]) / area[3]
-    );
-    vec4 maskColor = texture2D(mask, rotateUV(uv, rotation));
-    gl_FragColor = mix(vec4(0.), color, maskColor.a);
-  } else {
-    gl_FragColor = vec4(0.);
-  }
-}`
-}));
-__decorateClass$v([
-  protectedProperty()
-], exports.MaskEffect.prototype, "texture", 2);
-__decorateClass$v([
-  property({ default: "" })
-], exports.MaskEffect.prototype, "src", 2);
-exports.MaskEffect = __decorateClass$v([
-  customNode("MaskEffect")
-], exports.MaskEffect);
+__decorateClass$w([
+  property({ default: 4 })
+], exports.KawaseBlurEffect.prototype, "strength", 2);
+__decorateClass$w([
+  property({ default: 3 })
+], exports.KawaseBlurEffect.prototype, "quality", 2);
+__decorateClass$w([
+  property({ default: [1, 1] })
+], exports.KawaseBlurEffect.prototype, "pixelSize", 2);
+exports.KawaseBlurEffect = __decorateClass$w([
+  customNode("KawaseBlurEffect")
+], exports.KawaseBlurEffect);
 
-var __defProp$m = Object.defineProperty;
-var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decorateClass$u = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
+var __defProp$o = Object.defineProperty;
+var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$v = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$m(target, key, result);
+  if (kind && result) __defProp$o(target, key, result);
   return result;
 };
-var __publicField$7 = (obj, key, value) => __defNormalProp$7(obj, key + "" , value);
-exports.PixelateEffect = class PixelateEffect extends exports.Effect {
-  size;
-  constructor(size = 10) {
+var __publicField$c = (obj, key, value) => __defNormalProp$c(obj, key + "" , value);
+exports.DropShadowEffect = class DropShadowEffect extends exports.Effect {
+  kawaseBlurEffect = new exports.KawaseBlurEffect();
+  viewport3 = new exports.Viewport();
+  _color = new Color();
+  constructor(properties, children = []) {
     super();
-    this.size = size;
+    this.setProperties(properties).append(children);
   }
   apply(renderer, source) {
-    source.redraw(renderer, () => {
-      QuadUvGeometry.draw(renderer, exports.PixelateEffect.material, {
+    this.viewport3.activateWithCopy(renderer, source);
+    this.viewport3.redraw(renderer, () => {
+      this._color.value = this.color;
+      QuadUvGeometry.draw(renderer, exports.DropShadowEffect.material, {
         sampler: 0,
-        size: [this.size, this.size],
-        filterArea: [source.width, source.height, 0, 0]
+        uAlpha: this.alpha,
+        uColor: this._color.toArray().slice(0, 3),
+        uOffset: [-this.offset[0], this.offset[1]],
+        uInputSize: [source.width, source.height, 1 / source.width, 1 / source.height]
+      });
+    });
+    this.kawaseBlurEffect.strength = this.blur;
+    this.kawaseBlurEffect.quality = this.quality;
+    this.kawaseBlurEffect.pixelSize = this.pixelSize;
+    this.kawaseBlurEffect.apply(renderer, this.viewport3);
+    source.redraw(renderer, () => {
+      this.viewport3.texture.activate(renderer, 1);
+      QuadUvGeometry.draw(renderer, UvMaterial.instance, {
+        sampler: 1
       });
+      if (!this.shadowOnly) {
+        QuadUvGeometry.draw(renderer, UvMaterial.instance, {
+          sampler: 0
+        });
+      }
+      renderer.texture.unbind(1);
     });
   }
 };
-__publicField$7(exports.PixelateEffect, "material", new Material({
+__publicField$c(exports.DropShadowEffect, "material", new Material({
   vert: `precision mediump float;
 attribute vec2 position;
 attribute vec2 uv;
@@ -7804,593 +7938,751 @@ void main() {
   gl_Position = vec4(position, 0.0, 1.0);
   vUv = uv;
 }`,
-  frag: `varying vec2 vUv;
-uniform vec2 size;
+  frag: `precision highp float;
+varying vec2 vUv;
 uniform sampler2D sampler;
-uniform vec4 filterArea;
-
-vec2 mapCoord(vec2 coord) {
-  coord *= filterArea.xy;
-  coord += filterArea.zw;
-  return coord;
-}
-
-vec2 unmapCoord(vec2 coord) {
-  coord -= filterArea.zw;
-  coord /= filterArea.xy;
-  return coord;
-}
-
-vec2 pixelate(vec2 coord, vec2 size) {
-  return floor(coord / size) * size;
-}
+uniform float uAlpha;
+uniform vec3 uColor;
+uniform vec2 uOffset;
+uniform vec4 uInputSize;
 
 void main(void) {
-  vec2 coord = mapCoord(vUv);
-  coord = pixelate(coord, size);
-  coord = unmapCoord(coord);
-  gl_FragColor = texture2D(sampler, coord);
+  vec4 sample = texture2D(sampler, vUv + uOffset * uInputSize.zw);
+  sample.rgb = uColor.rgb * sample.a;
+  sample *= uAlpha;
+  gl_FragColor = sample;
 }`
 }));
-__decorateClass$u([
-  property()
-], exports.PixelateEffect.prototype, "size", 2);
-exports.PixelateEffect = __decorateClass$u([
-  customNode("PixelateEffect")
-], exports.PixelateEffect);
+__decorateClass$v([
+  property({ default: [4, 4] })
+], exports.DropShadowEffect.prototype, "offset", 2);
+__decorateClass$v([
+  property({ default: 0 })
+], exports.DropShadowEffect.prototype, "color", 2);
+__decorateClass$v([
+  property({ default: 1 })
+], exports.DropShadowEffect.prototype, "alpha", 2);
+__decorateClass$v([
+  property({ default: false })
+], exports.DropShadowEffect.prototype, "shadowOnly", 2);
+__decorateClass$v([
+  property({ default: 2 })
+], exports.DropShadowEffect.prototype, "blur", 2);
+__decorateClass$v([
+  property({ default: 4 })
+], exports.DropShadowEffect.prototype, "quality", 2);
+__decorateClass$v([
+  property({ default: [1, 1] })
+], exports.DropShadowEffect.prototype, "pixelSize", 2);
+exports.DropShadowEffect = __decorateClass$v([
+  customNode("DropShadowEffect")
+], exports.DropShadowEffect);
 
-class CanvasContext extends modernPath2d.Path2D {
-  textureTransform;
-  fillStyle;
-  strokeStyle;
-  lineCap;
-  lineJoin;
-  lineWidth;
-  miterLimit;
-  _defaultStyle = Texture2D.EMPTY;
-  _draws = [];
-  stroke() {
-    let texture = this._defaultStyle;
-    if (this.strokeStyle) {
-      if (this.strokeStyle instanceof Texture2D) {
-        texture = this.strokeStyle;
-      } else {
-        texture = new ColorTexture(this.strokeStyle);
-      }
-    }
-    if (this.curves.length) {
-      this._draws.push({
-        type: "stroke",
-        path: new modernPath2d.Path2D(this),
-        texture,
-        textureTransform: this.textureTransform,
-        style: {
-          alignment: 0.5,
-          cap: this.lineCap ?? "butt",
-          join: this.lineJoin ?? "miter",
-          width: this.lineWidth ?? 1,
-          miterLimit: this.miterLimit ?? 10
-        }
-      });
-      super.reset();
-    }
-  }
-  fillRect(x, y, width, height) {
-    this.rect(x, y, width, height).fill();
-  }
-  strokeRect(x, y, width, height) {
-    this.rect(x, y, width, height).stroke();
-  }
-  fill() {
-    let texture = this._defaultStyle;
-    if (this.fillStyle) {
-      if (this.fillStyle instanceof Texture2D) {
-        texture = this.fillStyle;
-      } else {
-        texture = new ColorTexture(this.fillStyle);
-      }
-    }
-    this._draws.push({
-      type: "fill",
-      path: new modernPath2d.Path2D(this),
-      texture,
-      textureTransform: this.textureTransform
-    });
-    super.reset();
-  }
-  copy(source) {
-    super.copy(source);
-    this.strokeStyle = source.strokeStyle;
-    this.fillStyle = source.fillStyle;
-    this.textureTransform = source.textureTransform;
-    this.lineCap = source.lineCap;
-    this.lineJoin = source.lineJoin;
-    this.lineWidth = source.lineWidth;
-    this.miterLimit = source.miterLimit;
-    this._draws = source._draws.slice();
-    return this;
-  }
-  reset() {
-    super.reset();
-    this.strokeStyle = void 0;
-    this.fillStyle = void 0;
-    this.textureTransform = void 0;
-    this.lineCap = void 0;
-    this.lineJoin = void 0;
-    this.lineWidth = void 0;
-    this.miterLimit = void 0;
-    this._draws.length = 0;
-    return this;
-  }
-  buildUvs(start, vertices, uvs, texture, textureTransform) {
-    if (texture) {
-      const w = texture.width;
-      const h = texture.height;
-      for (let len = vertices.length, i = start; i < len; i += 2) {
-        const x = vertices[i];
-        const y = vertices[i + 1];
-        let uvX;
-        let uvY;
-        if (textureTransform) {
-          [uvX, uvY] = textureTransform?.applyToPoint(x, y);
-        } else {
-          [uvX, uvY] = [x / w, y / h];
-        }
-        uvs.push(uvX, uvY);
-      }
-    } else {
-      for (let len = vertices.length, i = start; i < len; i += 2) {
-        uvs.push(0, 0);
-      }
-    }
+var __defProp$n = Object.defineProperty;
+var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decorateClass$u = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$n(target, key, result);
+  return result;
+};
+var __publicField$b = (obj, key, value) => __defNormalProp$b(obj, key + "" , value);
+exports.EmbossEffect = class EmbossEffect extends exports.Effect {
+  constructor(properties, children = []) {
+    super();
+    this.setProperties(properties).append(children);
   }
-  toBatchables() {
-    const batchables = [];
-    let vertices = [];
-    let indices = [];
-    let uvs = [];
-    let texture;
-    const push = (type) => {
-      batchables.push({
-        type,
-        vertices,
-        indices,
-        uvs,
-        texture
+  apply(renderer, source) {
+    source.redraw(renderer, () => {
+      QuadUvGeometry.draw(renderer, exports.EmbossEffect.material, {
+        sampler: 0,
+        strength: this.strength,
+        inputSize: [source.width, source.height, 1 / source.width, 1 / source.height]
       });
-      vertices = [];
-      indices = [];
-      uvs = [];
-      texture = void 0;
-    };
-    for (let len = this._draws.length, i = 0; i < len; i++) {
-      const draw = this._draws[i];
-      const prev = this._draws[i - 1];
-      if (vertices.length && prev && prev?.type !== draw.type) {
-        push(prev.type);
-      }
-      const oldTexture = texture;
-      if (!oldTexture) {
-        texture = draw.texture;
-      }
-      if (vertices.length && oldTexture !== draw.texture && !oldTexture?.is(draw.texture)) {
-        push(draw.type);
-      }
-      const start = vertices.length;
-      if (draw.type === "fill") {
-        draw.path.fillTriangulate({
-          vertices,
-          indices
-        });
-        this.buildUvs(start, vertices, uvs, draw.texture, draw.textureTransform);
-      } else {
-        draw.path.strokeTriangulate({
-          vertices,
-          indices,
-          lineStyle: draw.style,
-          flipAlignment: false,
-          closed: true
-        });
-        this.buildUvs(start, vertices, uvs, draw.texture, draw.textureTransform);
-      }
-    }
-    const last = this._draws[this._draws.length - 1];
-    if (last && vertices.length) {
-      push(last.type);
-    }
-    return batchables;
+    });
   }
-}
+};
+__publicField$b(exports.EmbossEffect, "material", new Material({
+  vert: `precision mediump float;
+attribute vec2 position;
+attribute vec2 uv;
+varying vec2 vUv;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+  vUv = uv;
+}`,
+  frag: `precision mediump float;
+uniform sampler2D sampler;
+uniform vec4 inputSize;
+uniform float strength;
+varying vec2 vUv;
 
-var __defProp$l = Object.defineProperty;
-var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
+void main(void) {
+    vec2 onePixel = inputSize.zw;
+    vec4 color;
+    color.rgb = vec3(0.5);
+    color -= texture2D(sampler, vUv - onePixel) * strength;
+    color += texture2D(sampler, vUv + onePixel) * strength;
+    color.rgb = vec3((color.r + color.g + color.b) / 3.0);
+    float alpha = texture2D(sampler, vUv).a;
+    gl_FragColor = vec4(color.rgb * alpha, alpha);
+}`
+}));
+__decorateClass$u([
+  property({ default: 5 })
+], exports.EmbossEffect.prototype, "strength", 2);
+exports.EmbossEffect = __decorateClass$u([
+  customNode("EmbossEffect")
+], exports.EmbossEffect);
+
+var __defProp$m = Object.defineProperty;
+var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __decorateClass$t = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$l(target, key, result);
+  if (kind && result) __defProp$m(target, key, result);
   return result;
 };
-exports.CanvasItem = class CanvasItem extends exports.TimelineNode {
-  _parentGlobalVisible;
-  _globalVisible;
-  get globalVisible() {
-    return this._globalVisible ?? true;
-  }
-  _parentGlobalOpacity;
-  _globalOpacity;
-  get globalOpacity() {
-    return this._globalOpacity ?? 1;
-  }
-  _modulate = new Color(4294967295);
-  _backgroundImage;
-  // Batch render
-  context = new CanvasContext();
-  _resetContext = true;
-  _redrawing = false;
-  _relayouting = false;
-  _repainting = false;
-  _originalBatchables = [];
-  _layoutedBatchables = [];
-  _batchables = [];
-  constructor(properties, nodes = []) {
+var __publicField$a = (obj, key, value) => __defNormalProp$a(obj, key + "" , value);
+exports.GlitchEffect = class GlitchEffect extends exports.Effect {
+  _canvas;
+  _texture;
+  _sizes;
+  _offsets;
+  _needsRedraw = false;
+  constructor(properties, children = []) {
     super();
-    this.setProperties(properties).append(nodes);
+    this.setProperties(properties).append(children);
+    this._canvas = document.createElement("canvas");
+    this._canvas.width = 4;
+    this._canvas.height = this.sampleSize;
+    this._texture = new Texture2D(this._canvas);
+    this._sizes = new Float32Array(this.slices);
+    this._offsets = new Float32Array(this.slices);
   }
-  _updateProperty(key, value, oldValue, declaration) {
-    super._updateProperty(key, value, oldValue, declaration);
-    switch (key) {
-      case "modulate":
-        this._modulate.value = value;
-        this.requestRepaint();
-        break;
-      case "blendMode":
-        this.requestRepaint();
-        break;
-      case "opacity":
-        this._updateGlobalOpacity();
-        break;
-      case "visible":
-      case "insideTimeRange":
-        this._updateGlobalVisible();
-        break;
+  redraw() {
+    const size = this.sampleSize;
+    const texture = this._texture;
+    const ctx = this._canvas.getContext("2d");
+    ctx.clearRect(0, 0, 8, size);
+    let offset;
+    let y = 0;
+    for (let i = 0; i < this.slices; i++) {
+      offset = Math.floor(this._offsets[i] * 256);
+      const height = this._sizes[i] * size;
+      const red = offset > 0 ? offset : 0;
+      const green = offset < 0 ? -offset : 0;
+      ctx.fillStyle = `rgba(${red}, ${green}, 0, 1)`;
+      ctx.fillRect(0, y >> 0, size, height + 1 >> 0);
+      y += height;
     }
+    texture.requestUpload();
   }
-  show() {
-    this.visible = true;
-  }
-  hide() {
-    this.visible = false;
-  }
-  isVisibleInTree() {
-    return this.globalOpacity > 0 && this.globalVisible;
-  }
-  canRender() {
-    return super.canRender() && this.isVisibleInTree();
-  }
-  requestRedraw() {
-    this._redrawing = true;
-    this.requestUpdate();
-  }
-  requestRelayout() {
-    this._relayouting = true;
-    this.requestUpdate();
-  }
-  requestRepaint() {
-    this._repainting = true;
-    this.requestUpdate();
-  }
-  _updateGlobalVisible() {
-    this._parentGlobalVisible = this.getParent()?.globalVisible;
-    this._globalVisible = (this._parentGlobalVisible ?? true) && this.visible && this.insideTimeRange;
-  }
-  _updateGlobalOpacity() {
-    this._parentGlobalOpacity = this.getParent()?.opacity;
-    const globalOpacity = clamp(0, this.opacity, 1) * (this._parentGlobalOpacity ?? 1);
-    if (this._globalOpacity !== globalOpacity) {
-      this._globalOpacity = globalOpacity;
-      this.requestRepaint();
+  apply(renderer, source) {
+    if (!this._needsRedraw) {
+      this._needsRedraw = true;
+      this.redraw();
     }
-  }
-  _draw() {
-    this.emit("draw");
-  }
-  _redraw() {
-    this._tree?.log(this.name, "redrawing");
-    this._draw();
-    return this.context.toBatchables();
-  }
-  _relayout(batchables) {
-    this._tree?.log(this.name, "relayouting");
-    return batchables;
-  }
-  _repaint(batchables) {
-    this._tree?.log(this.name, "repainting");
-    return batchables.map((batchable) => {
-      return {
-        ...batchable,
-        modulate: this._modulate.toArgb(this.globalOpacity, true),
-        blendMode: this.blendMode
-      };
+    const width = source.width;
+    const height = source.height;
+    const radians = this.direction * (Math.PI / 180);
+    const sinDir = Math.sin(radians);
+    const cosDir = Math.cos(radians);
+    source.redraw(renderer, () => {
+      this._texture.activate(renderer, 1);
+      QuadUvGeometry.draw(renderer, exports.GlitchEffect.material, {
+        sampler: 0,
+        filterClamp: [0, 0, 1, 1],
+        filterArea: [width, height, 0, 0],
+        dimensions: [width, height],
+        aspect: height / width,
+        displacementMap: 1,
+        offset: this.offset,
+        sinDir,
+        cosDir,
+        fillMode: this.fillMode,
+        seed: this.seed,
+        red: this.red,
+        green: this.green,
+        blue: this.blue
+      });
     });
   }
-  _process(delta) {
-    super._process(delta);
-    const parent = this.getParent();
-    if (this._parentGlobalVisible !== parent?.globalVisible) {
-      this.requestUpdate();
-    }
-    if (this._parentGlobalOpacity !== parent?.globalOpacity) {
-      this.requestUpdate();
-    }
-  }
-  _update() {
-    const parent = this.getParent();
-    if (this._parentGlobalVisible !== parent?.globalVisible) {
-      this._updateGlobalVisible();
-    }
-    if (this._parentGlobalOpacity !== parent?.globalOpacity) {
-      this._updateGlobalOpacity();
-    }
-    const redrawing = this._redrawing;
-    let relayouting = this._relayouting;
-    let repainting = this._repainting;
-    let batchables;
-    if (redrawing) {
-      this._originalBatchables = this._redraw();
-      relayouting = true;
-    }
-    if (relayouting) {
-      this._layoutedBatchables = this._relayout(this._originalBatchables);
-      repainting = true;
-    }
-    if (repainting) {
-      batchables = this._repaint(this._layoutedBatchables);
-    }
-    if (redrawing) {
-      if (this._resetContext) {
-        this.context.reset();
+};
+__publicField$a(exports.GlitchEffect, "material", new Material({
+  vert: `precision mediump float;
+attribute vec2 position;
+attribute vec2 uv;
+varying vec2 vUv;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+  vUv = uv;
+}`,
+  frag: `precision mediump float;
+
+varying vec2 vUv;
+uniform sampler2D sampler;
+
+uniform vec4 filterArea;
+uniform vec4 filterClamp;
+uniform vec2 dimensions;
+uniform float aspect;
+
+uniform sampler2D displacementMap;
+uniform float offset;
+uniform float sinDir;
+uniform float cosDir;
+uniform int fillMode;
+
+uniform float seed;
+uniform vec2 red;
+uniform vec2 green;
+uniform vec2 blue;
+
+const int TRANSPARENT = 0;
+const int ORIGINAL = 1;
+const int LOOP = 2;
+const int CLAMP = 3;
+const int MIRROR = 4;
+
+void main(void) {
+  vec2 coord = (vUv * filterArea.xy) / dimensions;
+
+  if (coord.x > 1.0 || coord.y > 1.0) {
+      return;
+  }
+
+  float cx = coord.x - 0.5;
+  float cy = (coord.y - 0.5) * aspect;
+  float ny = (-sinDir * cx + cosDir * cy) / aspect + 0.5;
+
+  // displacementMap: repeat
+  // ny = ny > 1.0 ? ny - 1.0 : (ny < 0.0 ? 1.0 + ny : ny);
+
+  // displacementMap: mirror
+  ny = ny > 1.0 ? 2.0 - ny : (ny < 0.0 ? -ny : ny);
+
+  vec4 dc = texture2D(displacementMap, vec2(0.5, ny));
+
+  float displacement = (dc.r - dc.g) * (offset / filterArea.x);
+
+  coord = vUv + vec2(cosDir * displacement, sinDir * displacement * aspect);
+
+  if (fillMode == CLAMP) {
+    coord = clamp(coord, filterClamp.xy, filterClamp.zw);
+  } else {
+    if (coord.x > filterClamp.z) {
+      if (fillMode == TRANSPARENT) {
+        discard;
+      } else if (fillMode == LOOP) {
+        coord.x -= filterClamp.z;
+      } else if (fillMode == MIRROR) {
+        coord.x = filterClamp.z * 2.0 - coord.x;
+      }
+    } else if (coord.x < filterClamp.x) {
+      if (fillMode == TRANSPARENT) {
+        discard;
+      } else if (fillMode == LOOP) {
+        coord.x += filterClamp.z;
+      } else if (fillMode == MIRROR) {
+        coord.x *= -filterClamp.z;
       }
     }
-    if (batchables) {
-      this._batchables = batchables;
-      this._redrawing = false;
-      this._relayouting = false;
-      this._repainting = false;
+
+    if (coord.y > filterClamp.w) {
+      if (fillMode == TRANSPARENT) {
+        discard;
+      } else if (fillMode == LOOP) {
+        coord.y -= filterClamp.w;
+      } else if (fillMode == MIRROR) {
+        coord.y = filterClamp.w * 2.0 - coord.y;
+      }
+    } else if (coord.y < filterClamp.y) {
+      if (fillMode == TRANSPARENT) {
+        discard;
+      } else if (fillMode == LOOP) {
+        coord.y += filterClamp.w;
+      } else if (fillMode == MIRROR) {
+        coord.y *= -filterClamp.w;
+      }
     }
   }
-  _render(renderer) {
-    this._batchables.forEach((batchable) => {
-      batchable.texture?.upload(renderer);
-      renderer.batch2D.render({
-        ...batchable,
-        texture: batchable.texture?._glTexture(renderer)
-      });
-    });
-    super._render(renderer);
-  }
-};
+
+  gl_FragColor.r = texture2D(sampler, coord + red * (1.0 - seed * 0.4) / filterArea.xy).r;
+  gl_FragColor.g = texture2D(sampler, coord + green * (1.0 - seed * 0.3) / filterArea.xy).g;
+  gl_FragColor.b = texture2D(sampler, coord + blue * (1.0 - seed * 0.2) / filterArea.xy).b;
+  gl_FragColor.a = texture2D(sampler, coord).a;
+}`
+}));
 __decorateClass$t([
-  property()
-], exports.CanvasItem.prototype, "modulate", 2);
+  property({ default: 10 })
+], exports.GlitchEffect.prototype, "slices", 2);
 __decorateClass$t([
-  property()
-], exports.CanvasItem.prototype, "blendMode", 2);
+  property({ default: 512 })
+], exports.GlitchEffect.prototype, "sampleSize", 2);
 __decorateClass$t([
-  protectedProperty({ default: true })
-], exports.CanvasItem.prototype, "visible", 2);
+  property({ default: 100 })
+], exports.GlitchEffect.prototype, "offset", 2);
 __decorateClass$t([
-  protectedProperty({ default: 1 })
-], exports.CanvasItem.prototype, "opacity", 2);
-exports.CanvasItem = __decorateClass$t([
-  customNode("CanvasItem")
-], exports.CanvasItem);
-
-class RenderStack {
-  currentCall;
-  calls = [];
-  createCall(renderable) {
-    return {
-      renderable,
-      parentCall: this.currentCall,
-      fn: renderable.render.bind(renderable),
-      calls: []
-    };
-  }
-  push(renderable) {
-    const call = this.createCall(renderable);
-    (this.currentCall?.calls ?? this.calls).push(call);
-    return call;
-  }
-  render(renderer) {
-    this.calls.forEach(function render(call) {
-      call.fn(renderer, () => {
-        call.calls.forEach(render);
-      });
-    });
-    this.calls = [];
-  }
-}
+  property({ default: 0 })
+], exports.GlitchEffect.prototype, "direction", 2);
+__decorateClass$t([
+  property({ default: 2 })
+], exports.GlitchEffect.prototype, "fillMode", 2);
+__decorateClass$t([
+  property({ default: 0 })
+], exports.GlitchEffect.prototype, "seed", 2);
+__decorateClass$t([
+  property({ default: [2, 2] })
+], exports.GlitchEffect.prototype, "red", 2);
+__decorateClass$t([
+  property({ default: [-10, 4] })
+], exports.GlitchEffect.prototype, "green", 2);
+__decorateClass$t([
+  property({ default: [10, -4] })
+], exports.GlitchEffect.prototype, "blue", 2);
+exports.GlitchEffect = __decorateClass$t([
+  customNode("GlitchEffect")
+], exports.GlitchEffect);
 
-var __defProp$k = Object.defineProperty;
-var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
+var __defProp$l = Object.defineProperty;
+var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __decorateClass$s = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$k(target, key, result);
+  if (kind && result) __defProp$l(target, key, result);
   return result;
 };
-exports.Timeline = class Timeline extends exports.Node {
-  static from(range, loop = false) {
-    const [startTime, endTime] = range ? Array.isArray(range) ? range : [0, range] : [];
-    return new exports.Timeline({
-      startTime,
-      endTime,
-      loop
-    });
-  }
-  constructor(properties) {
+var __publicField$9 = (obj, key, value) => __defNormalProp$9(obj, key + "" , value);
+const perlin = `vec3 mod289(vec3 x)
+{
+    return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+vec4 mod289(vec4 x)
+{
+    return x - floor(x * (1.0 / 289.0)) * 289.0;
+}
+vec4 permute(vec4 x)
+{
+    return mod289(((x * 34.0) + 1.0) * x);
+}
+vec4 taylorInvSqrt(vec4 r)
+{
+    return 1.79284291400159 - 0.85373472095314 * r;
+}
+vec3 fade(vec3 t)
+{
+    return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);
+}
+// Classic Perlin noise, periodic variant
+float pnoise(vec3 P, vec3 rep)
+{
+    vec3 Pi0 = mod(floor(P), rep); // Integer part, modulo period
+    vec3 Pi1 = mod(Pi0 + vec3(1.0), rep); // Integer part + 1, mod period
+    Pi0 = mod289(Pi0);
+    Pi1 = mod289(Pi1);
+    vec3 Pf0 = fract(P); // Fractional part for interpolation
+    vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
+    vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
+    vec4 iy = vec4(Pi0.yy, Pi1.yy);
+    vec4 iz0 = Pi0.zzzz;
+    vec4 iz1 = Pi1.zzzz;
+    vec4 ixy = permute(permute(ix) + iy);
+    vec4 ixy0 = permute(ixy + iz0);
+    vec4 ixy1 = permute(ixy + iz1);
+    vec4 gx0 = ixy0 * (1.0 / 7.0);
+    vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
+    gx0 = fract(gx0);
+    vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
+    vec4 sz0 = step(gz0, vec4(0.0));
+    gx0 -= sz0 * (step(0.0, gx0) - 0.5);
+    gy0 -= sz0 * (step(0.0, gy0) - 0.5);
+    vec4 gx1 = ixy1 * (1.0 / 7.0);
+    vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
+    gx1 = fract(gx1);
+    vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
+    vec4 sz1 = step(gz1, vec4(0.0));
+    gx1 -= sz1 * (step(0.0, gx1) - 0.5);
+    gy1 -= sz1 * (step(0.0, gy1) - 0.5);
+    vec3 g000 = vec3(gx0.x, gy0.x, gz0.x);
+    vec3 g100 = vec3(gx0.y, gy0.y, gz0.y);
+    vec3 g010 = vec3(gx0.z, gy0.z, gz0.z);
+    vec3 g110 = vec3(gx0.w, gy0.w, gz0.w);
+    vec3 g001 = vec3(gx1.x, gy1.x, gz1.x);
+    vec3 g101 = vec3(gx1.y, gy1.y, gz1.y);
+    vec3 g011 = vec3(gx1.z, gy1.z, gz1.z);
+    vec3 g111 = vec3(gx1.w, gy1.w, gz1.w);
+    vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
+    g000 *= norm0.x;
+    g010 *= norm0.y;
+    g100 *= norm0.z;
+    g110 *= norm0.w;
+    vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
+    g001 *= norm1.x;
+    g011 *= norm1.y;
+    g101 *= norm1.z;
+    g111 *= norm1.w;
+    float n000 = dot(g000, Pf0);
+    float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
+    float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
+    float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
+    float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
+    float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
+    float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
+    float n111 = dot(g111, Pf1);
+    vec3 fade_xyz = fade(Pf0);
+    vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
+    vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
+    float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
+    return 2.2 * n_xyz;
+}
+float turb(vec3 P, vec3 rep, float lacunarity, float gain)
+{
+    float sum = 0.0;
+    float sc = 1.0;
+    float totalgain = 1.0;
+    for (float i = 0.0; i < 6.0; i++)
+    {
+        sum += totalgain * pnoise(P * sc, rep);
+        sc *= lacunarity;
+        totalgain *= gain;
+    }
+    return abs(sum);
+}`;
+exports.GodrayEffect = class GodrayEffect extends exports.Effect {
+  constructor(properties, children = []) {
     super();
-    this.setProperties(properties);
-  }
-  _updateProperty(key, value, oldValue) {
-    super._updateProperty(key, value, oldValue);
-    switch (key) {
-      case "startTime":
-        this.startTime = Math.min(value, this.endTime);
-        break;
-      case "endTime":
-        this.endTime = value || Number.MAX_SAFE_INTEGER;
-        break;
-    }
-  }
-  addTime(delta) {
-    const start = this.startTime;
-    const end = this.endTime;
-    let current = this.currentTime;
-    current = current + delta;
-    if (this.loop && current > end) {
-      current = start + current % end;
-    }
-    current = clamp(start, current, end);
-    this.currentTime = current;
-    this.emit("updateCurrentTime", current, delta);
-    return this;
+    this.setProperties(properties).append(children);
   }
-  _process(delta) {
-    super._process(delta);
-    this.addTime(delta);
+  apply(renderer, source) {
+    const radians = this.angle * (Math.PI / 180);
+    const uLight = this.parallel ? [Math.cos(radians), Math.sin(radians)] : this.center;
+    source.redraw(renderer, () => {
+      QuadUvGeometry.draw(renderer, exports.GodrayEffect.material, {
+        sampler: 0,
+        uDimensions: [source.width, source.height],
+        uParallel: this.parallel ? 1 : 0,
+        uLight,
+        uAspect: source.height / source.width,
+        uTime: this.time,
+        uRay: [
+          this.gain,
+          this.lacunarity,
+          this.alpha
+        ],
+        uInputSize: [source.width, source.height, 0, 0]
+      });
+    });
   }
 };
+__publicField$9(exports.GodrayEffect, "material", new Material({
+  vert: `precision mediump float;
+attribute vec2 position;
+attribute vec2 uv;
+varying vec2 vUv;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+  vUv = uv;
+}`,
+  frag: `precision highp float;
+varying vec2 vUv;
+uniform sampler2D sampler;
+uniform vec2 uDimensions;
+uniform float uParallel;
+uniform vec2 uLight;
+uniform float uAspect;
+uniform float uTime;
+uniform vec3 uRay;
+uniform vec4 uInputSize;
+
+${perlin}
+
+void main(void) {
+  bool uParallel = uParallel > 0.5;
+  vec2 coord = vUv * uInputSize.xy / uDimensions;
+
+  float d;
+  if (uParallel) {
+    float _cos = uLight.x;
+    float _sin = uLight.y;
+    d = (_cos * coord.x) + (_sin * coord.y * uAspect);
+  } else {
+    float dx = coord.x - uLight.x / uInputSize.x;
+    float dy = (coord.y - uLight.y / uInputSize.y) * uAspect;
+    float dis = sqrt(dx * dx + dy * dy) + 0.00001;
+    d = dy / dis;
+  }
+
+  float gain = uRay[0];
+  float lacunarity = uRay[1];
+  float alpha = uRay[2];
+
+  vec3 dir = vec3(d, d, 0.0);
+  float noise = turb(dir + vec3(uTime, 0.0, 62.1 + uTime) * 0.05, vec3(480.0, 320.0, 480.0), lacunarity, gain);
+  noise = mix(noise, 0.0, 0.3);
+  vec4 mist = vec4(vec3(noise), 1.0) * (1.0 - coord.y);
+  mist.a = 1.0;
+  mist *= alpha;
+
+  vec4 color = texture2D(sampler, vUv);
+  gl_FragColor = vec4(color.rgb + mist.rgb, color.a);
+}`
+}));
 __decorateClass$s([
   property({ default: 0 })
-], exports.Timeline.prototype, "startTime", 2);
+], exports.GodrayEffect.prototype, "time", 2);
 __decorateClass$s([
-  property({ default: 0 })
-], exports.Timeline.prototype, "currentTime", 2);
+  property({ default: 30 })
+], exports.GodrayEffect.prototype, "angle", 2);
 __decorateClass$s([
-  property({ default: Number.MAX_SAFE_INTEGER })
-], exports.Timeline.prototype, "endTime", 2);
+  property({ default: 0.5 })
+], exports.GodrayEffect.prototype, "gain", 2);
 __decorateClass$s([
-  property({ default: false })
-], exports.Timeline.prototype, "loop", 2);
-exports.Timeline = __decorateClass$s([
-  customNode("Timeline")
-], exports.Timeline);
+  property({ default: 2.5 })
+], exports.GodrayEffect.prototype, "lacunarity", 2);
+__decorateClass$s([
+  property({ default: true })
+], exports.GodrayEffect.prototype, "parallel", 2);
+__decorateClass$s([
+  property({ default: [0, 0] })
+], exports.GodrayEffect.prototype, "center", 2);
+__decorateClass$s([
+  property({ default: 1 })
+], exports.GodrayEffect.prototype, "alpha", 2);
+exports.GodrayEffect = __decorateClass$s([
+  customNode("GodrayEffect")
+], exports.GodrayEffect);
 
-var __defProp$j = Object.defineProperty;
+var __defProp$k = Object.defineProperty;
+var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __decorateClass$r = (decorators, target, key, kind) => {
-  var result = void 0 ;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$j(target, key, result);
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$k(target, key, result);
   return result;
 };
-class SceneTree extends MainLoop {
-  input = new Input();
-  renderStack = new RenderStack();
-  root = new exports.Viewport(true).setTree(this);
-  timeline;
-  _backgroundColor = new Color();
-  _currentViewport;
-  getCurrentViewport() {
-    return this._currentViewport;
-  }
-  setCurrentViewport(viewport) {
-    this._currentViewport = viewport;
-  }
-  constructor(timeline = new exports.Timeline()) {
+var __publicField$8 = (obj, key, value) => __defNormalProp$8(obj, key + "" , value);
+exports.MaskEffect = class MaskEffect extends exports.Effect {
+  texture;
+  constructor(properties, children = []) {
     super();
-    this.timeline = timeline.setTree(this);
+    this.setProperties(properties).append(children);
+  }
+  async load() {
+    this.texture = void 0;
+    if (this.src) {
+      this.texture = await assets.texture.load(this.src);
+    }
   }
   _updateProperty(key, value, oldValue, declaration) {
     super._updateProperty(key, value, oldValue, declaration);
     switch (key) {
-      case "backgroundColor":
-        this._backgroundColor.value = value;
+      case "src":
+        this.load();
+        break;
+      case "texture":
+        oldValue?.free?.();
         break;
     }
   }
-  log(...args) {
-    if (this.debug) {
-      console.log(`[modern-canvas]`, ...args);
-    }
-  }
-  _process(delta = 0) {
-    this.timeline.emit("process", delta);
-    this.emit("processing");
-    this.root.emit("process", delta);
-    this.emit("processed");
-  }
-  _render(renderer) {
-    this.emit("rendering");
-    renderer.program.uniforms.projectionMatrix = this.root.toProjectionArray(true);
-    this.renderStack.render(renderer);
-    this._renderScreen(renderer);
-    this.emit("rendered");
-  }
-  _renderScreen(renderer) {
-    renderer.state.reset();
-    renderer.framebuffer.bind(null);
-    renderer.viewport.bind({
-      x: 0,
-      y: 0,
-      width: this.root.width * renderer.pixelRatio,
-      height: this.root.height * renderer.pixelRatio
-    });
-    if (this.backgroundColor) {
-      renderer.gl.clearColor(...this._backgroundColor.toArray());
-    }
-    renderer.clear();
-    if (this.backgroundColor) {
-      renderer.gl.clearColor(0, 0, 0, 0);
+  apply(renderer, source, context) {
+    if (this.texture && context.targetArea) {
+      source.redraw(renderer, () => {
+        this.texture.activate(renderer, 1);
+        QuadUvGeometry.draw(renderer, exports.MaskEffect.material, {
+          sampler: 0,
+          mask: 1,
+          area: context.targetArea,
+          rotation: context.target?.globalRotation ?? 0
+        });
+        renderer.texture.unbind(1);
+      });
     }
-    const texture = this.root.texture;
-    texture.activate(renderer, 0);
-    QuadUvGeometry.draw(renderer);
-    renderer.texture.unbind(texture);
-  }
-  free() {
-    super.free();
-    this.root.getChildren(true).forEach((node) => this.root.removeChild(node));
-    this.input.removeEventListeners();
   }
+};
+__publicField$8(exports.MaskEffect, "material", new Material({
+  vert: `precision mediump float;
+attribute vec2 position;
+attribute vec2 uv;
+varying vec2 vUv;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+  vUv = uv;
+}`,
+  frag: `varying vec2 vUv;
+uniform sampler2D sampler;
+uniform sampler2D mask;
+uniform float area[4];
+uniform float rotation;
+
+vec2 rotateUV(vec2 uv, float angle) {
+    uv -= 0.5;
+    float cosAngle = cos(angle);
+    float sinAngle = sin(angle);
+    mat2 rotationMatrix = mat2(
+        cosAngle, -sinAngle,
+        sinAngle,  cosAngle
+    );
+    uv = rotationMatrix * uv;
+    uv += 0.5;
+    return uv;
 }
+
+void main(void) {
+  if (
+    vUv.x > area[0]
+    && vUv.x < (area[0] + area[2])
+    && (1.0 - vUv.y) > area[1]
+    && (1.0 - vUv.y) < (area[1] + area[3])
+  ) {
+    vec4 color = texture2D(sampler, vUv);
+    vec2 uv = vec2(
+      (vUv.x - area[0]) / area[2],
+      ((1.0 - vUv.y) - area[1]) / area[3]
+    );
+    vec4 maskColor = texture2D(mask, rotateUV(uv, rotation));
+    gl_FragColor = mix(vec4(0.), color, maskColor.a);
+  } else {
+    gl_FragColor = vec4(0.);
+  }
+}`
+}));
 __decorateClass$r([
-  property({ default: false })
-], SceneTree.prototype, "processPaused");
-__decorateClass$r([
-  property()
-], SceneTree.prototype, "backgroundColor");
+  protectedProperty()
+], exports.MaskEffect.prototype, "texture", 2);
 __decorateClass$r([
-  protectedProperty({ default: false })
-], SceneTree.prototype, "debug");
+  property({ default: "" })
+], exports.MaskEffect.prototype, "src", 2);
+exports.MaskEffect = __decorateClass$r([
+  customNode("MaskEffect")
+], exports.MaskEffect);
 
+var __defProp$j = Object.defineProperty;
 var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __decorateClass$q = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (decorator(result)) || result;
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$j(target, key, result);
   return result;
 };
-exports.Transition = class Transition extends exports.Effect {
+var __publicField$7 = (obj, key, value) => __defNormalProp$7(obj, typeof key !== "symbol" ? key + "" : key, value);
+const frag = `precision highp float;
+varying vec2 vUv;
+uniform sampler2D sampler;
+uniform vec2 uThickness;
+uniform vec3 uColor;
+uniform float uAlpha;
+uniform float uKnockout;
+uniform vec4 uInputClamp;
+
+const float DOUBLE_PI = 2. * 3.14159265358979323846264;
+const float ANGLE_STEP = {ANGLE_STEP};
+
+float outlineMaxAlphaAtPos(vec2 pos) {
+    if (uThickness.x == 0. || uThickness.y == 0.) {
+        return 0.;
+    }
+    vec4 displacedColor;
+    vec2 displacedPos;
+    float maxAlpha = 0.;
+    for (float angle = 0.; angle <= DOUBLE_PI; angle += ANGLE_STEP) {
+        displacedPos.x = vUv.x + uThickness.x * cos(angle);
+        displacedPos.y = vUv.y + uThickness.y * sin(angle);
+        displacedColor = texture2D(sampler, clamp(displacedPos, uInputClamp.xy, uInputClamp.zw));
+        maxAlpha = max(maxAlpha, displacedColor.a);
+    }
+    return maxAlpha;
+}
+
+void main(void) {
+    vec4 sourceColor = texture2D(sampler, vUv);
+    vec4 contentColor = sourceColor * float(uKnockout < 0.5);
+    float outlineAlpha = uAlpha * outlineMaxAlphaAtPos(vUv.xy) * (1.-sourceColor.a);
+    vec4 outlineColor = vec4(vec3(uColor) * outlineAlpha, outlineAlpha);
+    gl_FragColor = contentColor + outlineColor;
+}`;
+exports.OutlineEffect = class OutlineEffect extends exports.Effect {
+  material;
+  static getAngleStep(quality) {
+    return Number.parseFloat(
+      (Math.PI * 2 / Math.max(
+        quality * exports.OutlineEffect.MAX_SAMPLES,
+        exports.OutlineEffect.MIN_SAMPLES
+      )).toFixed(7)
+    );
+  }
+  _color = new Color();
   constructor(properties, children = []) {
     super();
     this.setProperties(properties).append(children);
+    this.material = new Material({
+      vert: `precision mediump float;
+attribute vec2 position;
+attribute vec2 uv;
+varying vec2 vUv;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+  vUv = uv;
+}`,
+      frag: frag.replace(
+        /\{ANGLE_STEP\}/,
+        exports.OutlineEffect.getAngleStep(this.quality).toFixed(7)
+      )
+    });
+  }
+  apply(renderer, source) {
+    source.redraw(renderer, () => {
+      this._color.value = this.color;
+      QuadUvGeometry.draw(renderer, this.material, {
+        sampler: 0,
+        uThickness: [
+          this.thickness / source.width,
+          this.thickness / source.height
+        ],
+        uColor: this._color.toArray().slice(0, 3),
+        uAlpha: this.alpha,
+        uAngleStep: exports.OutlineEffect.getAngleStep(this.quality),
+        uKnockout: this.knockout ? 1 : 0,
+        uInputClamp: [0, 0, 1, 1]
+      });
+    });
   }
 };
-exports.Transition = __decorateClass$q([
-  customNode("Transition", {
-    effectMode: "transition",
-    processMode: "pausable",
-    duration: 2e3
-  })
-], exports.Transition);
+__publicField$7(exports.OutlineEffect, "MIN_SAMPLES", 1);
+__publicField$7(exports.OutlineEffect, "MAX_SAMPLES", 100);
+__decorateClass$q([
+  property({ default: 1 })
+], exports.OutlineEffect.prototype, "thickness", 2);
+__decorateClass$q([
+  property({ default: 0 })
+], exports.OutlineEffect.prototype, "color", 2);
+__decorateClass$q([
+  property({ default: 1 })
+], exports.OutlineEffect.prototype, "alpha", 2);
+__decorateClass$q([
+  property({ default: 0.1 })
+], exports.OutlineEffect.prototype, "quality", 2);
+__decorateClass$q([
+  property({ default: false })
+], exports.OutlineEffect.prototype, "knockout", 2);
+exports.OutlineEffect = __decorateClass$q([
+  customNode("OutlineEffect")
+], exports.OutlineEffect);
 
 var __defProp$i = Object.defineProperty;
 var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
@@ -8399,37 +8691,27 @@ var __decorateClass$p = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (decorator(result)) || result;
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$i(target, key, result);
   return result;
 };
 var __publicField$6 = (obj, key, value) => __defNormalProp$6(obj, key + "" , value);
-exports.ShadowEffect = class ShadowEffect extends exports.Effect {
-  blur = new exports.BlurEffect();
-  viewport3 = new exports.Viewport();
+exports.PixelateEffect = class PixelateEffect extends exports.Effect {
+  constructor(properties, children = []) {
+    super();
+    this.setProperties(properties).append(children);
+  }
   apply(renderer, source) {
-    this.viewport3.activateWithCopy(renderer, source);
-    this.viewport3.redraw(renderer, () => {
-      QuadUvGeometry.draw(renderer, exports.ShadowEffect.material, {
-        sampler: 0,
-        offset: [1e-3, 1e-3],
-        color: [0, 0, 0],
-        alpha: 0.5
-      });
-    });
-    this.blur.apply(renderer, this.viewport3);
     source.redraw(renderer, () => {
-      this.viewport3.texture.activate(renderer, 1);
-      QuadUvGeometry.draw(renderer, UvMaterial.instance, {
-        sampler: 1
-      });
-      QuadUvGeometry.draw(renderer, UvMaterial.instance, {
-        sampler: 0
+      QuadUvGeometry.draw(renderer, exports.PixelateEffect.material, {
+        sampler: 0,
+        uSize: [this.strength, this.strength],
+        uInputSize: [source.width, source.height, 1 / source.width, 1 / source.height]
       });
-      renderer.texture.unbind(1);
     });
   }
 };
-__publicField$6(exports.ShadowEffect, "material", new Material({
+__publicField$6(exports.PixelateEffect, "material", new Material({
   vert: `precision mediump float;
 attribute vec2 position;
 attribute vec2 uv;
@@ -8438,23 +8720,40 @@ void main() {
   gl_Position = vec4(position, 0.0, 1.0);
   vUv = uv;
 }`,
-  frag: `precision highp float;
-varying vec2 vUv;
+  frag: `varying vec2 vUv;
 uniform sampler2D sampler;
-uniform float alpha;
-uniform vec3 color;
-uniform vec2 offset;
+uniform vec2 uSize;
+uniform vec4 uInputSize;
+
+vec2 mapCoord(vec2 coord) {
+  coord *= uInputSize.xy;
+  coord += uInputSize.zw;
+  return coord;
+}
+
+vec2 unmapCoord(vec2 coord) {
+  coord -= uInputSize.zw;
+  coord /= uInputSize.xy;
+  return coord;
+}
+
+vec2 pixelate(vec2 coord, vec2 size) {
+  return floor(coord / size) * size;
+}
 
 void main(void) {
-  vec4 sample = texture2D(sampler, vUv - offset);
-  sample.rgb = color.rgb * sample.a;
-  sample *= alpha;
-  gl_FragColor = sample;
+  vec2 coord = mapCoord(vUv);
+  coord = pixelate(coord, uSize);
+  coord = unmapCoord(coord);
+  gl_FragColor = texture2D(sampler, coord);
 }`
 }));
-exports.ShadowEffect = __decorateClass$p([
-  customNode("ShadowEffect")
-], exports.ShadowEffect);
+__decorateClass$p([
+  property({ default: 10 })
+], exports.PixelateEffect.prototype, "strength", 2);
+exports.PixelateEffect = __decorateClass$p([
+  customNode("PixelateEffect")
+], exports.PixelateEffect);
 
 var __defProp$h = Object.defineProperty;
 var __getOwnPropDesc$n = Object.getOwnPropertyDescriptor;
@@ -8469,19 +8768,19 @@ var __decorateClass$o = (decorators, target, key, kind) => {
 };
 var __publicField$5 = (obj, key, value) => __defNormalProp$5(obj, key + "" , value);
 exports.ZoomBlurEffect = class ZoomBlurEffect extends exports.Effect {
-  center;
-  innerRadius = 20;
-  radius = -1;
-  strength = 0.1;
+  constructor(properties, children = []) {
+    super();
+    this.setProperties(properties).append(children);
+  }
   apply(renderer, source) {
     source.redraw(renderer, () => {
       QuadUvGeometry.draw(renderer, exports.ZoomBlurEffect.material, {
         sampler: 0,
-        center: this.center ?? [source.width / 2, source.height / 2],
-        innerRadius: this.innerRadius,
-        radius: this.radius,
-        strength: this.strength,
-        inputSize: [source.width, source.height, 1 / source.width, 1 / source.height]
+        uCenter: this.center ?? [source.width / 2, source.height / 2],
+        uInnerRadius: this.innerRadius,
+        uRadius: this.radius,
+        uStrength: this.strength,
+        uInputSize: [source.width, source.height, 1 / source.width, 1 / source.height]
       });
     });
   }
@@ -8496,12 +8795,12 @@ void main() {
 }`,
   frag: `varying vec2 vUv;
 uniform sampler2D sampler;
-uniform vec4 inputSize;
+uniform vec4 uInputSize;
 
-uniform vec2 center;
-uniform float strength;
-uniform float innerRadius;
-uniform float radius;
+uniform vec2 uCenter;
+uniform float uStrength;
+uniform float uInnerRadius;
+uniform float uRadius;
 
 const float MAX_KERNEL_SIZE = 32.0;
 
@@ -8512,18 +8811,18 @@ highp float rand(vec2 co, float seed) {
 }
 
 void main() {
-  float minGradient = innerRadius * 0.3;
-  float innerRadius1 = (innerRadius + minGradient * 0.5) / inputSize.x;
+  float minGradient = uInnerRadius * 0.3;
+  float innerRadius1 = (uInnerRadius + minGradient * 0.5) / uInputSize.x;
 
-  float gradient = radius * 0.3;
-  float radius1 = (radius - gradient * 0.5) / inputSize.x;
+  float gradient = uRadius * 0.3;
+  float radius1 = (uRadius - gradient * 0.5) / uInputSize.x;
 
   float countLimit = MAX_KERNEL_SIZE;
 
-  vec2 dir = vec2(center.xy / inputSize.xy - vUv);
-  float dist = length(vec2(dir.x, dir.y * inputSize.y / inputSize.x));
+  vec2 dir = vec2(uCenter.xy / uInputSize.xy - vUv);
+  float dist = length(vec2(dir.x, dir.y * uInputSize.y / uInputSize.x));
 
-  float strength1 = strength;
+  float strength1 = uStrength;
 
   float delta = 0.0;
   float gap;
@@ -8536,7 +8835,7 @@ void main() {
   }
 
   if (delta > 0.0) {
-    float normalCount = gap / inputSize.x;
+    float normalCount = gap / uInputSize.x;
     delta = (normalCount - delta) / normalCount;
     countLimit *= delta;
     strength1 *= delta;
@@ -8574,13 +8873,13 @@ __decorateClass$o([
   property()
 ], exports.ZoomBlurEffect.prototype, "center", 2);
 __decorateClass$o([
-  property()
+  property({ default: 20 })
 ], exports.ZoomBlurEffect.prototype, "innerRadius", 2);
 __decorateClass$o([
-  property()
+  property({ default: -1 })
 ], exports.ZoomBlurEffect.prototype, "radius", 2);
 __decorateClass$o([
-  property()
+  property({ default: 0.1 })
 ], exports.ZoomBlurEffect.prototype, "strength", 2);
 exports.ZoomBlurEffect = __decorateClass$o([
   customNode("ZoomBlurEffect")
@@ -8809,7 +9108,7 @@ exports.BaseElement2D = class BaseElement2D extends exports.Node2D {
     if (this.style.boxShadow !== "none") {
       const node = this.getNode(nodePath);
       if (node) ; else {
-        this.appendChild(new exports.ShadowEffect({ name: nodePath }), "back");
+        this.appendChild(new exports.DropShadowEffect({ name: nodePath }), "back");
       }
     } else {
       const node = this.getNode(nodePath);
@@ -13124,7 +13423,8 @@ class Engine extends SceneTree {
     this.renderer.resize(width, height, updateCss);
     this.root.width = width;
     this.root.height = height;
-    this.renderer.program.uniforms.projectionMatrix = this.root.toProjectionArray(true);
+    this.root.requestUpload();
+    this.render();
     return this;
   }
   nextTick() {
@@ -13346,6 +13646,7 @@ exports.WebSound = WebSound;
 exports.WheelInputEvent = WheelInputEvent;
 exports.assets = assets;
 exports.clamp = clamp;
+exports.clampFrag = clampFrag;
 exports.createHTMLCanvas = createHTMLCanvas;
 exports.createNode = createNode;
 exports.crossOrigin = crossOrigin;
@@ -13360,6 +13661,7 @@ exports.ease = ease;
 exports.easeIn = easeIn;
 exports.easeInOut = easeInOut;
 exports.easeOut = easeOut;
+exports.frag = frag$1;
 exports.getDeclarations = getDeclarations;
 exports.getDefaultCssPropertyValue = getDefaultCssPropertyValue;
 exports.isCanvasElement = isCanvasElement;