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.

2 Likes

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

https://threejs.org/examples/?q=Depth#webgl_depth_texture

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.

2 Likes