I am currently working on developing a WebVR environment using Three.js. I have exported some scenes from Cinema4D and successfully loaded them into my project using the Colladaloader functionality provided by Three.js. As I wanted to test this environment on Google Cardboard, I realized the need for a split-screen setup to enable viewing through both eyes.
To achieve the virtual reality effect required for VR devices like Cardboard, I utilized the npm module three-stereo-effect. However, when testing it with Cardboard, I noticed some overlapping issues. After researching further, I observed that many WebVR examples use rounded rectangles for each eye (see example) instead of straight rectangles, leading me to explore potential solutions through matrix manipulations (as seen in examples from this repository). Surprisingly, while playing a VR tunnel racing game, I discovered they were using straight rectangles for vision without any problems.
At this stage, I suspect that the eyeSeparation parameter in my stereo effect might be incorrect. I experimented with adjusting the eyeSeparation property within the StereoEffect module based on suggestions found online but felt uncertain about randomly choosing a value...
Am I heading in the right direction towards finding a solution? Or could there be another issue affecting the quality of the 3D scene when viewed through Google Cardboard?
Below is a snippet of the code I am currently working on:
// Inserted code snippet goes here