How to Turn Off Depth Testing in Three.js

I am currently using an EffectComposer in my project:

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

However, I noticed that when I attempt to disable the depth test with the following code snippet:

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

The value returned is true instead of false. How can I successfully disable the depth test?

Any help on this matter would be greatly appreciated.

Answer №1

Although it's been three years since this was posted, I stumbled upon it while studying the z-buffer in Three.js (version r73). To turn off DEPTH_TEST in the renderer, I had to execute the following steps on Google Chrome Version 47.0.2526.106:

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));

The crucial line of code is

renderer.context.disable(renderer.context.DEPTH_TEST)
when initializing the renderer.

I initially tried using renderer.setDepthTest(false), but it didn't work as expected. I didn't investigate further to determine if this issue was specific to my project, a known bug, or possibly a removed feature. For now, I suggest sticking to the method described above for reliable results.

Answer №2

Feel free to experiment with:

gl.disable(gl.DEPTH_TEST);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing WordPress Variables Beyond the Loop

Following the update of my loop to gather all necessary data using this code: <?php $json = ""; if ( have_posts() ) { while ( have_posts() ) { the_post(); global $wpdb; $query = "SELECT * FROM ". $wpdb-&g ...

What is the best way to import API Endpoints from various directories in an Express Server?

I have been using a script to load my API endpoints like this: readdirSync('./routes/api').map((r) => app.use( `/api/v1/${r.split('.')[0]}`, require(`./routes/api/${r.split('.')[0]}`) ) ); This script reads eve ...

Issues with CSS Modules not applying styles in next.js 13 version

Employing next.js 13.1.1 along with /app Previously, I had been handling all of my styles using a global.css, however, I am now attempting to transition them into CSS Modules. Within my root layout.js, there is a Header component that is imported from ./ ...

What is the best way to extract a specific number from a table with Selenium, especially when the location remains consistent across all zip

Context: I am attempting to scrape data from a website with JavaScript using Selenium in Python. Goal: Extract a specific number from the table located at 159x26. I believed that this code would retrieve the number from row 159, column 26. Here is the c ...

Sending a string data from client to a MongoDB database using Express.js and Node.js with the help of Sails framework

Need help with sending a string from client to mongoDB using Sails The "val" variable represents a string sent in real time from the client to the server database POST Form( is using HTML the best approach here? ) <!DOCTYPE html> <html> < ...

BufferGeometry: techniques for rendering face groupings

I have 2 different shapes and 2 sets of patterns. My primary objective is to sometimes hide a portion of the first shape (requiring 2 groups) while simultaneously displaying a section of the second shape (only needing 1 group). Prior to the r72 update, I u ...

What is the optimal method for sending search criteria to the server using AJAX?

Take a look at the HTML snippet below: <input type='text' id='name'/> <option id='option'> <select value='1'>hi</select> <select value='2'>bye</select> </option&g ...

Tips for sending a Django queryset as an AJAX HttpResponse

Currently, I am faced with the challenge of fetching a Django queryset and storing it in a JavaScript variable using Ajax. I have attempted to employ the following code snippet for this purpose; however, I keep encountering the issue of "Queryset is not J ...

Using ThreeJS to reveal an object through intersection with another

I am currently working on creating a ThreeJS interaction where a user can hover over a sphere, causing a connected text object to appear. However, I am encountering an issue where each sphere shows the same text object instead of its own unique text. Afte ...

Tips for inserting a string into an array nested within an object stored in a state array

Currently, the variable sizeVariant is a string array and I am trying to append strings to it using an onClick event. The function findIndex seems to be working fine. However, there seems to be an issue with the concatenation section. It appears that using ...

Generating meta tags in a web scraping tool within a front-end application using AngularJS

Running an AngularJS web app entirely on the client side presents a challenge when it comes to adding html meta tags for the FaceBook scraper. These meta tags need to be rendered from the server, without relying on client-side JavaScript. Currently, I&apo ...

Loading google maps markers dynamically with ajax requests

I'm in the process of plotting around 120 markers on a Google Map by utilizing an ajax populated array containing google.maps.LatLng objects Here is my script <script type ="text/javascript"> $.ajaxSetup({ cache: false }); ...

Tips for retrieving console data in VueJS Data

Is there a way to review data from a form component in the console without vue taking any action? I need to receive external data and fill in the fields accordingly. I attempted to set a value using document.getElementsByName("nfe.codigo")[0].value = "000 ...

What is preventing me from being able to spyOn() specific functions within an injected service?

Currently, I am in the process of testing a component that involves calling multiple services. To simulate fake function calls, I have been injecting services and utilizing spyOn(). However, I encountered an issue where calling a specific function on one ...

Can a dropdown menu be integrated into a text area?

Is it within the realm of possibility to achieve this? I believe it's worth exploring, so here goes my question. The Servlet API functions as a ticketing process or script that scans a form for specific form fields that match its predefined list of n ...

In Firefox, the HTML label fails to activate the corresponding input field when the mouse is moved while clicking

If you click on the label in the example below, it will change the state of the input. document.querySelector("label").addEventListener("click", function() { console.log("clicked label"); }); label { -webkit-user-select: none; -moz-user-select: no ...

What steps can be taken to retrieve data from a database table using JavaScript?

I am encountering a very peculiar issue. The values that I need are visible when I receive them as a message from the server-web console. However, when I try to retrieve them using a for loop, I encounter an error 05-22 18:58:23.203: I/Web Console(29392): ...

Unable to implement new ecmascript decorators within typescript version 2.4.2

Check out this example code: function enumerable(value: boolean) { return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) { descriptor.enumerable = value; }; } class A { @enumerable(false) a: number = 1 b: number ...

Accessing JSON data from an external file using AngularJS's $http method

I am new to Angular and not very comfortable with JavaScript. I am attempting to create an app using the Ionic framework. I have successfully retrieved a list from a JSON file stored in a variable, but now I am trying to use $http.get() to fetch it from a ...

Transitioning the height of a Vue component when switching routes

I've been struggling to implement a transition slide effect on my hero section. The height of the hero is set to 100vh on the homepage and half of that on other pages. Despite trying various methods, I haven't been able to get it working properly ...