chore: 光照

dev-demos/features/polygon/demos/indoor.tsx

@@ -14,6 +14,7 @@ import {
     useEffect(() => {
       const scene = new Scene({
         id: 'map',
+        renderer: 'device',
         map: new GaodeMap({
           style: 'dark',
           center: [120, 29.732983],
@@ -46,6 +47,7 @@ import {
                 // topsurface: false,
               });
             scene.addLayer(provincelayerSide);
+            scene.startAnimate()
 
           });
       });

packages/core/src/services/shader/ShaderModuleService.ts

@@ -9,7 +9,7 @@ import common from '../../shaders/common.glsl';
 import decode from '../../shaders/decode.glsl';
 import scene_uniforms from '../../shaders/scene_uniforms.glsl';
 import picking_uniforms from '../../shaders/picking_uniforms.glsl';
-import light from '../../shaders/light2.glsl';
+import light from '../../shaders/common_light.glsl';
 import lighting from '../../shaders/lighting.glsl';
 import pickingFrag from '../../shaders/picking.frag.glsl';
 import pickingVert from '../../shaders/picking.vert.glsl';

packages/core/src/shaders/lighting.glsl

@@ -50,34 +50,6 @@ vec3 calc_directional_light(DirectionalLight light, vec3 normal, vec3 viewDir) {
   return ambient + diffuse + specular;
 }
 
-// vec3 calc_spot_light(SpotLight light, vec3 normal, vec3 fragPos, vec3 viewDir) {
-//   vec3 lightDir = normalize(light.position - fragPos);
-//   // diffuse shading
-//   float diff = max(dot(normal, lightDir), 0.0);
-//   // specular shading
-//   vec3 reflectDir = reflect(-lightDir, normal);
-//   float spec = pow(max(dot(viewDir, reflectDir), 0.0), SHININESS);
-//   // attenuation
-//   float distance = length(light.position - fragPos);
-//   float attenuation = 1.0 / (light.constant + light.linear * distance +
-//           light.quadratic * (distance * distance));
-
-//   vec3 ambient = light.ambient * u_Ambient;
-//   vec3 diffuse = light.diffuse * diff * u_Diffuse;
-//   vec3 specular = light.specular * spec * u_Specular;
-
-//   float spotEffect = dot(normalize(light.direction), -lightDir);
-//   float spotCosCutoff = cos(light.angle / 180.0 * PI);
-//   float spotCosOuterCutoff = cos((light.angle + light.blur) / 180.0 * PI);
-//   float spotCosInnerCutoff = cos((light.angle - light.blur) / 180.0 * PI);
-//   if (spotEffect > spotCosCutoff) {
-//     spotEffect = pow(smoothstep(spotCosOuterCutoff, spotCosInnerCutoff, spotEffect), light.exponent);
-//   } else {
-//     spotEffect = 0.0;
-//   }
-
-//   return ambient + attenuation * (spotEffect * diffuse + specular);
-// }
 
 vec3 calc_lighting(vec3 position, vec3 normal, vec3 viewDir) {
   vec3 weight = vec3(0.0);
@@ -87,11 +59,5 @@ vec3 calc_lighting(vec3 position, vec3 normal, vec3 viewDir) {
     }
     weight += calc_directional_light(u_DirectionalLights[i], normal, viewDir);
   }
-  // for (int i = 0; i < MAX_NUM_OF_SPOT_LIGHTS; i++) {
-  //   if (i >= u_NumOfSpotLights) {
-  //     break;
-  //   }
-  //   weight += calc_spot_light(u_SpotLights[i], normal, position, viewDir);
-  // }
   return weight;
 }

packages/layers/src/core/BaseModel.ts

@@ -336,16 +336,21 @@ ${uniforms.join('\n')}
   public initUniformsBuffer() {
     const attrUniforms = this.getUniformsBufferInfo(this.getStyleAttribute());
     const commonUniforms = this.getCommonUniformsInfo();
-    this.attributeUnifoms = this.rendererService.createBuffer({
-      data: new Float32Array(MultipleOfFourNumber(attrUniforms.uniformsLength)), // 长度需要大于等于 4
-      isUBO: true,
-    });
+    if (attrUniforms.uniformsLength !== 0) {
+      this.attributeUnifoms = this.rendererService.createBuffer({
+        data: new Float32Array(MultipleOfFourNumber(attrUniforms.uniformsLength)).fill(0), // 长度需要大于等于 4
+        isUBO: true,
+      });
+      this.uniformBuffers.push(this.attributeUnifoms);
+    }
+    if (commonUniforms.uniformsLength !== 0) {
+      this.commonUnifoms = this.rendererService.createBuffer({
+        data: new Float32Array(MultipleOfFourNumber(commonUniforms.uniformsLength)).fill(0),
+        isUBO: true,
+      });
+      this.uniformBuffers.push(this.commonUnifoms);
+    }
 
-    this.commonUnifoms = this.rendererService.createBuffer({
-      data: new Float32Array(MultipleOfFourNumber(commonUniforms.uniformsLength)),
-      isUBO: true,
-    });
-    this.uniformBuffers = [this.attributeUnifoms, this.commonUnifoms];
   }
   // 获取数据映射 uniform 信息
   protected getUniformsBufferInfo(uniformsOption: { [key: string]: any }) {
@@ -380,13 +385,13 @@ ${uniforms.join('\n')}
   public updateStyleUnifoms() {
     const { uniformsArray } = this.getUniformsBufferInfo(this.getStyleAttribute());
     const { uniformsArray: commonUniformsArray } = this.getCommonUniformsInfo();
-    this.attributeUnifoms.subData({
+    this.attributeUnifoms?.subData({
       offset: 0,
       data: new Uint8Array(
         new Float32Array(uniformsArray).buffer,
       ),
     });
-    this.commonUnifoms.subData({
+    this.commonUnifoms?.subData({
       offset: 0,
       data: new Uint8Array(
         new Float32Array(commonUniformsArray).buffer,

packages/layers/src/core/utils.ts

@@ -12,6 +12,6 @@ export function formatUniformsOption2Std140 (uniformsOption:{[key:string]:any})
 }
 
 export function MultipleOfFourNumber(num: number) {
-  return Math.ceil(num / 4) * 4;
+  return Math.max(Math.ceil(num / 4) * 4, 4);
 }
 

packages/layers/src/point/shaders/extrude/extrude_vert.glsl

@@ -1,7 +1,4 @@
 #define pi 3.1415926535
-#define ambientRatio 0.5
-#define diffuseRatio 0.3
-#define specularRatio 0.2
 
 layout(location = 0) in vec3 a_Position;
 layout(location = 1) in vec4 a_Color;

packages/layers/src/polygon/models/extrusion.ts

@@ -9,13 +9,24 @@ import BaseModel from '../../core/BaseModel';
 import { PolygonExtrudeTriangulation } from '../../core/triangulation';
 import polygonExtrudeFrag from '../shaders/extrusion/polygon_extrusion_frag.glsl';
 import polygonExtrudeVert from '../shaders/extrusion/polygon_extrusion_vert.glsl';
+import { ShaderLocation } from '../../core/CommonStyleAttribute';
 
 export default class ExtrusionModel extends BaseModel {
   protected texture: ITexture2D;
   public getUninforms() {
+    const commoninfo = this.getCommonUniformsInfo();
+    const attributeInfo = this.getUniformsBufferInfo(this.getStyleAttribute());
+    this.updateStyleUnifoms();
     return {
-      ...this.getStyleAttribute(),
-    };
+      ...commoninfo.uniformsOption,
+      ...attributeInfo.uniformsOption,
+    }
+  }
+
+  protected  getCommonUniformsInfo(): { uniformsArray: number[]; uniformsLength: number; uniformsOption: { [key: string]: any; }; } {
+    const commonOptions = {};
+    const commonBufferInfo = this.getUniformsBufferInfo(commonOptions);
+    return commonBufferInfo;
   }
 
   public async initModels(): Promise<IModel[]> {
@@ -24,6 +35,7 @@ export default class ExtrusionModel extends BaseModel {
 
   public async buildModels(): Promise<IModel[]> {
     const { frag, vert, type } = this.getShaders();
+    this.initUniformsBuffer();
     const model = await this.layer.buildLayerModel({
       moduleName: type,
       vertexShader: vert,
@@ -52,6 +64,7 @@ export default class ExtrusionModel extends BaseModel {
       type: AttributeType.Attribute,
       descriptor: {
         name: 'a_Normal',
+        shaderLocation: ShaderLocation.NORMAL,
         buffer: {
           // give the WebGL driver a hint that this buffer may change
           usage: gl.STATIC_DRAW,
@@ -76,6 +89,7 @@ export default class ExtrusionModel extends BaseModel {
       type: AttributeType.Attribute,
       descriptor: {
         name: 'a_Size',
+        shaderLocation: ShaderLocation.SIZE,
         buffer: {
           usage: gl.DYNAMIC_DRAW,
           data: [],

packages/layers/src/polygon/shaders/extrusion/polygon_extrusion_frag.glsl

@@ -1,13 +1,9 @@
 
-uniform float u_opacity: 1.0;
-varying vec4 v_Color;
-varying vec2 v_texture_data;
-
-
+in vec4 v_Color;
 #pragma include "picking"
-
+out vec4 outputColor;
 void main() {
 
-  gl_FragColor = v_Color;
-  gl_FragColor = filterColor(gl_FragColor);
+  outputColor = v_Color;
+  outputColor = filterColor(outputColor);
 }

packages/layers/src/polygon/shaders/extrusion/polygon_extrusion_vert.glsl

@@ -1,19 +1,9 @@
-precision highp float;
+layout(location = 0) in vec3 a_Position;
+layout(location = 1) in vec4 a_Color;
+layout(location = 9) in float a_Size;
+layout(location = 13) in vec3 a_Normal;
 
-#define ambientRatio 0.5
-#define diffuseRatio 0.3
-#define specularRatio 0.2
-
-attribute vec4 a_Color;
-attribute vec3 a_Position;
-attribute vec3 a_Normal;
-attribute float a_Size;
-uniform mat4 u_ModelMatrix;
-
-
-
-
-varying vec4 v_Color;
+out vec4 v_Color;
 
 #pragma include "projection"
 #pragma include "light"
@@ -22,8 +12,9 @@ varying vec4 v_Color;
 void main() {
 
   vec4 pos = vec4(a_Position.xy, a_Position.z * a_Size + (1.0 - a_Position.z) * extrusionBase, 1.0);
-  float lightWeight = calc_lighting(pos);
+
   vec4 project_pos = project_position(pos);
+   float lightWeight = calc_lighting(project_pos);
   v_Color = a_Color;
   v_Color = vec4(v_Color.rgb * lightWeight, v_Color.w * opacity);