diff --git a/index.html b/index.html index a104c76..dc7e027 100644 --- a/index.html +++ b/index.html @@ -3,11 +3,68 @@ WebMinecraft + +
+ +
+ +
+
+

Light direction

+

+ x: + +

+

+ y: + +

+

+ z: + +

+

+

+

+
+
+

Ambiant light

+

+ +

+
+
+
\ No newline at end of file diff --git a/index.js b/index.js index 8d9e78d..65bd087 100644 --- a/index.js +++ b/index.js @@ -10,6 +10,8 @@ attribute vec2 aTextureCoord; uniform mat4 uProjection; uniform mat4 uModel; uniform mat4 uView; +uniform vec3 uLightDirection; +uniform float uAmbiantLight; varying highp vec2 vTextureCoord; varying lowp vec3 vLighting; @@ -20,10 +22,9 @@ void main() { gl_Position = uProjection * modelview * vec4(aPosition, 1.0); - lowp vec3 normal = mat3(modelview) * aNormal; - lowp vec3 lightDirection = - normalize(mat3(uView) * vec3(1.0, -0.3, -0.8)); - lowp float diffuseAmount = max(dot(lightDirection, normal), 0.0); - lowp vec3 ambiant = 0.4 * vec3(1.0, 1.0, 0.9); + lowp vec3 normal = mat3(uModel) * aNormal; + lowp float diffuseAmount = max(dot(-uLightDirection, normal), 0.0); + lowp vec3 ambiant = uAmbiantLight * vec3(1.0, 1.0, 0.9); vLighting = ambiant + vec3(1.0, 1.0, 1.0) * diffuseAmount; vTextureCoord = aTextureCoord; @@ -76,6 +77,8 @@ function draw(gl, params, objects) { 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 positionLoc = gl.getAttribLocation(program, 'aPosition'); const normalLoc = gl.getAttribLocation(program, 'aNormal'); @@ -90,6 +93,8 @@ function draw(gl, params, objects) { gl.uniformMatrix4fv(modelLoc, false, new Float32Array(mvMatrix)); gl.uniformMatrix4fv(projLoc, false, new Float32Array(params.projMatrix)); gl.uniform3f(fogColorLoc, 0.6, 0.8, 1.0); + gl.uniform3f(lightDirectionLoc, ...params.lightDirection); + gl.uniform1f(ambiantLoc, params.ambiantLight); gl.bindBuffer(gl.ARRAY_BUFFER, geometry.glBuffer); @@ -199,6 +204,7 @@ function tick(time, gl, params) { stuff.lastFrameTime = time; document.querySelector('#fps').textContent = `${1.0 / dt} fps`; + document.querySelector('#lightDirVec').textContent = JSON.stringify(params.lightDirection); requestAnimationFrame(time => tick(time, gl, params)); } @@ -518,6 +524,33 @@ async function main() { world: makeWorld(), texture, program, + lightDirection: [-0.2, -0.5, 0.4], + ambiantLight: 0.7, + } + + document.querySelector('#lightx').oninput = e => { + params.lightDirection[0] = e.target.value / 100; + }; + document.querySelector('#lighty').oninput = e => { + params.lightDirection[1] = e.target.value / 100; + }; + document.querySelector('#lightz').oninput = e => { + params.lightDirection[2] = e.target.value / 100; + }; + document.querySelector('#ambiant').oninput = e => { + params.ambiantLight = e.target.value / 100; + }; + + const collapsibles = document.getElementsByClassName("collapsible"); + for (const collapsible of collapsibles) { + collapsible.onclick = e => { + const content = collapsible.nextElementSibling; + if (content.style.height === 'fit-content') { + content.style.height = '0px'; + } else { + content.style.height = 'fit-content'; + } + }; } canvas.onclick = e => {