lightning-js / renderer

Lightning 3 Renderer
Apache License 2.0
54 stars 22 forks source link

How do we use RTT? #384

Open chiefcll opened 1 month ago

chiefcll commented 1 month ago

I've looked through the examples for RTT - but in my app I can't get RTT to work how I'd expect it to work. For instance:

I have this contentblock with the text. Everything is rendered (added a color to it as well)

Screenshot 2024-09-16 at 8 35 40 PM

If I select the node and set rtt = true, it disappears.

Screenshot 2024-09-16 at 8 36 00 PM

I'd expect it to still be there and be able to copy the texture to another node. My goal is to simply take a set of nodes, turn it into a texture to duplicate it and then replace it with new content. Please let me know what I might be doing wrong... I've tried setting color, rtt=true when node is created, zIndex...

chiefcll commented 1 month ago

@erikhaandrikman for awareness

chiefcll commented 1 month ago

Here is another example

image

There was a square there - once it goes RTT you can see really small text where the box was before and a duplicate of it in the top left.

erikhaandrikman commented 4 weeks ago

Hi @chiefcll, can you share a minimal implementation directly in the render that we can run to reproduce this issue?

chiefcll commented 1 week ago

Here you go

const props1 = {
    width: 1920,
    height: 1080,
    x: 0,
    y: 0,
    color: 0,
    parent: testRoot
  };
  const node1 = renderer.createNode(props1);

  const props2 = {
    x: 0,
    y: 0,
    width: 1920,
    height: 1080,
    color: 0,
    parent: node1
  };
  const node2 = renderer.createNode(props2);

  const props3 = {
    colorTop: 1147903743,
    colorBottom: 743406847,
    x: 0,
    y: 0,
    width: 1920,
    height: 1080,
    color: 0,

    parent: node2
  };
  const node3 = renderer.createNode(props3);

  const props4 = {
    y: 200,
    x: 170,
    width: 1750,
    height: 880,
    color: 0,
    parent: node3
  };
  const node4 = renderer.createNode(props4);

  const props5 = {
    height: 320,
    x: 0,
    y: 0,
    width: 1750,
    color: 0,
    parent: node4
  };
  const node5 = renderer.createNode(props5);

  const props6 = {
    data: { testId: "positioning" },
    width: 370,
    height: 320,
    scale: 1,
    color: 405488895,
    x: 0,
    y: 0,
    rtt: true,
    parent: node5,
  };
  const node6 = renderer.createNode(props6);