Matitor
A WebGL material editor.
; If you can read this, you need an up to date browser, such as Google Chrome or Mozilla Firefox.
Vertex Shader
Fragment Shader
attribute vec3 aVertPos; attribute vec2 aTexCoord; attribute vec3 aVertNorm; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; uniform mat3 uNMatrix; uniform vec3 uViewPos; varying vec2 vTexCoord; varying vec3 vTransformedNormal; varying vec4 vPosition; varying vec3 vViewDirection; void main() { vPosition = uMVMatrix * vec4(aVertPos, 1.0); gl_Position = uPMatrix * vPosition; vTexCoord = aTexCoord; vTransformedNormal = normalize(uNMatrix * aVertNorm); vViewDirection = vPosition.xyz; // This DOESN'T consider vViewPos, needs changed! }
precision mediump float; uniform sampler2D uSampler; uniform sampler2D uBumpSampler; uniform samplerCube uCubeMapSampler; uniform vec3 uKeyLightDirection; uniform vec3 uKeyLightColor; uniform vec3 uBackLightDirection; uniform vec3 uBackLightColor; uniform vec3 uFillLightDirection; uniform vec3 uFillLightColor; varying vec2 vTexCoord; varying vec3 vTransformedNormal; varying vec4 vPosition; varying vec3 vViewDirection; void main() { // Material properties vec4 diffuseColor = vec4(vec3(0.4), 1.0); vec4 specularColor = vec4(vec3(0.9), 1.0); // Sample those textures vec4 texColor = texture2D(uSampler, vec2(vTexCoord.s, vTexCoord.t)); vec4 bumpNormal = texture2D(uBumpSampler, vec2(vTexCoord.s, vTexCoord.t)); // Compute normal tangent basis vec3 u = normalize(cross(vec3(0.0,1.0,0.0), vTransformedNormal)); vec3 v = normalize(cross(vTransformedNormal, u)); // Transform bumpmap normal to normal tangent space bumpNormal = vec4(normalize(u*bumpNormal.x + v*bumpNormal.y + vTransformedNormal*bumpNormal.z), 0.0); // Compute lighting float keyLightWeighting = max(0.0, -dot(bumpNormal.xyz, normalize(uKeyLightDirection))); float backLightWeighting = max(0.0, -dot(bumpNormal.xyz, normalize(uBackLightDirection))); float fillLightWeighting = max(0.0, -dot(bumpNormal.xyz, normalize(uFillLightDirection))); vec4 keyColor = vec4(uKeyLightColor * keyLightWeighting, 1.0); vec4 backColor = vec4(uBackLightColor * backLightWeighting, 1.0); vec4 fillColor = vec4(uFillLightColor * fillLightWeighting, 1.0); // Sample cube/environment map vec4 skyboxColor = textureCube(uCubeMapSampler, reflect(vViewDirection, bumpNormal.xyz)); // Compute final material colour vec4 lightColor = clamp(keyColor + backColor + fillColor, 0.0, 1.0); diffuseColor = diffuseColor * lightColor; //diffuseColor * lightColor * texColor; specularColor = specularColor * skyboxColor; gl_FragColor = clamp(diffuseColor + specularColor, 0.0, 1.0); }
Update Shaders