modern-renderer
TypeScript icon, indicating that this package has built-in type declarations

0.5.0 • Public • Published

modern-renderer

Minzip Version Downloads Issues License

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

Package Sidebar

Install

npm i modern-renderer

Weekly Downloads

2

Version

0.5.0

License

MIT

Unpacked Size

92.1 kB

Total Files

33

Last publish

Collaborators

  • wengxiangmin