implement basic rendering of standard on webgpu

fuzhenn · fuzhenn · commit d8ea99b1b448 · 2025-04-14T16:59:20.000+08:00
diff --git a/debug/gl/vt-extrusion.html b/debug/gl/vt-extrusion.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+  <meta charset='UTF-8' />
+  <meta name='viewport' content='width=device-width, initial-scale=1' />
+  <title>vt-fill</title>
+  <style type='text/css'>
+    html,
+    body {
+      width: 100%;
+      height: 100%;
+      margin: 0px;
+    }
+
+    .container {
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+  <link rel="stylesheet" href="/maptalks/dist/maptalks.css">
+  <script type="text/javascript" src="/maptalks/dist/maptalks.js"></script>
+  <script type="text/javascript" src="/maptalks-work/packages/gl/dist/maptalksgl.js"></script>
+  <script type="text/javascript" src="/maptalks-work/packages/vt/dist/maptalks.vt.js"></script>
+
+  <body>
+    <canvas id="DEBUG" width="1" height="1"></canvas>
+    <div id="map" class="container"></div>
+
+    <script>
+      const map = new maptalks.Map("map", {
+        center: [-73.98795379493208, 40.72100197835064],
+        zoom: 19,
+        bearing: -69,
+        renderer: 'gpu'
+      });
+
+      /**start**/
+      const vt = new maptalks.VectorTileLayer("vt", {
+        features: true,
+        urlTemplate: "http://tile.maptalks.com/test/planet-single/{z}/{x}/{y}.mvt",
+      });
+
+      const style = {
+        style: [
+          {
+            filter: ["all", ["==", "$layer", "building"],
+              ["==", "$type", "Polygon"]
+            ],
+            renderPlugin: {
+                type: "lit",
+                dataConfig: {
+                    type: "3d-extrusion",
+                    altitudeProperty: "height",
+                    minHeightProperty: "min_height",
+                    altitudeScale: 1,
+                    defaultAltitude: 10,
+                    topThickness: 0,
+                    top: true,
+                    side: true
+                },
+                sceneConfig: {}
+                },
+                symbol: {
+                    material: {
+                        baseColorFactor: [1, 1, 1, 1],
+                        roughnessFactor: 1,
+                        metallicFactor: 1
+                    }
+                }
+          }
+        ],
+      };
+      vt.setStyle(style);
+      /**end**/
+
+      // const groupLayer = new maptalks.GroupGLLayer("group", [vt]);
+      // groupLayer.addTo(map);
+      vt.addTo(map);
+
+      map.on('click', e => {
+        const hits = vt.identify(e.coordinate);
+        if (hits.length) {
+          console.log(hits[0].data.feature.properties);
+        }
+      });
+    </script>
+  </body>
+
+</html>
diff --git a/packages/reshader.gl/src/pbr/wgsl/standard_frag.wgsl b/packages/reshader.gl/src/pbr/wgsl/standard_frag.wgsl
@@ -36,9 +36,9 @@ struct SceneUniforms {
     metallicFactor: f32,
     normalMapFactor: f32,
     specularF0: f32,
-    emitMultiplicative: i32,
-    normalMapFlipY: i32,
-    outputSRGB: i32,
+    emitMultiplicative: f32,
+    normalMapFlipY: f32,
+    outputSRGB: f32,
     contrast: f32,
 
     hsv: vec3f,
@@ -414,9 +414,9 @@ fn initMaterial(vertexOutput: VertexOutput) -> MaterialUniforms {
     let patternWidth = ceil(uvSize.x * vertexOutput.vPatternHeight / uvSize.y);
     let plusGapWidth = patternWidth * (1.0 + myGap);
     let animSpeed = myAnimSpeed / uniforms.animSpeedScale;
-    linesofar += mod(uniforms.currentTime * -animSpeed * 0.2, plusGapWidth);
-    let patternx = mod(linesofar / plusGapWidth, 1.0);
-    let patterny = mod(uniforms.flipY * vertexOutput.vNormalY, 1.0);
+    linesofar += (uniforms.currentTime * -animSpeed * 0.2) % plusGapWidth;
+    let patternx = (linesofar / plusGapWidth) % 1.0;
+    let patterny = (uniforms.flipY * vertexOutput.vNormalY) % 1.0;
     uv = computeUV(vec2(patternx * (1.0 + myGap) * uniforms.uvScale[0], patterny * uniforms.uvScale[1]));
     let patternColor = textureSample(linePatternFile, linePatternFileSampler, uv);
     let inGap = clamp(sign(1.0 / (1.0 + myGap) - patternx) + 0.000001, 0.0, 1.0);
@@ -476,7 +476,7 @@ fn initMaterial(vertexOutput: VertexOutput) -> MaterialUniforms {
 
     materialUniforms.emit = uniforms.emissiveFactor;
 #if HAS_EMISSIVE_MAP
-    if (uniforms.emitMultiplicative == 1) {
+    if (uniforms.emitMultiplicative == 1.0) {
         materialUniforms.emit *= sRGBToLinear(textureSample(emissiveTexture, emissiveTextureSampler, uv).rgb);
     } else {
         materialUniforms.emit += sRGBToLinear(textureSample(emissiveTexture, emissiveTextureSampler, uv).rgb);
@@ -494,15 +494,15 @@ fn initMaterial(vertexOutput: VertexOutput) -> MaterialUniforms {
 
 #if HAS_NORMAL_MAP && HAS_TANGENT
     var nmap = textureSample(normalTexture, normalTextureSampler, uv).xyz * 2.0 - 1.0;
-    nmap.y = uniforms.normalMapFlipY == 1 ? -nmap.y : nmap.y;
+    nmap.y = select(nmap.y, -namp.y, uniforms.normalMapFlipY == 1.0);
     materialUniforms.normal = nmap;
 #else
     materialUniforms.normal = normalize(vertexOutput.vModelNormal);
 #endif
 
 #if HAS_TERRAIN_NORMAL && HAS_TANGENT
     var nmap = convertTerrainHeightToNormalMap(uv);
-    nmap.y = uniforms.normalMapFlipY == 1 ? -nmap.y : nmap.y;
+    nmap.y = select(nmap.y, -namp.y, uniforms.normalMapFlipY == 1.0);
     materialUniforms.normal = nmap;
 #endif
 
@@ -620,8 +620,8 @@ fn normalFiltering(roughness: f32, worldNormal: vec3f) -> f32 {
         let z = fetchDepth(sampleUV.xy);
         let depth = linearizeDepth(z);
         let sampleDepth = -1.0 / sampleUV.z;
-        *startSteps = depth > sampleDepth ? *startSteps : steps;
-        *endSteps = depth > sampleDepth ? steps : *endSteps;
+        *startSteps = select(steps, *startSteps, depth > sampleDepth);
+        *endSteps = select(*endSteps, steps, depth > sampleDepth);
         return steps;
     }
 
@@ -654,7 +654,7 @@ fn normalFiltering(roughness: f32, worldNormal: vec3f) -> f32 {
             depthDiff *= clamp(sign(abs(depthDiff) - rayLen * invNumSteps * invNumSteps), 0.0, 1.0);
             hit = abs(depthDiff + depthTolerance) < depthTolerance;
             let timeLerp = clamp(diffSampleW.x / (diffSampleW.x - depthDiff), 0.0, 1.0);
-            let hitTime = hit ? (diffSampleW.y + timeLerp * invNumSteps - invNumSteps) : 1.0;
+            let hitTime = select(1.0, (diffSampleW.y + timeLerp * invNumSteps - invNumSteps), hit);
             diffSampleW.z = min(diffSampleW.z, hitTime);
             diffSampleW.x = depthDiff;
             if (hit) {
@@ -701,7 +701,7 @@ fn normalFiltering(roughness: f32, worldNormal: vec3f) -> f32 {
         var result = vec4f(0.0);
         var rough4 = roughness * roughness;
         rough4 = rough4 * rough4;
-        let upVector = abs(normal.z) < 0.999 ? vec3f(0.0, 0.0, 1.0) : vec3f(1.0, 0.0, 0.0);
+        let upVector = select(vec3f(1.0, 0.0, 0.0), vec3f(0.0, 0.0, 1.0), abs(normal.z) < 0.999);
         let tangentX = normalize(cross(upVector, normal));
         let tangentY = cross(normal, tangentX);
         var maskSsr = shaderUniforms.ssrFactor * clamp(-4.0 * dot(eyeVector, normal) + 3.8, 0.0, 1.0);
@@ -719,7 +719,7 @@ fn normalFiltering(roughness: f32, worldNormal: vec3f) -> f32 {
                 result += fetchColorInRay(resRay, maskSsr, specularEnvironment, specularColor, roughness);
             }
         }
-        return result.w > 0.0 ? result.rgb / result.w : specularEnvironment;
+        return select(specularEnvironment, result.rgb / result.w, result.w > 0.0);
     }
 #endif
 
@@ -829,7 +829,7 @@ fn main(vertexOutput: VertexOutput) -> @location(0) vec4f {
     diffuse += materialEmit;
 
     var frag = specular + diffuse;
-    if (uniforms.outputSRGB == 1) {
+    if (uniforms.outputSRGB == 1.0) {
         frag = linearTosRGB(frag);
     }
 
diff --git a/packages/reshader.gl/src/pbr/wgsl/standard_vert.wgsl b/packages/reshader.gl/src/pbr/wgsl/standard_vert.wgsl
@@ -166,15 +166,15 @@ fn transformTexcoord(uv: vec2f) -> vec2f {
     #ifdef HAS_RANDOM_TEX
         let origin = uniforms.uvOrigin;
         let texCoord = decodedTexCoord * uniforms.uvScale + uniforms.uvOffset;
-        return mod(origin, 1.0) + texCoord;
+        return (origin % 1.0) + texCoord;
     #else
         let origin = uniforms.uvOrigin;
         let texCoord = decodedTexCoord * uniforms.uvScale;
         if (uniforms.uvRotation != 0.0) {
             origin = rotateUV(origin, uniforms.uvRotation);
             texCoord = rotateUV(texCoord, uniforms.uvRotation);
         }
-        return mod(origin, 1.0) + texCoord + uniforms.uvOffset;
+        return (origin % 1.0) + texCoord + uniforms.uvOffset;
     #endif
 }
 #endif
diff --git a/packages/reshader.gl/src/shaderlib/glsl/srgb.frag b/packages/reshader.gl/src/shaderlib/glsl/srgb.frag
@@ -1,6 +1,14 @@
 vec3 linearTosRGB(const in vec3 color) {
-    return vec3( color.r < 0.0031308 ? color.r * 12.92 : 1.055 * pow(color.r, 1.0/2.4) - 0.055, color.g < 0.0031308 ? color.g * 12.92 : 1.055 * pow(color.g, 1.0/2.4) - 0.055, color.b < 0.0031308 ? color.b * 12.92 : 1.055 * pow(color.b, 1.0/2.4) - 0.055);
+    return vec3(
+        color.r < 0.0031308 ? color.r * 12.92 : 1.055 * pow(color.r, 1.0/2.4) - 0.055,
+        color.g < 0.0031308 ? color.g * 12.92 : 1.055 * pow(color.g, 1.0/2.4) - 0.055,
+        color.b < 0.0031308 ? color.b * 12.92 : 1.055 * pow(color.b, 1.0/2.4) - 0.055
+    );
 }
 vec3 sRGBToLinear(const in vec3 color) {
-    return vec3( color.r < 0.04045 ? color.r * (1.0 / 12.92) : pow((color.r + 0.055) * (1.0 / 1.055), 2.4), color.g < 0.04045 ? color.g * (1.0 / 12.92) : pow((color.g + 0.055) * (1.0 / 1.055), 2.4), color.b < 0.04045 ? color.b * (1.0 / 12.92) : pow((color.b + 0.055) * (1.0 / 1.055), 2.4));
+    return vec3(
+        color.r < 0.04045 ? color.r * (1.0 / 12.92) : pow((color.r + 0.055) * (1.0 / 1.055), 2.4),
+        color.g < 0.04045 ? color.g * (1.0 / 12.92) : pow((color.g + 0.055) * (1.0 / 1.055), 2.4),
+        color.b < 0.04045 ? color.b * (1.0 / 12.92) : pow((color.b + 0.055) * (1.0 / 1.055), 2.4)
+    );
 }
