Thin functional WebGL wrapper with strong typed GLSL DSL

Documentation

Installation

This library could be installed from npm repository

``
npm i --save webgl-dsl
`

Examples

* Minimal triangle
(source)
* Draw particles with ANGLE_instanced_arrays
(source)
* Normals map
(source)
* MSDF font rendering
(source)

Code sample

Here is a code you need to draw a triangle using WebGL-DSL

`typescript
const canvas = document.getElementById("canvas") as HTMLCanvasElement;
const width = canvas.width = canvas.clientWidth * devicePixelRatio;
const height = canvas.height = canvas.clientHeight * devicePixelRatio;

const gl = new Gl(canvas, { preserveDrawingBuffer: true });

const drawTriangles = gl.command(PrimitivesType.Triangles, {
uniforms: {},
attributes: {
aPosition: Type.Vector2,
aColor: Type.Vector4,
},
varyings: {
vColor: Type.Vector4,
},
vertex({ aPosition, aColor }) {
return {
gl_Position: val(aPosition.mul(0.75), 0, 1),
vColor: aColor,
};
},
fragment({ vColor }) {
return {
gl_FragColor: vColor.pow(val(1 / 2.2).vec4()),
};
},
});

drawTriangles.setAttributes([
{ aColor: [1, 0, 0, 1], aPosition: [0, 1] },
{ aColor: [0, 1, 0, 1], aPosition: [-1, -1] },
{ aColor: [0, 0, 1, 1], aPosition: [1, -1] },
]);


gl.settings()
.viewport(0, 0, width, height)
.clearColor(0, 0, 0, 1)
.apply(() => {
gl.clearColorBuffer();
drawTriangles.draw();
});
``