Exploring Ways to Retrieve Depth Information within three.js

I have come across shaders that can dynamically create outlines around edges based on the difference in depth of pixels. This means that pixels with less depth compared to their adjacent pixels might have a thinner outline or none at all. Examples of such renders:

https://i.sstatic.net/aBT9z.jpg

https://i.sstatic.net/9bBPP.jpg

I am intrigued by the idea of using this shader in my three.js renders, but I need to understand how to access depth data for each pixel.

The Three.js documentation mentions a depth setting:

depth - whether the drawing buffer has a depth buffer of at least 16 bits.Default is true.

However, I am unsure about what it means by the drawing buffer having a depth buffer. The image buffers I know of are pixel buffers, which do not contain depth information. How do I access this depth buffer?

javascriptthree.js

Answer №1

If you head over to the Three.js website, there's a tutorial that demonstrates rendering a scene using a THREE.WebGLRenderTarget with the depthBuffer attribute set to true, giving you access to depth data.

Here's how it works:

  1. First, render the main scene to a WebGLRenderTarget. This target will contain RGB and Depth data accessible through their respective .texture and .depthTexture attributes.
  2. Next, take these 2 textures and apply them to a plane with custom shaders.
  3. In the custom shaders of the plane, utilize the texture data for any calculations related to colors and depths.
  4. Finally, render the second scene - which only consists of the plane - to a canvas.

If you're interested, you can find the source code for this example here. Feel free to explore and experiment with color data by commenting out the code on line 73.

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

Determine the exposed area of an element with overflowing content

I am looking for a way to determine which text within an element (such as a div or textbox) is currently visible when there is overflow. As the user scrolls, I need to have an updated list of the visible text. I am open to using any elements, but only a ...

javascriptjquery

Inspect the json data to find a specific value and then determine the corresponding key associated with

I am currently working with JSON data retrieved from which I am storing in a variable. Despite my limited experience with JSON/JS, I have been unable to find a solution through online searches. Here is the code snippet: function checkMojang() { var moj ...

javascriptjsonnode.jsminecraft

Is your window.location.hash malfunctioning?

I am facing an issue with changing the background color of a <div id="services> when a specific link (index.html#services) is clicked. I have attempted to use the latest jQuery along with the jQuery Color plugin from jQuery Color. The code snippet I ...

javascriptjqueryhtmlxhtml

Updating charts in React using Chart.js with the click of a button

I am currently learning React and Chart JS, but I have encountered an issue. I am unable to change the data by clicking on a button. Initially, the graph displays: var Datas = [65, 59, 80, 81, 56, 55, 69]; However, I want to update this graph by simply p ...

javascriptnode.jsreactjschart.jsjsx

What is the best way to patiently wait for lines to be printed out one by one

I am in the process of creating my own personal website with a terminal-style design, and I'm looking to showcase a welcome banner followed by a welcoming message. The effect I have in mind involves lines appearing individually from top to bottom and ...

javascriptasynchronousasync-await

What is the process for generating an API endpoint in Next.js that includes a query string?

I am currently working on setting up an API endpoint in Next.js, specifically the following one: /api/products/[name]?keyword=${anykeyword}. To accomplish this, I understand that I have to create it within the pages/api/products/[name] directory in index ...

javascriptreactjsnext.jsquery-string

Using Node.js to parse XLSX files and generate JSON output

Recently, I came across an extremely well-documented node_module known as js-xlsx Curious: How can I convert xlsx to json format? This is the structure of the excel sheet: The desired json output should resemble the following: [ { "id": 1, "H ...

javascriptjsonnode.jsexcelxlsx

Maximizing the efficiency of a personalized hook that facilitates data sharing in React

I have developed a unique Custom Hook that looks like the following: import { useEffect, useState } from 'react'; import axios from 'axios'; const myCustomHook = () => { const [countries, setCountries] = useState([]); const [i ...

javascriptreactjsrequestaxios

Dynamically alter routing in Express by retrieving route paths from a JSON document

My goal is to dynamically update my route in Express using a JSON file that stores the specific link. The JSON data resides in articles.js and appears as follows: title: 'title1', link: 'title2', creator: 'user1', crea ...

javascriptnode.jsexpress

Ensure that both the top row and leftmost column are fixed in a vertical header using JQuery DataTable

Check out the implementation of vertical header flow in Datatables by visiting: https://jsfiddle.net/2unr54zc/ While I have successfully fixed the columns on horizontal scroll, I'm facing difficulty in fixing the first two rows when vertically scroll ...

javascripthtmljquerycssdatatable

Implementing a Retrofit Null Response in the onSuccess Method

While watching a tutorial on Retrofit for sending objects in a post request on YouTube, I encountered an error on the emulator with a null response in the onResponse method. Problem: https://i.sstatic.net/t6mnw.gif Main Activity: public class MainActivi ...

javascriptjavaandroidnode.jsretrofit2

AngularJS special feature: enhance controllers and views by adding notification capabilities

What is the most efficient method for integrating common notification features into necessary controllers in AngularJS? The objective is to establish local notifications that can be effortlessly included or removed from any controller. Key factors includ ...

javascriptangularjsnotifications

Tips for retrieving element height using Vue.js

I am attempting to retrieve the offsetHeight of an element but I keep getting undefined. When I use this code, it returns an HTML collection and everything works correctly: document.getElementsByClassName("plyr--full-ui"); https://i.sstatic.net/xurBa.pn ...

javascriptvue.jsnuxt.jsoffsetheight

Using a function as a prop in Vue js to retrieve data from an API

I am facing an issue with a component that I want to decouple from the data fetching implementation. My goal is to be able to pass a data fetching callback as a prop. The reason for this is so that I can easily mock the data fetching process in storybook. ...

javascriptvue.jsstorybook

Creating a custom AngularJS HTTP interceptor that targets specific URLs

Is there a way to configure an $http interceptor to only respond to specific URL patterns? For example, I want the interceptor to only intercept requests that match "/api/*" and ignore any other requests. ...

javascriptangularjsangular-httpangular-http-interceptors

Using Javascript to Swap the Content of an Element

Recently, I've been delving into the world of javascript and have hit a roadblock. I understand how to instruct javascript to set a specific value for an ID, but now I have a new challenge: I want to create javascript code that can retrieve informati ...

javascripthtml

"Learn how to showcase a picture in full-screen mode when the webpage is opened

I recently came across a script on Stack Overflow that allows me to select an image at random from an array. The script can be found here: Script to display an image selected at random from an array on page load However, I want to take this concept furthe ...

javascriptjqueryhtmlcss

The functionality of string replacement is ineffective in the Safari browser

When using the code "MM/DD/YYYY".replace(/.?YYYY.?/, ''); , Chrome displays MM/DD, while Safari shows an empty string. Why does this difference occur? Is there a method that will produce consistent results across all browsers? ...

javascriptstringreplacesafari

Experimenting with d3 using Node.js, JSDOM, and Jasmine

I am new to Javascript and node.js, and I want to test if a basic bar chart is being rendered in my node.js/d3 application using jasmine. Could someone provide guidance on what steps I need to take? test.js (file that needs testing): var d3 = require(&ap ...

javascriptnode.jsd3.jsjasmine

Encountering the error message "Cannot GET /" in a NodeJS Express

I've been experimenting with various approaches to resolve this issue, ranging from app.use(express.static(__dirname + "public")) to res.render. It seems to function correctly in my terminal environment but fails when I try to access it locally. Can a ...

javascripthtmlnode.jsexpress