skycraft: now with sunlight!

skycraft/index.js

@@ -16,6 +16,7 @@ uniform mat4 uModel;
 uniform mat4 uView;
 uniform vec3 uLightDirection;
 uniform float uAmbiantLight;
+uniform vec3 uGlowColor;
 
 varying highp vec2 vTextureCoord;
 varying lowp vec3 vLighting;
@@ -29,7 +30,7 @@ void main() {
     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;
+    vLighting = ambiant + vec3(1.0, 1.0, 1.0) * diffuseAmount + uGlowColor;
 
     vTextureCoord = aTextureCoord;
 
@@ -69,6 +70,7 @@ async function initWorldGl(gl) {
     const fogColorLoc = gl.getUniformLocation(program, 'uFogColor');
     const lightDirectionLoc = gl.getUniformLocation(program, 'uLightDirection');
     const ambiantLoc = gl.getUniformLocation(program, 'uAmbiantLight');
+    const glowColorLoc = gl.getUniformLocation(program, 'uGlowColor');
 
     const positionLoc = gl.getAttribLocation(program, 'aPosition');
     const normalLoc = gl.getAttribLocation(program, 'aNormal');
@@ -79,7 +81,6 @@ async function initWorldGl(gl) {
             projectionMatrix,
             viewMatrix,
             fogColor,
-            lightDirection,
             ambiantLightAmount,
         } = sceneParams;
 
@@ -88,7 +89,6 @@ async function initWorldGl(gl) {
         gl.uniformMatrix4fv(projLoc, false, new Float32Array(projectionMatrix));
         gl.uniformMatrix4fv(viewLoc, false, new Float32Array(viewMatrix));
         gl.uniform3fv(fogColorLoc, fogColor);
-        gl.uniform3fv(lightDirectionLoc, lightDirection);
         gl.uniform1f(ambiantLoc, ambiantLightAmount);
 
         // doing this here because it's the same for all world stuff
@@ -108,10 +108,14 @@ async function initWorldGl(gl) {
             orientation,
             glBuffer,
             numVertices,
+            lightDirection,
+            glowColor,
         } = objectParams;
 
         gl.uniformMatrix4fv(modelLoc, false, new Float32Array(se3.product(
             se3.translation(...position), orientation)));
+        gl.uniform3fv(lightDirectionLoc, lightDirection);
+        gl.uniform3fv(glowColorLoc, glowColor);
 
         gl.bindBuffer(gl.ARRAY_BUFFER, glBuffer);
 
@@ -497,6 +501,7 @@ function getSolarSystem(seed) {
         spin: [0, 0, 0.2],
 
         geometry: getBodyGeometry(0),
+        glowColor: [0.5, 0.5, 0.46],
 
         children: [
             {
@@ -1035,7 +1040,7 @@ const kGravitationalConstant = 6.674e-11;
 function getObjects(context, body, parentPosition) {
     const objects = [];
     const {gl, glContext, player} = context;
-    const {position, orientation} = body;
+    const {position, orientation, glowColor} = body;
 
     if (body.glBuffer === undefined) {
         body.glBuffer = makeBufferFromFaces(gl, body.geometry);
@@ -1046,6 +1051,7 @@ function getObjects(context, body, parentPosition) {
         orientation,
         position,
         glContext,
+        glowColor,
     });
     if (parentPosition !== undefined) {
         const orbitObject = makeOrbitObject(context, body.orbit, parentPosition);
@@ -1074,6 +1080,10 @@ function getObjects(context, body, parentPosition) {
     return objects;
 }
 
+function sunDirection(context, position) {
+    return linalg.scale(position, 1/linalg.norm(position));
+}
+
 function draw(context) {
     const {gl, camera, player, universe} = context;
     const objects = getObjects(context, universe); 
@@ -1101,24 +1111,26 @@ function draw(context) {
     ].reduce(se3.product));
     let lastGlContext;
 
-    for (const {position, orientation, geometry, glContext} of objects) {
+    for (const {position, orientation, geometry, glContext, glowColor} of objects) {
         if (glContext !== lastGlContext) {
             glContext.setupScene({
                 projectionMatrix: context.projMatrix,
                 viewMatrix,
                 fogColor: context.skyColor,
-                lightDirection: context.lightDirection,
                 ambiantLightAmount: context.ambiantLight,
             });
         }
 
         lastGlContext = glContext;
+        const lightDirection = sunDirection(context, position);
 
         glContext.drawObject({
             position,
             orientation,
             glBuffer: geometry.glBuffer,
             numVertices: geometry.numVertices,
+            lightDirection,
+            glowColor: glowColor || [0, 0, 0],
         });
     }
 }
@@ -1191,10 +1203,11 @@ async function main() {
 
     // TODO
     // [ ] loading bar
-    // [ ] spaceship
+    // [x] spaceship
     // [ ] landing
     // [ ] huge planets
-    // [ ] lighting
+    // [x] lighting
+    // [ ] better lighting
 
     const modelPromise = loadStlModel('spaceship.stl');