TinyGL.js

TinyGL.js is a JavaScript library providing a tiny subset of OpenGL 1.1 compatible API, which can be used to make 3D graphics on canvas. TinyGL.js is based upon TinyGL's implementation written in C and compiled to JavaScript via Emscripten. It only uses software rasterization and does not require WebGL to run.

Current implementation is based on an enhanced and bug-fixed branch of TinyGL 0.4.

Getting Started

This library is in a single JavaScript source file tinygl.js. It should be included first:

<script type="text/javascript" src="tinygl.js"></script>

Then, assuming a canvas element is already declared in the HTML, we get TinyGL.js's rendering context using the keyword experimental-tinygl:

var canvas = document.getElementById(canvas_id);
var gl = canvas.getContext('experimental-tinygl');

The semantics is almost the same with what we do for a Canvas2D or WebGL context. Now that we have the rendering context, let's begin with some basic primitives:

gl.viewport(0, 0, canvas.width, canvas.height);

gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.matrixMode(gl.PROJECTION);
gl.loadIdentity();
gl.frustum(-2.0, 2.0, -2.0, 2.0, 6.0, 20.0);
gl.matrixMode(gl.MODELVIEW);
gl.loadIdentity();
gl.translatef(0.0, 0.0, -16.0);

gl.color3f(1, 0, 0);
gl.begin(gl.POLYGON);
  gl.vertex3f(-1, -1, 0);
  gl.vertex3f( 1, -1, 0);
  gl.vertex3f( 1,  1, 0);
  gl.vertex3f(-1,  1, 0);
gl.end();

gl.flush();
gl.swapBuffers();

Here comes our first polygon with TinyGL.js :-) See what it outputs here.

Examples

more ...

Browser Requirements

TinyGL.js depends on Canvas and Typed Arrays. Make sure your browser supports these features to run codes with TinyGL.js.

Known Issues

• Canvas width must be multiples of 4 according to TinyGL's restriction. Otherwise, there may be some columns not refreshed.