We’ve been experimenting with rendering dual-fisheye 360° video with three.js using the technique found here: https://threejs.org/examples/#webgl_panorama_dualfisheye

The issue is that the seam is sharp. Is there a technique to add blending to this? (without using two separate meshes) There is generally 10% of each circular image that can be used for overlap.

You can see our example here: https://pop.movie/?movie=1553874110469



A frame of dual-fisheye 360° video.


Just make the hemispheres overlap by the 10% you mention, and then add an Alpha Map to your material.

@ marquizzo

We require a solution using a single mesh - which is why we stated “without using two separate meshes”.

Ah, I see. I don’t think the library has a built-in method to do exactly what you need. You’ll probably need to write your own custom shader to get that behavior.

Yes, this is what we suspected.

Have you looked into this?

@ mrdoob

Yes, we’ve looked into the various methods of converting the dual-fisheye to equirectangular. Both formats have their own particular benefits and drawbacks. In some cases, such as streaming time-critical events, the dual-fisheye format is actually preferred as the goal is to push out the content as fast as possible. In this case, we rely on the viewing software to stitch the spherical environment on-the-fly.

All we’re missing is a method to add some additional blending to the seam.

For this, we’re now looking into custom shaders.

1 Like