0%

3d-math

Posted on Edited on In
Symbols count in article: 317 Reading time ≈ 1 mins.

Front face & back face

Triangles in WebGPU have the concept of front facing and back facing. By default a front facing triangle has its vertices go in a counter clockwise direction in clip space. A back facing triangle has its vertices go in a clockwise direction in clip space.

The gpu has the ability to draw only forward facing or only back facing triangles. We can turn that feature on by modifying the pipeline

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const pipeline = device.createRenderPipeline({
  label: '2 attributes',
  layout: 'auto',
  vertex: {
    module,
    entryPoint: 'vs',
  },
  fragment: {
    module,
    entryPoint: 'fs',
    targets: [{ format: presentationFormat }],
  },
  primitive: {
    cullMode: 'back',
  },
});

With cullMode set to back, “back facing” triangles will be culled. “Culling” in this case is a fancy word for “not drawing”

Importantly, as far as WebGPU is concerned, whether or not a triangle is considered to be going clockwise or counter clockwise depends on the vertices of that triangle in clip space. In other words, WebGPU figures out whether a triangle is front or back AFTER you’ve applied math to the vertices in the vertex shader. That means for example, a clockwise triangle that is scaled in X by -1 becomes a counter clockwise triangle or, a clockwise triangle rotated 180 degrees becomes a counter clockwise triangle.

Depth texture

In vertex shader, for Z, clip space is 0 to +1. Anything outside of this range is clipped. Before WebGPU draws a color pixel it will check the corresponding depth pixel. If the depth (Z) value for the pixel it’s about to draw does not match some condition relative to the value of the corresponding depth pixel then WebGPU will not draw the new color pixel.Otherwise it draws both the new color pixel with the color from your fragment shader AND it draws the depth pixel with the new depth value. This means, pixels that are behind other pixels won’t get drawn.