Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

merge maptalks into maptalks.js #2501

Merged
merged 54 commits into from
Feb 17, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
54 commits
Select commit Hold shift + click to select a range
472d4ec
prepare Abstract Classes for webgpu
fuzhenn Dec 30, 2024
9f608d5
mv Shader.ts
fuzhenn Dec 30, 2024
8634387
some method renames for consistency between gl and gpu
fuzhenn Dec 31, 2024
531585f
simplify some regl command config and change createMeshCommand parame…
fuzhenn Jan 3, 2025
329041b
implement all needed by GPUShader.run
fuzhenn Jan 13, 2025
e7a6c1d
implement DynamicBufferPool, DynamicBuffer and GraphicsDevice
fuzhenn Jan 14, 2025
e973238
implement Geometry.createBuffer/createElementBuffer and fix Geometry …
fuzhenn Jan 15, 2025
0faf392
fix typo
fuzhenn Jan 15, 2025
66cac30
merge GL Classes and GPUClasses, add device in getCommandKey and fix …
fuzhenn Jan 16, 2025
bb07942
fix reshader.gl
fuzhenn Jan 16, 2025
dfed96e
add GraphicsDevice.commandEncoder and Shader._getCurrentRenderPassEnc…
fuzhenn Jan 16, 2025
860ffc2
fix rendering call for example cube.html
fuzhenn Jan 17, 2025
ce073fc
add webgpu cube.html
fuzhenn Jan 17, 2025
e39b4bc
first successful webgpu rendering
fuzhenn Jan 20, 2025
3ecc84b
add GraphicsTexture and fix cube-texture.html
fuzhenn Jan 22, 2025
63b9bfc
implement InstancedMesh on webgpu
fuzhenn Jan 22, 2025
f03c03c
fix WGSL preprocess
fuzhenn Feb 5, 2025
7d6e60d
initial commit for GraphicsFramebuffer
fuzhenn Feb 6, 2025
079d68e
fix depthTexture and incorrect dynamicOffsets
fuzhenn Feb 12, 2025
677efd2
fix webgpu/shadowmapping.html
fuzhenn Feb 13, 2025
bac5903
add support of device.framebuffer(width, height)
fuzhenn Feb 14, 2025
4fcc172
adaption of gl renderer for VectorTileLayer and Vector3DLayer
fuzhenn Feb 14, 2025
bd01c08
Merge branch 'gpu'
fuzhenn Feb 14, 2025
7fa1439
merge maptalks-canvas into @maptalks/map and add LayerGLRenderer, Map…
fuzhenn Feb 17, 2025
d2012f7
@maptalks/maptalks => maptalks
fuzhenn Feb 17, 2025
ade39e0
fix build
fuzhenn Feb 17, 2025
85bd373
fixing circleci
fuzhenn Feb 17, 2025
b322cb6
updating circleci
fuzhenn Feb 17, 2025
34625f2
fixing circleci
fuzhenn Feb 17, 2025
cf96253
fixing circleci
fuzhenn Feb 17, 2025
a52db7a
fixing circleci
fuzhenn Feb 17, 2025
1af0c21
fixing circleci
fuzhenn Feb 17, 2025
ddf3f28
fixing circleci
fuzhenn Feb 17, 2025
782a739
fixing circleci
fuzhenn Feb 17, 2025
8719f67
fixing circleci
fuzhenn Feb 17, 2025
331b017
fixing circleci
fuzhenn Feb 17, 2025
5a99630
fixing circleci
fuzhenn Feb 17, 2025
019773e
fixing circleci
fuzhenn Feb 17, 2025
bab3895
fixing
fuzhenn Feb 17, 2025
a150267
fixing
fuzhenn Feb 17, 2025
871db29
fixing
fuzhenn Feb 17, 2025
127a19a
fixing
fuzhenn Feb 17, 2025
d71bfea
fixing
fuzhenn Feb 17, 2025
074a3a1
fixing
fuzhenn Feb 17, 2025
16c016b
fixing
fuzhenn Feb 17, 2025
e7a7ed1
fixing
fuzhenn Feb 17, 2025
cd42aea
fixing specs
fuzhenn Feb 17, 2025
301dac9
fixing specs
fuzhenn Feb 17, 2025
8a6ce15
fixing specs
fuzhenn Feb 17, 2025
1b4f3b3
fixing specs
fuzhenn Feb 17, 2025
7a2559a
fixing specs
fuzhenn Feb 17, 2025
6633257
fixing specs
fuzhenn Feb 17, 2025
e152d79
add OverlayLayerGLRenderer
fuzhenn Feb 17, 2025
0885497
fixing OverlayLayerGLRenderer
fuzhenn Feb 17, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 23 additions & 21 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,6 @@ coverage
.env
.env.local
web.config
debug

*.tsbuildinfo
*.map
2 changes: 0 additions & 2 deletions debug/terrain.html
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Binary file added debug/webgpu/Di-3d.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
198 changes: 198 additions & 0 deletions debug/webgpu/cube-instance.html
Original file line number Diff line number Diff line change
@@ -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>
Loading