A simple 3d shader for webgl


A simple 3d shader for WebGL

Try it in your browser

var shell = require("gl-now")()
var createMesh = require("gl-mesh")
var glm = require("gl-matrix")
var simple3DShader = require("simple-3d-shader")
var shader, mesh
shell.on("gl-init", function() {
  shader = simple3DShader(
  mesh = createMesh(, require("bunny"))
shell.on("gl-render", function(t) {
  //Bind shader 
  //Set camera parameters 
  var A = new Float32Array(16), B = new Float32Array(16)
  shader.uniforms.projection = glm.mat4.perspective(A, Math.PI/4.0, shell.width/shell.height, 0.1, 1000.0)
  shader.uniforms.view = glm.mat4.lookAt(A, [0, 3, 20], [0, 3, 0], [0,1,0])
  shader.uniforms.model = glm.mat4.rotateY(B, A, 0.001 *
  //Set color 
  shader.attributes.color = [1, 0.7, 0.3]
  //Draw object 

Here is what it should look like assuming everything worked:

Use npm to install it locally:

npm install simple-3d-shader

Then you can build/run the client using any tool that compiles CommonJS modules, for example browserify or beefy.

var simple3DShader = require("simple-3d-shader")

Creates a simple 3d shader

  • gl is a handle to the WebGL context that the shader will be created in.

Returns A gl-shader object for the shader.

(c) 2013 Mikola Lysenko. MIT License