crazy2be / buildblast

Build a base, shoot intruders
MIT License
5 stars 1 forks source link

Transparency? #164

Open crazy2be opened 10 years ago

crazy2be commented 10 years ago

Would be really neat to have. Any idea how we would implement this? THREE.js seems to ignore the alpha channel in the provided PNGs.

kieve commented 10 years ago

See the material docs, specifically the "transparent" property. We need to set that to true. All should be fine and dandy then.

A better solution would actually be a ShaderMaterial

I'll likely implement this as part of my cave testing. As I want to be able to see underground, but still know how the surface looks.

crazy2be commented 10 years ago

Turns out this is harder than expected. Turning on transparency for the material in THREE causes rendering bugs, apparently due to behind fragments failing the depth buffer test. See http://stackoverflow.com/questions/15994944/transparent-objects-in-threejs and http://learningwebgl.com/blog/?p=859.

We can do "all-or-nothing" transparency by setting alphaTest: 0.5 which should work, but it's not as nice/flexible/versatile.

crazy2be commented 10 years ago

Ok, so I have basic transparency (all or nothing) implement on the glass branch. For "real" transparency (i.e. partial transparency), we need a bit more machinery.

1) We need to mesh the water in a scene separately from the rest of the blocks, and 2) We need to draw the opaque (i.e. normal) block meshes first, with normal depth testing on. And, 3) In our shader for the transparent block meshes, we need to use https://www.opengl.org/sdk/docs/man/html/gl_FragDepth.xhtml and https://www.opengl.org/sdk/docs/man/html/gl_FragCoord.xhtml, in order to read from the depth buffer (and not render if we are behind an opaque object), but not write to it (because we want to render multiple layers of transparent water if they exist).