rendeer.js
rendeer.js is a lightweight scene graph library, meant to be used in web games. It is meant to be flexible and easy to tweak.
It used the library litegl.js as a low level layer for WebGL.
Some of the main features are:
- Do not generate garbage.
- Scene graph easy to use.
Download
You can download the full source code from GitHub, or use just the library using this link rendeer.js (compressed version)
Usage
Include the script
<script src="js/rendeer.full.min.js"></script>
Create the scene container
var scene = new RD.Scene();
Create the renderer
var context = GL.create({width: window.innerWidth, height:window.innerHeight}); var renderer = new RD.Renderer(context);
Attach to DOM
document.body.appendChild(renderer.canvas);
Get user input
gl.captureMouse(); renderer.context.onmousedown = function(e) { ... } renderer.context.onmousemove = function(e) { ... } gl.captureKeys(); renderer.context.onkey = function(e) { ... }
Create camera
var camera = new RD.Camera(); camera.perspective( 45, gl.canvas.width / gl.canvas.height, 1, 1000 ); camera.lookAt( [100,100,100],[0,0,0],[0,1,0] );
Add scene node
var box = new RD.SceneNode(); box.color = [1,0,0,1]; box.mesh = "cube"; box.position = [0,0,0]; box.scale([10,10,10]); scene.root.addChild(box);
Create main loop
var now = getTime(); requestAnimationFrame(animate); function animate() { requestAnimationFrame( animate ); last = now; now = getTime(); var dt = (now - last) * 0.001; renderer.render(scene, camera); scene.update(dt); }
Examples
Some basic examples can be found here.
Documentation
Click here to read the documentation, it is automatically generated using yui, and can be located in the doc folder.
Check also the gl-matrix documentation to a better understanding of how to operate with matrices and vectors.