modern-renderer

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()