This library was originally meant as an auxiliary to an educational project for teaching OpenGL. I figured it would prove useful for those who want to create geometric scenes for educational purposes in an easy way, straight in the browser, without the need for additional dependencies.

• DrawableBlueprint: an abstract standalone primitive, not enclosed within a context, containing basic drawing information;
  • constructor(name[string]: name under which the primitive will be displayed, color[vec3]).
• Point[extends DrawableBlueprint];
  • constructor(name[string], color[vec3], position[vec3]).
• Segment[extends DrawableBlueprint];
  • constructor(name[string], color[vec3], p1[Point]: head of segment, p2[Point]: tail of segment);
  • intersect(drawable[DrawableBlueprint], name*[string]: (optional) name of resulting drawable, color*[vec3]: (optional) color of resulting drawable).
• Arrow[extends Segment]: a segment-like primitive but with an arrowhead on the tail;
• Vector[extends Arrow]: an arrow-like primitive but with the head always at origin;
  • constructor(name[string], color[vec3], p[Point]: tail of arrow).
• Triangle[extends DrawableBlueprint];
  • constructor(name[string], color[vec3], p1[Point], p2[Point], p3[Point]);
  • intersect(drawable[DrawableBlueprint], name*[string], color*[vec3]).
• CoordSystem[extends DrawableBlueprint]: a container of primitives in which you can add other drawables (including other CoordSystems);
  • constructor(name[string], color[array]{[vec3], [vec3], [vec3]}: colors of axes, modelMatrix[mat4]: homogenous transformation applied to each drawables inside this system in transpose form);
  • add(...[DrawableBlueprint varargs]).
• SpecialDrawableBlueprint: a drawable type that allows loading more complex models in the scene, with known vertex positions, colors, normals, texture information and faces;
  • constructor(positions[Float32Array], normals[Float32Array], colors[Float32Array], texInfo[object literal]{image[Image], coords[Float32Array]}, faces[Uint32Array]).
• PlyModelLoader: loads .ply model async;
  • constructor(plyInputId[string]: ID of input element where user loads the .ply file, texInputId*[string]: (optional) ID of input element where user loads the texture image, onLoad[Function]: what is executed after the model loads).
• Scene.
  • constructor(gl[WebGLRenderingContext]: the WebGL drawing context fetched from the canvas element, options[object literal]{unlockRoll[Boolean]: is scene free to rotate around roll axis, depthTest[Boolean]});
  • insert(...[DrawableBlueprint varargs]);
  • render();
  • redraw(): deletes all primitives currently in scene, reinstantiates and redraws them (useful for async operations).

There are also example scenes in the code, inside the ex_* folders from which you can copy the main.html and main.js files into the main folder and open the html file in your browser for visualisation. The following are screenshots of the scenes:

Example of single primitive, multiple contexts: the cube-like model is drawn twice, once in the canonical coordinate system and once in a coordinate system with an arbitrary rotation, scaling and translation;

Example of runtime-modified attributes: input sliders have been used to vary the position of points S1 to S12;

Example of triangle-segment and triangle-triangle intersection;

A scene that loads .ply models and uses the features mentioned previously to render a more complex view.

+ Can draw names of drawables
+ Supports shared drawable across multiple contexts
+ Easy screenshot utility (on key 'P')
+ Can modify drawable attributes at runtime
+ Can calculate and draw intersections between drawables
- Low memory footprint and high efficiency