modern-renderer
v0.5.0
Published
Renderers on modern browser
Downloads
37
Maintainers
Readme
Features
All operations return WebGL native objects (no additional encapsulation)
Automatically adapted to WebGL or WebGL2 (default)
Cache WebGL state to avoid unwanted GPU communication
The native WebGL object extension state is associated with WeakMap to avoid memory leaks
Provides simple VAO call
TypeScript, of course
Install
npm i modern-renderer
Usage
import { WebGLRenderer } from 'modern-renderer'
const renderer = new WebGLRenderer(document.querySelector('canvas'))
const program = renderer.createProgram({
vert: `precision mediump float;
attribute vec2 position;
void main() {
gl_Position = vec4(position, 0, 1);
}`,
frag: `precision mediump float;
uniform vec4 color;
void main() {
gl_FragColor = color;
}`,
})
const vertexBuffer = renderer.createBuffer({
target: 'array_buffer',
data: new Float32Array([
-1, -1, +1, -1,
-1, +1, +1, +1,
]),
usage: 'static_draw',
})
const elementArrayBuffer = renderer.createBuffer({
target: 'element_array_buffer',
data: new Uint16Array([
0, 1, 2,
1, 3, 2,
]),
usage: 'static_draw',
})
const vertexArray = {
attributes: {
position: vertexBuffer,
},
elementArrayBuffer,
}
const vao = renderer.createVertexArray(program, vertexArray)
renderer.activeProgram(program)
renderer.activeVertexArray(vao ?? vertexArray)
renderer.updateUniforms({
color: [0, 1, 0, 1],
})
renderer.draw()
Global function style
import {
WebGLRenderer,
setCurrentRenderer,
glCreateProgram,
glCreateBuffer,
glCreateVertexArray,
glActiveProgram,
glActiveVertexArray,
glUpdateUniforms,
glDraw,
} from 'modern-renderer'
setCurrentRenderer(new WebGLRenderer(document.querySelector('canvas')))
const program = glCreateProgram({
vert: `precision mediump float;
attribute vec2 position;
void main() {
gl_Position = vec4(position, 0, 1);
}`,
frag: `precision mediump float;
uniform vec4 color;
void main() {
gl_FragColor = color;
}`,
})
const vertexBuffer = glCreateBuffer({
target: 'array_buffer',
data: new Float32Array([
-1, -1, +1, -1,
-1, +1, +1, +1,
]),
usage: 'static_draw',
})
const elementArrayBuffer = glCreateBuffer({
target: 'element_array_buffer',
data: new Uint16Array([
0, 1, 2,
1, 3, 2,
]),
usage: 'static_draw',
})
const vertexArray = {
attributes: {
position: vertexBuffer,
},
elementArrayBuffer,
}
const vao = glCreateVertexArray(program, vertexArray)
glActiveProgram(program)
glActiveVertexArray(vao ?? vertexArray)
glUpdateUniforms({
color: [0, 1, 0, 1],
})
glDraw()