THREE.js custom vr/cardboard effect

Question

I'm trying to create custom VR panorama viewer using THREE.js. I've managed to create:

• 2 scenes,
• 2 materials and meshes (different images loaded for left and right eye),
• renderer with scissors (2 perspective cameras).

The result looks like this:

Everything looks fine for me but I would like to add some kind of "black vr cardboard frame" to both cameras. I'm not quiet sure how this effect is called, but here is some example:

Can you please give me some tips?

Answer 1

That word you are looking for is "barrel distortion". You can see a working implementation of this in the WebVR-polyfill here. Depending on how good you understand raw webgl that might be a bit difficult to read though.

So here are the basic steps of a very versatile approach using two render-passes:

• that split-image you already have is rendered into a framebuffer (see here for an example) instead of rendering to screen. That framebuffer will be used as a texture in the second renderpass.
• setup another scene and another camera for the second renderpass. The camera should be an orthographic camera ranging from -1 to 1 on the x-axis (something like this).
• setup two meshes (based on a PlaneBufferGeometry) for the two viewports and assign the UV-coordinates such that the left mesh will use the left half of the framebuffer as its texture and the right mesh will use the right half.
• add the meshes to the second scene-instance, position them next to each other.
• apply the barrel-distortion to the vertices of the meshes. This is essentially what is done in the code from the WebVRPolyfill.
• render the second Scene to screen