Skip to content

Commit 81b22cd

Browse files
committed
glint ball setup ready, only simple phong lighting PBR set up with 1 light source on red sphere
1 parent 8224a93 commit 81b22cd

File tree

12 files changed

+440
-26
lines changed

12 files changed

+440
-26
lines changed

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "cis5650-project4-webgpu-forward-plus-and-clustered-deferred",
2+
"name": "webgpu-glint-rendering",
33
"private": true,
44
"version": "0.0.0",
55
"type": "module",

scenes/sphere/florb.jpg

602 KB
Loading

scenes/sphere/florbSphere.bin

44 KB
Binary file not shown.

scenes/sphere/florbSphere.gltf

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
{
2+
"asset":{
3+
"generator":"Khronos glTF Blender I/O v4.0.44",
4+
"version":"2.0"
5+
},
6+
"scene":0,
7+
"scenes":[
8+
{
9+
"name":"Scene",
10+
"nodes":[
11+
0
12+
]
13+
}
14+
],
15+
"nodes":[
16+
{
17+
"mesh":0,
18+
"name":"Icosphere"
19+
}
20+
],
21+
"materials":[
22+
{
23+
"doubleSided":true,
24+
"name":"testMaterial",
25+
"pbrMetallicRoughness":{
26+
"baseColorTexture":{
27+
"index":0
28+
},
29+
"metallicFactor":0,
30+
"roughnessFactor":0.5
31+
}
32+
}
33+
],
34+
"meshes":[
35+
{
36+
"name":"Icosphere",
37+
"primitives":[
38+
{
39+
"attributes":{
40+
"POSITION":0,
41+
"NORMAL":1,
42+
"TEXCOORD_0":2
43+
},
44+
"indices":3,
45+
"material":0
46+
}
47+
]
48+
}
49+
],
50+
"textures":[
51+
{
52+
"sampler":0,
53+
"source":0
54+
}
55+
],
56+
"images":[
57+
{
58+
"mimeType":"image/jpeg",
59+
"name":"florb",
60+
"uri":"florb.jpg"
61+
}
62+
],
63+
"accessors":[
64+
{
65+
"bufferView":0,
66+
"componentType":5126,
67+
"count":1049,
68+
"max":[
69+
0.923734188079834,
70+
0.9303051233291626,
71+
0.9248635768890381
72+
],
73+
"min":[
74+
-0.923734188079834,
75+
-0.9303051233291626,
76+
-0.9248635768890381
77+
],
78+
"type":"VEC3"
79+
},
80+
{
81+
"bufferView":1,
82+
"componentType":5126,
83+
"count":1049,
84+
"type":"VEC3"
85+
},
86+
{
87+
"bufferView":2,
88+
"componentType":5126,
89+
"count":1049,
90+
"type":"VEC2"
91+
},
92+
{
93+
"bufferView":3,
94+
"componentType":5123,
95+
"count":5760,
96+
"type":"SCALAR"
97+
}
98+
],
99+
"bufferViews":[
100+
{
101+
"buffer":0,
102+
"byteLength":12588,
103+
"byteOffset":0,
104+
"target":34962
105+
},
106+
{
107+
"buffer":0,
108+
"byteLength":12588,
109+
"byteOffset":12588,
110+
"target":34962
111+
},
112+
{
113+
"buffer":0,
114+
"byteLength":8392,
115+
"byteOffset":25176,
116+
"target":34962
117+
},
118+
{
119+
"buffer":0,
120+
"byteLength":11520,
121+
"byteOffset":33568,
122+
"target":34963
123+
}
124+
],
125+
"samplers":[
126+
{
127+
"magFilter": 9729,
128+
"minFilter": 9987,
129+
"wrapS": 10497,
130+
"wrapT": 10497
131+
}
132+
],
133+
"buffers":[
134+
{
135+
"byteLength":45088,
136+
"uri":"florbSphere.bin"
137+
}
138+
]
139+
}

src/main.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { initWebGPU, Renderer } from './renderer';
55
import { NaiveRenderer } from './renderers/naive';
66
import { ForwardPlusRenderer } from './renderers/forward_plus';
77
import { ClusteredDeferredRenderer } from './renderers/clustered_deferred';
8+
import { GlintRenderer } from './renderers/glint';
89

910
import { setupLoaders, Scene } from './stage/scene';
1011
import { Lights } from './stage/lights';
@@ -40,6 +41,9 @@ function setRenderer(mode: string) {
4041
case renderModes.naive:
4142
renderer = new NaiveRenderer(stage);
4243
break;
44+
case renderModes.glint:
45+
renderer = new GlintRenderer(stage);
46+
break;
4347
case renderModes.forwardPlus:
4448
renderer = new ForwardPlusRenderer(stage);
4549
break;
@@ -49,8 +53,8 @@ function setRenderer(mode: string) {
4953
}
5054
}
5155

52-
const renderModes = { naive: 'naive', forwardPlus: 'forward+', clusteredDeferred: 'clustered deferred' };
53-
let renderModeController = gui.add({ mode: renderModes.clusteredDeferred }, 'mode', renderModes);
56+
const renderModes = { naive: 'naive', glint: 'glint', forwardPlus: 'forward+', clusteredDeferred: 'clustered deferred' };
57+
let renderModeController = gui.add({ mode: renderModes.glint }, 'mode', renderModes);
5458
renderModeController.onChange(setRenderer);
5559

5660
setRenderer(renderModeController.getValue());

src/renderers/glint.ts

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
import * as renderer from '../renderer';
2+
import * as shaders from '../shaders/shaders';
3+
import { Stage } from '../stage/stage';
4+
import { Node, Primitive, Scene, Texture } from "../stage/scene";
5+
6+
export class GlintRenderer extends renderer.Renderer {
7+
sceneUniformsBindGroupLayout: GPUBindGroupLayout;
8+
sceneUniformsBindGroup: GPUBindGroup;
9+
10+
depthTexture: GPUTexture;
11+
depthTextureView: GPUTextureView;
12+
13+
// We'll just re-use this for the glint render pass too.
14+
pipeline: GPURenderPipeline;
15+
16+
// Assume no textures at all, very simple material
17+
// Figure out the rest of it later on.
18+
// glintPrimitives: Primitive[];
19+
20+
// Custom glint stage... idk
21+
glintScene: Scene = new Scene();
22+
glintStage: Stage;
23+
24+
glintRenderPipeline: GPURenderPipeline;
25+
26+
constructor(stage: Stage) {
27+
super(stage);
28+
29+
// Load scene stuff
30+
this.glintScene.loadGltf('./scenes/sphere/florbSphere.gltf');
31+
this.glintStage = new Stage(this.glintScene, stage.lights, stage.camera, stage.stats);
32+
33+
this.sceneUniformsBindGroupLayout = renderer.device.createBindGroupLayout({
34+
label: "scene uniforms bind group layout",
35+
entries: [
36+
{
37+
binding: 0,
38+
visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
39+
buffer: { type: "uniform"}
40+
},
41+
{
42+
binding: 1,
43+
visibility: GPUShaderStage.FRAGMENT,
44+
buffer: { type: "read-only-storage" }
45+
}
46+
]
47+
});
48+
49+
this.sceneUniformsBindGroup = renderer.device.createBindGroup({
50+
label: "scene uniforms bind group",
51+
layout: this.sceneUniformsBindGroupLayout,
52+
entries: [
53+
{
54+
binding: 0,
55+
resource: { buffer: this.camera.uniformsBuffer }
56+
},
57+
{
58+
binding: 1,
59+
resource: { buffer: this.lights.lightSetStorageBuffer }
60+
}
61+
]
62+
});
63+
64+
this.depthTexture = renderer.device.createTexture({
65+
size: [renderer.canvas.width, renderer.canvas.height],
66+
format: "depth24plus",
67+
usage: GPUTextureUsage.RENDER_ATTACHMENT
68+
});
69+
this.depthTextureView = this.depthTexture.createView();
70+
71+
this.pipeline = renderer.device.createRenderPipeline({
72+
layout: renderer.device.createPipelineLayout({
73+
label: "naive pipeline layout",
74+
bindGroupLayouts: [
75+
this.sceneUniformsBindGroupLayout,
76+
renderer.modelBindGroupLayout,
77+
renderer.materialBindGroupLayout
78+
]
79+
}),
80+
depthStencil: {
81+
depthWriteEnabled: true,
82+
depthCompare: "less",
83+
format: "depth24plus"
84+
},
85+
vertex: {
86+
module: renderer.device.createShaderModule({
87+
label: "naive vert shader",
88+
code: shaders.naiveVertSrc
89+
}),
90+
buffers: [ renderer.vertexBufferLayout ]
91+
},
92+
fragment: {
93+
module: renderer.device.createShaderModule({
94+
label: "naive frag shader",
95+
code: shaders.naiveFragSrc,
96+
}),
97+
targets: [
98+
{
99+
format: renderer.canvasFormat,
100+
}
101+
]
102+
}
103+
});
104+
105+
this.glintRenderPipeline = renderer.device.createRenderPipeline({
106+
layout: renderer.device.createPipelineLayout({
107+
label: "naive pipeline layout",
108+
bindGroupLayouts: [
109+
this.sceneUniformsBindGroupLayout,
110+
renderer.modelBindGroupLayout,
111+
renderer.materialBindGroupLayout
112+
]
113+
}),
114+
depthStencil: {
115+
depthWriteEnabled: true,
116+
depthCompare: "less",
117+
format: "depth24plus"
118+
},
119+
vertex: {
120+
module: renderer.device.createShaderModule({
121+
label: "naive vert shader",
122+
code: shaders.naiveVertSrc
123+
}),
124+
buffers: [ renderer.vertexBufferLayout ]
125+
},
126+
fragment: {
127+
module: renderer.device.createShaderModule({
128+
label: "glint frag shader",
129+
code: shaders.glintFragSrc,
130+
}),
131+
targets: [
132+
{
133+
format: renderer.canvasFormat,
134+
}
135+
]
136+
}
137+
});
138+
}
139+
140+
override draw() {
141+
const encoder = renderer.device.createCommandEncoder();
142+
const canvasTextureView = renderer.context.getCurrentTexture().createView();
143+
144+
// Set up necessary bind groups for the debug glint model draw pass
145+
const glintRenderPass = encoder.beginRenderPass({
146+
label: "naive render pass",
147+
colorAttachments: [
148+
{
149+
view: canvasTextureView,
150+
clearValue: [0, 0, 0, 0],
151+
loadOp: "clear",
152+
storeOp: "store"
153+
}
154+
],
155+
depthStencilAttachment: {
156+
view: this.depthTextureView,
157+
depthClearValue: 1.0,
158+
depthLoadOp: "clear",
159+
depthStoreOp: "store"
160+
}
161+
});
162+
163+
glintRenderPass.setPipeline(this.glintRenderPipeline);
164+
glintRenderPass.setBindGroup(shaders.constants.bindGroup_scene, this.sceneUniformsBindGroup);
165+
166+
this.glintScene.iterate(node => {
167+
glintRenderPass.setBindGroup(shaders.constants.bindGroup_model, node.modelBindGroup);
168+
}, material => {
169+
glintRenderPass.setBindGroup(shaders.constants.bindGroup_material, material.materialBindGroup);
170+
}, primitive => {
171+
glintRenderPass.setVertexBuffer(0, primitive.vertexBuffer);
172+
glintRenderPass.setIndexBuffer(primitive.indexBuffer, 'uint32');
173+
glintRenderPass.drawIndexed(primitive.numIndices);
174+
});
175+
176+
glintRenderPass.end();
177+
178+
renderer.device.queue.submit([encoder.finish()]);
179+
}
180+
}

src/shaders/common.wgsl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,11 @@ struct ClusterSet {
2525
}
2626

2727
struct CameraUniforms {
28-
// TODO-1.3: add an entry for the view proj mat (of type mat4x4f)
2928
viewProjMat: mat4x4f,
3029
viewMat: mat4x4f,
3130
invProjMat: mat4x4f,
3231
invViewProjMat: mat4x4f,
32+
cameraPosition: vec3f,
3333
screenDimensions: vec2f
3434
}
3535

0 commit comments

Comments
 (0)