Valo.js – a simple 2D graphics engine for WebGL2

Valo.js is a solo project in creating a simple and effective graphics engine for WebGL2. It has only the most often needed features that is required for a 2D graphics engine.

Find online examples on the Playground https://valojs.github.io/playground/

Features

• 2D graphics engine
• Optimized shader programs for different WebGL drawing methods
• Draw in triangles, lines or points
• Draw with indices and save memory
• Texture loader and texture support
• Option for individual shader programs for all shapes
• Cloning shapes for less memory
• Merging shapes for less draw calls
• Simplified rendering pipeline
• Control over alpha and different blending modes for canvas
• Utility classes for vectors and colors

Future development

• Multiple filters per shape
• Particle system
• Multiple scenes and canvases for one engine

If you have ideas to improve, please do! Clone and make pull requests!

Basic setup

First install as a dependency npm i -s valojs

import VALO from "valojs";

// Default options
const options = {
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: [0.68, 0.59, 0.84, 1],
  autoResize: true,  // overrides settings width and height
  clearBeforeRender: true,
  preserveDrawingBuffer: false,
  transparent: false
};

// container div id, where the canvas element is created
// if null, canvas element is attached to body
const divID = "scene-div";

// create graphics object
const valo = new VALO(divID, options);

// scene, canvas and engine objects are created automatically
const scene = valo.scene;
const width = valo.canvas.width;
const height = valo.canvas.height;

// create a circle
const circle = new VALO.Circle(scene, {radius: 100, tessellation: 100});

// make it stay in the middle of the screen
circle.position = new VALO.Vec2(0, 0);

// set the Color3 object of circle to be red
circle.color.set(1, 0, 0);

// Create a rectangle
const rectangle = new VALO.Rectangle(scene, {width: 600, height: 30});

// draw the rectangle just under the circle
rectangle.position = new VALO.Vec2(0, -115);

// set it to be a different color
rectangle.color.set(0, 0.5, 1);

// add both shapes to the scene so that it can be rendered
scene.addShape(circle);
scene.addShape(rectangle);

// run render loop
renderer.runRenderLoop((delta) => {
  // render inside the render loop
  scene.render();
});