three.js - how to use alphatest value inside ShaderMaterial and fragmentShader

1
votes

Thansks to @Mugen87, I managed to create a dynamic mask on my scene using a post processing method : https://jsfiddle.net/40gef6sz/ (if you move the camera you will see the cube disappear behind and invisible circle, made with this image : https://i.imgur.com/sJwKYvZ.jpg)

I would like to add some effects on my mask using a fragment shader script. On this fiddle you can see my texture moving (I replaced a THREE.MeshBasicMaterial with a THREE.ShaderMaterial) : https://jsfiddle.net/grc_michael/ghmf5sdo/

When I combine this new material with the post processing method, I can't reach the same result than the first jsfiddle. I don't know where to add my #define ALPHATEST value inside my fragment shader. You can see the result here : https://jsfiddle.net/grc_michael/82bkLn96/

I think I'm quite close the expected result. Does anyone know where to add the ALPHATEST value properly inside my fragment shader ? Thank you

1
three.jsfragment-shader

1 Answers

1
votes

Here us the original, updated fiddle with your custom shader material: https://jsfiddle.net/k2c5upfo/1/

When using an image as an alpha map, you can sample it in the same way like built-in materials. Meaning the alpha test looks like so:

if (texture2D(texture1,xy).g < 0.5) discard;