shadertools: Lighting module UBO (#2206)

visgl · Aug 22, 2024 · 876df03 · 876df03
1 parent c94ee48
commit 876df03
Show file tree

Hide file tree

Showing 11 changed files with 181 additions and 322 deletions.
diff --git a/examples/tutorials/lighting/app.ts b/examples/tutorials/lighting/app.ts
@@ -78,6 +78,7 @@ in vec2 texCoords;
 out vec3 vPosition;
 out vec3 vNormal;
 out vec2 vUV;
+out vec3 vColor;
 
 uniform appUniforms {
   mat4 modelMatrix;
@@ -89,6 +90,10 @@ void main(void) {
   vPosition = (app.modelMatrix * vec4(positions, 1.0)).xyz;
   vNormal = mat3(app.modelMatrix) * normals;
   vUV = texCoords;
+
+  #ifdef LIGHTING_VERTEX
+  vColor = lighting_getLightColor(vec3(1.0), app.eyePosition, vPosition, normalize(vNormal));
+  #endif
   gl_Position = app.mvpMatrix * vec4(positions, 1.0);
 }
 `;
@@ -100,22 +105,28 @@ precision highp float;
 in vec3 vPosition;
 in vec3 vNormal;
 in vec2 vUV;
+in vec3 vColor;
 
 uniform sampler2D uTexture;
 
 uniform appUniforms {
   mat4 modelMatrix;
   mat4 mvpMatrix;
   vec3 eyePosition;
-} uApp;
+} app;
 
 out vec4 fragColor;
 
 void main(void) {
+  #ifdef LIGHTING_FRAGMENT
   vec3 surfaceColor = texture(uTexture, vec2(vUV.x, 1.0 - vUV.y)).rgb;
-  surfaceColor = lighting_getLightColor(surfaceColor, uApp.eyePosition, vPosition, normalize(vNormal));
-
+  surfaceColor = lighting_getLightColor(surfaceColor, app.eyePosition, vPosition, normalize(vNormal));
   fragColor = vec4(surfaceColor, 1.0);
+  #endif
+
+  #ifdef LIGHTING_VERTEX
+  fragColor = vec4(vColor, 1.0);
+  #endif
 }
 `;
 
@@ -146,6 +157,7 @@ export default class AppAnimationLoopTemplate extends AnimationLoopTemplate {
   shaderInputs = new ShaderInputs<{
     app: typeof app.props;
     lighting: typeof lighting.props;
+    // Can replace with gouraudMaterial
     phongMaterial: typeof phongMaterial.props;
   }>({app, lighting, phongMaterial});
 
@@ -161,11 +173,14 @@ export default class AppAnimationLoopTemplate extends AnimationLoopTemplate {
       lighting: {
         lights: [
           {type: 'ambient', color: [255, 255, 255]},
-          {type: 'point', color: [255, 255, 255], position: [1, 2, 1]}
+          {type: 'point', color: [255, 120, 10], position: [2, 4, 3]},
+          {type: 'point', color: [0, 255, 10], position: [-2, 1, 3]}
+          // {type: 'directional', color: [0, 0, 255], direction: [-1, 0, -1]}
         ]
       },
       phongMaterial: {
-        specularColor: [255, 255, 255]
+        specularColor: [255, 255, 255],
+        shininess: 100
       }
     });
 

diff --git a/examples/tutorials/lighting/index.html b/examples/tutorials/lighting/index.html
@@ -1,4 +1,18 @@
 <!doctype html>
+<head>
+  <style>
+    body {
+      background: black;
+      margin: 0;
+    }
+
+    canvas {
+      height: 100% !important;
+      width: 100% !important;
+      transition: opacity 1s ease-in-out;
+    }
+  </style>
+</head>
 <script type="module">
   import {webgpuAdapter} from '@luma.gl/webgpu';
   import {webgl2Adapter} from '@luma.gl/webgl';

diff --git a/modules/shadertools/src/index.ts b/modules/shadertools/src/index.ts
@@ -77,9 +77,9 @@ export {picking} from './modules/engine/picking/picking';
 export type {LightingProps, LightingUniforms} from './modules/lighting/lights/lighting';
 export {lighting} from './modules/lighting/lights/lighting';
 export {dirlight} from './modules/lighting/no-material/dirlight';
-export type {PhongMaterialUniforms as GouraudMaterialUniforms} from './modules/lighting/phong-material/phong-material';
+export type {GouraudMaterialProps} from './modules/lighting/gouraud-material/gouraud-material';
 export {gouraudMaterial} from './modules/lighting/gouraud-material/gouraud-material';
-export type {PhongMaterialUniforms} from './modules/lighting/phong-material/phong-material';
+export type {PhongMaterialProps} from './modules/lighting/phong-material/phong-material';
 export {phongMaterial} from './modules/lighting/phong-material/phong-material';
 // export type {PBRMaterialSettings, PBRMaterialUniforms} from './modules/lighting/pbr-material/pbr';
 export {pbrMaterial} from './modules/lighting/pbr-material/pbr-material';

diff --git a/modules/shadertools/src/modules/lighting/gouraud-material/gouraud-material.ts b/modules/shadertools/src/modules/lighting/gouraud-material/gouraud-material.ts
@@ -2,13 +2,12 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
+import {NumberArray3} from '@math.gl/types';
 import {ShaderModule} from '../../../lib/shader-module/shader-module';
 import {lighting} from '../lights/lighting';
-import {GOURAUD_VS, GOURAUD_FS} from './gouraud-shaders-glsl';
+import {PHONG_VS, PHONG_FS} from '../phong-material/phong-shaders-glsl';
 
-export type GouraudMaterialProps = GouraudMaterialUniforms;
-
-export type GouraudMaterialUniforms = {
+export type GouraudMaterialProps = {
   ambient?: number;
   diffuse?: number;
   /** Specularity exponent */
@@ -17,14 +16,13 @@ export type GouraudMaterialUniforms = {
 };
 
 /** In Gouraud shading, color is calculated for each triangle vertex normal, and then color is interpolated colors across the triangle */
-export const gouraudMaterial = {
+export const gouraudMaterial: ShaderModule<GouraudMaterialProps> = {
   props: {} as GouraudMaterialProps,
-  uniforms: {} as GouraudMaterialUniforms,
 
-  name: 'gouraud-lighting',
+  name: 'gouraudMaterial',
   // Note these are switched between phong and gouraud
-  vs: GOURAUD_VS,
-  fs: GOURAUD_FS,
+  vs: PHONG_FS.replace('phongMaterial', 'gouraudMaterial'),
+  fs: PHONG_VS.replace('phongMaterial', 'gouraudMaterial'),
   defines: {
     LIGHTING_VERTEX: 1
   },
@@ -42,7 +40,11 @@ export const gouraudMaterial = {
     specularColor: [0.15, 0.15, 0.15]
   },
 
-  getUniforms(props: GouraudMaterialProps): GouraudMaterialUniforms {
-    return {...gouraudMaterial.defaultUniforms, ...props};
+  getUniforms(props: GouraudMaterialProps) {
+    const uniforms = {...props};
+    if (uniforms.specularColor) {
+      uniforms.specularColor = uniforms.specularColor.map(x => x / 255) as NumberArray3;
+    }
+    return {...gouraudMaterial.defaultUniforms, ...uniforms};
   }
-} as const satisfies ShaderModule<GouraudMaterialProps, GouraudMaterialUniforms>;
+};
diff --git a/modules/shadertools/src/modules/lighting/gouraud-material/gouraud-shaders-glsl.ts b/modules/shadertools/src/modules/lighting/gouraud-material/gouraud-shaders-glsl.ts
diff --git a/modules/shadertools/src/modules/lighting/lights/lighting-uniforms-glsl.ts b/modules/shadertools/src/modules/lighting/lights/lighting-uniforms-glsl.ts
@@ -23,28 +23,51 @@ struct DirectionalLight {
 
 uniform lightingUniforms {
   int enabled;
-  int pointLightCount;
+  int lightType;
+
   int directionalLightCount;
+  int pointLightCount;
 
   vec3 ambientColor;
 
-  int lightType;
-  vec3 lightColor;
-  vec3 lightDirection;
-  vec3 lightPosition;
-  vec3 lightAttenuation;
-
-  // AmbientLight ambientLight;
-  // PointLight pointLight[MAX_LIGHTS];
-  // DirectionalLight directionalLight[MAX_LIGHTS];
+  vec3 lightColor0;
+  vec3 lightPosition0;
+  vec3 lightDirection0;
+  vec3 lightAttenuation0;
+
+  vec3 lightColor1;
+  vec3 lightPosition1;
+  vec3 lightDirection1;
+  vec3 lightAttenuation1;
+
+  vec3 lightColor2;
+  vec3 lightPosition2;
+  vec3 lightDirection2;
+  vec3 lightAttenuation2;
 } lighting;
 
 PointLight lighting_getPointLight(int index) {
-  return PointLight(lighting.lightColor, lighting.lightPosition, lighting.lightAttenuation);
+  switch (index) {
+    case 0:
+      return PointLight(lighting.lightColor0, lighting.lightPosition0, lighting.lightAttenuation0);
+    case 1:
+      return PointLight(lighting.lightColor1, lighting.lightPosition1, lighting.lightAttenuation1);
+    case 2:
+    default:  
+      return PointLight(lighting.lightColor2, lighting.lightPosition2, lighting.lightAttenuation2);
+  }
 }
 
 DirectionalLight lighting_getDirectionalLight(int index) {
-  return DirectionalLight(lighting.lightColor, lighting.lightDirection);
+  switch (index) {
+    case 0:
+      return DirectionalLight(lighting.lightColor0, lighting.lightDirection0);
+    case 1:
+      return DirectionalLight(lighting.lightColor1, lighting.lightDirection1);
+    case 2:
+    default:   
+      return DirectionalLight(lighting.lightColor2, lighting.lightDirection2);
+  }
 } 
 
 float getPointLightAttenuation(PointLight pointLight, float distance) {