new colors and light

index.html

@@ -366,6 +366,12 @@
                     <input class="color-select" id="specular-color" oninput="setColor()" type="color" value="#FFFFFF">
                 </div>
             </div>
+            <div class="col-4">
+                <div class="element" style="align-content: center">
+                    <label for="trajectory-color" style="width: 100%; text-align: center">Traject.</label>
+                    <input class="color-select" id="trajectory-color" oninput="setColor()" type="color" value="#FFFFFF">
+                </div>
+            </div>
         </div>
         <label class="parent-label mt-1">Specular shiny</label>
         <div class="row">

js/lights.js

@@ -16,7 +16,8 @@ const lights = {
         ambient: '#000000',
         diffuse: '#ffffff',
         material: '#ffffff',
-        specular: '#ffffff'
+        specular: '#ffffff',
+        trajectory: '#ffffff'
     }
 }
 
@@ -109,6 +110,7 @@ function setColor() {
     lights.colors.diffuse = $('#diffuse-color').val()
     lights.colors.material = $('#ambient-mat-color').val()
     lights.colors.specular = $('#specular-color').val()
+    lights.colors.trajectory = $('#trajectory-color').val()
 }
 
 function setSpecShine() {

js/main.js

@@ -44,7 +44,7 @@ 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(models.sphere, sphereWorldMatrix, cm)
+        drawModel(models.sphere, sphereWorldMatrix, cm, decodeColor(lights.colors.trajectory), false)
         if (events.computeMax && (checkCollision(models.landscape.mesh, position, nextPosition) || position[1] < -0.2)) {
             events.maxCompletion = i
             events.computeMax = false
@@ -60,21 +60,20 @@ 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 || lights.lightType[2] === 1) {
+    if (lights.lightType[1] === 1) {
+        drawModel(models.sphere, utils.MakeWorld(lights.point.x, lights.point.y + 0.1, lights.point.z, 0, 0, 0, 0.05),
+            cm, decodeColor(lights.colors.light), true)
+    } else if (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(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)
+        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)
+        drawModel(models.sphere, sphereWorldMatrix, cm, [0, 1, 0], true)
     }
     if (events.playing) missile.completion += (Date.now() - events.lastDrawTimestamp) / (1000.0 * settings.flightTime)
     events.lastDrawTimestamp = Date.now()

js/models.js

@@ -47,7 +47,7 @@ async function loadModel(modelName) {
     return {vao, mesh, texture}
 }
 
-function drawModel(model, worldMatrix, cm) {
+function drawModel(model, worldMatrix, cm, fillColor, ignoreAmbient) {
     const viewWorldMatrix = utils.multiplyMatrices(cm.viewMatrix, worldMatrix)
     const projectionMatrix = utils.multiplyMatrices(cm.perspectiveMatrix, viewWorldMatrix)
 
@@ -56,6 +56,9 @@ function drawModel(model, worldMatrix, cm) {
     gl.uniformMatrix4fv(gl.getUniformLocation(program, 'two_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]
+    gl.uniform4f(gl.getUniformLocation(program, 'fillColor'), fillColor[0], fillColor[1], fillColor[2], fillColor[3])
+
     gl.activeTexture(gl.TEXTURE0)
     gl.bindTexture(gl.TEXTURE_2D, model.texture)
 

shaders/fs.glsl

@@ -11,7 +11,9 @@ out vec4 out_color;
 uniform mat4 wo_matrix;
 uniform mat4 two_matrix;
 uniform vec3 eyePos;
+
 uniform sampler2D u_texture;
+uniform vec4 fillColor;
 
 uniform vec4 LAlightType;
 uniform vec3 LAPos;
@@ -62,7 +64,11 @@ vec4 compSpecular(vec3 lightDir, vec4 lightCol, vec3 normalVec, vec3 eyedirVec)
 }
 
 void main() {
-    vec4 texcol = texture(u_texture, fs_uv);
+    vec4 texcol = fillColor.a != 0.0 ? fillColor : texture(u_texture, fs_uv);
+    if (fillColor.a == 1.0) {
+        out_color = texcol;
+        return;
+    }
     vec4 diffColor = diffuseColor * (1.0 - DTexMix) + texcol * DTexMix;
     vec4 ambColor = ambientMatColor * (1.0 - DTexMix) + texcol * DTexMix;