mini-webgl

Mini toy WebGL library

For educational purposes. Do not use this library. This is a barebones, unoptimized abstraction around WebGL. API ideas inspired by THREE.js.

What and How it Works

• Basic rendering of a scene graph with perspective camera.
• Models are represented by a geometry and material, updating position/rotation/scale when local coordinates change.
• Barebones Math library for managing Vector and Matrix types and track if dirty to minimize rebuilding matrices. Mostly a wrapper around glMatrix.
• Geometries have a vertex buffer, and optionally an indices buffer.
  • Implemented: Triangle, Cube
• Materials take a vertex and fragment shader and define uniforms and attributes properties that can be updated and pushed to the GPU. Uniforms/attribs are initialized by readingInstances have their own uniform/attribute values, but reuse the same program if it can (based on vertex/fragment shader source), so for example, all instances of BasicMaterial use the same underlying WebGLProgram.
  • Implemented: BasicMaterial
• The scene's renderer queues up the scene graph's nodes and passes it to the GLWrapper which manages all the WebGL calls, so all the API abstractions of models and materials are in src/, and translating that abstraction to WebGL lives in src/webgl/.

Example

• triangle animations

Example Code

  var scene = new MiniWebGL.Scene(canvas);
  var camera = new MiniWebGL.Camera();
  var cube = new MiniWebGL.Model(
    new MiniWebGL.Cube(),
    new MiniWebGL.BasicMaterial()
  );

  scene.useCamera(camera);
  cube.position.set(0, 0.5, -3);
  cube.scale.set(0.5, 0.5, 0.5);
  scene.add(cube);

  var t, x, y, z = 0;
  function tick () {
    t = performance.now();
    x = Math.cos(t * 0.001) + Math.PI;
    y = Math.sin(t * 0.001) + Math.PI;
    cube.rotation.set(x, y, z);
    cube.material.uniforms.color.setX(Math.abs(Math.sin(t * 0.001)));
    scene.render();
    requestAnimationFrame(tick);
  }
  tick();

License

MIT License, Copyright (c) 2017 Jordan Santell