- Insta360 Air is a nice omni-directional camera, which connects to pc directly via usb.
- lower latency than Ricoh Theta S, Theta V, Ricoh R.
- hight resolution than Ricoh Theta S, when using live streaming.
- very small body.
- To see Insta360 Air image in HMD, we need to project the raw double spherical image to equirectangular image. And, In my case, I wanted to steam the video via WebRTC and see it on WebVR on a browser.
- So, I implemented GLSL Shader to map double spherical raw image of Insta360 Air to Equirectangular.
- on Three.js.
- And, for my lesson, I used Webpack and Typescript as development tools.
- Luckily, Three.js officially started to supports typescript.
- Original Shader Code is written by @Stereoarts. That is originally for Ricoh THETA S and Unity.
- And @hammmm customed it for Insta360 Air.
- My work is translated them to GLSL shader.
> npm i # install modules (webpack, typescript and so on.)
> npm run build # webpack
- Conect Insta360 Air to your PC.
- Use some webserver.
- In my case, I use LiveServer on Visual Studio Code.
- Now, we need to use HTTPS webserver to use webrtc.
- And access
https://<Address>:<Port>/dist
- dat.GUI on the top-right corner, you can tweek the parameter to stitch.
- press
save
to save the parameters on localStorage.