From 0b45bfe1eb6653a8410971b1cb0fc519d638cd33 Mon Sep 17 00:00:00 2001 From: Paul Mathieu Date: Thu, 30 Dec 2021 03:47:57 -0800 Subject: [PATCH] Fix physics depending on fps --- game.js | 52 ++++++++++++++++++++++++++++++++-------------------- index.html | 22 ++++++++++++++++++---- index.js | 3 ++- world.js | 2 +- 4 files changed, 53 insertions(+), 26 deletions(-) diff --git a/game.js b/game.js index 215ac03..c7a4b22 100644 --- a/game.js +++ b/game.js @@ -18,9 +18,7 @@ import { * @param {WebGLRenderingContext} gl */ function draw(gl, params, objects) { - const skyColor = [0.6, 0.8, 1.0]; - - gl.clearColor(...skyColor, 1.0); + gl.clearColor(...params.skyColor, 1.0); gl.clearDepth(1.0); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); @@ -46,7 +44,7 @@ function draw(gl, params, objects) { glContext.setupScene({ projectionMatrix: params.projMatrix, viewMatrix, - fogColor: skyColor, + fogColor: params.skyColor, lightDirection: params.lightDirection, ambiantLightAmount: params.ambiantLight, }); @@ -72,12 +70,12 @@ function handleKeys(params) { const dir = [right, 0, -forward, 1.0]; const ori = se3.roty(params.camera.orientation[1]); const tf = se3.apply(ori, dir); - const maxSpeed = 0.1; + const maxSpeed = 8; const airMovement = 0.08; if (params.flying) { - params.camera.position[0] += tf[0]; - params.camera.position[2] += tf[2]; + params.camera.position[0] += tf[0] / 60; + params.camera.position[2] += tf[2] / 60; } if (params.isOnGround) { params.camera.velocity[0] = tf[0]; @@ -100,26 +98,26 @@ function handleKeys(params) { params.keys.forEach(key => { switch (key) { case 'KeyW': - move(0.1, 0.0); + move(8, 0.0); return; case 'KeyA': - move(0.0, -0.1); + move(0.0, -8); return; case 'KeyS': - move(-0.1, 0.0); + move(-8, 0.0); return; case 'KeyD': - move(0.0, 0.1); + move(0.0, 8); return; case 'Space': if (params.flying) { - params.camera.position[1] += 0.1; + params.camera.position[1] += 8 / 60; } return; case 'ShiftLeft': - params.camera.position[1] -= 0.1; + params.camera.position[1] -= 8 / 60; return; } }); @@ -161,14 +159,16 @@ function getObjects(world, z, x, glContext) { })); } -function updatePhysics(params) { - params.camera.velocity[1] += params.gravity / 60 / 60; +function updatePhysics(params, time) { + const dt = (time - params.lastFrameTime) / 1000; + + params.camera.velocity[1] += params.gravity * dt; const oldPos = params.camera.position; - const targetPos = params.flying ? oldPos : params.camera.position.map((v, i) => v + params.camera.velocity[i]); + const targetPos = params.flying ? oldPos : params.camera.position.map((v, i) => v + params.camera.velocity[i] * dt); const {isOnGround, newPos} = checkCollision(oldPos, targetPos, params.world); params.camera.position = newPos; - params.camera.velocity = newPos.map((v, i) => v - oldPos[i]); + params.camera.velocity = newPos.map((v, i) => (v - oldPos[i]) / dt); if (isOnGround) { params.jumpAmount = 2; params.camera.velocity = params.camera.velocity.map(v => v * 0.7); @@ -259,6 +259,18 @@ export function setupParamPanel(params) { params.jumpForce = e.target.value / 100; document.querySelector('#jumpForceValue').textContent = e.target.value / 100; }; + document.querySelector('#skyr').oninput = e => { + params.skyColor[0] = e.target.value / 255; + document.querySelector('#skyColor').textContent = JSON.stringify(params.skyColor); + }; + document.querySelector('#skyg').oninput = e => { + params.skyColor[1] = e.target.value / 255; + document.querySelector('#skyColor').textContent = JSON.stringify(params.skyColor); + }; + document.querySelector('#skyb').oninput = e => { + params.skyColor[2] = e.target.value / 255; + document.querySelector('#skyColor').textContent = JSON.stringify(params.skyColor); + }; const collapsibles = document.getElementsByClassName("collapsible"); for (const collapsible of collapsibles) { @@ -375,7 +387,7 @@ export function initUiListeners(params, canvas) { export function tick(time, gl, params) { handleKeys(params); - updatePhysics(params); + updatePhysics(params, time); const campos = params.camera.position; @@ -396,8 +408,8 @@ export function tick(time, gl, params) { draw(gl, params, objects); - const dt = (time - stuff.lastFrameTime) * 0.001; - stuff.lastFrameTime = time; + const dt = (time - params.lastFrameTime) * 0.001; + params.lastFrameTime = time; document.querySelector('#fps').textContent = `${1.0 / dt} fps`; document.querySelector('#lightDirVec').textContent = JSON.stringify(params.lightDirection); diff --git a/index.html b/index.html index 4cf6fcb..48cf3c1 100644 --- a/index.html +++ b/index.html @@ -40,7 +40,8 @@
-

Light direction

+

Light

+

Direction

x: @@ -56,12 +57,25 @@

-
-
-

Ambiant light

+

Ambiant light amount

+

Sky color

+

+ r: + +

+

+ g: + +

+

+ b: + +

+

+

Physics

diff --git a/index.js b/index.js index 4854e2d..69a2d77 100644 --- a/index.js +++ b/index.js @@ -22,6 +22,7 @@ async function main() { }, keys: new Set(), lightDirection: [-0.2, -0.5, 0.4], + skyColor: [0.45, 0.75, 1.0], ambiantLight: 0.7, blockSelectDistance: 8, flying: false, @@ -29,7 +30,7 @@ async function main() { world: makeWorld(), worldGl: await initWorldGl(gl), gravity: -17, - jumpForce: 0.11, + jumpForce: 6.5, } setupParamPanel(params); diff --git a/world.js b/world.js index ce70867..1d7228c 100644 --- a/world.js +++ b/world.js @@ -47,7 +47,7 @@ void main() { if (color.a < 0.1) { discard; } - lowp float fogamount = smoothstep(40.0, 100.0, vDistance); + lowp float fogamount = smoothstep(80.0, 100.0, vDistance); gl_FragColor = mix(vec4(vLighting * color.rgb, color.a), vec4(uFogColor, 1.0), fogamount); } `;