maptalks · fuzhenn · Feb 17, 2025 · Dec 30, 2024 · Dec 30, 2024 · Dec 31, 2024
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -3,42 +3,44 @@
 # Check https://circleci.com/docs/2.0/language-javascript/ for more details
 #
 version: 2.1
+executors:
+  node-browser-executor:
+    docker:
+      - image: cimg/node:22.14-browsers
 orbs:
   browser-tools: circleci/[email protected]
 jobs:
-  build:
-    docker:
-      # specify the version you desire here
-      - image: cimg/node:20.11-browsers
-        environment:
-          CHROME_BIN: "/usr/bin/google-chrome"
-
-      # Specify service dependencies here if necessary
-      # CircleCI maintains a library of pre-built images
-      # documented at https://circleci.com/docs/2.0/circleci-images/
-      # - image: circleci/mongo:3.4.4
+  maptalks-test:
+    executor: node-browser-executor
 
-    working_directory: ~/repo
+    working_directory: ~/repo/
 
     steps:
       - browser-tools/install-chrome
       - checkout
 
       # Download and cache dependencies
       - restore_cache:
+          name: Restore pnpm Package Cache
           keys:
-          - v1-dependencies-{{ checksum "package-lock.json" }}
-          # fallback to using the latest cache if no exact match is found
-          - v1-dependencies-
+            - pnpm-packages-{{ checksum "pnpm-lock.yaml" }}
 
-      - run: npm install
+      - run:
+          name: Install pnpm package manager
+          command: |
+            sudo npm install --global pnpm
+
+      - run: pnpm i
 
       - save_cache:
+          name: Save pnpm Package Cache
+          key: pnpm-packages-{{ checksum "pnpm-lock.yaml" }}
           paths:
-            - node_modules
-          key: v1-dependencies-{{ checksum "package-lock.json" }}
-
+            - .pnpm-store
       # run tests!
-      - run: npm test
-
+      - run: npm run maptalks-test
 
+workflows:
+  maptalks:
+    jobs:
+      - maptalks-test
diff --git a/.gitignore b/.gitignore
@@ -29,6 +29,6 @@ coverage
 .env
 .env.local
 web.config
-debug
+
 *.tsbuildinfo
 *.map
diff --git a/debug/terrain.html b/debug/terrain.html
@@ -127,8 +127,6 @@
             //mapbox服务
             debug: true,
             type: 'mapbox',
-            tileSize: 256,
-
             urlTemplate: 'https://{s}.tiles.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=pk.eyJ1IjoibWFwYm94LWdsLWpzIiwiYSI6ImNram9ybGI1ajExYjQyeGxlemppb2pwYjIifQ.LGy5UGNIsXUZdYMvfYRiAQ',
             // urlTemplate: 'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1Ijoidmhhd2siLCJhIjoiY2xmbWpqOXBoMGNmZDN2cjJwZXk0MXBzZiJ9.192VNPJG0VV9dGOCOX1gUw',
             // urlTemplate: 'https://osm-tiles.ams3.cdn.digitaloceanspaces.com/elevation/{z}/{x}/{y}.png',

diff --git a/debug/webgpu/Di-3d.png b/debug/webgpu/Di-3d.png
diff --git a/debug/webgpu/cube-instance.html b/debug/webgpu/cube-instance.html
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Cube Wireframe</title>
+  <style type="text/css">
+    html,body{margin:0px;height:100%;width:100%}
+    .container{width:1000px;height:800px}
+  </style>
+  <body>
+    <canvas id="canvas" width=1000 height=800 class="container" style="border : 1px solid"></canvas>
+    <script type="importmap">
+        {
+            "imports": {
+                "reshader": "../../packages/reshader.gl/dist/reshadergl.es.js",
+                "meshes": "./meshes/cube.js",
+                "gl-matrix": "./gl-matrix/index.js"
+            }
+        }
+    </script>
+
+    <script type="module">
+        import { GraphicsDevice, Renderer, MeshShader, Geometry, InstancedMesh, Scene } from 'reshader';
+        import { cubeVertexArray, cubeVertexColors, cubeVertexCount } from 'meshes';
+        import { mat4, vec3 } from 'gl-matrix';
+        //https://webgpu.github.io/webgpu-samples/?sample=instancedCube
+        const vert = `
+            struct Uniforms {
+                modelMatrix : mat4x4f,
+            }
+            @binding(0) @group(0) var<uniform> uniforms : Uniforms;
+
+            struct VertexOutput {
+                @builtin(position) Position : vec4f,
+                @location(0) fragPosition: vec4f,
+            }
+
+            @vertex
+            fn main(
+                @location(0) position : vec4f,
+                @location(1) instance_vectorA : vec4f,
+                @location(2) instance_vectorB : vec4f,
+                @location(3) instance_vectorC : vec4f
+            ) -> VertexOutput {
+                var output : VertexOutput;
+                var instanceMatrix = mat4x4f(
+                    instance_vectorA.x, instance_vectorB.x, instance_vectorC.x, 0.0,
+                    instance_vectorA.y, instance_vectorB.y, instance_vectorC.y, 0.0,
+                    instance_vectorA.z, instance_vectorB.z, instance_vectorC.z, 0.0,
+                    instance_vectorA.w, instance_vectorB.w, instance_vectorC.w, 1.0
+                );
+                output.Position = uniforms.modelMatrix * instanceMatrix * position;
+                output.fragPosition = 0.5 * (position + vec4(1.0));
+                return output;
+            }
+        `;
+        const frag = `
+            @fragment
+            fn main(
+                @location(0) fragPosition: vec4f
+            ) -> @location(0) vec4f {
+                return fragPosition;
+            }
+        `;
+        const adapter = await navigator.gpu?.requestAdapter();
+        const gpuDevice = await adapter?.requestDevice();
+        const canvas = document.getElementById('canvas');
+        const context = canvas.getContext('webgpu');
+
+        const device = new GraphicsDevice(gpuDevice, context)
+        const renderer = new Renderer(device);
+        const shader = new MeshShader({
+            vert,
+            frag,
+            name: 'cube-instance',
+            extraCommandProps: {
+                cull: {
+                    enable: true
+                }
+            }
+        });
+
+        const geometry = new Geometry({
+            position: cubeVertexArray
+        }, cubeVertexCount, 0, {
+            positionAttribute: 'position'
+        });
+        geometry.generateBuffers(device);
+
+        const xCount = 4;
+        const yCount = 4;
+        const numInstances = xCount * yCount;
+        const instanceData = {
+            'instance_vectorA': new Float32Array(numInstances * 4),
+            'instance_vectorB': new Float32Array(numInstances * 4),
+            'instance_vectorC': new Float32Array(numInstances * 4)
+        };
+
+        const aspect = canvas.width / canvas.height;
+        const projectionMatrix = perspectiveZO([], (2 * Math.PI) / 5, aspect, 1, 100.0);
+        const viewMatrix = mat4.fromTranslation([], [0, 0, -12]);
+        const projViewMatrix = mat4.multiply([], projectionMatrix, viewMatrix);
+
+        const modelMatrices = new Array(numInstances);
+
+        const translation = [];
+        const step = 4.0;
+        // Initialize the matrix data for every instance.
+        let m = 0;
+        for (let x = 0; x < xCount; x++) {
+            for (let y = 0; y < yCount; y++) {
+                const translate = vec3.set(translation, step * (x - xCount / 2 + 0.5), step * (y - yCount / 2 + 0.5), 0);
+                modelMatrices[m] = mat4.fromTranslation([], translate);
+                m++;
+            }
+        }
+        const tmpMat4 = [];
+
+        updateTransformationMatrix(instanceData);
+
+        const mesh = new InstancedMesh(instanceData, numInstances, geometry);
+        mesh.generateInstancedBuffers(device);
+        mesh.setLocalTransform(projViewMatrix);
+
+        const scene = new Scene();
+
+        function render() {
+
+            // updateInstanceTransform(instanceData);
+            scene.setMeshes([mesh]);
+
+            renderer.render(shader, null, scene);
+            device.submit();
+            requestAnimationFrame(render);
+        }
+
+
+        // Update the transformation matrix data for each instance.
+        function updateTransformationMatrix(instanceData) {
+            const now = Date.now() / 1000;
+            const rotation = [];
+            let i = 0;
+            for (let x = 0; x < xCount; x++) {
+                for (let y = 0; y < yCount; y++) {
+                    mat4.rotate(
+                        tmpMat4,
+                        modelMatrices[i],
+                        1,
+                        vec3.set(rotation, Math.sin((x + 0.5) * now), Math.cos((y + 0.5) * now), 0)
+                    );
+
+                    setInstanceData(instanceData, 'instance_vectorA', i, tmpMat4, 0);
+                    setInstanceData(instanceData, 'instance_vectorB', i, tmpMat4, 1);
+                    setInstanceData(instanceData, 'instance_vectorC', i, tmpMat4, 2);
+
+                    i++;
+                }
+            }
+        }
+
+        function setInstanceData(instanceData, name, idx, matrix, col) {
+            instanceData[name][idx * 4] = matrix[col];
+            instanceData[name][idx * 4 + 1] = matrix[col + 4];
+            instanceData[name][idx * 4 + 2] = matrix[col + 8];
+            instanceData[name][idx * 4 + 3] = matrix[col + 12];
+        }
+
+        function perspectiveZO(out, fovy, aspect, near, far) {
+            const f = 1.0 / Math.tan(fovy / 2);
+            out[0] = f / aspect;
+            out[1] = 0;
+            out[2] = 0;
+            out[3] = 0;
+            out[4] = 0;
+            out[5] = f;
+            out[6] = 0;
+            out[7] = 0;
+            out[8] = 0;
+            out[9] = 0;
+            out[11] = -1;
+            out[12] = 0;
+            out[13] = 0;
+            out[15] = 0;
+            if (far != null && far !== Infinity) {
+                const nf = 1 / (near - far);
+                out[10] = far * nf;
+                out[14] = far * near * nf;
+            } else {
+                out[10] = -1;
+                out[14] = -near;
+            }
+            return out;
+        }
+
+        render();
+    </script>
+  </body>
+</html>