Render to Texture

examples/index.ts

@@ -85,7 +85,10 @@ const defaultPhysicalPixelRatio = 1;
   }
 
   let renderMode = urlParams.get('renderMode');
-  if (driverName === 'threadx' || (renderMode !== 'webgl' && renderMode !== 'canvas')) {
+  if (
+    driverName === 'threadx' ||
+    (renderMode !== 'webgl' && renderMode !== 'canvas')
+  ) {
     renderMode = 'webgl';
   }
 
@@ -215,7 +218,7 @@ async function initRenderer(
       fpsUpdateInterval: logFps ? 1000 : 0,
       enableContextSpy,
       enableInspector,
-      renderMode: renderMode as ('webgl' | 'canvas'),
+      renderMode: renderMode as 'webgl' | 'canvas',
       ...customSettings,
     },
     'app',
@@ -314,7 +317,11 @@ async function initRenderer(
   return { renderer, appElement };
 }
 
-async function runAutomation(driverName: string, renderMode: string, logFps: boolean) {
+async function runAutomation(
+  driverName: string,
+  renderMode: string,
+  logFps: boolean,
+) {
   const logicalPixelRatio = defaultResolution / appHeight;
   const { renderer, appElement } = await initRenderer(
     driverName,

examples/tests/no-rtt.ts

@@ -0,0 +1,72 @@
+import type { ExampleSettings } from '../common/ExampleSettings.js';
+import test from './alpha-blending.js';
+interface AnimationExampleSettings {
+  duration: number;
+  easing: string;
+  delay: number;
+  loop: boolean;
+  stopMethod: 'reverse' | 'reset' | false;
+}
+
+const animationSettings: Partial<AnimationExampleSettings> = {
+  duration: 14000,
+  delay: 400,
+  loop: true,
+  stopMethod: 'reverse',
+  easing: 'ease-in-out-back',
+};
+
+export default async function ({ renderer, testRoot }: ExampleSettings) {
+  const node = renderer.createNode({
+    x: 0,
+    y: 0,
+    width: 1920,
+    height: 1080,
+    color: 0x000000ff,
+    parent: testRoot,
+  });
+  const clippingNode = renderer.createNode({
+    x: 0,
+    y: 0,
+    width: 1920,
+    height: 1080,
+    parent: node,
+    clipping: true,
+    color: 0x00000000,
+  });
+
+  const rootRenderToTextureNode = renderer.createNode({
+    x: 0,
+    y: 0,
+    width: 1920,
+    height: 1080,
+    parent: clippingNode,
+    rtt: false,
+    zIndex: 5,
+    colorTop: 0xc0ffee00,
+    colorBottom: 0xbada5500,
+  });
+
+  new Array(2000).fill(0).forEach((_, i) => {
+    const image = i % 105;
+    const a = renderer.createNode({
+      parent: rootRenderToTextureNode,
+      x: (i % 15) * 120 + 120,
+      y: Math.floor(i / 15) * 120 + 150,
+      width: 120,
+      height: 120,
+      scale: 0.85,
+      // src: '../assets/rocko.png',
+      src: `https://picsum.photos/id/${image + 30}/120/120`,
+    });
+
+    const animation = a.animate(
+      {
+        y: Math.floor(i / 15) * 120 - 5000,
+      },
+      animationSettings,
+    );
+
+    animation.start();
+  });
+}

examples/tests/rtt-dimension.ts

@@ -0,0 +1,250 @@
+import type { ExampleSettings } from '../common/ExampleSettings.js';
+import rocko from '../assets/rocko.png';
+
+export async function automation(settings: ExampleSettings) {
+  await test(settings);
+  await settings.snapshot();
+}
+
+export default async function test({ renderer, testRoot }: ExampleSettings) {
+  const node = renderer.createNode({
+    x: 0,
+    y: 0,
+    width: 1920,
+    height: 1080,
+    color: 0x000000ff,
+    parent: testRoot,
+  });
+
+  // RTT Node 1
+  const rttNode = renderer.createNode({
+    x: 100,
+    y: 200,
+    width: 300,
+    height: 300,
+    parent: node,
+    rtt: true,
+    zIndex: 5,
+    colorTop: 0xfff00fff,
+    colorBottom: 0x00ffffff,
+  });
+
+  renderer.createNode({
+    x: 0,
+    y: 0,
+    width: 300,
+    height: 300,
+    parent: rttNode,
+    color: 0xff0000ff,
+  });
+
+  renderer.createTextNode({
+    x: 0,
+    y: 0,
+    text: 'Render to texture',
+    parent: rttNode,
+    fontSize: 48,
+    color: 0xffffffff,
+    fontFamily: 'Ubuntu',
+  });
+
+  renderer.createNode({
+    x: 50,
+    y: 100,
+    width: 300,
+    height: 300,
+    parent: rttNode,
+    src: rocko,
+  });
+
+  // RTT Node 2
+  const rttNode2 = renderer.createNode({
+    x: 500,
+    y: 200,
+    width: 300,
+    height: 300,
+    parent: node,
+    rtt: true,
+    colorTop: 0xfff00fff,
+    colorBottom: 0x00ffffff,
+  });
+
+  renderer.createNode({
+    x: 0,
+    y: 0,
+    width: 300,
+    height: 300,
+    parent: rttNode2,
+    color: 0xc0ff33ff,
+  });
+
+  renderer.createTextNode({
+    x: 0,
+    y: 0,
+    text: 'Render to texture',
+    parent: rttNode2,
+    fontSize: 22,
+    color: 0xff00ffff,
+    fontFamily: 'Ubuntu',
+  });
+
+  renderer.createNode({
+    x: 50,
+    y: 100,
+    width: 300,
+    height: 300,
+    parent: rttNode2,
+    src: rocko,
+  });
+
+  // RTT Node 2
+  const rttNode3 = renderer.createNode({
+    x: 900,
+    y: 200,
+    width: 800,
+    height: 300,
+    parent: node,
+    rtt: true,
+    colorTop: 0x67378dff,
+    colorBottom: 0x9cbd61ff,
+  });
+
+  renderer.createNode({
+    x: 0,
+    y: 0,
+    width: 300,
+    height: 300,
+    parent: rttNode3,
+    color: 0xc0ff33ff,
+  });
+
+  renderer.createTextNode({
+    x: 0,
+    y: 0,
+    text: 'Render to texture',
+    parent: rttNode3,
+    fontSize: 22,
+    color: 0xff00ffff,
+    fontFamily: 'Ubuntu',
+  });
+
+  renderer.createNode({
+    x: 50,
+    y: 100,
+    width: 300,
+    height: 300,
+    parent: rttNode3,
+    src: rocko,
+  });
+
+  const nestedRTTNode1 = renderer.createNode({
+    x: 400,
+    y: 0,
+    width: 150,
+    height: 150,
+    parent: rttNode3,
+    rtt: true,
+    colorTop: 0x26f1e0ff,
+    colorBottom: 0xffffffff,
+  });
+
+  renderer.createNode({
+    x: 0,
+    y: 0,
+    width: 150,
+    height: 150,
+    parent: nestedRTTNode1,
+    color: 0xc0ff33ff,
+  });
+
+  renderer.createTextNode({
+    x: 0,
+    y: 0,
+    text: 'Nested',
+    parent: nestedRTTNode1,
+    fontSize: 22,
+    color: 0xff00ffff,
+    fontFamily: 'Ubuntu',
+  });
+
+  const rocko4 = renderer.createNode({
+    x: -120,
+    y: 50,
+    width: 300,
+    height: 300,
+    parent: nestedRTTNode1,
+    src: rocko,
+  });
+
+  // Copy source texture from rootRenderToTextureNode
+  for (let i = 0; i < 50; i++) {
+    renderer.createNode({
+      parent: node,
+      x: (i % 15) * 120 + 100,
+      y: Math.floor(i / 15) * 120 + 600,
+      width: 100,
+      height: 100,
+      texture: nestedRTTNode1.texture,
+    });
+  }
+
+  const animation = rocko4.animate(
+    {
+      rotation: 0.3,
+      scale: 1.5,
+      y: 110,
+      x: -50,
+    },
+    {
+      duration: Math.random() * 4000 + 3000,
+      loop: true,
+      stopMethod: 'reverse',
+      easing: 'ease-in-out',
+    },
+  );
+
+  renderer.createTextNode({
+    x: 100,
+    y: 160,
+    text: 'RTT Dimension',
+    parent: node,
+    fontSize: 22,
+    color: 0xffffffff,
+    fontFamily: 'Ubuntu',
+  });
+
+  renderer.createTextNode({
+    x: 900,
+    y: 160,
+    text: 'Nested RTT',
+    parent: node,
+    fontSize: 22,
+    color: 0xffffffff,
+    fontFamily: 'Ubuntu',
+  });
+
+  renderer.createTextNode({
+    x: 100,
+    y: 560,
+    text: 'Nested RTT copies',
+    parent: node,
+    fontSize: 22,
+    color: 0xffffffff,
+    fontFamily: 'Ubuntu',
+  });
+
+  window.addEventListener('keydown', (e) => {
+    if (e.key === 'r') {
+      rttNode.rtt = !rttNode.rtt;
+      rttNode2.rtt = !rttNode2.rtt;
+      rttNode3.rtt = !rttNode3.rtt;
+    }
+    if (e.key === 's') {
+      animation.start();
+    }
+    if (e.key === 'w') {
+      rttNode.width = rttNode.width === 200 ? 300 : 200;
+      rttNode.height = rttNode.height === 200 ? 300 : 200;
+    }
+  });
+}