In developing my application with Three.js, I utilized the StereoEffect and created 3 scenes for overlaying by clearing renderer depth. However, I now need to switch to VREffect for better compatibility with headsets like Gear VR using WebVR Polyfill.
Below are snippets of the code setup:
const renderer = new THREE.WebGLRenderer({antialias: false})
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.autoClear = false;
document.body.appendChild(renderer.domElement)
effect = new THREE.VREffect(renderer)
effect.separation = 0
effect.setSize(window.innerWidth, window.innerHeight)
let vrDisplay
navigator.getVRDisplays().then(displays => {
if (displays.length > 0)
vrDisplay = displays[0]
})
// Add button to enable VR mode (display stereo)
const vrButton = VRSamplesUtil.addButton("Enter VR", "E", "/vr/cardboard64.png", () => {
vrDisplay.requestPresent([{source: renderer.domElement}])
})
... Remaining code ...
Within my animation loop:
renderer.clear()
effect.render(scene, camera)
renderer.clearDepth()
effect.render(scene2, camera)
effect.render(scene3, camera)
However, this method does not seem to work when utilizing VREffect. It works fine in desktop view mode but is not rendering properly in VR mode. The canvas appears pitch black, except for elements in scene3.
When I remove scene2 and scene3 from rendering, everything in the first scene is displayed correctly.
I have examined the VREffect and StereoEffect code but cannot determine what is causing my changes to be ineffective.
Any assistance or hints would be greatly appreciated.