CODEWITHSUNDEEP
javascriptwebgl
Piotr
Piotr

Reputation: 21

WebGL Semi-transparent object hiding objects ahead

I'm making game like minecraft in javascript using WebGL. I have a problem with semi-transparent objects. First I tried to render all objects with depth-test and blending

gl.blendEquation( gl.FUNC_ADD );
gl.blendFunc( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA );

But using this method i must sorting all objects, to render correctly. Now I'm trying to first render normal objects with depth-testing and without blending. Next render semi-transparent with blending and without depth-testing. That render semi-transparent objects good, but its hidding objects ahead.

Screens:

enter image description here enter image description here

Upvotes: 2

Views: 358

Answers (1)

Kirill Dmitrenko
Kirill Dmitrenko

Reputation: 3629

You should keep depth test enabled, but disable depth write. It can look like this in the code:

gl.depthFunc(gl.LESS);

/* draw opaque objects */

gl.depthMask(false); // turn off depth write

/* draw transparent objects in back-to-front order */

gl.depthMask(true); // turn it on again

Upvotes: 1

Related Questions