API Reference@vgpu/render

normalDebugMaterial

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

Import

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

Signature

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

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
PreviouswireframeMaterialNextmeshToReadable