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.
It comes with some common useful classes like:
- Scene and SceneNode
- Camera
- Renderer
- ParticleEmissor
And because it uses litegl you have all the basic ones (Mesh, Shader and Texture).
Check the examples folder to see the examples, or visit this website.
There is a boilerplate to create an application in the folder boilerlate/
Include the library and dependencies
<script src="js/gl-matrix-min.js"></script>
<script src="js/litegl.js"></script>
<script src="js/rendeer.js"></script>Create the scene
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) { ... }Set 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] );Create and register mesh
var cube = GL.Mesh.cube({size:5});
renderer.meshes["cube"] = cube;load and register texture
var texture = GL.Texture.fromURL("mytexture.png", { minFilter: gl.LINEAR_MIPMAP_LINEAR, magFilter: gl.LINEAR });
renderer.textures["mytexture.png"] = texture;Compile and register shader
var shader = new GL.Shader(vs_code, fs_code);
renderer.shaders["phong"] = shader;Add a node to the scene
var node = new RD.SceneNode();
node.color = [1,0,0,1];
node.mesh = "cube";
node.texture = "mytexture.jpg";
node.shader = "phong";
node.position = [0,0,0];
node.scale([10,10,10]);
scene.addChild(node);Create main loop
requestAnimationFrame(animate);
function animate() {
requestAnimationFrame( animate );
last = now;
now = getTime();
var dt = (now - last) * 0.001;
renderer.render(scene, camera);
scene.update(dt);
}The doc folder contains the documentation. For info about glMatrix check the documentation in its website.
It includes several commands in the utils folder to generate doc, check errors and build minifyed version.
You can write any feedback to [email protected]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent