gl-big-triangle
Draws a big triangle that fills your entire viewport.
Last updated 5 years ago by hughsk .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install gl-big-triangle 
SYNC missed versions from official npm registry.

gl-big-triangle

stable

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

NPM

triangle = Triangle(gl)

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

const Triangle = require('gl-big-triangle')

const canvas = document.createElement('canvas')
const gl = canvas.getContext('webgl')
const triangle = Triangle(gl)

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 = require('gl-shader')
const raf = require('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 = Shader(gl, vert, frag)

render()
function render () {
  shader.bind()
  triangle.bind()
  triangle.draw()

  // Render again in the next frame
  raf(render)
}

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.

Current Tags

  • 1.0.0                                ...           latest (5 years ago)

1 Versions

  • 1.0.0                                ...           5 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 1
Last Month 0
Dependencies (2)
Dev Dependencies (9)
Dependents (2)

Copyright 2014 - 2017 © taobao.org |