Rasterization

primitive.frontFace ('ccw' by default) says which screen-space winding is the front, and cullMode ('none', 'front' or 'back') discards triangles by facing before any fragment runs. A test drew one counter-clockwise and one clockwise triangle of 16 pixels each into an 8 x 8 target: 'none' drew both, 'back' kept only the counter-clockwise one, 'front' only the clockwise one, and 'back' with frontFace: 'cw' again only the clockwise one. Cull back faces of closed meshes; leave culling off for cards seen from both sides. Culling happens after the vertex shader, which is why a mirrored (negatively scaled) model suddenly vanishes: flip frontFace for it. unclippedDepth: true (the depth-clip-control feature) keeps geometry beyond the far plane instead of clipping it, which shadow maps use.

One counter-clockwise and one clockwise triangle through four cullMode and frontFace settingsHTMLLive

<!doctype html>
<style>
  body { margin: 0; background: #f7f4ee; font: 14px system-ui, sans-serif; }
  .stage { position: relative; width: 100%; max-width: 600px; }
  .stage canvas { display: block; width: 100%; }
  .stage canvas + canvas { position: absolute; inset: 0; pointer-events: none; }
</style>
<div class="stage">
  <canvas id="view" width="600" height="300"></canvas>
  <canvas id="labels" width="600" height="300"></canvas>
</div>
<script>
const canvas = document.getElementById('view');
const ink = document.getElementById('labels').getContext('2d');

function showMessage(text) {                     // 2D fallback when WebGPU is missing
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = '#fbeaea'; ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#8a2b2b'; ctx.font = '18px system-ui, sans-serif'; ctx.textAlign = 'center';
  ctx.fillText(text, canvas.width / 2, canvas.height / 2);
}

// Left triangle: counter-clockwise on screen (blue). Right triangle: clockwise (orange).
const code = /* wgsl */ `
struct Out { @builtin(position) pos: vec4f, @location(0) color: vec3f }
@vertex fn vs(@builtin(vertex_index) v: u32) -> Out {
  let p = array(vec2f(-0.9, -0.6), vec2f(-0.1, -0.6), vec2f(-0.5, 0.6),     // CCW
                vec2f(0.1, -0.6), vec2f(0.5, 0.6), vec2f(0.9, -0.6))[v];    // CW
  return Out(vec4f(p, 0, 1), select(vec3f(0.08, 0.40, 0.75), vec3f(0.88, 0.55, 0.15), v >= 3));
}
@fragment fn fs(in: Out) -> @location(0) vec4f { return vec4f(in.color, 1); }`;

async function main() {
  const adapter = await navigator.gpu?.requestAdapter();
  if (!adapter) return showMessage('WebGPU is not available in this browser');
  const device = await adapter.requestDevice();
  const context = canvas.getContext('webgpu');
  const format = navigator.gpu.getPreferredCanvasFormat();
  context.configure({ device, format });
  const module = device.createShaderModule({ code });
  const settings = [{ cullMode: 'none' }, { cullMode: 'back' }, { cullMode: 'front' }, { cullMode: 'back', frontFace: 'cw' }];
  const pipelines = settings.map((primitive) => device.createRenderPipeline({ layout: 'auto', primitive,
    vertex: { module }, fragment: { module, targets: [{ format }] } }));

  const encoder = device.createCommandEncoder();
  const pass = encoder.beginRenderPass({ colorAttachments: [{ view: context.getCurrentTexture().createView(),
    clearValue: [0.97, 0.96, 0.93, 1], loadOp: 'clear', storeOp: 'store' }] });
  pipelines.forEach((pipeline, i) => {
    pass.setViewport((i % 2) * 300 + 20, Math.floor(i / 2) * 150 + 30, 260, 110, 0, 1);
    pass.setPipeline(pipeline);
    pass.draw(6);                                    // both triangles every time
  });
  pass.end();
  device.queue.submit([encoder.finish()]);

  ink.font = '12px ui-monospace, monospace'; ink.fillStyle = '#222';
  const names = ["cullMode: 'none'", "cullMode: 'back'", "cullMode: 'front'", "cullMode: 'back', frontFace: 'cw'"];
  names.forEach((n, i) => ink.fillText(n, (i % 2) * 300 + 20, Math.floor(i / 2) * 150 + 22));
  ink.font = '11px system-ui, sans-serif'; ink.fillStyle = '#555';
  for (let i = 0; i < 4; i++) {
    ink.fillText('CCW', (i % 2) * 300 + 80, Math.floor(i / 2) * 150 + 142);
    ink.fillText('CW', (i % 2) * 300 + 214, Math.floor(i / 2) * 150 + 142);
  }
}
main();
</script>

MENU