node package manager


matcap Flattr this!experimental

GLSL shaders for calculating/rendering Spherical Environment Maps, or "matcaps".

For more information, check out Creating a Spherical Reflection/Environment Mapping shader, which was used as a reference when writing this module and the demo.

Most of the images in the demo were sourced from this demo, though a couple I made myself.

view demo



With glslify

You can import the module using glslify to get the bare function responsible for generating the texture coordinate to look up.

This function takes two arguments:

  • vec3 eye: the camera's current position.
  • vec3 normal: the surface's normal vector.

Returning a vec2 you can use on your sampler2D.

#pragma glslify: matcap require(matcap) 
uniform sampler2D texture; // the matcap texture you want to use 
uniform vec3 eyeVector;
varying vec3 normalVector;
void main() {
  vec2 uv = matcap(eyeVector, normalVector);
  gl_FragColor = vec4(texture2D(
    texture, uv

With browserify

If you're looking to get started a little more quickly, you can require matcap as a module from browserify.

The required function simply takes the current WebGL context, and returns a a GLSL program wrapped up in gl-shader-core.

You'll still need to take care of its uniforms and attributes though:

shader.attributes.aPosition.location = 0
shader.attributes.aNormal.location = 0
shader.uniforms.uTexture = textureIndex
shader.uniforms.uEye = eyeVector
shader.uniforms.mView = viewMatrix
shader.uniforms.mModel = modelMatrix
shader.uniforms.mNormal = normalMatrix
shader.uniforms.mProjection = projectionMatrix

If you're looking for a full example, check out the demo!


MIT. See for details.