Glea.js is a WebGL library with a minimal footprint in modern modular JavaScript. It provides helper functions for creating a WebGL program, compiling shaders and passing data from JavaScript to the shader language.
import GLea from '../lib/glea/glea.mjs';
const glea = new GLea({
shaders: [
GLea.fragmentShader(frag),
GLea.vertexShader(vert)
],
buffers: {
position: Glea.buffer(2, [1, 1, 1, 0, 0, 0])
}
}).create();
canvas
: optional, if not specified,document.querySelector('canvas')
is usedgl
: optional, if not specified,canvas.getContext(contextType)
is usedcontextType
: optional, defaultwebgl
(orexperimental-webgl
, you don't need to prefix it yourself)glOptions
: additional options to pass tocanvas.getContext
shaders
: array that takes a fragmentShader and a vertexShader in the above formbuffers
: an object with attributes and buffers. You can access the buffers via an attribute named as the Object keys.
glea.gl
: theWebGLRenderingContext
glea.width
: viewport widthglea.height
: viewport height
glea.create()
- creates the WebGLRenderingContext, compiles and links shaders, registers attributes and buffers.glea.resize()
- resizes the WebGL viewport to the current canvas client size. Call this inside aresize
event listener.