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.
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)Binds the quad's VAO. Must be called at least once before 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)
}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.
MIT, see LICENSE.md for details.