Transparent faces in Three.js

Questions
,
1

I’ve been trying to implement transparent voxel support to my (modified) version of this voxel engine from Threejsfundamentals, and so far, it works.
I’m using chunks (multiple objects) in my game, and sometimes, the chunk behind the transparent voxel is invisible:

image
image1023×657 114 KB

Sometimes, it isn’t:

image
image849×691 107 KB

How would I fix this?

2
  1. If that’s possible, you can try to simply set transparent to false for the opaque boxes.
  2. If it’s not possible, you can also try setting different renderOrder for transparent and opaque boxes:
opaqueBoxes.renderOrder = 1;
transparentBoxes.renderOrder = 2;

// All transparent boxes are rendered "below" opaque boxes. Ie. probably the look you'd prefer.

opaqueBoxes.renderOrder = 2;
transparentBoxes.renderOrder = 1;

// All transparent boxes are rendered "above" opaque boxes. Ie. transparent surfaces override opaque ones.

Here’s a small example (you can swap render order with variables at the top.)

3

The chunks are not separate - faces are calculated and one geometry is created, so unfortunately renderOrder may not work. Unless, I could create an additional object per chunk, that would have exclusively transparent voxels. This would make renderOrder possible.

4

Look into the material property alphaTest. It’s a float between 0…1 which will discard any pixel fragment below the specified alpha value (0…1 * 255) when rendering.

eg.
material.transparent = true;
material.alphaMap = texture.load( ‘…png’ )
material.depthTest = true; // ← all pixel fragments will test depth before being drawn
material.depthWrite = true; // ← all pixel fragments will update depth buffer when drawn - unless they are discarded
material.alphaTest = 0.5; // ← anything below an alpha score of 128 will be discarded.

5

I used the code from your example, however I don’t know what to use for the alphaMap texture. What should I use?

I’ve been using alphaTest, but added depthTest and depthWrite.

6

any progress with that issue? :pleading_face:

7

I believe I solved the issue by setting the material to DoubleSide.

1 Like