Deciphering the RGB depth data in three.js

Currently, I am working on implementing a basic GPU picker in three.js by using the MeshDepthMaterial. I have successfully extracted the color value by referring to this example code snippet: https://github.com/mrdoob/three.js/blob/master/examples/webgl_interactive_cubes_gpu.html

To reconstruct the depth, I have translated the unpackRGBAToDepth function from this location into JavaScript: https://github.com/mrdoob/three.js/blob/acdda10d5896aa10abdf33e971951dbf7bd8f074/src/renderers/shaders/ShaderChunk/packing.glsl

The issue arises when the retrieved value appears as a float ranging from 0.0 to 255.0 instead of the expected range of 0.0 to 1.0 or the actual depth value. My inquiry is to understand how I can utilize this value, and whether it can be converted to represent the real depth accurately. If so, what would be the process to achieve this conversion?

javascriptthree.jspicking

Answer №1

Having encountered this issue myself (most likely by piecing together code snippets from various sources in three.js), I believe I may have identified the root cause.

When reading data from the RGBA-Texture in JavaScript, the color values are returned in Uint8 format, whereas in GLSL (where the calculations were probably borrowed from) the texture lookups yield rgba-float values.

Therefore, it is necessary to multiply the color vector by 1 / 255 before extracting the values:

// ...

renderer.readRenderTargetPixels(
depthRenderTarget, x, y, 1, 1, pixelBuffer);

vec4
.fromArray(pixelBuffer)
.multiplyScalar(1/255);

var logz = vec4.dot(unPackFactors);

// ...

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

Updating Content Dynamically with AJAX, JavaScript, and PHP without requiring a page reload or user action

Currently, I'm delving into the world of JS/AJAX functions that operate without the need for a page refresh or button click. However, I've encountered an issue when trying to echo the value. Oddly enough, when I change this line $email = $_POST ...

phpjavascriptjqueryhtmlajax

Initial function call to modify the state does not result in any field updates

As I delve into integrating GraphQL with a React web application for testing and educational purposes, I am humbly admitting to being a newbie in this domain. To provide a brief overview, I am working on a book library application, where we have a compila ...

javascriptreactjsgraphqljsx

pm2 doesn't play well with node dotenv

In my current project, I'm faced with an interesting issue. When running the application locally without pm2, all the environment variables in the .env file are properly recognized using dotenv. However, when deploying the app on a server and using p ...

javascriptnode.js

Scroll horizontally based on mouse movement

My angular directive that enables me to choose the content of table cells is performing as expected. However, I encountered an issue when attempting to select multiple cells at once - the scrollbar does not move, hindering my ability to select the cells. ...

javascriptcssangular

Utilize angularjs daterangepicker to refine and sift through data

I am currently utilizing the ng-bs-daterangepicker plugin by ng-bs-daterangepicker and encountering difficulty in filtering when selecting a start date and end date. Below is a snippet of my code: <input type="daterange" ng-model="dates" ranges="range ...

javascriptangularjs

How can I implement a search box on my HTML website without relying on Google Custom Search?

Greetings to all! I am currently managing a website filled with HTML content. I am looking to incorporate a search box into the site. After researching on Google, most of the results point towards using Google Custom Search. However, I require a search box ...

javascripthtmlcss

"Discrepancy in results between JSON stringify and JavaScript object conversion

I need to save this object in a database, but first I have to send it to the backend. Recorder {config: Object, recording: false, callbacks: Object, context: AudioContext, node: ScriptProcessorNode…} However, after using JSON.stringify(recorder) The r ...

javascriptjson

Mastering Dropdown Navigation and Value Setting in Angular

I am facing a challenge with two components named ComponentA and ComponentB. In ComponentB, there is a link that, when clicked, should navigate to ComponentA and send specific data to it. This data needs to be displayed in the dropdown options of Component ...

javascriptangulartypescript

updating the count of items in a react virtual list

Popular libraries such as react-virtualized, react-window, and react-virtuoso all include an item count property similar to the one shown in the code snippet below from material-ui. However, this property is typically located within the return statement. ...

javascriptreactjsmaterial-ui

JS seems to kick in only after a couple of page refreshes

I'm facing an issue with my 3 columns that should have equal heights. I've implemented some JavaScript to achieve this, which you can see in action through the DEMO link below. <script> $(document).foundation(); </script> <scri ...

javascriptcssloadingmultiple-columns

passing a dynamic PHP variable to an Ajax request

I'm trying to implement a comments section using a modal, but I need to pass a unique id along with #display_comment. It works when I hard code it as #display_comment1 or #display_comment2, but I want to be able to pass the value as a variable. I&apo ...

javascriptphpajax

After an AJAX request, the URL is automatically updated with $_GET parameters

I have the following code snippet: $('#loginnow').click(function() { var login_useroremail = $('input[name="login_useroremail"]').val(); var login_password = $('input[name="login_password"]').val(); $.ajax ...

javascriptphpjqueryjquery-mobilephptal

Leveraging ajax/jquery for sending the stripe.js token to django backend

I am new to integrating payment processing into my Django application using Stripe. Currently, I have set up dj-stripe to handle customers and plans, but I want to use stripe.js to generate a token for securely collecting card information. I prefer not to ...

javascriptjquerypythondjangostripe-payments

Is there a way to identify the duplicated input element values using jquery?

Just starting out in the world of web development and jQuery. I have an input element that has been bound with a blur event. Here's the code snippet: // Here are my input elements: <input class="input_name" value="bert" /> <input class="inp ...

javascriptjquery

Utilizing AJAX to integrate the Google Maps Direction API

Currently, I am developing a small website that utilizes the Google Maps API and AJAX to load directions based on selected locations from a dropdown menu. The database stores latitude and longitude coordinates of various locations, which are retrieved via ...

javascriptajaxmaps

An error occurred while trying to import a module due to an unexpected token

Take a look at this codepen link I encountered an error (line 10 in index.vue) with the following import: import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js"; Any idea what could be causing this issue? All other ...

javascriptvue.jsthree.jsnuxt.js

Switching styles using Vue Js, extracting all properties from the component

In my index.php file, I have a side-nav component structured like this: <div class="container"> <side-nav></side-nav> </div> The SideNav.vue file contains the following structure: <template> <div class="container"> ...

javascriptvue.jsvuejs2vue-component

When attempting to search and parse input text using a code replication technique, a console error is generated

Trying to extract the answer from this question's comment. The current code is displayed below, but struggling with removing the Dealing with an Unexpected token } error in Chrome console. Any ideas on how to fix this? Also looking for a Chrome pl ...

javascriptjqueryparse-platform

What is the best method to eliminate elements from a queue using JavaScript?

I recently attempted to incorporate a queue feature into my JavaScript code. I found some helpful information on this website. While I successfully managed to add items to the queue, I faced difficulties when attempting to remove items from it. var queue ...

javascriptjquerystackqueue

The occurrence of the "contextmenu" event can cause disruption to the execution of a function triggered by the "onmousemove" event

Currently in the process of developing a Vue application utilizing a Pinia store system. Within my BoxView.vue component, I have created a grid layout with draggable elements that have flip functionality implemented within the BoxItem.vue component. Spec ...

javascriptvue.jsdom-eventsmouseeventpinia