Gl2-now NPM | npm.io

gl2-now

Create a WebGL(2) context right now!

This is a very minor fork of gl-now. I created it because I wanted to persist a single monkeypatched change. Playing around with WebGL requires asking the browser for different WebGL context ("webgl2", not "webgl"), and so, this fork was born. All the credits go to Mikola Lysenko, the original author.

gl-now is an extension of game-shell that creates a WebGL enabled canvas and adds it to the specified container.

Example

Try this demo in your browser

//Initialize shell
var shell = require("gl2-now")() //

shell.on("gl-init", function() {
  var gl = shell.gl
  
  //Create fragment shader
  var fs = gl.createShader(gl.FRAGMENT_SHADER)
  gl.shaderSource(fs, [
    "void main() {",
      "gl_FragColor = vec4(1, 0, 0, 1);",
    "}"].join("\n"))
  gl.compileShader(fs)

  //Create vertex shader
  var vs = gl.createShader(gl.VERTEX_SHADER)
  gl.shaderSource(vs, [
    "attribute vec3 position;",
    "void main() {",
      "gl_Position = vec4(position, 1.0);",
    "}"].join("\n"))
  gl.compileShader(vs)

  //Link
  var shader = gl.createProgram()
  gl.attachShader(shader, fs)
  gl.attachShader(shader, vs)
  gl.linkProgram(shader)
  gl.useProgram(shader)
  
  //Create buffer
  gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    -1, 0, 0,
    0, -1, 0,
    1, 1, 0
  ]), gl.STATIC_DRAW)
  
  //Set up attribute pointer
  var position_attribute = gl.getAttribLocation(shader, "position")
  gl.enableVertexAttribArray(position_attribute)
  gl.vertexAttribPointer(position_attribute, 3, gl.FLOAT, false, 0, 0)
})

shell.on("gl-render", function(t) {
  var gl = shell.gl

  //Draw arrays
  gl.drawArrays(gl.TRIANGLES, 0, 3)
})

shell.on("gl-error", function(e) {
  throw new Error("WebGL not supported :(")
})

Result:

Install

npm install gl2-now

API

`var shell = require("gl2-now")([options])`

Options is an object that takes the same fields as in game-shell with the following additions:

clearFlags a list of flags to clear on redraw. (Default gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
clearColor a length 4 array representing background clear color. (Defaults to element's background-color or else [0.2, 0.4, 0.8, 1.0]
clearDepth value to clear depth buffer to (Defaults to 1.0)
clearStencil value to clear stencil buffer to (Defaults to 0)
extensions a list of necessary WebGL extensions to support. Vendor prefix optional. You can access these extensions later using webglew
glOptions on object containing a set of parameters which are passed to the webgl context directly.