RoostR.js

An open source WebGL 3D engine written in TypeScript.
To help you develop HTML5 / WebGL apps for desktop and mobile browsers.

About

The purpose of this library is to provide a simple and easy to use 3D engine.

Check Examples and Code section for more information on how to use RoostR.js.
There is also a documentation if you need to go deeper.

You can help develop RoostR.js on Github.

Example

 000.00
00 fps

Code

Javascript

Initialize engine

function init() {
  renderer = new Roostr.Renderer('canvas');
  scene = new Roostr.Scene(renderer.getContext());
  
  mesh = new Roostr.Mesh( new Roostr.Cube(), renderer.getContext() );
  var material = new Roostr.Material();
  //compile shader
  mesh.addProgram(  assetsLoader.getAsset('flat-shading_vert.glsl').asset.response,
                    assetsLoader.getAsset('flat-shading_frag.glsl').asset.response,
                    material
                  );
  
  scene.addMesh(mesh);
  
  camera = new Roostr.PerspectiveCamera( 45, 0.1, 1000, renderer.getContext() );
  camera.setPosition(0.0,0.0,12.0);

  render(0);
}

Animate

function animate(){
  renderer.clearFrame();
  render(animation.getTotal());
  animation.requestNewFrame();
}

function render(time){
  var rot = rotationSpeed * time;
  mesh.modelMatrix.rotateX(rot);
  mesh.rotationMatrix.rotateY(rot);
  mesh.modelMatrix.multiply(mesh.rotationMatrix);
  mesh.rotationMatrix.rotateZ(rot);
  mesh.modelMatrix.multiply(mesh.rotationMatrix);
  scene.render(camera,time);
}

Contact me

Feel free to ask me about my work, give me suggestions, or just to say hi.