@vgpu/renderAdvanced2 symbolsView source ↗

Symbols in this topic

normalDebugMaterialfunctionNormalDebugMaterialSpectype

normalDebugMaterial

Creates an InspectMaterial that visualizes per-fragment normals as RGB. Use it to confirm vertex normals before passing geometry into lighting passes.

Import

TypeScript
1
import { normalDebugMaterial } from "@vgpu/render/inspect";

Signature

TypeScript
1
export function normalDebugMaterial(spec: NormalDebugMaterialSpec): InspectMaterial;

Parameters

ParamTypeRequiredDefaultNotes
specNormalDebugMaterialSpec✔—Configuration object used to allocate the material.
spec.deviceDevice✔—Device that owns the pipeline, bind group layout, and uniform buffer writes.
spec.targetFormatGPUTextureFormat✖"bgra8unorm-srgb"Color attachment format; use "rgba8unorm-srgb" if BGRA is unavailable.

Returns: InspectMaterial — exposes the configured pipeline, bindGroupLayout, 128-byte uniform size, and a writer that uploads view-projection and model matrices.

Examples

TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { createMockAdapter } from "@vgpu/adapter-mock";
import { InspectMaterial, normalDebugMaterial } from "@vgpu/render/inspect";
 
const IDENTITY_MATRIX = new Float32Array([
  1, 0, 0, 0,
  0, 1, 0, 0,
  0, 0, 1, 0,
  0, 0, 0, 1,
]);
 
async function main(): Promise<void> {
  const device = await createMockAdapter().requestDevice();
  const material: InspectMaterial = normalDebugMaterial({ device, targetFormat: "rgba8unorm-srgb" });
  const uniforms = device.createBuffer({ size: material.uniformByteSize, usage: ["uniform", "copy_dst"] });
 
  material.writeUniforms(uniforms.gpu, 0, {
    viewProjectionMatrix: IDENTITY_MATRIX,
    modelMatrix: IDENTITY_MATRIX,
  });
}
 
main().catch((error) => {
  console.error(error);
});

Notes

  • Renders with triangle-list topology, depth testing, and back-face culling so front-facing normals remain visible.
  • Outputs (normal + 1) / 2 in linear space; rotating the model matrix rotates the visualized colors.
  • There is no normal-matrix correction: this inspector intentionally shows object-space normals to match authoring errors.
  • See also: wireframeMaterial, InspectMaterial