Camera for regl


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


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]})


npm i regl-camera



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

module.exportsof regl-camerais a constructor for the camera. It takes the following arguments:

  • reglis a handle to the regl instance
  • optionsis an object with the following optional properties:
    • centerwhich is the center of the camera
    • thetathe theta angle for the camera
    • phithe phi angle for the camera
    • distancethe distance from the camera eye to the center
    • upis the up vector for the camera
    • fovyis the field of view angle in y direction (defaults to Math.PI / 4)
    • nearis the near clipping plane in z (defaults to 0.01)
    • faris the far clipping plane in z (defaults to 1000.0)
    • mouseset to falseto turn off mouse events
    • dampingmultiplier for inertial damping (default 0.9). Set to 0 to disable inertia.
    • noScrollboolean flag to prevent mouse wheel from scrolling the whole window. Default is false.
    • elementis an optional DOM element for mouse events (defaults to regl canvas element)
    • rotationSpeedthe rotation interactions (default: 1)
    • zoomSpeedthe zoom interactions (default: 1)
    • renderOnDirtyboolean 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


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

viewmat4The view matrix for the camera
projectionmat4The projection matrix for the camera
centervec3The center of the camera
eyevec3The eye coordinates of the camera
upvec3The up vector for the camera matrix
thetafloatLatitude angle parameter in radians
phifloatLongitude angle parameter in radians
distancefloatDistance from camera to center of objective
dirtybooleanFlag set to true when camera state has changed

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


(c) 2016 Mikola Lysenko. MIT License






  • 使用react-native-camera实现react-native的拍照功能

    安装以及配置 官方文档 注:请确保RN版本>0.60 针对ios window系统开发app无需配置,因为ios app只能使用苹果电脑开发 安装 配置 应用添加权限和使用说明ios...

    3 个月前
  • winreglib

    Windows Registry Utility Library Windows Registry Utility Library A library for querying and watc...

    9 个月前
  • turntable-camera-controller

    Turn table camera controller turntablecameracontroller A low level camera controller, supports sa...

    1 年前
  • turbo-camera

    Camera with two options: upload from libray and take picture. turbocamera CDN by jsDeli...

    1 年前
  • regl-splom

    Scatterplot matrix for 2d plots reglsplom Matrix of scatter plots. A wrapper over reglscatter2d...

    2 个月前
  • regl-scatter2d

    Scatter2d plot built with regl reglscatter2d unstable(

    2 个月前
  • regl-line2d

    Draw polyline with regl reglline2d experimental(

    2 个月前
  • regl-error2d

    Render error bars for the set of points reglerror2d experimental(

    2 个月前
  • regl

    regl is a fast functional WebGL framework. 👑 regl Fast functional WebGL API St...

    2 年前
  • react-native-camera-roll-picker

    A React Native component providing images selection from camera roll version(https://img.shields....

    5 个月前


扫码加入 JavaScript 社区