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.

matcap

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);
}

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!

MIT. See LICENSE.md for details.