final version - delivery

README.md

@@ -0,0 +1,5 @@
+# Missile Simulator
+
+Missile with parabolic trajectory simulator.
+
+You can find it [here](https://lorenzosiega.com/cg-webgl-2020).

index.html

@@ -398,8 +398,8 @@
         </div>
         <div class="row">
             <label for="height">Height</label>
-            <input class="form-control-range" id="height" max="1" min="-1" oninput="heightChanged()" step="0.005"
-                   style="width: 95%" type="range" value="0">
+            <input class="form-control-range" id="height" max="1.99" min="0.01" oninput="heightChanged()" step="0.005"
+                   style="width: 95%" type="range" value="1">
         </div>
     </div>
     <button class="btn btn-success btn-lg" id="play" onclick="play()" style="float: left; width: 60%" type="button">

js/events.js

@@ -41,6 +41,7 @@ function onMouseUp(event) {
             }
             events.computeMax = true
             events.selecting = false
+            missile.completion = MISSILE_COMPLETION_BOUND
             updateButtons()
         }
     }
@@ -73,27 +74,27 @@ function onKeyPress(event) {
     switch (event.key) {
         case 'w':
         case 'W':
-            camera.x += camera.lookAt ? 0.0 : 0.1
+            camera.x += 0.1
             break
         case 's':
         case 'S':
-            camera.x -= camera.lookAt ? 0.0 : 0.1
+            camera.x -= 0.1
             break
         case 'a':
         case 'A':
-            camera.z -= camera.lookAt ? 0.0 : 0.1
+            camera.z -= 0.1
             break
         case 'd':
         case 'D':
-            camera.z += camera.lookAt ? 0.0 : 0.1
+            camera.z += 0.1
             break
         case 'q':
         case 'Q':
-            camera.y -= camera.lookAt ? 0.0 : 0.1
+            camera.y -= 0.1
             break
         case 'e':
         case 'E':
-            camera.y += camera.lookAt ? 0.0 : 0.1
+            camera.y += 0.1
             break
     }
 }

js/main.js

@@ -15,13 +15,13 @@ const missile = {
 }
 
 const camera = {
-    x: -2.0, y: 2.0, z: 1.0,
-    elevation: -10.0, angle: 90.0,
+    x: 0.0, y: 5.8, z: 0.0,
+    elevation: -20.0, angle: 60.0,
     zoom: 0.7, lookAt: true
 }
 
 const settings = {
-    flightTime: 5.0, height: 0.0
+    flightTime: 5.0, height: 1.0
 }
 
 function drawScene() {
@@ -45,13 +45,18 @@ function drawScene() {
 
         const sphereWorldMatrix = utils.MakeWorld(position[0], position[1], position[2], 0, 0, 0, 0.01)
         drawModel(models.sphere, sphereWorldMatrix, cm, decodeColor(lights.colors.trajectory), false)
-        if (events.computeMax && (checkCollision(models.landscape.mesh, position, nextPosition) || position[1] < -0.2)) {
+        if (events.computeMax && (checkCollision(models.landscape.mesh, position, nextPosition) || position[1] < -0.1)) {
             events.maxCompletion = i
             events.computeMax = false
             break
         }
     }
 
+    const startSphereWorldMatrix = utils.MakeWorld(missile.start.x, missile.start.y, missile.start.z, 0, 0, 0, 0.05)
+    drawModel(models.sphere, startSphereWorldMatrix, cm, [0, 1, 0], true)
+    const endSphereWorldMatrix = utils.MakeWorld(missile.end.x, missile.end.y, missile.end.z, 0, 0, 0, 0.05)
+    drawModel(models.sphere, endSphereWorldMatrix, cm, [1, 0, 0], true)
+
     if (events.playing && (checkCollision(models.landscape.mesh, position, nextPosition) || missile.completion >= events.maxCompletion - MISSILE_COMPLETION_BOUND)) {
         events.playing = false
         updateButtons()
@@ -60,6 +65,7 @@ function drawScene() {
     const missileWorldMatrix = utils.MakeWorldFromBetweenVectors(position[0], position[1], position[2], [0, 0, 1], missileDirection, 0.01)
     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) {
         let lightColor = decodeColor(lights.colors.light)
         for (let i = 0; i < lightColor.length; i++) lightColor[i] *= 0.8 + lights.point.decay / 10.0
@@ -72,10 +78,13 @@ function drawScene() {
             Math.sin(elevation) * Math.cos(angle)])
         drawModel(models.light, utils.MakeWorldFromBetweenVectors(lights.spot.x, lights.spot.y, 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(models.sphere, sphereWorldMatrix, cm, [0, 1, 0], true)
+        drawModel(models.sphere, sphereWorldMatrix, cm, [0, 0, 1], true)
     }
+
+
     if (events.playing) missile.completion += (Date.now() - events.lastDrawTimestamp) / (1000.0 * settings.flightTime)
     events.lastDrawTimestamp = Date.now()
 
@@ -88,7 +97,7 @@ async function main() {
     gl = canvas.getContext('webgl2')
 
     if (!gl) {
-        alert('WebGL not supported')
+        alert('WebGL2 not supported')
         return
     }
     registerListeners()

js/misc.js

@@ -3,14 +3,14 @@ function getParabolicPoint(start, end, height, completion) {
     const direction = utils.subVector(end, start)
     const normDirection = utils.normalizeVector3([direction[0], 0, direction[2]])
     const distance = utils.modulusVector3(direction)
+    const g = 9.81 * height
 
     let alpha = Math.asin((end[1] - start[1]) / distance)
-    alpha = Math.min(Math.max(0.0, alpha + Math.PI / 2 * height), Math.PI / 2 - 0.005)
-    const gamma = Math.atan2(0.5 * 9.81 * Math.cos(alpha), 0.5 * 9.81 * Math.sin(alpha) + distance) + alpha
-    const v0 = 0.5 * 9.81 * Math.cos(alpha) / Math.sin(gamma - alpha)
+    const gamma = Math.atan2(0.5 * g * Math.cos(alpha), 0.5 * g * Math.sin(alpha) + distance) + alpha
+    const v0 = 0.5 * g * Math.cos(alpha) / Math.sin(gamma - alpha)
 
     const x = v0 * completion * Math.cos(gamma)
-    const y = v0 * completion * Math.sin(gamma) - 0.5 * 9.81 * Math.pow(completion, 2)
+    const y = v0 * completion * Math.sin(gamma) - 0.5 * g * Math.pow(completion, 2)
 
     return utils.sumVector(start, [x * normDirection[0], y, x * normDirection[2]])
 }

js/models.js

@@ -53,7 +53,7 @@ function drawModel(model, worldMatrix, cm, fillColor, ignoreAmbient) {
 
     gl.uniform3f(gl.getUniformLocation(program, 'eyePos'), cm.cameraPosition[0], cm.cameraPosition[1], cm.cameraPosition[2])
     gl.uniformMatrix4fv(gl.getUniformLocation(program, 'wo_matrix'), gl.FALSE, utils.transposeMatrix(utils.invertMatrix(worldMatrix)))
-    gl.uniformMatrix4fv(gl.getUniformLocation(program, 'two_matrix'), gl.FALSE, worldMatrix)
+    gl.uniformMatrix4fv(gl.getUniformLocation(program, 'w_matrix'), gl.FALSE, worldMatrix)
     gl.uniformMatrix4fv(gl.getUniformLocation(program, 'matrix'), gl.FALSE, utils.transposeMatrix(projectionMatrix))
 
     fillColor = fillColor == null ? [0, 0, 0, 0] : [fillColor[0], fillColor[1], fillColor[2], ignoreAmbient ? 1.0 : 0.5]

shaders/fs.glsl

@@ -9,7 +9,7 @@ in vec3 fs_normal;
 out vec4 out_color;
 
 uniform mat4 wo_matrix;
-uniform mat4 two_matrix;
+uniform mat4 w_matrix;
 uniform vec3 eyePos;
 
 uniform sampler2D u_texture;
@@ -74,7 +74,7 @@ void main() {
 
     vec3 objEyePos = (wo_matrix * vec4(eyePos.xyz, 1.0)).xyz;
     vec3 objLAPos = (wo_matrix * vec4(LAPos.xyz, 1.0)).xyz;
-    vec3 objLADir = normalize((two_matrix * vec4(LADir.xyz, 1.0)).xyz);
+    vec3 objLADir = normalize((w_matrix * vec4(LADir.xyz, 1.0)).xyz);
 
     vec3 normalVec = normalize(fs_normal);
     vec3 eyedirVec = normalize(objEyePos - fs_position);