Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Three.js disable depth test

I use an EffectComposer :

renderer = new THREE.WebGLRenderer();
renderer.setDepthTest(false);
...
composer = new THREE.EffectComposer( renderer);

So I want to disable the depth test but when I do :

composer.render();
var gl = renderer.context;
alert(gl.getParameter(gl.DEPTH_TEST));

the value is true and not false. How can I disable the depth test ?

Thank you.

like image 757
user1482030 Avatar asked Jul 11 '12 13:07

user1482030


2 Answers

I realize this is three years later, but I came across it while researching the z-buffer in Three.js (version r73). In order to disable DEPTH_TEST in the renderer, I ended up doing the following (Google Chrome Version 47.0.2526.106 m):

var renderer = new THREE.WebGLRenderer( { antialias: true });
renderer.setClearColor(0xaaaaaa);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.context.disable(renderer.context.DEPTH_TEST);
document.body.appendChild(renderer.domElement);

var render = function () {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
};

render();
var gl = renderer.context;
alert(gl.getParameter(gl.DEPTH_TEST));

with the key beingrenderer.context.disable(renderer.context.DEPTH_TEST) when creating the renderer.

I attempted to use renderer.setDepthTest(false) at first but it actually did not load. I didn't delve in depth to see if this is just an interaction with my existing project, an actual bug, or possibly removed, but for now I recommend just using the above working method.

like image 139
Kris Avatar answered Oct 06 '22 06:10

Kris


You can try

gl.disable(gl.DEPTH_TEST);
like image 26
YeJiabin Avatar answered Oct 06 '22 06:10

YeJiabin