R3F, Layers, and Render Targets #2494

MaximeHeckel · 2022-09-14T13:53:54Z

MaximeHeckel
Sep 14, 2022

Hi all 👋

After deep diving into shaders and R3F, I've been recently looked at layers and render targets. I'm mainly learning Three.js and React Three Fiber by trying to mimic existing websites/projects or looking at Three.js techniques and trying to port them to R3F (worked for me so far)

Recently I've been trying to port this scene from Alien.js (their repo is a gold mine if you're looking for cool shaders btw).

The Three.js code is available here if you're curious, but in a nutshell what I gathered is that these scene uses 2 main Three.js concepts: Layers and Render Targets

When looking at the update function I gathered that the following is happening:

enable a layer
render a specific shader material onto a full-screen triangle using a dedicated render target
enable another layer
swap the material of the full-screen triangle and render another specific shader material onto it using a dedicated render target

which should as a result apply different kinds of effects on different layers (? let me know if I'm wrong here, but this is how I understand it)

I've been trying to port this to R3F as I was interested in this technique, here's my code so far https://codesandbox.io/s/dark-night-mgilwb?file=/src/Scene.js

I managed to apply one effect on one layer (at least I think so), but whenever I try to apply a second one, the first one simply disappears.

const Layer = {
  DEFAULT: 0,
  HOLOGRAM: 1,
  GLOW: 2
};

...

  const renderTarget = new THREE.WebGLRenderTarget(size.width, size.height, {
    depthBuffer: true
  });

  const renderTargetB = new THREE.WebGLRenderTarget(size.width, size.height, {
    depthBuffer: true
  });

  useLayoutEffect(() => {
    mesh.current.layers.set(Layer.HOLOGRAM);
    wireframe.geometry.parameters.geometry = mesh.current;
    mesh.current.add(wireframe);
    wireframe.layers.set(Layer.HOLOGRAM);
    glowMesh.current.layers.enable(Layer.GLOW);
  }, [wireframe]);

  useFrame((state) => {
    const { clock, gl, scene, camera, width, height } = state;

    gl.autoClear = false;

    gl.setRenderTarget(null);
    gl.render(scene, camera);

    camera.layers.enable(Layer.DEFAULT);

    // HOLOGRAM LAYER ================

    camera.layers.enable(Layer.HOLOGRAM);

    glitchMaterial.current.uniforms.uTime.value = clock.getElapsedTime();
    glitchMaterial.current.uniforms.tMap.value = renderTarget.texture;
    screenMesh.current.material = glitchMaterial.current;

    gl.setRenderTarget(renderTarget);
    gl.clear();
    gl.render(screenMesh.current, screenCamera.current);

    // GLOW LAYER ================

    camera.layers.enable(Layer.GLOW);

    gl.render(scene, camera);

   /** 
      If you comment what's bellow the glitch material will render as expected
   */

    blurMaterial.current.uniforms.uResolution.value = new THREE.Vector2(
      width,
      height
    );
    blurMaterial.current.uniforms.uDirection.value = BlurDirectionY;
    blurMaterial.current.uniforms.tMap.value = renderTargetB.texture;
    screenMesh.current.material = blurMaterial.current;

    gl.setRenderTarget(renderTargetB);
    gl.clear();
    gl.render(screenMesh.current, screenCamera.current);
  });

  return (
    // ...sphere mesh for each different layers
    
    // Camera and mesh for renderTargets and effects
     <OrthographicCamera ref={screenCamera} args={[-1, 1, 1, -1, 0, 1]} />
      <mesh
        ref={screenMesh}
        geometry={getFullscreenTriangle()}
        frustumCulled={false}
      />
  )

Am I doing something fundamentally wrong? Or misunderstanding the technique used here?
At this point any pointers would help 😄

Thank you in advance!

MaximeHeckel · 2022-09-16T00:28:59Z

MaximeHeckel
Sep 16, 2022
Author

So after digging a bit more this is what I did wrong:

I used camera.layers.enable(myLayer) instead of camera.layers.set(myLayer)
I need to do things in the following order: set my layer (e.g. Hologram)-> render the whole scene (for that layer) -> set my material to my full screen triangle (render target as a texture etc) -> set the render target -> clear the renderer with gl.clear()-> then render my full screen triangle mesh which has my effect as a material -> then set the layer back to default to remove the mesh from the scene and just keep the effect 👈 that last step is what I was missing
As for the effect not adding on top of each other the original scene uses a "composite material" to compose multiple render targets so obviously without that it wouldn't work 😄

If anyone finds any mistake in my train of thought, let me know, I'm fairly new to the concept of render targets and layers and still trying to get a good grasp at them

(will post working implementation once I'll finish)

1 reply

jo-chemla Jul 9, 2025

Thanks for the idea, pretty nice mix of r3f with vanilla threejs to use layers. I'm trying to figure out the most r3f-native, up-to-date way to render (scene, camera stay the same) the same object/mesh (actually 2 NASA-AMMOS/3DTilesRendererJS tilesets) with different texture sets, in order to composite the temporary two renderTargets/frameBuffers into the frame to display - the same way one would do compositing in eg blender.

Current possible solutions I'm thinking of:

using react-postprocessing Selection.
pmndrs/postprocessing introduced in v7-beta proper scissors support
using drei Mask, View or mesh-portal-material

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

R3F, Layers, and Render Targets #2494

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

R3F, Layers, and Render Targets #2494

Uh oh!

MaximeHeckel Sep 14, 2022

Replies: 1 comment · 1 reply

Uh oh!

Uh oh!

MaximeHeckel Sep 16, 2022 Author

Uh oh!

jo-chemla Jul 9, 2025

MaximeHeckel
Sep 14, 2022

Replies: 1 comment 1 reply

MaximeHeckel
Sep 16, 2022
Author