gl-big-triangle
Draws a big triangle that fills your entire viewport. Intended as a more explicit version of a-big-triangle, trading convenience for potential performance improvements when drawing many big triangles per frame.
If you're wondering why a big triangle and not a big square made from two smaller triangles, there are potentially significant performance advantages in taking the former approach. There are other cases where a big square is preferable however.
Usage
triangle = Triangle(gl)
Takes a WebGLRenderingContext
and creates a new instance of gl-big-triangle
.
const Triangle =const canvas = documentconst gl = canvasconst triangle =
triangle.bind()
Binds the triangle's VAO. Must be called at least once before triangle.draw
.
triangle.draw()
Draws the big triangle to the screen using the currently bound shader.
const Shader =const raf =const vert = `precision mediump float;attribute vec2 position;varying vec2 uv;void main() {uv = position;gl_Position = vec4(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 ={shadertriangletriangle// Render again in the next frame}
triangle.unbind()
Unbinds the triangle's VAO. You should call this when you're finished drawing big triangles, however it's not necessary if you're using gl-vao or gl-geometry for binding your attribute data or only drawing big triangles.
See Also
License
MIT, see LICENSE.md for details.