kindred-shader

A lightweight WebGL shader API.

• Weighs just under 3kB after optimising! (uglify + gzip + transform)
• Plays nice with glslify.
• Easy to set up using tagged template literals.
• Supports inlining shaders from separate files.
• Uses kindred-shader-formatter to combine your vertex and fragment shaders into a single source.
• Lives under the kindred umbrella, but works well anywhere :)

Largely inspired by @mikolalysenko's gl-shader and @mattdesl's glo-shader.

Usage

See demo.js for a full example.

var canvas = document.createElement('canvas')
var gl = canvas.getContext('webgl')

var sh = require('kindred-shader')
var shader = sh`
  uniform mat4 uProj;
  uniform mat4 uView;

  attribute vec3 position;
  attribute vec3 normal;
  varying vec3 vNormal;

  void vert() {
    vNormal = normalize(normal);
    gl_Position = uProj * uView * vec4(position, 1);
  }

  void frag() {
    gl_FragColor = vec4(vNormal * 0.5 + 0.5, 1);
  }
`

render()
function render () {
  requestAnimationFrame(render)

  shader.bind(gl)
  shader.uniforms.uProj = projectionMatrix
  shader.uniforms.uView = viewMatrix

  // ... draw the object ...
}

API

WIP :)

shader = Shader(template)

shader.bind(gl)

shader.dispose()

shader.uniforms

shader.attributes

shader.vert

shader.frag

shader = Shader.file(source)

shader = Shader.raw(vert, frag)

shader.recompile(vert, frag)

shader.copy()

Browserify Transform

Optionally, you can use kindred-shader/transform as a browserify transform by including the following in your project's package.json file:

{
  "browserify": {
    "transform": [
      "kindred-shader/transform"
    ]
  }
}

This will unlock support for glslify in your shaders, and using Shader.file to include external shader files.

• Support for Shader.file.
• Builtin support for glslify.
• Hides code that's unnecessary at runtime, bringing the library size down by more than half.

You can also get this transform working with your tool of choice using browserify transform plugins, e.g.:

• webpack: hughsk/ify-loader
• rollup: lautis/rollup-plugin-browserify-transform

See Also

• gl-shader
• glo-shader
• glslify
• gl-magic-uniforms
• kindred-shader-formatter

License

MIT. See LICENSE.md for details.