Displaying RICOH THETA’s (360 degree camera) Dual fisheye video with Three.js

Helped translate this Japanese blog with good information on using Three.js to handle 360 degree video. It’s a link to the RICOH THETA Unofficial Guide, also a Discourse forum, that has lots of info for using the RICOH THETA open API and manipulating content. Adding here as a resource.

1 Like

Yep. I saw that article a while ago. Turned it into an example:

https://threejs.org/examples/#webgl_panorama_dualfisheye

Neither the original article nor my port is ideal thought. This should be done in the fragment shader instead so we can smooth out the sides.

Thanks for posting the example. Very useful to see it in action, including the sharp stitching lines, like you mention. Just curious, how’d you find the article originally? Do you read Japanese? Kind of cool that you connect into the Japanese community.

I tend to follow what people share on twitter. It was probably shared over there.

I do not read Japanese, but I do have one of those cameras so I quickly understood what the article was about :blush:

I really love that can-do attitude. Don’t let a little foreign language get in the way of learning. Very cool.

We translated another one, some similar topics, so adding the link here in the case it might be useful, or maybe you already ran into the Japanese version:

1 Like

Hi I have tested this against a demo video. I presume produced with the Theta or Samsung 360. There is an issue with the seam. It’s distorted at the seam.

How would it be possible to convert in the shader ? I have looked at some shader code for single sided fisheye. And it doesn’t seem to work either.

There is a possibly shader version which could utilised for single fisheye 180. But it’s very hard to convert from shadertoy.

The uv code here is not correct and the seams don’t line up.

https://www.shadertoy.com/view/ld2yzG