https://github.com/jsantell/mini-webgl

Mini toy WebGL library
https://github.com/jsantell/mini-webgl

Last synced: 2 months ago
JSON representation

Mini toy WebGL library

• Host: GitHub
• URL: https://github.com/jsantell/mini-webgl
• Owner: jsantell
• License: mit
• Created: 2017-04-25T06:15:28.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-11-10T06:10:38.000Z (about 7 years ago)
• Last Synced: 2024-11-01T00:51:28.215Z (2 months ago)
• Language: JavaScript
• Homepage: https://jsantell.github.io/mini-webgl/examples/complex.html
• Size: 1.25 MB
• Stars: 23
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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.

![mini-webgl](https://jsantell.github.io/mini-webgl/assets/screenshot.gif)

## What and How it Works

* Basic rendering of a [scene](src/scene.js) graph with [perspective camera](src/camera.js).

* [Models](src/model.js) are represented by a geometry and material, updating position/rotation/scale when local coordinates change.

* Barebones [Math](src/math.js) library for managing Vector and Matrix types and track if dirty to minimize rebuilding matrices. Mostly a wrapper around [glMatrix](http://glmatrix.net/).

* [Geometries](src/geometries) have a vertex buffer, and optionally an indices buffer.

  * Implemented: [Triangle](src/geometries/triangle.js), [Cube](src/geometries/cube.js)

* [Materials](src/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](src/materials/basic-material.js)

* The scene's [renderer](src/renderer.js) queues up the scene graph's nodes and passes it to the [GLWrapper](src/webgl/index.js) which manages all the WebGL calls, so all the API abstractions of models and materials are in [src/](src/), and translating that abstraction to WebGL lives in [src/webgl/](src/webgl/).

## Example

* [triangle animations](https://jsantell.github.io/mini-webgl/examples/complex.html)

### Example Code

```js

  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