Nominating Presidential Muppets
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

gl-big-quad

1.0.0 • Public • Published

gl-big-quad

stable

Draws a big quad to the screen. A useful means of drawing a small number of 2D sprites with custom shaders to the screen without having to resort to more complex approaches such as sprite batching. Doing so with gl-big-triangle requires changing the viewport repeatedly and as such is ineffective.

Usage

NPM

quad = Quad(gl)

Takes a WebGLRenderingContext and creates a new instance of gl-big-quad.

const Quad = require('gl-big-quad')
 
const canvas = document.createElement('canvas')
const gl = canvas.getContext('webgl')
const quad = Quad(gl)

quad.bind()

Binds the quad's VAO. Must be called at least once before quad.draw.

quad.draw()

Draws the big quad to the screen using the currently bound shader.

const Shader = require('gl-shader')
const raf = require('raf')
 
const vert = `
precision mediump float;
 
attribute vec2 position;
varying vec2 uv;
 
void main() {
  uv = position;
 
  vec2 lo = vec2(-0.5);
  vec2 hi = vec2(+0.5);
 
  gl_Position = vec4(mix(lo, hi, position), 1, 1);
}
`
 
const frag = `
precision mediump float;
 
varying vec2 uv;
 
void main() {
  gl_FragColor = vec4(uv * 0.5 + 0.5, 1, 1);
}
`
 
const shader = Shader(gl, vert, frag)
 
render()
function render () {
  shader.bind()
  quad.bind()
  quad.draw()
 
  // Render again in the next frame
  raf(render)
}

quad.unbind()

Unbinds the quad's VAO. You should call this when you're finished drawing big quads, however it's not necessary if you're using gl-vao or gl-geometry for binding your attribute data or only drawing big quads.

See Also

License

MIT, see LICENSE.md for details.

install

npm i gl-big-quad

Downloadsweekly downloads

4

version

1.0.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar