Search code examples
javascriptthree.jsgoogle-vrperspectivecamera

THREE.js custom vr/cardboard effect

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: enter image description here

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:

enter image description here

Can you please give me some tips?

Solution

  • 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