Skip to content

Commit bd01c08

Browse files
fuzhennfuzhenn
committed
Merge branch 'gpu'
2 parents 17f2991 + 4fcc172 commit bd01c08

File tree

96 files changed

+10999
-588
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

96 files changed

+10999
-588
lines changed

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,6 @@ coverage
2929
.env
3030
.env.local
3131
web.config
32-
debug
32+
3333
*.tsbuildinfo
3434
*.map

‎debug/terrain.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -127,8 +127,6 @@
127127
//mapbox服务
128128
debug: true,
129129
type: 'mapbox',
130-
tileSize: 256,
131-
132130
urlTemplate: 'https://{s}.tiles.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=pk.eyJ1IjoibWFwYm94LWdsLWpzIiwiYSI6ImNram9ybGI1ajExYjQyeGxlemppb2pwYjIifQ.LGy5UGNIsXUZdYMvfYRiAQ',
133131
// urlTemplate: 'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1Ijoidmhhd2siLCJhIjoiY2xmbWpqOXBoMGNmZDN2cjJwZXk0MXBzZiJ9.192VNPJG0VV9dGOCOX1gUw',
134132
// urlTemplate: 'https://osm-tiles.ams3.cdn.digitaloceanspaces.com/elevation/{z}/{x}/{y}.png',

‎debug/webgpu/Di-3d.png‎

238 KB
Loading

‎debug/webgpu/cube-instance.html‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<meta charset="UTF-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1">
5+
<title>Cube Wireframe</title>
6+
<style type="text/css">
7+
html,body{margin:0px;height:100%;width:100%}
8+
.container{width:1000px;height:800px}
9+
</style>
10+
<body>
11+
<canvas id="canvas" width=1000 height=800 class="container" style="border : 1px solid"></canvas>
12+
<script type="importmap">
13+
{
14+
"imports": {
15+
"reshader": "../../packages/reshader.gl/dist/reshadergl.es.js",
16+
"meshes": "./meshes/cube.js",
17+
"gl-matrix": "./gl-matrix/index.js"
18+
}
19+
}
20+
</script>
21+
22+
<script type="module">
23+
import { GraphicsDevice, Renderer, MeshShader, Geometry, InstancedMesh, Scene } from 'reshader';
24+
import { cubeVertexArray, cubeVertexColors, cubeVertexCount } from 'meshes';
25+
import { mat4, vec3 } from 'gl-matrix';
26+
//https://webgpu.github.io/webgpu-samples/?sample=instancedCube
27+
const vert = `
28+
struct Uniforms {
29+
modelMatrix : mat4x4f,
30+
}
31+
@binding(0) @group(0) var<uniform> uniforms : Uniforms;
32+
33+
struct VertexOutput {
34+
@builtin(position) Position : vec4f,
35+
@location(0) fragPosition: vec4f,
36+
}
37+
38+
@vertex
39+
fn main(
40+
@location(0) position : vec4f,
41+
@location(1) instance_vectorA : vec4f,
42+
@location(2) instance_vectorB : vec4f,
43+
@location(3) instance_vectorC : vec4f
44+
) -> VertexOutput {
45+
var output : VertexOutput;
46+
var instanceMatrix = mat4x4f(
47+
instance_vectorA.x, instance_vectorB.x, instance_vectorC.x, 0.0,
48+
instance_vectorA.y, instance_vectorB.y, instance_vectorC.y, 0.0,
49+
instance_vectorA.z, instance_vectorB.z, instance_vectorC.z, 0.0,
50+
instance_vectorA.w, instance_vectorB.w, instance_vectorC.w, 1.0
51+
);
52+
output.Position = uniforms.modelMatrix * instanceMatrix * position;
53+
output.fragPosition = 0.5 * (position + vec4(1.0));
54+
return output;
55+
}
56+
`;
57+
const frag = `
58+
@fragment
59+
fn main(
60+
@location(0) fragPosition: vec4f
61+
) -> @location(0) vec4f {
62+
return fragPosition;
63+
}
64+
`;
65+
const adapter = await navigator.gpu?.requestAdapter();
66+
const gpuDevice = await adapter?.requestDevice();
67+
const canvas = document.getElementById('canvas');
68+
const context = canvas.getContext('webgpu');
69+
70+
const device = new GraphicsDevice(gpuDevice, context)
71+
const renderer = new Renderer(device);
72+
const shader = new MeshShader({
73+
vert,
74+
frag,
75+
name: 'cube-instance',
76+
extraCommandProps: {
77+
cull: {
78+
enable: true
79+
}
80+
}
81+
});
82+
83+
const geometry = new Geometry({
84+
position: cubeVertexArray
85+
}, cubeVertexCount, 0, {
86+
positionAttribute: 'position'
87+
});
88+
geometry.generateBuffers(device);
89+
90+
const xCount = 4;
91+
const yCount = 4;
92+
const numInstances = xCount * yCount;
93+
const instanceData = {
94+
'instance_vectorA': new Float32Array(numInstances * 4),
95+
'instance_vectorB': new Float32Array(numInstances * 4),
96+
'instance_vectorC': new Float32Array(numInstances * 4)
97+
};
98+
99+
const aspect = canvas.width / canvas.height;
100+
const projectionMatrix = perspectiveZO([], (2 * Math.PI) / 5, aspect, 1, 100.0);
101+
const viewMatrix = mat4.fromTranslation([], [0, 0, -12]);
102+
const projViewMatrix = mat4.multiply([], projectionMatrix, viewMatrix);
103+
104+
const modelMatrices = new Array(numInstances);
105+
106+
const translation = [];
107+
const step = 4.0;
108+
// Initialize the matrix data for every instance.
109+
let m = 0;
110+
for (let x = 0; x < xCount; x++) {
111+
for (let y = 0; y < yCount; y++) {
112+
const translate = vec3.set(translation, step * (x - xCount / 2 + 0.5), step * (y - yCount / 2 + 0.5), 0);
113+
modelMatrices[m] = mat4.fromTranslation([], translate);
114+
m++;
115+
}
116+
}
117+
const tmpMat4 = [];
118+
119+
updateTransformationMatrix(instanceData);
120+
121+
const mesh = new InstancedMesh(instanceData, numInstances, geometry);
122+
mesh.generateInstancedBuffers(device);
123+
mesh.setLocalTransform(projViewMatrix);
124+
125+
const scene = new Scene();
126+
127+
function render() {
128+
129+
// updateInstanceTransform(instanceData);
130+
scene.setMeshes([mesh]);
131+
132+
renderer.render(shader, null, scene);
133+
device.submit();
134+
requestAnimationFrame(render);
135+
}
136+
137+
138+
// Update the transformation matrix data for each instance.
139+
function updateTransformationMatrix(instanceData) {
140+
const now = Date.now() / 1000;
141+
const rotation = [];
142+
let i = 0;
143+
for (let x = 0; x < xCount; x++) {
144+
for (let y = 0; y < yCount; y++) {
145+
mat4.rotate(
146+
tmpMat4,
147+
modelMatrices[i],
148+
1,
149+
vec3.set(rotation, Math.sin((x + 0.5) * now), Math.cos((y + 0.5) * now), 0)
150+
);
151+
152+
setInstanceData(instanceData, 'instance_vectorA', i, tmpMat4, 0);
153+
setInstanceData(instanceData, 'instance_vectorB', i, tmpMat4, 1);
154+
setInstanceData(instanceData, 'instance_vectorC', i, tmpMat4, 2);
155+
156+
i++;
157+
}
158+
}
159+
}
160+
161+
function setInstanceData(instanceData, name, idx, matrix, col) {
162+
instanceData[name][idx * 4] = matrix[col];
163+
instanceData[name][idx * 4 + 1] = matrix[col + 4];
164+
instanceData[name][idx * 4 + 2] = matrix[col + 8];
165+
instanceData[name][idx * 4 + 3] = matrix[col + 12];
166+
}
167+
168+
function perspectiveZO(out, fovy, aspect, near, far) {
169+
const f = 1.0 / Math.tan(fovy / 2);
170+
out[0] = f / aspect;
171+
out[1] = 0;
172+
out[2] = 0;
173+
out[3] = 0;
174+
out[4] = 0;
175+
out[5] = f;
176+
out[6] = 0;
177+
out[7] = 0;
178+
out[8] = 0;
179+
out[9] = 0;
180+
out[11] = -1;
181+
out[12] = 0;
182+
out[13] = 0;
183+
out[15] = 0;
184+
if (far != null && far !== Infinity) {
185+
const nf = 1 / (near - far);
186+
out[10] = far * nf;
187+
out[14] = far * near * nf;
188+
} else {
189+
out[10] = -1;
190+
out[14] = -near;
191+
}
192+
return out;
193+
}
194+
195+
render();
196+
</script>
197+
</body>
198+
</html>

‎debug/webgpu/cube-texture.html‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<meta charset="UTF-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1">
5+
<title>Cube Wireframe</title>
6+
<style type="text/css">
7+
html,body{margin:0px;height:100%;width:100%}
8+
.container{width:1000px;height:800px}
9+
</style>
10+
<body>
11+
<canvas id="canvas" width=1000 height=800 class="container" style="border : 1px solid"></canvas>
12+
<script type="importmap">
13+
{
14+
"imports": {
15+
"reshader": "../../packages/reshader.gl/dist/reshadergl.es.js",
16+
"meshes": "./meshes/cube.js",
17+
"gl-matrix": "./gl-matrix/index.js"
18+
}
19+
}
20+
</script>
21+
22+
<script type="module">
23+
import { GraphicsDevice, Renderer, MeshShader, Geometry, Mesh, Material, Scene, Texture2D, ResourceLoader } from 'reshader';
24+
import { cubeVertexArray, cubeVertexUV, cubeVertexCount } from 'meshes';
25+
import { mat4, vec3 } from 'gl-matrix';
26+
27+
//https://webgpu.github.io/webgpu-samples/?sample=texturedCube
28+
const vert = `
29+
struct Uniforms {
30+
modelMatrix : mat4x4f,
31+
}
32+
@binding(0) @group(0) var<uniform> uniforms : Uniforms;
33+
34+
struct VertexOutput {
35+
@builtin(position) Position : vec4f,
36+
@location(0) fragUV : vec2f,
37+
@location(1) fragPosition: vec4f,
38+
}
39+
40+
@vertex
41+
fn main(
42+
@location(0) position : vec4f,
43+
@location(1) uv : vec2f
44+
) -> VertexOutput {
45+
var output : VertexOutput;
46+
output.Position = uniforms.modelMatrix * position;
47+
output.fragUV = uv;
48+
output.fragPosition = 0.5 * (position + vec4(1.0, 1.0, 1.0, 1.0));
49+
return output;
50+
}
51+
52+
`;
53+
const frag = `
54+
@group(0) @binding(1) var myTextureSampler: sampler;
55+
@group(0) @binding(2) var myTexture: texture_2d<f32>;
56+
57+
@fragment
58+
fn main(
59+
@location(0) fragUV: vec2f,
60+
@location(1) fragPosition: vec4f
61+
) -> @location(0) vec4f {
62+
return textureSample(myTexture, myTextureSampler, fragUV) * fragPosition;
63+
}
64+
`;
65+
const adapter = await navigator.gpu?.requestAdapter();
66+
const gpuDevice = await adapter?.requestDevice();
67+
const canvas = document.getElementById('canvas');
68+
const context = canvas.getContext('webgpu');
69+
const resourceLoader = new ResourceLoader(new Uint8Array(4));
70+
71+
const device = new GraphicsDevice(gpuDevice, context)
72+
const renderer = new Renderer(device);
73+
const shader = new MeshShader({
74+
vert,
75+
frag,
76+
name: 'cube-texture',
77+
extraCommandProps: {
78+
cull: {
79+
enable: true
80+
}
81+
}
82+
});
83+
84+
const geometry = new Geometry({
85+
position: cubeVertexArray,
86+
uv: cubeVertexUV
87+
}, cubeVertexCount, 0, {
88+
positionAttribute: 'position',
89+
uv0Attribute: 'uv'
90+
});
91+
geometry.generateBuffers(device);
92+
93+
const material = new Material({
94+
myTexture: new Texture2D({
95+
url: './Di-3d.png',
96+
}, resourceLoader)
97+
});
98+
const mesh = new Mesh(geometry, material);
99+
const scene = new Scene();
100+
101+
function render() {
102+
const matrix = getTransformationMatrix();
103+
mesh.setLocalTransform(matrix);
104+
scene.setMeshes([mesh]);
105+
106+
renderer.render(shader, null, scene);
107+
device.submit();
108+
requestAnimationFrame(render);
109+
}
110+
111+
const aspect = canvas.width / canvas.height;
112+
const projectionMatrix = perspectiveZO([], (2 * Math.PI) / 5, aspect, 1, 100.0);
113+
const modelViewProjectionMatrix = mat4.create();
114+
const viewMatrix = mat4.identity([]);
115+
const translation = [0, 0, -4];
116+
const axis = [];
117+
function getTransformationMatrix() {
118+
mat4.identity(viewMatrix);
119+
mat4.translate(viewMatrix, viewMatrix, translation);
120+
const now = Date.now() / 1000;
121+
mat4.rotate(
122+
viewMatrix,
123+
viewMatrix,
124+
1,
125+
vec3.set(axis, Math.sin(now), Math.cos(now), 0)
126+
);
127+
mat4.multiply(modelViewProjectionMatrix, projectionMatrix, viewMatrix);
128+
return modelViewProjectionMatrix;
129+
}
130+
131+
function perspectiveZO(out, fovy, aspect, near, far) {
132+
const f = 1.0 / Math.tan(fovy / 2);
133+
out[0] = f / aspect;
134+
out[1] = 0;
135+
out[2] = 0;
136+
out[3] = 0;
137+
out[4] = 0;
138+
out[5] = f;
139+
out[6] = 0;
140+
out[7] = 0;
141+
out[8] = 0;
142+
out[9] = 0;
143+
out[11] = -1;
144+
out[12] = 0;
145+
out[13] = 0;
146+
out[15] = 0;
147+
if (far != null && far !== Infinity) {
148+
const nf = 1 / (near - far);
149+
out[10] = far * nf;
150+
out[14] = far * near * nf;
151+
} else {
152+
out[10] = -1;
153+
out[14] = -near;
154+
}
155+
return out;
156+
}
157+
158+
render();
159+
</script>
160+
</body>
161+
</html>

0 commit comments

Comments
 (0)