Opacity per "face"

Questions
, , , ,
1

I am working on block based game, and wanted to add water. I did it very fast and easy, but there is an issue with the touching blocks and opacity build up. My first reaction is to add a block pulse event to all blocks and then in this event if the block is water check adjacent blocks and set opacity to each face that is touching another block…

Is there a less minecrafty way to do this? A better ThreeJs way? Can it be solved with a shader on the texture or mesh? I haven’t touched shaders yet…

Seeing is believing: https://zekenaulty.github.io/maze-quest/wwwroot/experiments/water_flow/

2

You’ll need to do vertex-level opacity instead of face-level opacity, just based on how data is structured in three.js and on the GPU. But that should be fine, just make sure your faces don’t share vertices and you’ll be able to update each face individually be changing its three vertices.

It’s also a very good idea to separate your transparent vertices from your non-transparent vertices, rather than mixing them in the same mesh.

1 Like
3

Is there an example of this, or something like this, that you know of?

4

It would be very similar to this, except that you’re storing four components (RGBA) per vertex instead of three.

If you’re creating the blocks in Blender, not three.js, then you’d probably want to paint vertex alpha there instead of using code.

5

Thanks. At the moment, I’m doing everything in code, but I did just install blender. Right now I’m enjoying expanding my knowledge, by solving things in code, but at some point it becomes more efficient to use blender to build models.