Skip to content

Commit

Permalink
MSAA deferred
Browse files Browse the repository at this point in the history
  • Loading branch information
@tsherif
tsherif committed Feb 18, 2024
1 parent 04912a2 commit 9658308
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 28 deletions.
85 changes: 61 additions & 24 deletions deferred.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,8 @@
import { Timer } from "./utils/Timer.js";

const { mat4, vec3 } = glMatrix;
const NUM_BOXES = 256;
const NUM_LIGHTS = 64;
const NUM_BOXES = 512;
const NUM_LIGHTS = 16;

checkSupport();
addDescription(
Expand Down Expand Up @@ -300,6 +300,9 @@
}
]
},
multisample: {
count: 4
},
primitive: {
topology: "triangle-list",
cullMode: "back"
Expand All @@ -317,9 +320,9 @@
const lights = {
data: new Array(NUM_LIGHTS).fill(null).map(() => ({
position: [
randomRange(-3, 3),
randomRange(-3, 3),
randomRange(-2.5, 0.5)
randomRange(-2, 2),
randomRange(-2, 2),
randomRange(-0.5, 0.5)
],
color: [
randomRange(0, 1),
Expand Down Expand Up @@ -376,20 +379,23 @@
size: [canvas.width, canvas.height],
format: "rgba16float",
usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
sampleCount: 4
});

let gBufferNormalsTexture = device.createTexture({
label: "gBuffer normals texture",
size: [canvas.width, canvas.height],
format: "rgba16float",
usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
sampleCount: 4
});

let gBufferColorsTexture = device.createTexture({
label: "gBuffer colors texture",
size: [canvas.width, canvas.height],
format: "rgba8unorm",
usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
sampleCount: 4
});

// Shader module
Expand Down Expand Up @@ -495,6 +501,9 @@
}
]
},
multisample: {
count: 4
},
primitive: {
topology: "triangle-list",
cullMode: "back"
Expand Down Expand Up @@ -593,28 +602,29 @@
@group(0) @binding(0) var<uniform> eyePosition: vec4f;
@group(0) @binding(1) var<uniform> lightPositions: array<vec4f, ${NUM_LIGHTS}>;
@group(0) @binding(2) var<uniform> lightColors: array<vec4f, ${NUM_LIGHTS}>;
@group(0) @binding(3) var positionTexture: texture_2d<f32>;
@group(0) @binding(4) var normalTexture: texture_2d<f32>;
@group(0) @binding(5) var colorTexture: texture_2d<f32>;
@group(0) @binding(3) var positionTexture: texture_multisampled_2d<f32>;
@group(0) @binding(4) var normalTexture: texture_multisampled_2d<f32>;
@group(0) @binding(5) var colorTexture: texture_multisampled_2d<f32>;
@fragment
fn fs(
@builtin(position) fragmentPosition: vec4f,
@builtin(sample_index) sampleIndex: u32
) -> @location(0) vec4f {
let canvasPosition = vec2u(fragmentPosition.xy);
let positionSample = textureLoad(positionTexture, canvasPosition, 0);
let positionSample = textureLoad(positionTexture, canvasPosition, sampleIndex);
if (positionSample.w == 0.0) {
discard;
}
let position = positionSample.xyz;
let normal = normalize(textureLoad(normalTexture, canvasPosition, 0).xyz);
let surfaceColor = textureLoad(colorTexture, canvasPosition, 0).rgb;
let normal = normalize(textureLoad(normalTexture, canvasPosition, sampleIndex).xyz);
let surfaceColor = textureLoad(colorTexture, canvasPosition, sampleIndex).rgb;
let eyeDirection: vec3f = normalize(eyePosition.xyz - position);
var color = vec3f(0.0);
var color = vec3f(0.05);
for (var i = 0; i < ${NUM_LIGHTS}; i++) {
let lightPosition = lightPositions[i].xyz;
Expand Down Expand Up @@ -661,6 +671,9 @@
format: presentationFormat,
}],
},
multisample: {
count: 4
},
primitive: {
topology: "triangle-strip",
cullMode: "back"
Expand Down Expand Up @@ -708,19 +721,27 @@
//////////////////////////////
// Render pass descriptions
//////////////////////////////
let msaaTexture = device.createTexture({
label: 'msaa texture',
size: [canvas.width, canvas.height],
format: presentationFormat,
usage: GPUTextureUsage.RENDER_ATTACHMENT,
sampleCount: 4
});

let depthTexture = device.createTexture({
label: 'depth texture',
size: [canvas.width, canvas.height],
format: "depth24plus",
usage: GPUTextureUsage.RENDER_ATTACHMENT,
sampleCount: 4
});

const lightsRenderPassDescription = {
label: 'lights render pass',
colorAttachments: [
{
view: context.getCurrentTexture().createView(),
view: msaaTexture.createView(),
resolveTarget: context.getCurrentTexture().createView(),
loadOp: "clear",
storeOp: "store",
clearValue: [0, 0, 0, 1]
Expand Down Expand Up @@ -769,7 +790,8 @@
const lightingRenderPassDescription = {
label: 'lighting render pass',
colorAttachments: [{
view: context.getCurrentTexture().createView(),
view: msaaTexture.createView(),
resolveTarget: context.getCurrentTexture().createView(),
loadOp: "load",
storeOp: "store",
}],
Expand All @@ -791,6 +813,7 @@
size: [canvas.width, canvas.height],
format: "rgba16float",
usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
sampleCount: 4
});

gBufferNormalsTexture.destroy();
Expand All @@ -799,6 +822,7 @@
size: [canvas.width, canvas.height],
format: "rgba16float",
usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
sampleCount: 4
});

gBufferColorsTexture.destroy();
Expand All @@ -807,14 +831,24 @@
size: [canvas.width, canvas.height],
format: "rgba8unorm",
usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT,
});
sampleCount: 4
});

msaaTexture.destroy();
msaaTexture = device.createTexture({
label: 'msaa texture',
size: [canvas.width, canvas.height],
format: presentationFormat,
usage: GPUTextureUsage.RENDER_ATTACHMENT,
sampleCount: 4
});

depthTexture.destroy();
depthTexture = device.createTexture({
label: "depth texture",
size: [canvas.width, canvas.height],
format: "depth24plus",
usage: GPUTextureUsage.RENDER_ATTACHMENT,
sampleCount: 4
});

lightingBindGroup = device.createBindGroup({
Expand Down Expand Up @@ -853,12 +887,15 @@
]
});

lightsRenderPassDescription.depthStencilAttachment.view = depthTexture.createView()
lightsRenderPassDescription.colorAttachments[0].view = msaaTexture.createView();
lightsRenderPassDescription.depthStencilAttachment.view = depthTexture.createView();

gBufferRenderPassDescription.colorAttachments[0].view = gBufferPositionsTexture.createView();
gBufferRenderPassDescription.colorAttachments[1].view = gBufferNormalsTexture.createView();
gBufferRenderPassDescription.colorAttachments[2].view = gBufferColorsTexture.createView();
gBufferRenderPassDescription.depthStencilAttachment.view = depthTexture.createView();

gBufferRenderPassDescription.colorAttachments[0].view = gBufferPositionsTexture.createView()
gBufferRenderPassDescription.colorAttachments[1].view = gBufferNormalsTexture.createView()
gBufferRenderPassDescription.colorAttachments[2].view = gBufferColorsTexture.createView()
gBufferRenderPassDescription.depthStencilAttachment.view = depthTexture.createView()
lightingRenderPassDescription.colorAttachments[0].view = msaaTexture.createView();
});

let lastTime;
Expand Down Expand Up @@ -907,7 +944,7 @@
// Draw lights as spheres to canvas
/////////////////////////////////////

lightsRenderPassDescription.colorAttachments[0].view = context.getCurrentTexture().createView();
lightsRenderPassDescription.colorAttachments[0].resolveTarget = context.getCurrentTexture().createView();

const lightsRenderPass = commandEncoder.beginRenderPass(lightsRenderPassDescription);
lightsRenderPass.setPipeline(lightsPipeline);
Expand Down Expand Up @@ -943,7 +980,7 @@
// GBuffer.
//////////////////////////////////

lightingRenderPassDescription.colorAttachments[0].view = context.getCurrentTexture().createView();
lightingRenderPassDescription.colorAttachments[0].resolveTarget = context.getCurrentTexture().createView();

const lightingRenderPass = commandEncoder.beginRenderPass(lightingRenderPassDescription);

Expand Down
7 changes: 3 additions & 4 deletions triangle.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,9 @@
);

(async () => {
//////////////////////////////////////////
// Set up WebGPU adapter and load glslang
// to compile GLSL to SPIR-V
//////////////////////////////////////////
///////////////////////////
// Set up WebGPU adapter
///////////////////////////

const adapter = await navigator.gpu.requestAdapter();
const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
Expand Down

0 comments on commit 9658308

Please sign in to comment.