Disparity shader?

A disparity image is basically a depthmap that’s calculated by comparing two stereoscopic images (one from the left and one from the right).

  • If there’s a big difference in movement between the two (disparity), it means that point is close to the viewer (light).
  • If there’s little movement, it means the point is far away (dark).

Here’s an example with both inputs and the resulting depthmap below:

I’ve seen lots of videos and images that show this kind of calculation but I haven’t seen any web-based examples that run on the browser. There are some cool implementations that are proprietary. Does anybody know of a WebGL or other open-source demo of this that I could look at so I could port to Three.js? I understand it’s a big request, but I just thought I’d ask if anybody knows of an example of this that I could use as a starting-off point.


Is the depth texture example the same as what you are describing?


Yes, it is somewhat the same. The depth texture created by Three.js is generated by the mesh geometry, as defined by the gl_Position output of the vertex shader. However, with stereoscopic imagery I don’t have geometry information, I just have two textures as input. So I’m trying to recreate a depth texture by comparing the disparities between two images.