javascript - THREE.js custom vr/cardboard effect -

i'm trying create custom vr panorama viewer using three.js. i've managed create:

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

the result looks this:

everything looks fine me add kind of "black vr cardboard frame" both cameras. i'm not quiet sure how effect called, here example:

can please give me tips?

that word looking "barrel distortion". can see working implementation of in webvr-polyfill here. depending on how understand raw webgl might bit difficult read though.

so here basic steps of versatile approach using 2 render-passes:

• that split-image have rendered framebuffer (see here example) instead of rendering screen. framebuffer used texture in second renderpass.
• setup scene , camera second renderpass. camera should orthographic camera ranging -1 1 on x-axis (something like this).
• setup 2 meshes (based on planebuffergeometry) 2 viewports , assign uv-coordinates such left mesh use left half of framebuffer texture , right mesh use right half.
• add meshes second scene-instance, position them next each other.
• apply barrel-distortion vertices of meshes. done in code webvrpolyfill.
• render second scene screen