Reflection of the shader on the objects in the scene

Questions
,
1

hi All,
i just started to make my first shader and while i start to understand how it work to make one and use it in three.js , i still doesn’t understand a lot of things.

The first problem I can’t seem to overcome is how to make my shader reflect on all objects in my scene. Is there a possibility for my shader to generate light that reflects on the objects in my scene?

Screenshot 2023-12-09 122121
Screenshot 2023-12-09 1221211795×1458 97.7 KB

i made the plane like this but the material doesnt interact with all the other object of my scene.
Can someone give me a direction to go on?


const xmaterial = new THREE.RawShaderMaterial({
    vertexShader: vertexSahder,
    fragmentShader: fragment,
    uniforms:
    {
    
        uTime:{value :0.0},
        uMouse: { value: new THREE.Vector2(0.0, 0.0) },
        uVitesseGlobale:{value :0.2},
        uDivision:{value :0.2},
        uRayon:{value :0.4},
        uAmplitude:{value :2.4},
        uMicroSommet:{value :4.4},
        uNoir:{value :0.45},

    }
})


const geometry = new THREE.PlaneGeometry(24,10,350,500) 
//SOL
const plan =  new THREE.Mesh (
    geometry, 
    xmaterial,
  
)

Thansk a lot,
Pierre

2

It’s possible but only in postprocessing, ie. a fragment shader applied on a flat, rendered frame (also in deferred rendering, but three.js renderer is not deferred.)

1 Like
3

ok , but how did they make it on the website cineshader ? https://cineshader.com/

Screenshot 2023-12-09 125629
Screenshot 2023-12-09 1256291797×1725 31.8 KB

4

@Pierre_Debroux You could probably achieve the same by mixing a blurred version of the selected shader with a baked black and white lightMap of the scene (where the shader is occluded or has intensity based on the light maps values) assigned to the second uv slot of the diffuse channel or in the emmisive channel of assets…

1 Like