diff --git a/skycraft/index.js b/skycraft/index.js index 2ce8525..ffd51f0 100644 --- a/skycraft/index.js +++ b/skycraft/index.js @@ -21,7 +21,21 @@ uniform vec3 uGlowColor; varying highp vec2 vTextureCoord; varying lowp vec3 vLighting; -varying lowp float vDistance; +varying lowp vec3 vRay; +varying lowp vec3 vLightDir; +varying lowp vec3 vNormal; + +highp mat3 transpose(in highp mat3 inmat) { + highp vec3 x = inmat[0]; + highp vec3 y = inmat[1]; + highp vec3 z = inmat[2]; + + return mat3( + vec3(x.x, y.x, z.x), + vec3(x.y, y.y, z.y), + vec3(x.z, y.z, z.z) + ); +} void main() { highp mat4 modelview = uView * uModel; @@ -35,25 +49,31 @@ void main() { vTextureCoord = aTextureCoord; - vDistance = length(modelview * vec4(aPosition, 1.0)); + lowp vec3 camPos = -transpose(mat3(uView))*(uView * vec4(0.0, 0.0, 0.0, 1.0)).xyz; + vRay = -normalize((uModel * vec4(aPosition, 1.0)).xyz - camPos); + vLightDir = -uLightDirection; + vNormal = normal; } `; const FSHADER = ` uniform sampler2D uSampler; -uniform lowp vec3 uFogColor; varying highp vec2 vTextureCoord; varying lowp vec3 vLighting; -varying lowp float vDistance; +varying lowp vec3 vRay; +varying lowp vec3 vLightDir; +varying lowp vec3 vNormal; void main() { highp vec4 color = texture2D(uSampler, vTextureCoord); if (color.a < 0.1) { discard; } - lowp float fogamount = 0.0; //smoothstep(80.0, 100.0, vDistance); - gl_FragColor = mix(vec4(vLighting * color.rgb, color.a), vec4(uFogColor, 1.0), fogamount); + lowp vec3 specularDir = 2.0 * dot(vLightDir, vNormal) * vNormal - vLightDir; + lowp float specularAmount = smoothstep(0.92, 1.0, dot(vRay, specularDir)); + lowp vec3 specular = 0.8 * specularAmount * vec3(1.0, 1.0, 0.8); + gl_FragColor = vec4(vLighting * color.rgb + specular, color.a); } `; @@ -68,7 +88,6 @@ async function initWorldGl(gl) { const modelLoc = gl.getUniformLocation(program, 'uModel'); const projLoc = gl.getUniformLocation(program, 'uProjection'); const samplerLoc = gl.getUniformLocation(program, 'uSampler'); - const fogColorLoc = gl.getUniformLocation(program, 'uFogColor'); const lightDirectionLoc = gl.getUniformLocation(program, 'uLightDirection'); const ambiantLoc = gl.getUniformLocation(program, 'uAmbiantLight'); const glowColorLoc = gl.getUniformLocation(program, 'uGlowColor'); @@ -81,7 +100,6 @@ async function initWorldGl(gl) { const { projectionMatrix, viewMatrix, - fogColor, ambiantLightAmount, } = sceneParams; @@ -89,7 +107,6 @@ async function initWorldGl(gl) { gl.uniformMatrix4fv(projLoc, false, new Float32Array(projectionMatrix)); gl.uniformMatrix4fv(viewLoc, false, new Float32Array(viewMatrix)); - gl.uniform3fv(fogColorLoc, fogColor); gl.uniform1f(ambiantLoc, ambiantLightAmount); // doing this here because it's the same for all world stuff @@ -1157,7 +1174,6 @@ function draw(context) { glContext.setupScene({ projectionMatrix: context.projMatrix, viewMatrix, - fogColor: context.skyColor, ambiantLightAmount: context.ambiantLight, }); } @@ -1257,8 +1273,8 @@ async function main() { gl, projMatrix: se3.perspective(Math.PI / 3, canvas.clientWidth / canvas.clientHeight, 0.1, 10000.0), player: { - tf: se3.translation(0.0, 0.0, 2.0), - position: [0.0, 0.0, 2.0], + tf: se3.translation(0.0, 0.0, 80.0), + position: [0.0, 0.0, 80.0], velocity: [0, 0, 0], }, camera: {