regl-project / Regl Camera
Licence: mit
A camera for regl
Stars: ✭ 43
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Regl Camera
3d kibana charts vis
3D Kibana Charts: Pie Chart, Bars Chart, Bubbles Chart
Stars: ✭ 34 (-20.93%)
Mutual labels: webgl
Unitystandalonefilebrowser
A native file browser for unity standalone platforms
Stars: ✭ 1,002 (+2230.23%)
Mutual labels: webgl
3d Box Shot Maker
Free tool to generate 3D box shots for your online products.
Stars: ✭ 20 (-53.49%)
Mutual labels: webgl
G3d
A pure 3D render engine compatible with webgl, running both in browser and gcanvas.
Stars: ✭ 948 (+2104.65%)
Mutual labels: webgl
Mapbox Gl Js
Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
Stars: ✭ 8,017 (+18544.19%)
Mutual labels: webgl
Playcanvas Spine
Plugin component for PlayCanvas which enables support for Spine animations.
Stars: ✭ 32 (-25.58%)
Mutual labels: webgl
Phaser
Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.
Stars: ✭ 30,918 (+71802.33%)
Mutual labels: webgl
Awesome Creative Coding
Creative Coding: Generative Art, Data visualization, Interaction Design, Resources.
Stars: ✭ 8,696 (+20123.26%)
Mutual labels: webgl
Three.js Pathtracing Renderer
Real-time PathTracing with global illumination and progressive rendering, all on top of the Three.js WebGL framework. Click here for Live Demo: https://erichlof.github.io/THREE.js-PathTracing-Renderer/Geometry_Showcase.html
Stars: ✭ 872 (+1927.91%)
Mutual labels: webgl
Encom Globe
🌎 WebGL globe based on the boardroom scene from Tron: Legacy
Stars: ✭ 872 (+1927.91%)
Mutual labels: webgl
Infinite Webl Gallery
Infinite Auto-Scrolling Gallery using WebGL and GLSL Shaders.
Stars: ✭ 42 (-2.33%)
Mutual labels: webgl
Langterm
🕹️ WebGL-based VT220 emulator, made as a learning example and frontend for a text adventure
Stars: ✭ 35 (-18.6%)
Mutual labels: webgl
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 toMath.PI / 4
) -
near
is the near clipping plane in z (defaults to0.01
) -
far
is the far clipping plane in z (defaults to1000.0
) -
mouse
set tofalse
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 settingcamer.dirty = true
. If false, dirty state can still be detected and used throughcontext.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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].