├── .gitignore ├── .npmignore ├── LICENSE.md ├── README.md ├── demo.frag ├── demo.js ├── demo.vert ├── index.html ├── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | .DS_Store 4 | bundle.js 5 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | .DS_Store 4 | bundle.js 5 | test 6 | test.js 7 | demo 8 | example 9 | .npmignore -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | ===================== 3 | 4 | Copyright (c) 2014 [stackgl](http://github.com/stackgl/) contributors 5 | 6 | *stackgl contributors listed at * 7 | 8 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 11 | 12 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # lookat-camera 2 | 3 | [![stable](http://badges.github.io/stability-badges/dist/stable.svg)](http://github.com/badges/stability-badges) 4 | 5 | Simple "lookat" camera abstraction built on top of 6 | [gl-matrix](http://github.com/toji/gl-matrix). 7 | 8 | ## Usage 9 | 10 | [![NPM](https://nodei.co/npm/lookat-camera.png)](https://nodei.co/npm/lookat-camera/) 11 | 12 | See [demo.js](./demo.js) for a usage example. 13 | 14 | ### `camera = require('lookat-camera')()` 15 | 16 | Creates a new camera instance. 17 | 18 | ### `view = camera.view([view])` 19 | 20 | Updates the view matrix based on the camera's current configuration and 21 | returns the result. Optionally, you may pass in your own `view` array to 22 | modify directly. 23 | 24 | ### `camera.position` 25 | 26 | `[x, y, z]` vector that determines the position of the camera in world space. 27 | 28 | ### `camera.target` 29 | 30 | `[x, y, z]` vector that determines the target of the camera in world space. 31 | 32 | ### `camera.up` 33 | 34 | Normalized `[x, y, z]` vector that determines the up direction of the camera. 35 | Generally you'll want this to be `[1, 0, 0]`, `[0, 1, 0]` or `[0, 0, 1]`. 36 | 37 | ## Contributing 38 | 39 | See [stackgl/contributing](https://github.com/stackgl/contributing) for details. 40 | 41 | ## License 42 | 43 | MIT. See [LICENSE.md](http://github.com/stackgl/lookat-camera/blob/master/LICENSE.md) for details. 44 | -------------------------------------------------------------------------------- /demo.frag: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | varying vec3 vNormal; 4 | 5 | void main() { 6 | gl_FragColor = vec4(abs(vNormal), 1.0); 7 | } 8 | -------------------------------------------------------------------------------- /demo.js: -------------------------------------------------------------------------------- 1 | var Geometry = require('gl-geometry') 2 | var fit = require('canvas-fit') 3 | var Shader = require('gl-shader') 4 | var mat4 = require('gl-mat4') 5 | var normals = require('normals') 6 | var glslify = require('glslify') 7 | var bunny = require('bunny') 8 | 9 | var canvas = document.body.appendChild(document.createElement('canvas')) 10 | var gl = require('gl-context')(canvas, render) 11 | var camera = require('./')() 12 | 13 | window.addEventListener('resize' 14 | , fit(canvas) 15 | , false 16 | ) 17 | 18 | var geometry = Geometry(gl) 19 | 20 | geometry.attr('aPosition', bunny.positions) 21 | geometry.attr('aNormal', normals.vertexNormals( 22 | bunny.cells 23 | , bunny.positions 24 | )) 25 | 26 | geometry.faces(bunny.cells) 27 | 28 | var projection = mat4.create() 29 | var model = mat4.create() 30 | var view = mat4.create() 31 | var height 32 | var width 33 | 34 | var shader = Shader(gl 35 | , glslify('./demo.vert') 36 | , glslify('./demo.frag') 37 | ) 38 | 39 | function update() { 40 | width = gl.drawingBufferWidth 41 | height = gl.drawingBufferHeight 42 | 43 | camera.position[0] = 10 * Math.cos(Date.now() / 1000) 44 | camera.position[1] = 20 * Math.sin(Date.now() / 1000) + 10 45 | camera.view(view) 46 | 47 | var aspectRatio = gl.drawingBufferWidth / gl.drawingBufferHeight 48 | var fieldOfView = Math.PI / 4 49 | var near = 0.01 50 | var far = 100 51 | 52 | mat4.perspective(projection, fieldOfView, aspectRatio, near, far) 53 | } 54 | 55 | function render() { 56 | update() 57 | 58 | gl.viewport(0, 0, width, height) 59 | gl.enable(gl.DEPTH_TEST) 60 | gl.enable(gl.CULL_FACE) 61 | geometry.bind(shader) 62 | 63 | shader.uniforms.uProjection = projection 64 | shader.uniforms.uView = view 65 | shader.uniforms.uModel = model 66 | 67 | geometry.draw(gl.TRIANGLES) 68 | } 69 | -------------------------------------------------------------------------------- /demo.vert: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | attribute vec3 aPosition; 4 | attribute vec3 aNormal; 5 | 6 | varying vec3 vNormal; 7 | 8 | uniform mat4 uProjection; 9 | uniform mat4 uModel; 10 | uniform mat4 uView; 11 | 12 | void main() { 13 | vNormal = aNormal; 14 | gl_Position = uProjection * uView * uModel * vec4(aPosition, 1.0); 15 | } 16 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | stackgl/lookat-camera 6 | 7 | 52 | 53 | 54 |
55 |

lookat-camera

56 |

57 | Simple "lookat" camera abstraction built on top of 58 | gl-matrix. 59 |

60 |

61 | 62 | Check it out on GitHub 63 | 64 |

65 |
66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var lookAt = require('gl-mat4/lookAt') 2 | 3 | module.exports = Camera 4 | 5 | function Camera() { 6 | if (!(this instanceof Camera)) 7 | return new Camera 8 | 9 | this.target = new Float32Array([0, 0, 0]) 10 | this.position = new Float32Array([0, 5, 10]) 11 | this.up = new Float32Array([0, 1, 0]) 12 | } 13 | 14 | var scratch = new Float32Array(16) 15 | 16 | Camera.prototype.view = function(view) { 17 | view = view || scratch 18 | 19 | lookAt(view, this.position, this.target, this.up) 20 | 21 | return view 22 | } 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lookat-camera", 3 | "version": "1.0.0", 4 | "description": "Simple \"lookat\" camera abstraction built on top of gl-matrix", 5 | "main": "index.js", 6 | "license": "MIT", 7 | "scripts": { 8 | "start": "budo demo.js:bundle.js --transform glslify | garnish", 9 | "bundle": "browserify demo.js -t glslify -o bundle.js" 10 | }, 11 | "author": { 12 | "name": "Hugh Kennedy", 13 | "email": "hughskennedy@gmail.com", 14 | "url": "http://hughsk.io/" 15 | }, 16 | "dependencies": { 17 | "gl-mat4": "^1.1.4" 18 | }, 19 | "devDependencies": { 20 | "browserify": "^10.2.4", 21 | "bunny": "^1.0.1", 22 | "canvas-fit": "^1.4.0", 23 | "garnish": "^2.1.3", 24 | "gl-context": "^0.1.1", 25 | "gl-geometry": "^1.1.1", 26 | "gl-shader": "^4.0.4", 27 | "glslify": "^2.1.2", 28 | "normals": "^1.0.1" 29 | }, 30 | "repository": { 31 | "type": "git", 32 | "url": "git://github.com/stackgl/lookat-camera.git" 33 | }, 34 | "keywords": [ 35 | "ecosystem:stackgl" 36 | ], 37 | "homepage": "https://github.com/stackgl/lookat-camera", 38 | "bugs": { 39 | "url": "https://github.com/stackgl/lookat-camera/issues" 40 | } 41 | } 42 | --------------------------------------------------------------------------------