Drawing order for objects with transparent shader materials

[lordcraymen]

Hi everyone,

I'm new to r3f, so please be patient with me!

I'm working on a viewer to display multiple 3D models (GLTF) and want to add a fade-in and fade-out effect for presentation purposes.

To keep things flexible and achieve a 2.5D compositing experience, I decided to render the objects I want to animate the transparency on as a separate pass. Then, I apply the render target's texture in a shader material with screen space coordinates to control the alpha value for each fragment. I also implemented custom depth checking to reduce transparency artifacts, especially for concave objects.

After some effort, I got it working (normalizing the screen coordinates was tricky on my Mac with Retina display; I had to adjust the render target resolution using gl.getPixelRatio). However, I'm facing an issue with multiple instances of the RenderGroup component: only the object in the last instance shows the transparency effect.

Any advice or suggestions would be greatly appreciated!

This is my code so far:

`
import { useEffect, useRef, useMemo } from 'react';
import { useFrame } from '@react-three/fiber';
import { Vector2, WebGLRenderTarget, ShaderMaterial, DepthTexture } from 'three';

//SkipRenderMaterial is a material that will cause the renderbufferDirect function to return early
//I use this material to skip rendering the objects that are not in the current render group
import { SkipRenderMaterial } from '../../shaders/SkipRenderMaterial';

const RenderGroup = ({children, opacity=1}) => {
const groupRef = useRef();

const renderTarget = useMemo(() => {
    const depthBuffer = new DepthTexture(1, 1)
    return new WebGLRenderTarget(1, 1, { depthBuffer: true, depthTexture: depthBuffer })
}, [])

useEffect(() => () => { renderTarget.dispose() }, [renderTarget])

const DepthMaterial = useRef(new ShaderMaterial({
    uniforms: {
        diffuseTexture: {
            value: null
        },
        depthTexture: {
            value: null
        },
        opacity: {
            value: 1.0
        },
        resolution: {
            value: new Vector2()
        }
    },
    vertexShader: `
        void main() {
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
    `,
    fragmentShader: `
        uniform sampler2D diffuseTexture;
        uniform sampler2D depthTexture;
        uniform float opacity;
        uniform vec2 resolution;

        void main() {
        
            float depth = texture2D(depthTexture, gl_FragCoord.xy / resolution).r / gl_FragCoord.w;
            float currentDepth = (gl_FragCoord.z / gl_FragCoord.w) - 0.001;
        
            if (currentDepth > depth) {
                discard;
            }
        
            vec4 texel = texture2D(diffuseTexture, gl_FragCoord.xy / resolution);
            gl_FragColor = vec4(texel.rgb,texel.a * opacity);
        }
    `,
    depthWrite: false,
    depthTest: true,
    name: 'DepthMaterial'
}))



useFrame(({ gl, scene, camera, size }) => {

    const ratio = gl.getPixelRatio();
    renderTarget.setSize(size.width * ratio, size.height * ratio);
    DepthMaterial.current.uniforms.resolution.value.set(size.width * ratio, size.height * ratio);

    gl.setRenderTarget(renderTarget);

    // I set everything in the scene to a SkipRenderMaterial material
    // so that the renderbufferDirect function will return early
    scene.traverse(obj => {
        if(!obj.isScene) obj.overrideMaterial = SkipRenderMaterial;
    });

    // I set the current group to null so that objects in this group will render normally
    groupRef.current.traverse(obj => {
        obj.overrideMaterial = null;
    });

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

    //setting the opacity and the texture of the DepthMaterial
    DepthMaterial.current.opacity = opacity;
    DepthMaterial.current.transparent = opacity !== 1;
    DepthMaterial.current.uniforms.diffuseTexture.value = renderTarget.texture;
    DepthMaterial.current.uniforms.depthTexture.value = renderTarget.depthTexture;
    DepthMaterial.current.uniforms.opacity.value = opacity;

    // I set ovverideMaterial to null in the scene so that objects in the scene will render normally
    //todo: maybe store the original overrideMaterials in a map and roll back to them
    scene.traverse(obj => {
         obj.overrideMaterial = null
    });

    // I set the current group to DepthMaterial so that objects in this group 
    //will render with the DepthMaterial
    groupRef.current.traverse(obj => {
        obj.overrideMaterial = DepthMaterial.current
        // I set the renderOrder to 100 so that the objects in this group will render after the other objects
        //as the shader needs the depth buffer to be already filled
        obj.renderOrder = 100
    });
},1);

return <><group ref={groupRef}>{children}</group></>;

};

export {
RenderGroup
}
`

and this is how i use it

`<Canvas onCreated={({ gl }) => {
const originalRenderBufferDirect = gl.renderBufferDirect
gl.renderBufferDirect = function (camera, fog, geometry, material, object, group) {
const currentMaterial = object.overrideMaterial || material
if( currentMaterial === SkipRenderMaterial) return;
originalRenderBufferDirect.call(this, camera, fog, geometry, currentMaterial, object, group);
};

}} frameloop="demand">
  <Stats />
  <RenderGroup opacity={0.7}><Box position={[0.2, 0, 0]} scale={0.1}/></RenderGroup>
  <RenderGroup opacity={0.2}> <Model src="src/assets/example.glb" scale="1" position={[0,0,0]}/></RenderGroup>
  <RenderGroup opacity={0.5}><Model src="src/assets/example.glb" scale="1" position={[-0.2,0,0]}/></RenderGroup>
  
 
</Canvas>`

What are your thoughts? only the model in the last renderGroup instance shows the expected 50% opacity, the other two show completely opaque. What am I missing misunaderstanding here?

Thank you for your help!