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.
- 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.
- Materials take a vertex and fragment shader and define
uniforms
andattributes
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 ofBasicMaterial
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/.
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();
MIT License, Copyright (c) 2017 Jordan Santell