# desenha

> A barebones WebGL framework

Latest version **1.1.22** (published 2026-08-04) · ISC license · 0 weekly downloads

## Install

```sh
npm install desenha
pnpm add desenha
yarn add desenha
bun add desenha
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 1.1.22 |
| Published | 2026-08-04 |
| First published | 2021-08-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 84.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | https://github.com/michaeldll/ |
| Maintainers | michael.dll |
| Keywords | webgl, framework |

## Links

- npm: https://www.npmjs.com/package/desenha
- Repository: https://github.com/michaeldll/desenha
- Homepage: https://github.com/michaeldll/desenha#readme
- Issues: https://github.com/michaeldll/desenha/issues
- npm.io page: https://npm.io/package/desenha

## Dependencies (2)

- [gl-matrix](https://npm.io/package/gl-matrix.md) ^3.3.0
- [typescript](https://npm.io/package/typescript.md) ^5.0.4

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 1.1.22 (latest) — 2026-08-04
- 1.1.21 — 2026-08-04
- 1.1.19 — 2026-08-04
- 1.1.17 — 2025-03-31
- 1.1.15 — 2024-12-04
- 1.1.14 — 2024-12-04
- 1.1.12 — 2023-09-18
- 1.1.11 — 2023-08-31
- 1.1.10 — 2023-08-31
- 1.1.8 — 2023-08-31
- 1.1.7 — 2023-08-30
- 1.1.6 — 2023-08-28
- 1.1.4 — 2023-08-28
- 1.1.3 — 2023-08-13
- 1.1.2 — 2023-08-13
- … 13 more at https://npm.io/package/desenha/versions

## README

# desenha

A barebones WebGL library. Inspired by https://webglfundamentals.org/ and [OGL](https://github.com/oframe/ogl).
You probably shouldn't use this.

## Example :

```ts
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);
```

![Red cube](https://i.imgur.com/ZoJGlo6.png)

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.

---
_Source: https://npm.io/package/desenha · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._