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.