node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

regl-stereo

regl-stereo

A simple side-by-side stereo renderer for regl.

Example

const regl = require('regl')({
  pixelRatio: 1
})
const stereo = require('regl-stereo')({regl})
const normals = require('angle-normals')
const bunny = require('bunny')
const mat4 = require('gl-mat4')
 
const drawMesh = regl({
  vert: `
  precision highp float;
 
  attribute vec3 position, normals;
  uniform mat4 projection, view, model;
 
  varying vec3 fragColor;
 
  void main () {
    vec3 color = normals;
    float minC = min(min(color.x, color.y), color.z);
    float maxC = max(max(color.x, color.y), color.z);
    fragColor = (color - minC) / (maxC - minC);
    gl_Position = projection * view * model * vec4(position, 1);
  }
  `,
 
  frag: `
  precision highp float;
 
  varying vec3 fragColor;
 
  void main () {
    gl_FragColor = vec4(fragColor, 1);
  }
  `,
 
  attributes: {
    position: bunny.positions,
    normals: normals(bunny.cells, bunny.positions)
  },
 
  elements: bunny.cells,
 
  uniforms: {
    model: ({tick}) =>
      mat4.rotateY(
        mat4.create(),
        mat4.identity(mat4.create()),
        0.01 * tick),
    view: ({tick}) =>
      mat4.lookAt(
        mat4.create(),
        [0, 2.5, -(20.0 + 10.0 * Math.cos(0.01 * tick))],
        [0, 2.5, 0],
        [0, 1, 0])
  }
})
 
regl.frame(() => {
  regl.clear({
    color: [0, 0, 0, 1],
    depth: 1
  })
 
  stereo({
    zNear: 0.25,
    zFar: 1000.0,
    separation: 0.5
  }, () => {
    drawMesh()
  })
})
 

API

const stereo = require('regl-stereo')(options)

Creates a new stereo camera. options has the following parameters:

  • regl is a reference to the regl context

Returns A new stereo renderer

stereo(props, block)

Renders a stereo view with the given properties. block is a command that draws the scene.

props has the following arguments:

  • sepration is the eye separation distance
  • fov is the fov of the projection matrix
  • zNear is the near clip plane distance
  • zFar is the far clip plane distance

This sets the viewport, scissor box and projection matrix uniform.

License

(c) 2016 Mikola Lysenko. MIT License