Semi-transparent texture rendering

[deathcap]

Completely opaque or transparent voxels render well, but semi-transparent (0 < alpha < 1) looks like this:

The reason for the problem is mostly clearly visible in voxel-example 90dd7cad53ba32358220114a1f7f77776565663c - on the lava at the bottom. When viewed from the side it renders as expected, through the ores and stone above it:

but when viewed from the bottom, the faces from the very top of the terrain show through:

something to do with sorting in depth order..

[deathcap]

ref mikolalysenko/ao-shader#2

[mikolalysenko]

Correct rendering requires z-sorting, but you can do a simpler/dumber thing that might look ok and get you 70% there.

Here is how it works:

1. Split all translucent facets out into a separate buffer from the main vertex buffer. This will require modifying voxel-mesher almost certainly.
2. When rendering the world you need to do 2 passes:

• First draw all opaque/transparent voxels without using any blending and with the depthMask enabled.
• Then disable depthMask (but keep the depthTest on!), turn on blending and draw all transparent faces.

This is how most games do transparency, though it is obviously not the "correct" solution. Still I think it should be possible to implement it within voxel.js, but it will just take some work.

[deathcap]

Agreed the simplified scheme is probably sufficient. I think that's the technique Minecraft used, until recently.

edit: found MC calls this the "render pass" (0=opaque, 1=transparent).

[deathcap]

Some progress testing in voxel/voxel-mesher#5

still to do: separate voxel buffers

[deathcap]

With the blockModel property, voxels are now meshed separately and drawn after - seems to solve the semi-transparency (translucency?) problem ok, water now shows as (with a 'custom' cube model):

The interior faces (not shown here) can be annoying, also the artifacts at the boundaries between the voxels (quite visible in this screenshot), since each voxel is rendered on its own (not meshed together like 'solid' voxels). So this sort of works, but could use improvement.

Are these steps strictly necessary:

• First draw all opaque/transparent voxels without using any blending and with the depthMask enabled.
• Then disable depthMask (but keep the depthTest on!), turn on blending and draw all transparent faces.

? I'm drawing both passes with:

  gl.enable(gl.CULL_FACE)
  gl.enable(gl.DEPTH_TEST)
  gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA)
  gl.enable(gl.BLEND)
  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true)

all always enabled at the beginning of the render method. Haven't tried messing with gl.DEPTH_MASK yet.

Also, I'm thinking if maybe a fourth category of voxels would be worth it — in addition to 1. solid opaque 2. solid transparent 3. "porous" (= non-solid = custom block model), 4. translucent solid. These voxels (4) could be greedily meshed together, as with (1) and (2), but would be rendered in the second pass like (3), so 0<alpha<1 textures would display as expected. Full-height water, lava, and other fluids would fall into this category. Or grouping these together with custom block models may be sufficient..

[deathcap]

to do: try gl.DEPTH_MASK, or some other way to fix these interior faces:

[deathcap]

Testing with gl.depthMask(gl.TRUE) in 2nd shader (and false in 1st shader).. needs more work:

leaving it off for now, I think the current implementation is good enough for the time being. There are some other minor glitches in 0.13.0 dependent on the draw order:

but when viewed from the other side:

Also found this good article: http://stackoverflow.com/questions/3388294/opengl-question-about-the-usage-of-gldepthmask

---

Since the original problem of translucent rendering is now implemented as of 0.13.0, closing this issue, but opening new issues for the remaining problems:

• Face culling for custom block models voxel-mesher#8 Face culling for custom block models
• Sort custom block meshes from furthest to nearest, mesh draw order voxel-mesher#9 Sort custom block meshes from furthest to nearest, mesh draw order [may also require shader changes - for chunk ordering]
• Disable depth mask when rendering custom blocks #8 Disable depth mask when rendering custom blocks