Hi everyone! As can be seen in the picture, the plants and the water are all from the same transparent mesh. However, it seems like the plant’s mesh is making the water behind it see-through. I know that transparency is a very tricky topic in WebGL, does anybody know how to fix this? …

Hi! Sometimes help add mesh.renderOrder=-1; or mesh.renderOrder=1;

You might try setting depthWrite=false on any transparent materials. I think it would probably also pay off to split some of these parts into separate meshes, if they are merged now.

I took some time and split the meshes apart, but depthWrite=false results in really weird behaviors: [image] The meshes in the back are now rendering on top of the closer ones. However, I am using setTransparentSort to sort them by distance to camera, but that seems to be ignored. [image]

Do you have the option of using .alphaTest instead of .transparent, for the foliage? If they don’t need partial transparency but are just cutouts from a texture, that will avoid all of these issues. Also see: Material: Add .alphaHash and .alphaHashScale by donmccurdy · Pull Request #24271 · mrdoob/…

I am using both transparent=true and alphaTest=0.1, how should I do it instead? If I remove transparent=true, the objects disappear from the scene.

Correction: The background just appears to be black instead of disappearing: [image]

As long as .transparent=true is set, there are really difficult sorting issues involved. If you don’t need any semi-transparency you can disable .transparent and just use .alphaTest for more of a mask/cutout effect. This avoids the sorting issues. I don’t know why the background would become black …

The water texture is actually semi-transparent, so is there a way to sort the transparent faces better? This is the source code to creating the materials, and this is my attempt to sort the transparent faces. Thanks!

[image] ian13456: The water texture is actually semi-transparent, so is there a way to sort the transparent faces better? You’ll really want any semi-transparent voxels to be separated from the opaque and alpha-tested ones, with separate materials. Is that the case here? three.js sorts Mesh …

Transparency issue within the same mesh

Questions

Chaser_Code August 13, 2022, 5:42am 11

Issue with Transparency and Opacity

Topic		Replies	Views
Transparency changes at certain camera angles Questions materials , transparency	4	2479	September 9, 2023
How to solve the rendering order for random meshes to get proper transparence Questions transparency , opacity	6	885	April 17, 2024
Material Transparency problem Questions transparency	7	20428	April 17, 2021
How to render transparent Object in correct order or looks like right？ Questions materials	7	2347	August 28, 2024
ThreeJS and the transparent problem Questions transparency	50	33978	November 18, 2024

Transparency issue within the same mesh

Related topics