Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add depth bias to wireframe sample #430

Merged
merged 2 commits into from
Jul 2, 2024
Merged

Add depth bias to wireframe sample #430

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
90e3042
Add depth bias to wireframe sample
toji Jul 2, 2024
49ebce9
Fix lint issues
toji Jul 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 82 additions & 48 deletions sample/wireframe/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,17 @@ import { randElement, randColor } from './utils';
import solidColorLitWGSL from './solidColorLit.wgsl';
import wireframeWGSL from './wireframe.wgsl';

const settings = {
barycentricCoordinatesBased: false,
thickness: 2,
alphaThreshold: 0.5,
animate: true,
lines: true,
depthBias: 0.0,
depthBiasSlopeScale: 0.5,
models: true,
};

type TypedArrayView = Float32Array | Uint32Array;

function createBufferWithData(
Expand Down Expand Up @@ -76,45 +87,68 @@ const wireframeModule = device.createShaderModule({
code: wireframeWGSL,
});

const litPipeline = device.createRenderPipeline({
label: 'lit pipeline',
layout: 'auto',
vertex: {
module: litModule,
buffers: [
{
arrayStride: 6 * 4, // position, normal
attributes: [
{
// position
shaderLocation: 0,
offset: 0,
format: 'float32x3',
},
{
// normal
shaderLocation: 1,
offset: 3 * 4,
format: 'float32x3',
},
],
},
],
},
fragment: {
module: litModule,
targets: [{ format: presentationFormat }],
},
primitive: {
cullMode: 'back',
},
depthStencil: {
depthWriteEnabled: true,
depthCompare: 'less',
format: depthFormat,
},
const litBindGroupLayout = device.createBindGroupLayout({
label: 'lit bind group layout',
entries: [
{
binding: 0,
visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
buffer: {},
},
],
});

let litPipeline;
function rebuildLitPipeline() {
litPipeline = device.createRenderPipeline({
label: 'lit pipeline',
layout: device.createPipelineLayout({
bindGroupLayouts: [litBindGroupLayout],
}),
vertex: {
module: litModule,
buffers: [
{
arrayStride: 6 * 4, // position, normal
attributes: [
{
// position
shaderLocation: 0,
offset: 0,
format: 'float32x3',
},
{
// normal
shaderLocation: 1,
offset: 3 * 4,
format: 'float32x3',
},
],
},
],
},
fragment: {
module: litModule,
targets: [{ format: presentationFormat }],
},
primitive: {
cullMode: 'back',
},
depthStencil: {
depthWriteEnabled: true,
depthCompare: 'less',
// Applying a depth bias can prevent aliasing from z-fighting with the
// wireframe lines. The depth bias has to be applied to the lit meshes
// rather that the wireframe because depthBias isn't considered when
// drawing line or point primitives.
depthBias: settings.depthBias,
depthBiasSlopeScale: settings.depthBiasSlopeScale,
format: depthFormat,
},
});
}
rebuildLitPipeline();

const wireframePipeline = device.createRenderPipeline({
label: 'wireframe pipeline',
layout: 'auto',
Expand Down Expand Up @@ -215,7 +249,7 @@ for (let i = 0; i < numObjects; ++i) {

// Make a bind group for this uniform
const litBindGroup = device.createBindGroup({
layout: litPipeline.getBindGroupLayout(0),
layout: litBindGroupLayout,
entries: [{ binding: 0, resource: { buffer: uniformBuffer } }],
});

Expand Down Expand Up @@ -289,18 +323,15 @@ const renderPassDescriptor: GPURenderPassDescriptor = {
},
};

const settings = {
barycentricCoordinatesBased: false,
thickness: 2,
alphaThreshold: 0.5,
lines: true,
models: true,
};

const gui = new GUI();
gui.add(settings, 'barycentricCoordinatesBased').onChange(addRemoveGUI);
gui.add(settings, 'lines');
gui.add(settings, 'models');
gui.add(settings, 'animate');
gui.add(settings, 'depthBias', -1, 1, 0.05).onChange(rebuildLitPipeline);
Copy link
Collaborator

@greggman greggman Jul 2, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AFAICT, these are not needed to make the barycentric edge version work. The triangles are the same so the depth test of less-equal perfectly matches. Do these settings appearing in the barycentric case make that more confusing, as in, should these settings be removed in the barycentric solution case?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wondered about that, but also observed that they DO have an effect in the barycentric mode (though as you pointed out aren't necessary to get a clean render) so I figured leaving them in was at the very least educational? I'm happy to suppress them in that case if you'd like.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm fine either way. Just don't want people to think they need to set them if they don't

gui
.add(settings, 'depthBiasSlopeScale', -1, 1, 0.05)
.onChange(rebuildLitPipeline);

const guis = [];
function addRemoveGUI() {
Expand All @@ -326,8 +357,11 @@ updateThickness();

let depthTexture: GPUTexture | undefined;

function render(time: number) {
time *= 0.001; // convert to seconds;
let time = 0.0;
function render(ts: number) {
if (settings.animate) {
time = ts * 0.001; // convert to seconds;
}

// Get the current texture from the canvas context and
// set it as the texture to render to.
Expand Down
Loading