Skip to content

Commit 1ca1d95

Browse files
davepagurekdavepagurek
committed
Update shaders to use multiple groups
1 parent 0c96209 commit 1ca1d95

5 files changed

Lines changed: 119 additions & 110 deletions

File tree

‎src/webgpu/shaders/color.js‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
const uniforms = `
2-
// Group 1: Camera and Projection
3-
struct CameraUniforms {
4-
uProjectionMatrix: mat4x4<f32>,
5-
// @p5 ifdef Vertex getWorldInputs
6-
uViewMatrix: mat4x4<f32>,
7-
// @p5 endif
8-
uCameraNormalMatrix: mat3x3<f32>,
2+
// Group 0: Material Properties
3+
struct MaterialUniforms {
4+
uUseVertexColor: u32,
95
}
106
11-
// Group 2: Model Transform
7+
// Group 1: Model Transform
128
struct ModelUniforms {
139
// @p5 ifdef Vertex getWorldInputs
1410
uModelMatrix: mat4x4<f32>,
@@ -21,9 +17,13 @@ struct ModelUniforms {
2117
uMaterialColor: vec4<f32>,
2218
}
2319
24-
// Group 3: Material Properties
25-
struct MaterialUniforms {
26-
uUseVertexColor: u32,
20+
// Group 2: Camera and Projection
21+
struct CameraUniforms {
22+
uProjectionMatrix: mat4x4<f32>,
23+
// @p5 ifdef Vertex getWorldInputs
24+
uViewMatrix: mat4x4<f32>,
25+
// @p5 endif
26+
uCameraNormalMatrix: mat3x3<f32>,
2727
}
2828
`;
2929

@@ -43,9 +43,9 @@ struct VertexOutput {
4343
};
4444
4545
${uniforms}
46-
@group(0) @binding(0) var<uniform> camera: CameraUniforms;
47-
@group(0) @binding(1) var<uniform> model: ModelUniforms;
48-
@group(0) @binding(2) var<uniform> material: MaterialUniforms;
46+
@group(0) @binding(0) var<uniform> material: MaterialUniforms;
47+
@group(1) @binding(0) var<uniform> model: ModelUniforms;
48+
@group(2) @binding(0) var<uniform> camera: CameraUniforms;
4949
5050
struct Vertex {
5151
position: vec3<f32>,
@@ -111,9 +111,9 @@ struct FragmentInput {
111111
};
112112
113113
${uniforms}
114-
@group(0) @binding(0) var<uniform> camera: CameraUniforms;
115-
@group(0) @binding(1) var<uniform> model: ModelUniforms;
116-
@group(0) @binding(2) var<uniform> material: MaterialUniforms;
114+
@group(0) @binding(0) var<uniform> material: MaterialUniforms;
115+
@group(1) @binding(0) var<uniform> model: ModelUniforms;
116+
@group(2) @binding(0) var<uniform> camera: CameraUniforms;
117117
118118
119119
@fragment

‎src/webgpu/shaders/filters/base.js‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,25 @@
11
const filterUniforms = `
2-
struct Uniforms {
3-
uModelViewMatrix: mat4x4<f32>,
4-
uProjectionMatrix: mat4x4<f32>,
2+
// Group 0: Filter Properties
3+
struct FilterUniforms {
54
canvasSize: vec2<f32>,
65
texelSize: vec2<f32>,
76
}
87
9-
@group(0) @binding(0) var<uniform> uniforms: Uniforms;
8+
// Group 1: Model Transform
9+
struct ModelUniforms {
10+
uModelViewMatrix: mat4x4<f32>,
11+
}
12+
13+
// Group 2: Camera and Projection
14+
struct CameraUniforms {
15+
uProjectionMatrix: mat4x4<f32>,
16+
}
17+
18+
@group(0) @binding(0) var<uniform> filterParams: FilterUniforms;
1019
@group(0) @binding(1) var tex0: texture_2d<f32>;
1120
@group(0) @binding(2) var tex0_sampler: sampler;
21+
@group(1) @binding(0) var<uniform> model: ModelUniforms;
22+
@group(2) @binding(0) var<uniform> camera: CameraUniforms;
1223
`;
1324

1425
export const baseFilterVertexShader = filterUniforms + `
@@ -33,7 +44,7 @@ fn main(input: VertexInput) -> VertexOutput {
3344
let positionVec4 = vec4<f32>(input.aPosition, 1.0);
3445
3546
// project to 3D space
36-
output.position = uniforms.uProjectionMatrix * uniforms.uModelViewMatrix * positionVec4;
47+
output.position = camera.uProjectionMatrix * model.uModelViewMatrix * positionVec4;
3748
3849
return output;
3950
}
@@ -59,8 +70,8 @@ fn main(input: FragmentInput) -> FragmentOutput {
5970
var output: FragmentOutput;
6071
var inputs: FilterInputs;
6172
inputs.texCoord = input.vTexCoord;
62-
inputs.canvasSize = uniforms.canvasSize;
63-
inputs.texelSize = uniforms.texelSize;
73+
inputs.canvasSize = filterParams.canvasSize;
74+
inputs.texelSize = filterParams.texelSize;
6475
6576
var outColor = HOOK_getColor(inputs, tex0, tex0_sampler);
6677
outColor = vec4<f32>(outColor.rgb * outColor.a, outColor.a);

‎src/webgpu/shaders/font.js‎

Lines changed: 27 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,5 @@
11
const uniforms = `
2-
// Group 1: Camera and Projection
3-
struct CameraUniforms {
4-
uProjectionMatrix: mat4x4<f32>,
5-
}
6-
7-
// Group 2: Model Transform
8-
struct ModelUniforms {
9-
uModelViewMatrix: mat4x4<f32>,
10-
}
11-
12-
// Group 3: Font Properties
2+
// Group 0: Font Properties
133
struct FontUniforms {
144
uStrokeImageSize: vec2<i32>,
155
uCellsImageSize: vec2<i32>,
@@ -20,6 +10,16 @@ struct FontUniforms {
2010
uGlyphOffset: f32,
2111
uMaterialColor: vec4<f32>,
2212
}
13+
14+
// Group 1: Model Transform
15+
struct ModelUniforms {
16+
uModelViewMatrix: mat4x4<f32>,
17+
}
18+
19+
// Group 2: Camera and Projection
20+
struct CameraUniforms {
21+
uProjectionMatrix: mat4x4<f32>,
22+
}
2323
`;
2424

2525
export const fontVertexShader = `
@@ -34,9 +34,9 @@ struct VertexOutput {
3434
};
3535
3636
${uniforms}
37-
@group(0) @binding(0) var<uniform> camera: CameraUniforms;
38-
@group(0) @binding(1) var<uniform> model: ModelUniforms;
39-
@group(0) @binding(2) var<uniform> font: FontUniforms;
37+
@group(0) @binding(0) var<uniform> font: FontUniforms;
38+
@group(1) @binding(0) var<uniform> model: ModelUniforms;
39+
@group(2) @binding(0) var<uniform> camera: CameraUniforms;
4040
4141
@vertex
4242
fn main(input: VertexInput) -> VertexOutput {
@@ -85,20 +85,19 @@ struct FragmentInput {
8585
};
8686
8787
${uniforms}
88-
@group(0) @binding(0) var<uniform> camera: CameraUniforms;
89-
@group(0) @binding(1) var<uniform> model: ModelUniforms;
90-
@group(0) @binding(2) var<uniform> font: FontUniforms;
91-
92-
@group(1) @binding(0) var uSamplerStrokes: texture_2d<f32>;
93-
@group(1) @binding(1) var uSamplerStrokes_sampler: sampler;
94-
@group(1) @binding(2) var uSamplerRowStrokes: texture_2d<f32>;
95-
@group(1) @binding(3) var uSamplerRowStrokes_sampler: sampler;
96-
@group(1) @binding(4) var uSamplerRows: texture_2d<f32>;
97-
@group(1) @binding(5) var uSamplerRows_sampler: sampler;
98-
@group(1) @binding(6) var uSamplerColStrokes: texture_2d<f32>;
99-
@group(1) @binding(7) var uSamplerColStrokes_sampler: sampler;
100-
@group(1) @binding(8) var uSamplerCols: texture_2d<f32>;
101-
@group(1) @binding(9) var uSamplerCols_sampler: sampler;
88+
@group(0) @binding(0) var<uniform> font: FontUniforms;
89+
@group(0) @binding(1) var uSamplerStrokes: texture_2d<f32>;
90+
@group(0) @binding(2) var uSamplerStrokes_sampler: sampler;
91+
@group(0) @binding(3) var uSamplerRowStrokes: texture_2d<f32>;
92+
@group(0) @binding(4) var uSamplerRowStrokes_sampler: sampler;
93+
@group(0) @binding(5) var uSamplerRows: texture_2d<f32>;
94+
@group(0) @binding(6) var uSamplerRows_sampler: sampler;
95+
@group(0) @binding(7) var uSamplerColStrokes: texture_2d<f32>;
96+
@group(0) @binding(8) var uSamplerColStrokes_sampler: sampler;
97+
@group(0) @binding(9) var uSamplerCols: texture_2d<f32>;
98+
@group(0) @binding(10) var uSamplerCols_sampler: sampler;
99+
@group(1) @binding(0) var<uniform> model: ModelUniforms;
100+
@group(2) @binding(0) var<uniform> camera: CameraUniforms;
102101
103102
// some helper functions
104103
fn ROUND_f32(v: f32) -> i32 { return i32(floor(v + 0.5)); }

‎src/webgpu/shaders/line.js‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
const uniforms = `
2-
// Group 1: Camera and Projection
3-
struct CameraUniforms {
4-
uProjectionMatrix: mat4x4<f32>,
5-
uViewport: vec4<f32>,
6-
uPerspective: u32,
2+
// Group 0: Stroke Properties
3+
struct StrokeUniforms {
4+
uStrokeWeight: f32,
5+
uUseLineColor: f32,
6+
uSimpleLines: f32,
7+
uStrokeCap: u32,
8+
uStrokeJoin: u32,
79
}
810
9-
// Group 2: Model Transform
11+
// Group 1: Model Transform
1012
struct ModelUniforms {
1113
// @p5 ifdef StrokeVertex getWorldInputs
1214
uModelMatrix: mat4x4<f32>,
@@ -18,14 +20,13 @@ struct ModelUniforms {
1820
uMaterialColor: vec4<f32>,
1921
}
2022
21-
// Group 3: Stroke Properties
22-
struct StrokeUniforms {
23-
uStrokeWeight: f32,
24-
uUseLineColor: f32,
25-
uSimpleLines: f32,
26-
uStrokeCap: u32,
27-
uStrokeJoin: u32,
28-
}`;
23+
// Group 2: Camera and Projection
24+
struct CameraUniforms {
25+
uProjectionMatrix: mat4x4<f32>,
26+
uViewport: vec4<f32>,
27+
uPerspective: u32,
28+
}
29+
`;
2930

3031
export const lineVertexShader = `
3132
struct StrokeVertexInput {
@@ -49,9 +50,9 @@ struct StrokeVertexOutput {
4950
};
5051
5152
${uniforms}
52-
@group(0) @binding(0) var<uniform> camera: CameraUniforms;
53-
@group(0) @binding(1) var<uniform> model: ModelUniforms;
54-
@group(0) @binding(2) var<uniform> stroke: StrokeUniforms;
53+
@group(0) @binding(0) var<uniform> stroke: StrokeUniforms;
54+
@group(1) @binding(0) var<uniform> model: ModelUniforms;
55+
@group(2) @binding(0) var<uniform> camera: CameraUniforms;
5556
5657
struct StrokeVertex {
5758
position: vec3<f32>,
@@ -303,9 +304,9 @@ struct StrokeFragmentInput {
303304
}
304305
305306
${uniforms}
306-
@group(0) @binding(0) var<uniform> camera: CameraUniforms;
307-
@group(0) @binding(1) var<uniform> model: ModelUniforms;
308-
@group(0) @binding(2) var<uniform> stroke: StrokeUniforms;
307+
@group(0) @binding(0) var<uniform> stroke: StrokeUniforms;
308+
@group(1) @binding(0) var<uniform> model: ModelUniforms;
309+
@group(2) @binding(0) var<uniform> camera: CameraUniforms;
309310
310311
311312
fn distSquared(a: vec2<f32>, b: vec2<f32>) -> f32 {

‎src/webgpu/shaders/material.js‎

Lines changed: 36 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,5 @@
11
const uniforms = `
2-
// Group 1: Camera and Projection
3-
struct CameraUniforms {
4-
uViewMatrix: mat4x4<f32>,
5-
uProjectionMatrix: mat4x4<f32>,
6-
uCameraNormalMatrix: mat3x3<f32>,
7-
}
8-
9-
// Group 2: Model Transform
10-
struct ModelUniforms {
11-
// @p5 ifdef Vertex getWorldInputs
12-
uModelMatrix: mat4x4<f32>,
13-
uModelNormalMatrix: mat3x3<f32>,
14-
// @p5 endif
15-
// @p5 ifndef Vertex getWorldInputs
16-
uModelViewMatrix: mat4x4<f32>,
17-
uNormalMatrix: mat3x3<f32>,
18-
// @p5 endif
19-
uMaterialColor: vec4<f32>,
20-
}
21-
22-
// Group 3: Material Properties
2+
// Group 0: Material Properties
233
struct MaterialUniforms {
244
uUseVertexColor: u32,
255
uHasSetAmbient: u32,
@@ -34,7 +14,7 @@ struct MaterialUniforms {
3414
uMetallic: f32,
3515
}
3616
37-
// Group 4: Lighting
17+
// Group 0: Lighting
3818
struct LightingUniforms {
3919
uDirectionalLightCount: i32,
4020
uLightingDirection: array<vec3<f32>, 5>,
@@ -57,6 +37,26 @@ struct LightingUniforms {
5737
uUseImageLight: u32,
5838
uUseLighting: u32,
5939
}
40+
41+
// Group 1: Model Transform
42+
struct ModelUniforms {
43+
// @p5 ifdef Vertex getWorldInputs
44+
uModelMatrix: mat4x4<f32>,
45+
uModelNormalMatrix: mat3x3<f32>,
46+
// @p5 endif
47+
// @p5 ifndef Vertex getWorldInputs
48+
uModelViewMatrix: mat4x4<f32>,
49+
uNormalMatrix: mat3x3<f32>,
50+
// @p5 endif
51+
uMaterialColor: vec4<f32>,
52+
}
53+
54+
// Group 2: Camera and Projection
55+
struct CameraUniforms {
56+
uViewMatrix: mat4x4<f32>,
57+
uProjectionMatrix: mat4x4<f32>,
58+
uCameraNormalMatrix: mat3x3<f32>,
59+
}
6060
`;
6161

6262
export const materialVertexShader = `
@@ -76,10 +76,10 @@ struct VertexOutput {
7676
};
7777
7878
${uniforms}
79-
@group(0) @binding(0) var<uniform> camera: CameraUniforms;
80-
@group(0) @binding(1) var<uniform> model: ModelUniforms;
81-
@group(0) @binding(2) var<uniform> material: MaterialUniforms;
82-
@group(0) @binding(3) var<uniform> lighting: LightingUniforms;
79+
@group(0) @binding(0) var<uniform> material: MaterialUniforms;
80+
@group(0) @binding(1) var<uniform> lighting: LightingUniforms;
81+
@group(1) @binding(0) var<uniform> model: ModelUniforms;
82+
@group(2) @binding(0) var<uniform> camera: CameraUniforms;
8383
8484
struct Vertex {
8585
position: vec3<f32>,
@@ -147,18 +147,16 @@ struct FragmentInput {
147147
};
148148
149149
${uniforms}
150-
@group(0) @binding(0) var<uniform> camera: CameraUniforms;
151-
@group(0) @binding(1) var<uniform> model: ModelUniforms;
152-
@group(0) @binding(2) var<uniform> material: MaterialUniforms;
153-
@group(0) @binding(3) var<uniform> lighting: LightingUniforms;
154-
155-
@group(0) @binding(4) var uSampler: texture_2d<f32>;
156-
@group(0) @binding(5) var uSampler_sampler: sampler;
157-
158-
@group(0) @binding(6) var environmentMapDiffused: texture_2d<f32>;
159-
@group(0) @binding(7) var environmentMapDiffused_sampler: sampler;
160-
@group(0) @binding(8) var environmentMapSpecular: texture_2d<f32>;
161-
@group(0) @binding(9) var environmentMapSpecular_sampler: sampler;
150+
@group(0) @binding(0) var<uniform> material: MaterialUniforms;
151+
@group(0) @binding(1) var<uniform> lighting: LightingUniforms;
152+
@group(0) @binding(2) var uSampler: texture_2d<f32>;
153+
@group(0) @binding(3) var uSampler_sampler: sampler;
154+
@group(0) @binding(4) var environmentMapDiffused: texture_2d<f32>;
155+
@group(0) @binding(5) var environmentMapDiffused_sampler: sampler;
156+
@group(0) @binding(6) var environmentMapSpecular: texture_2d<f32>;
157+
@group(0) @binding(7) var environmentMapSpecular_sampler: sampler;
158+
@group(1) @binding(0) var<uniform> model: ModelUniforms;
159+
@group(2) @binding(0) var<uniform> camera: CameraUniforms;
162160
163161
struct ColorComponents {
164162
baseColor: vec3<f32>,

0 commit comments

Comments
 (0)