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.
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 = projectionMatrixIf you're looking for a full example, check out the demo!
MIT. See LICENSE.md for details.