regl-camera

A basic reusable "turntable" camera component for regl. (Secretly just spherical coordinates.)

Example

const regl = require('regl')()
const camera = require('regl-camera')(regl, {
  center: [0, 2.5, 0]
})

const bunny = require('bunny')
const normals = require('angle-normals')

const drawBunny = regl({
  frag: `
    precision mediump float;
    varying vec3 vnormal;
    void main () {
      gl_FragColor = vec4(abs(vnormal), 1.0);
    }`,
  vert: `
    precision mediump float;
    uniform mat4 projection, view;
    attribute vec3 position, normal;
    varying vec3 vnormal;
    void main () {
      vnormal = normal;
      gl_Position = projection * view * vec4(position, 1.0);
    }`,
  attributes: {
    position: bunny.positions,
    normal: normals(bunny.cells, bunny.positions)
  },
  elements: bunny.cells
})

regl.frame(() => {
  camera((state) => {
    if (!state.dirty) return;
    regl.clear({color: [0, 0, 0, 1]})
    drawBunny()
  })
})

Install

npm i regl-camera

API

Constructor

var camera = require('regl-camera')(regl[, options])

module.exports of regl-camera is a constructor for the camera. It takes the following arguments:

• regl is a handle to the regl instance
• options is an object with the following optional properties:
  • center which is the center of the camera
  • theta the theta angle for the camera
  • phi the phi angle for the camera
  • distance the distance from the camera eye to the center
  • up is the up vector for the camera
  • fovy is the field of view angle in y direction (defaults to Math.PI / 4)
  • near is the near clipping plane in z (defaults to 0.01)
  • far is the far clipping plane in z (defaults to 1000.0)
  • mouse set to false to turn off mouse events
  • damping multiplier for inertial damping (default 0.9). Set to 0 to disable inertia.
  • noScroll boolean flag to prevent mouse wheel from scrolling the whole window. Default is false.
  • element is an optional DOM element for mouse events (defaults to regl canvas element)
  • rotationSpeed the rotation interactions (default: 1)
  • zoomSpeed the zoom interactions (default: 1)
  • renderOnDirty boolean flag to control whether scene is only rendered when the camera state has changed. If true, render can be triggerd at any time by setting camer.dirty = true. If false, dirty state can still be detected and used through context.dirty.

Command usage

camera(block)

regl-camera sets up an environment with the following variables in both the context and uniform blocks:

| Variable | Type | Description | |----------|------|-------------| | view | mat4 | The view matrix for the camera | | projection | mat4 | The projection matrix for the camera | | center | vec3 | The center of the camera | | eye | vec3 | The eye coordinates of the camera | | up | vec3 | The up vector for the camera matrix | | theta | float | Latitude angle parameter in radians | | phi | float | Longitude angle parameter in radians | | distance | float | Distance from camera to center of objective | | dirty | boolean | Flag set to true when camera state has changed |

Note These properties can also be accessed and modified directly by accessing the object, though at the moment you will need to manually set camera.dirty = true if relying upon renderOnDirty

License

(c) 2016 Mikola Lysenko. MIT License