Skip to content

Commit

Permalink
bug fix and code refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@lrsb
lrsb committed Aug 14, 2020
1 parent 6cbb796 commit b206475
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 50 deletions.
45 changes: 26 additions & 19 deletions js/events.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
let mouseDown = false, invalidateClick = false, lastMouseX = -100, lastMouseY = -100, mouseDownTimestamp = Date.now()
const events = {
selecting: false, selectingStart: true,
playing: false, lastDrawTimestamp: Date.now(),
computeMax: true, maxCompletion: 5,
mouseDown: false, invalidateClick: false,
lastMouseX: -100, lastMouseY: -100,
mouseDownTimestamp: Date.now(), onLoad: 0
}

function registerListeners() {
const canvas = document.getElementById('canvas')
Expand All @@ -10,17 +17,17 @@ function registerListeners() {
}

function onMouseDown(event) {
mouseDown = true
invalidateClick = false
mouseDownTimestamp = Date.now()
lastMouseX = event.pageX
lastMouseY = event.pageY
events.mouseDown = true
events.invalidateClick = false
events.mouseDownTimestamp = Date.now()
events.lastMouseX = event.pageX
events.lastMouseY = event.pageY
}

function onMouseUp(event) {
if (!invalidateClick && Date.now() - mouseDownTimestamp < 500) {
if (!events.invalidateClick && Date.now() - events.mouseDownTimestamp < 500) {
const x = 2 * event.pageX / gl.canvas.width - 1.0, y = -2 * event.pageY / gl.canvas.height + 1.0
const point = unprojectScreenPoint(landscape.mesh, x, y)
const point = unprojectScreenPoint(models.landscape.mesh, x, y)

if (events.selecting) {
if (events.selectingStart) {
Expand All @@ -37,23 +44,23 @@ function onMouseUp(event) {
updateButtons()
}
}
lastMouseX = -100
lastMouseY = -100
mouseDown = false
events.lastMouseX = -100
events.lastMouseY = -100
events.mouseDown = false
}

function onMouseMove(event) {
const canvas = document.getElementById('canvas')
if (mouseDown) {
invalidateClick = true
const dx = event.pageX - lastMouseX
const dy = lastMouseY - event.pageY
if (events.mouseDown) {
events.invalidateClick = true
const dx = event.pageX - events.lastMouseX
const dy = events.lastMouseY - event.pageY
if (event.pageX <= canvas.clientWidth) {
camera.angle += 0.5 * dx
camera.elevation += 0.5 * dy
}
lastMouseX = event.pageX
lastMouseY = event.pageY
events.lastMouseX = event.pageX
events.lastMouseY = event.pageY
}
}

Expand Down Expand Up @@ -131,7 +138,7 @@ function play() {

function reset() {
events.playing = false
missile.completion = 0.005
missile.completion = MISSILE_COMPLETION_BOUND
updateButtons()
}

Expand All @@ -153,7 +160,7 @@ function statusUiUpdate(position, direction) {

$('#missile-phi').text(utils.radToDeg(missileAngle.phi).toFixed(1))
$('#missile-theta').text(utils.radToDeg(missileAngle.theta).toFixed(1))
$('#missile-completion').text((missile.completion * 100).toFixed(1))
$('#missile-completion').text(((missile.completion - MISSILE_COMPLETION_BOUND) * 100).toFixed(1))

$('#camera-x').text(camera.x.toFixed(2))
$('#camera-y').text(camera.y.toFixed(2))
Expand Down
45 changes: 22 additions & 23 deletions js/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
let program, gl, missile1, missile2, landscape, sphere, light
let program, gl

const models = {
missile1: null, missile2: null,
landscape: null, sphere: null, light: null
}

const MISSILE_COMPLETION_BOUND = 0.005
const missile = {
start: {
x: -2.989, y: 0.0155, z: 3.711
}, end: {
x: 0.523, y: 1.676, z: 1.806
}, completion: 0.005, model1: true
}, completion: MISSILE_COMPLETION_BOUND, model1: true
}

const camera = {
Expand All @@ -14,12 +20,6 @@ const camera = {
zoom: 0.7, lookAt: true
}

const events = {
selecting: false, selectingStart: true,
playing: false, lastDrawTimestamp: Date.now(),
computeMax: true, maxCompletion: 5
}

const settings = {
flightTime: 5.0, height: 0.0
}
Expand All @@ -33,8 +33,8 @@ function drawScene() {
const nextPosition = getParabolicPoint([missile.start.x, missile.start.y, missile.start.z],
[missile.end.x, missile.end.y, missile.end.z], settings.height, missile.completion + 0.01)

const color = decodeColor(lights.colors.ambient)
gl.clearColor(color[0], color[1], color[2], 1)
const ambientColor = decodeColor(lights.colors.ambient)
gl.clearColor(ambientColor[0], ambientColor[1], ambientColor[2], 1)
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)

for (let i = 0.01; i < (events.computeMax ? 5 : events.maxCompletion); i += 0.1 / settings.flightTime) {
Expand All @@ -44,37 +44,37 @@ function drawScene() {
[missile.end.x, missile.end.y, missile.end.z], settings.height, i + 0.01)

const sphereWorldMatrix = utils.MakeWorld(position[0], position[1], position[2], 0, 0, 0, 0.01)
drawModel(sphere, sphereWorldMatrix, cm)
if (events.computeMax && (checkCollision(landscape.mesh, position, nextPosition) || position[1] < -0.2)) {
drawModel(models.sphere, sphereWorldMatrix, cm)
if (events.computeMax && (checkCollision(models.landscape.mesh, position, nextPosition) || position[1] < -0.2)) {
events.maxCompletion = i
events.computeMax = false
break
}
}

if (events.playing && (checkCollision(landscape.mesh, position, nextPosition) || missile.completion >= events.maxCompletion - 0.005)) {
if (events.playing && (checkCollision(models.landscape.mesh, position, nextPosition) || missile.completion >= events.maxCompletion - MISSILE_COMPLETION_BOUND)) {
events.playing = false
updateButtons()
}
const missileDirection = utils.normalizeVector3(utils.subVector(nextPosition, position))
const missileWorldMatrix = utils.MakeWorldFromBetweenVectors(position[0], position[1], position[2], [0, 0, 1], missileDirection, 0.01)
drawModel(missile.model1 ? missile1 : missile2, missileWorldMatrix, cm)
drawModel(landscape, utils.MakeWorld(0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1), cm)
drawModel(missile.model1 ? models.missile1 : models.missile2, missileWorldMatrix, cm)
drawModel(models.landscape, utils.MakeWorld(0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1), cm)
if (lights.lightType[1] === 1 || lights.lightType[2] === 1) {
const angle = lights.lightType[2] === 1 ? lights.spot.phi : 0
const elevation = lights.lightType[2] === 1 ? lights.spot.theta : 0
const vect = utils.normalizeVector3([Math.sin(elevation) * Math.sin(angle),
Math.cos(elevation),
Math.sin(elevation) * Math.cos(angle)])
drawModel(light, utils.MakeWorldFromBetweenVectors(
drawModel(models.light, utils.MakeWorldFromBetweenVectors(
lights.lightType[1] === 1 ? lights.point.x : lights.spot.x,
lights.lightType[1] === 1 ? lights.point.y : lights.spot.y,
lights.lightType[1] === 1 ? lights.point.z : lights.spot.z,
[0, 0, -1], vect, 0.01), cm)
}
if (camera.lookAt) {
const sphereWorldMatrix = utils.MakeWorld(camera.x, camera.y, camera.z, 0, 0, 0, 0.05)
drawModel(sphere, sphereWorldMatrix, cm)
drawModel(models.sphere, sphereWorldMatrix, cm)
}
if (events.playing) missile.completion += (Date.now() - events.lastDrawTimestamp) / (1000.0 * settings.flightTime)
events.lastDrawTimestamp = Date.now()
Expand All @@ -94,14 +94,13 @@ async function main() {
registerListeners()

await utils.loadFiles(['shaders/vs.glsl', 'shaders/fs.glsl'], (text) => program = utils.createAndCompileShaders(gl, text))
missile1 = await loadModel('missile1')
missile2 = await loadModel('missile2')
sphere = await loadModel('sphere')
light = await loadModel('light')
landscape = await loadModel('landscape')
models.missile1 = await loadModel('missile1')
models.missile2 = await loadModel('missile2')
models.sphere = await loadModel('sphere')
models.light = await loadModel('light')
models.landscape = await loadModel('landscape')

utils.resizeCanvasToDisplaySize(gl.canvas)
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height)
gl.enable(gl.DEPTH_TEST)
gl.enable(gl.CULL_FACE)
gl.useProgram(program)
Expand Down
16 changes: 8 additions & 8 deletions js/models.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
let onLoad = 0

async function loadModel(modelName) {
const mesh = new OBJ.Mesh(await utils.get_objstr('models/' + modelName + '/model.obj'))

Expand Down Expand Up @@ -33,17 +31,19 @@ async function loadModel(modelName) {
gl.bindTexture(gl.TEXTURE_2D, texture)
const textureImage = new Image()
textureImage.src = 'models/' + modelName + '/texture.png'
onLoad++
events.onLoad++
textureImage.onload = () => {
gl.bindTexture(gl.TEXTURE_2D, texture)
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true)
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImage)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_LINEAR)
gl.generateMipmap(gl.TEXTURE_2D)
gl.bindTexture(gl.TEXTURE_2D, null)
gl.activeTexture(gl.TEXTURE0)
gl.bindTexture(gl.TEXTURE_2D, texture)
onLoad--
if (onLoad === 0) $('body').removeClass('loading')
events.onLoad--
if (events.onLoad === 0) $('body').removeClass('loading')
}
return {vao, mesh, texture}
}
Expand Down
1 change: 1 addition & 0 deletions js/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ var utils = {
const expandFullScreen = () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height)

};
expandFullScreen();
Expand Down

0 comments on commit b206475

Please sign in to comment.