CODEWITHSUNDEEP
javascriptthree.jsgoogle-vrperspectivecamera
Wojciech Jasiński
Wojciech Jasiński

Reputation: 1490

THREE.js custom vr/cardboard effect

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

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?

Upvotes: 0

Views: 2026

Answers (1)

Martin Schuhfuß
Martin Schuhfuß

Reputation: 6986

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

Upvotes: 3

Related Questions