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

    regl-stereopublic

    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

    install

    npm i regl-stereo

    Downloadslast 7 days

    1

    version

    1.0.0

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar