desenha

desenha

A barebones WebGL library. Inspired by https://webglfundamentals.org/ and OGL. You probably shouldn't use this.

Example :

import { Desenhador, Mesh, PerspectiveCamera, cubeGeometry } from "desenha";

// Renderer
const { gl, draw } = new Desenhador(document.querySelector("canvas"));

// Get a new perspective :)
const camera = new PerspectiveCamera({ position: { x: 0, y: 0, z: 10 }, target: { x: 0, y: 0, z: 0 } });

// Shaders
const vertex = `
    attribute vec4 aPosition;

    uniform mat4 uModelMatrix;
    uniform mat4 uViewMatrix;
    uniform mat4 uProjectionMatrix;
    
    void main(void) {
        gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * aPosition;
    }
`;
const fragment = `
    void main(void) {
        gl_FragColor = vec4(vec3(1.,0.,0.),1.);
    }
`;

// These will get drawn at render time
const meshes = [];

// Init mesh
const cube = new Mesh({
	name: "Red cube",
	geometry: cubeGeometry,
	shaders: [vertex, fragment],
	locationNames: {
		attributes: ["aPosition"],
		uniforms: ["uProjectionMatrix", "uViewMatrix", "uModelMatrix"],
	},
	parameters: {
		position: { x: 0, y: 0, z: 0 },
	},
	gl,
});

// Executes callback each frame after being drawn.
// Use addOnBeforeDrawCallback instead for anything the current frame's draw
// call needs to see, such as uniforms.
cube.addOnDrawCallback((mesh, deltaTime) => {
	mesh.rotation[0] += 0.01;
	mesh.rotation[1] += 0.01;
});

meshes.push(cube);

// Render loop
let then = 0;
let elapsedTime = 0;
const update = (now: number) => {
	now *= 0.001; // Convert to seconds
	const deltaTime = now - then;
	then = now;
	elapsedTime += deltaTime;

	draw(meshes, camera, deltaTime, elapsedTime);

	requestAnimationFrame(update);
};

requestAnimationFrame(update);

More examples available under /examples:

• Minimal fullscreen shader
• Camera, Orbit controls, OBJ model and texture loading

Run npm i and npm run dev in their folders.

What does 'desenha' mean ?

It means 'draw' in Portuguese.