skycraft: per-object specular color

skycraft/draw.ts

@@ -15,12 +15,14 @@ uniform mat4 uView;
 uniform vec3 uLightDirection;
 uniform float uAmbiantLight;
 uniform vec3 uGlowColor;
+uniform vec3 uSpecularColor;
 
 varying highp vec2 vTextureCoord;
 varying lowp vec3 vLighting;
 varying lowp vec3 vRay;
 varying lowp vec3 vLightDir;
 varying lowp vec3 vNormal;
+varying lowp vec3 vSpecularColor;
 
 highp mat3 transpose(in highp mat3 inmat) {
     highp vec3 x = inmat[0];
@@ -50,6 +52,7 @@ void main() {
     vRay = -normalize((uModel * vec4(aPosition, 1.0)).xyz - camPos);
     vLightDir = -uLightDirection;
     vNormal = normal;
+    vSpecularColor = uSpecularColor;
 }
 `;
 
@@ -61,6 +64,7 @@ varying lowp vec3 vLighting;
 varying lowp vec3 vRay;
 varying lowp vec3 vLightDir;
 varying lowp vec3 vNormal;
+varying lowp vec3 vSpecularColor;
 
 void main() {
     highp vec4 color = texture2D(uSampler, vTextureCoord);
@@ -69,7 +73,7 @@ void main() {
     }
     lowp vec3 specularDir = 2.0 * dot(vLightDir, vNormal) * vNormal - vLightDir;
     lowp float specularAmount = smoothstep(0.92, 1.0, dot(vRay, specularDir));
-    lowp vec3 specular = 0.8 * specularAmount * vec3(1.0, 1.0, 0.8);
+    lowp vec3 specular = specularAmount * vSpecularColor;
     gl_FragColor = vec4(vLighting * color.rgb + specular, color.a);
 }
 `;
@@ -86,6 +90,7 @@ export async function initWorldGl(gl: WebGLRenderingContext) {
     const lightDirectionLoc = gl.getUniformLocation(program, 'uLightDirection');
     const ambiantLoc = gl.getUniformLocation(program, 'uAmbiantLight');
     const glowColorLoc = gl.getUniformLocation(program, 'uGlowColor');
+    const specularColorLoc = gl.getUniformLocation(program, 'uSpecularColor');
 
     const positionLoc = gl.getAttribLocation(program, 'aPosition');
     const normalLoc = gl.getAttribLocation(program, 'aNormal');
@@ -123,12 +128,14 @@ export async function initWorldGl(gl: WebGLRenderingContext) {
             numVertices,
             lightDirection,
             glowColor,
+            specularColor,
         } = objectParams;
 
         gl.uniformMatrix4fv(modelLoc, false, new Float32Array(se3.product(
             se3.translation(...position), orientation)));
         gl.uniform3fv(lightDirectionLoc, lightDirection);
         gl.uniform3fv(glowColorLoc, glowColor);
+        gl.uniform3fv(specularColorLoc, specularColor);
 
         gl.bindBuffer(gl.ARRAY_BUFFER, glBuffer);
 
@@ -240,7 +247,7 @@ export function getOrbitDrawContext(gl: WebGLRenderingContext) {
 function getObjects(context, body, parentPosition = undefined) {
     const objects = [];
     const {gl, glContext, player} = context;
-    const {position, orientation, glowColor} = body;
+    const {position, orientation, glowColor, specularColor} = body;
 
     if (body.glBuffer === undefined) {
         body.glBuffer = makeBufferFromFaces(gl, body.geometry);
@@ -252,6 +259,7 @@ function getObjects(context, body, parentPosition = undefined) {
         position,
         glContext,
         glowColor,
+        specularColor,
     });
     if (parentPosition !== undefined) {
         const orbitObject = makeOrbitObject(gl, context.orbitGlContext, body.orbit, parentPosition);
@@ -268,6 +276,7 @@ function getObjects(context, body, parentPosition = undefined) {
             orientation: shipOrientation,
             position: shipPos,
             glContext,
+            specularColor: [0.8, 0.8, 0.8],
         });
     }
 
@@ -311,7 +320,7 @@ export function draw(context) {
     ].reduce(se3.product));
     let lastGlContext;
 
-    for (const {position, orientation, geometry, glContext, glowColor} of objects) {
+    for (const {position, orientation, geometry, glContext, glowColor, specularColor} of objects) {
         if (glContext !== lastGlContext) {
             glContext.setupScene({
                 projectionMatrix: projMatrix,
@@ -330,6 +339,7 @@ export function draw(context) {
             numVertices: geometry.numVertices,
             lightDirection,
             glowColor: glowColor || [0, 0, 0],
+            specularColor: specularColor || [0, 0, 0],
         });
     }
 }