matcap

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

Usage

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
  ).rgb, 1.0);
}

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.bind()
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!

License

MIT. See LICENSE.md for details.