Triangular ▲

Type safe wrapper for WebGL.

Install

yarn add triangular

Or

npm i triangular

Usage

import{createGL}from'triangular';constcanvas=document.body.appendChild(document.createElement('canvas'));constgl=createGL(canvas);constpositionBuffer=gl.createAttributeBuffer('vec2');positionBuffer.bufferData([0,1,1,-1,-1,-1]);constprogram=gl.createProgram({attributes: {position: 'vec2'},uniforms: {},fragmentUniforms: {},varying: {color: 'vec2'},textures: {},vertexShaderSource: ({ attributes, varying })=>` void main() { gl_Position = vec4(${attributes.position}.xy, 0, 1);${varying.color} = (gl_Position.xy + vec2(1,1)) / vec2(2,2); } `,fragmentShaderSource: ({ varying })=>` void main() { gl_FragColor = vec4(0, ${varying.color}, 1); } `,});gl.clear();program.drawTriangles({uniforms: {},fragmentUniforms: {},attributeBuffers: {position: positionBuffer},textureBuffers: {},});