Skip to content

Commit 1c3228a

Browse files
fuzhennfuzhenn
committed
first commit of webgpu standard without error
1 parent 3d5d0a2 commit 1c3228a

32 files changed

+1684
-222
lines changed

‎debug/webgpu/cube-texture.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
3434
struct VertexInput {
3535
@location($i) aPosition : vec4f,
36-
@location($i) aTexCoord : vec2f,
36+
@location($i) aTexCoord : vec2i,
3737
// 动态插入 WgslShaderLib 里的代码片段
3838
}
3939
@@ -50,7 +50,7 @@
5050
) -> VertexOutput {
5151
var output : VertexOutput;
5252
output.Position = uniforms.modelMatrix * input.aPosition;
53-
output.fragUV = input.aTexCoord;
53+
output.fragUV = vec2f(input.aTexCoord);
5454
output.fragPosition = 0.5 * (input.aPosition + vec4(1.0, 1.0, 1.0, 1.0));
5555
return output;
5656
}

‎debug/webgpu/meshes/cube.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ export const cubeVertexColors = new Float32Array([
8484
0, 1, 0, 1
8585
]);
8686

87-
export const cubeVertexUV = new Float32Array([
87+
export const cubeVertexUV = new Int16Array([
8888
0, 1,
8989
1, 1,
9090
1, 0,

‎packages/gl/rollup.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@ module.exports.push({
231231
},
232232
watch: {
233233
include: ['src/**/*.js', 'src/**/*.ts', 'src/**/*.glsl', 'src/**/*.wgsl', 'src/**/*.vert', 'src/**/*.frag',
234-
'../reshader.gl/dist/*.es.js', 'build/worker.js', 'build/gltf-loader-bundle.js']
234+
'../reshader.gl/dist/reshadergl.es.js', 'build/worker.js', 'build/gltf-loader-bundle.js']
235235
}
236236
});
237237

‎packages/reshader.gl/package.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,14 @@
1313
},
1414
"files": [
1515
"dist/reshadergl.es.js.map",
16-
"dist/reshadergl.es.js",
17-
"dist/reshadergl.d.ts"
16+
"dist/reshadergl.es.js"
1817
],
1918
"keywords": [
2019
"webgl"
2120
],
2221
"author": "fuzhenn",
2322
"license": "UNLICENSED",
24-
"types": "dist/reshadergl.d.ts",
23+
"types": "dist/index.d.ts",
2524
"dependencies": {
2625
"@maptalks/regl": "^3.4.0",
2726
"@maptalks/tbn-packer": "^1.4.5",

‎packages/reshader.gl/rollup.config.js

Lines changed: 13 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -85,31 +85,16 @@ if (production) {
8585
}));
8686
}
8787

88-
module.exports = [
89-
{
90-
input: 'src/index.ts',
91-
external : production ? ['gl-matrix', '@maptalks/gltf-loader', '@maptalks/tbn-packer'] : [],
92-
plugins : plugins,
93-
output: [
94-
{
95-
'sourcemap': true,
96-
'format': 'es',
97-
'banner': banner,
98-
'file': pkg.module
99-
}
100-
]
101-
},
102-
{
103-
input: 'dist/index.d.ts',
104-
plugins: [dts()],
105-
output: [
106-
{
107-
'sourcemap': false,
108-
'format': 'es',
109-
'name': 'maptalks',
110-
banner,
111-
'file': pkg['types']
112-
}
113-
]
114-
}
115-
];
88+
module.exports = {
89+
input: 'src/index.ts',
90+
external : production ? ['gl-matrix', '@maptalks/gltf-loader', '@maptalks/tbn-packer'] : [],
91+
plugins : plugins,
92+
output: [
93+
{
94+
'sourcemap': true,
95+
'format': 'es',
96+
'banner': banner,
97+
'file': pkg.module
98+
}
99+
]
100+
};

‎packages/reshader.gl/src/Geometry.ts

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { getGLTFLoaderBundle } from './common/GLTFBundle'
77
import { ActiveAttributes, AttributeData, GeometryDesc, NumberArray, TypedArray } from './types/typings';
88
import REGL from '@maptalks/regl';
99
import { flatten } from 'earcut';
10-
import { getGPUVertexType, getFormatFromGLTFAccessor, getItemBytesFromGLTFAccessor } from './webgpu/common/Types';
10+
import { getGPUVertexType, getFormatFromGLTFAccessor, getBytesPerElementFromGLTFAccessor } from './webgpu/common/Types';
1111
import { roundUp } from './webgpu/common/math';
1212

1313
const EMPTY_VAO_BUFFER = [];
@@ -94,10 +94,10 @@ export default class Geometry {
9494
}
9595
let ctor = array.constructor as any;
9696
const itemSize = array.length / vertexCount;
97-
const bytesPerEle = itemBytes / itemSize;
97+
const bytesPerElement = itemBytes / itemSize;
9898
// 无法对齐时，itemSize 一定是1或者3，补位成2或者4就能对齐了
9999

100-
const newItemSize = itemSize + (4 - (itemBytes % 4)) / bytesPerEle;
100+
const newItemSize = ensureAlignment(itemSize, bytesPerElement);;
101101
const newArray = new ctor(newItemSize * vertexCount);
102102
for (let i = 0; i < vertexCount; i++) {
103103
for (let ii = 0; ii < itemSize; ii++) {
@@ -1169,11 +1169,14 @@ function getTypeCtor(arr: NumberArray, byteWidth: number) {
11691169

11701170
export function getAttrBufferDescriptor(attr, info): GPUVertexBufferLayout {
11711171
const array = attr.data || attr.array || attr;
1172+
let itemSize = info.itemSize;
1173+
11721174
if (attr.buffer && !isArray(attr)) {
1173-
const itemBytes = attr.buffer.itemBytes;
1174-
const format = getItemFormat(attr, info.itemSize);
1175+
const bytesPerElement = attr.buffer.bytesPerElement;
1176+
itemSize = ensureAlignment(itemSize, bytesPerElement);
1177+
const format = getItemFormat(attr, itemSize);
11751178
return {
1176-
arrayStride: info.itemSize * itemBytes,
1179+
arrayStride: itemSize * bytesPerElement,
11771180
attributes: [
11781181
{
11791182
shaderLocation: info.location,
@@ -1183,16 +1186,17 @@ export function getAttrBufferDescriptor(attr, info): GPUVertexBufferLayout {
11831186
]
11841187
};
11851188
} else if (isArray(array)) {
1186-
let format, itemBytes;
1189+
let format, bytesPerElement;
11871190
if (attr.componentType) {
11881191
format = getFormatFromGLTFAccessor(attr.componentType, attr.itemSize);
1189-
itemBytes = getItemBytesFromGLTFAccessor(attr.componentType);
1192+
bytesPerElement = getBytesPerElementFromGLTFAccessor(attr.componentType);
11901193
} else {
1191-
format = getItemFormat(array, info.itemSize);
1192-
itemBytes = getItemBytes(array);
1194+
format = getItemFormat(array, itemSize);
1195+
bytesPerElement = getBytesPerElement(array);
11931196
}
1197+
itemSize = ensureAlignment(itemSize, bytesPerElement);
11941198
return {
1195-
arrayStride: info.itemSize * itemBytes,
1199+
arrayStride: itemSize * bytesPerElement,
11961200
attributes: [
11971201
{
11981202
shaderLocation: info.location,
@@ -1204,10 +1208,10 @@ export function getAttrBufferDescriptor(attr, info): GPUVertexBufferLayout {
12041208
}
12051209
}
12061210

1207-
function getItemBytes(data) {
1211+
function getBytesPerElement(data) {
12081212
const array = getAttrArray(data);
12091213
if (array.destroy) {
1210-
return array.itemBytes;
1214+
return array.bytesPerElement;
12111215
}
12121216
if (array.BYTES_PER_ELEMENT) {
12131217
return array.BYTES_PER_ELEMENT;
@@ -1258,8 +1262,8 @@ function createGPUBuffer(device, data, usage, label) {
12581262
new ctor(buffer.getMappedRange()).set(data);
12591263
buffer.unmap();
12601264
buffer.itemCount = data.length;
1261-
buffer.itemBytes = getItemBytes(data);
12621265
buffer.itemType = getGPUVertexType(data); // uint8, sint8, uint16, sint16, uint32, sint32, float32
1266+
buffer.bytesPerElement = getBytesPerElement(data);
12631267
return buffer;
12641268
}
12651269
function findElementConstructor(data: number[]): any {
@@ -1276,3 +1280,11 @@ function getIndexArrayType(max) {
12761280
if (max < 65536) return Uint16Array;
12771281
return Uint32Array;
12781282
}
1283+
function ensureAlignment(itemSize: number, bytesPerElement: number): any {
1284+
const itemBytes = itemSize * bytesPerElement;
1285+
if (itemBytes % 4 === 0) {
1286+
return itemSize;
1287+
}
1288+
return itemSize + (4 - (itemBytes % 4)) / bytesPerElement;
1289+
}
1290+

‎packages/reshader.gl/src/pbr/PBRHelper.js

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import dfgVS from './glsl/helper/dfg.vert';
1313
import coefficients from './SH.js';
1414
import skyboxRawFrag from '../skybox/skybox.frag';
1515
import ShaderLib from '../shaderlib/ShaderLib.js';
16+
import GraphicsTexture from '../webgpu/GraphicsTexture.js';
1617

1718
let defaultRegl;
1819
function getDefaultREGL() {
@@ -421,8 +422,8 @@ function getREGL(regl) {
421422
return regl.vao && regl || getDefaultREGL();
422423
}
423424

424-
export function generateDFGLUT(regl, size, sampleSize, roughnessLevels) {
425-
regl = getREGL(regl);
425+
export function generateDFGLUT(device, size, sampleSize, roughnessLevels) {
426+
const regl = getREGL(device);
426427
size = size || 256;
427428
sampleSize = sampleSize || 1024;
428429
roughnessLevels = roughnessLevels || 256;
@@ -479,6 +480,18 @@ export function generateDFGLUT(regl, size, sampleSize, roughnessLevels) {
479480
});
480481
drawLUT();
481482

483+
if (device.wgpu) {
484+
//webgpu
485+
const pixels = regl.read({
486+
framebuffer: fbo
487+
});
488+
return new GraphicsTexture(device, {
489+
data: pixels,
490+
width: fbo.width,
491+
height: fbo.height
492+
});
493+
}
494+
482495
drawLUT.destroy();
483496
quadBuf.destroy();
484497
quadTexBuf.destroy();

‎packages/reshader.gl/src/pbr/StandardMaterial.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,14 @@ class StandardMaterial extends Material {
7171
// if (uniforms['HAS_TONE_MAPPING']) {
7272
// defines['HAS_TONE_MAPPING'] = 1;
7373
// }
74+
const position = geometry.data[geometry.desc.positionAttribute];
75+
if (position.buffer && position.buffer.itemType && position.buffer.itemType.startsWith('sint')) {
76+
defines['POSITION_IS_INT'] = 1;
77+
}
78+
const normal = geometry.data[geometry.desc.normalAttribute];
79+
if (normal && normal.buffer && normal.buffer.itemType && normal.buffer.itemType.startsWith('sint')) {
80+
defines['NORMAL_IS_INT'] = 1;
81+
}
7482
if (uniforms['GAMMA_CORRECT_INPUT']) {
7583
defines['GAMMA_CORRECT_INPUT'] = 1;
7684
}

‎packages/reshader.gl/src/pbr/StandardShader.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { mat3, mat4 } from 'gl-matrix';
22
import vert from './glsl/standard.vert';
33
import frag from './glsl/standard.frag';
4+
import wgslVert from './wgsl/standard_vert.wgsl';
5+
import wgslFrag from './wgsl/standard_frag.wgsl';
46
import MeshShader from '../shader/MeshShader.js';
57
import { extend } from '../common/Util';
68

@@ -94,9 +96,14 @@ class StandardShader extends MeshShader {
9496
}
9597
const vertSource = config.vert || vert;
9698
const fragSource = config.frag || frag;
99+
const wgslVertSource = config.wgslVert || wgslVert;
100+
const wgslFragSource = config.wgslFrag || wgslFrag;
97101
super({
102+
name: 'standard',
98103
vert: vertSource,
99104
frag: fragSource,
105+
wgslVert: wgslVertSource,
106+
wgslFrag: wgslFragSource,
100107
uniforms,
101108
extraCommandProps,
102109
defines

0 commit comments

Comments
 (0)