title: Is there a way to get the depth values using WebGL and Three.js?
body: <p>I am trying to get the depth values of each pixel in the canvas element. Is there a way to find these depth values using WebGL and Three.js?</p>
  
  <p>What I majorly want is that for eg. in the image below, the red background should have 0 as the depth value whereas the 3D model should have the depth values based on the distance from the camera. </p>
  
  <p>Using the X,Y coordinates of the canvas, is there a method to access the depth values?</p>
  
  <p><img src="https://i.stack.imgur.com/rBEvi.png" alt="Image of my current scene"></p>
  
  <p><strong>[Edit 1]</strong>: Adding more information</p>
  
  <p>I pick three random points as shown below, then I ask the user to input the depth values for each of these points. Once the input is received from the user, I will compute the difference between the depth values in three.js and the values inputted from the user.</p>
  
  <p>Basically, I would require a 2D array of the canvas size where each pixel corresponds to an array value. This 2D array must contain the value 0 if the pixel is a red background, or contain the depth value if the pixel contains the 3D model.</p>
  
  <p><img src="https://i.stack.imgur.com/sWECz.png" alt="enter image description here"></p>