When I look through a face I cannot see other transparent faces, but they only don’t render when their x pos is greater than the camera’s x pos, here is a video that shows it in action here is the material for the meshes: new THREE.MeshLambertMaterial({ map: texture, transparent: true, …

I forgot to mention it doesn’t provide a perfect answer for transparency (hope i didn’t oversold it) but still a way to mitigate the most annoying issues without rewriting three’s renderer completely. more information about the limitation here: threejs-sandbox/screendoor-transparency at mas…

new THREE.MeshLambertMaterial({ map: texture, transparent: true, alphaMap: alphaTexture, alphaTest:0.5,vertexColors: THREE.VertexColors })

Thanks, but that did not work, instead it stopped the water from disappearing, but now the alpha values are being changed, and my glass is not rendering since it’s alpha is lower than 0.5, something you might need to know is that some of the leaf texture is half-transparent

For this use case, I would use the famous screendoor transparency trick used in many video games. A visual trick to dodge complex depth sorting and transparency clipping. Because three.js is not an engine, and doesn’t include such advanced optimisation (yet? :wink:) https://gkjohnson.github.io/th…

thank you! :smile: How would I go about adding this into my game? (the faces are using uvs from a texture, and alpha is defined from a alpha map image)

I fear you may have dive into the realm of three.js custom shaders. then combine your alphaMap uniform with the ditherTex If you don’t want to bother with it, follow @Chaser_Code advice. Sometimes it’s better to just remove transparency and only use alphaTest

I’m using the method from Oxyn, but when trying to set alpha values in a shaderMaterial, the effect does not work, (I’m getting black instead of invisible pixels on the texture) how do I use this idea for a shaderMaterial? → Nvm, I just figured out I can use discard in the shader code to not rende…

yea ok, sounds great, well thanks for this solution :smile:

I suspect people may still struggle with it because it’s an old depreciated example with some shenanigans not used anymore. So here is a github repo + live demo link using three r153 and very simplified code. GitHub - Oxynt/three-basic-dither: basic dither shader example using Three r153 …

Thank you for this :smile:, I’m currently figuring out how to convert the glsl code into one big string so that I can understand it properly, but it works exactly how I need it to.

Transparent faces not rendering when looking through another transparent face

Questions

Chaser_Code June 28, 2023, 9:31am 6

For tree without transparent:
new THREE.MeshLambertMaterial({ map: texture, transparent: false, alphaMap: alphaTexture, alphaTest:0.5,vertexColors: THREE.VertexColors })

1 Like

Topic		Replies	Views
ShaderMaterial: make it hide itself Questions materials , shaders	4	2280	January 8, 2021
ThreeJS and the transparent problem Questions transparency	50	33539	November 18, 2024
About material alpha Questions transparency	3	642	February 8, 2021
Transparency issue within the same mesh Questions materials , transparency	14	2859	September 6, 2023
Faces missing on semi transparent objects at certain angles Questions transparency	18	3920	December 20, 2023

Transparent faces not rendering when looking through another transparent face

Related topics