@vgpu/renderAdvanced2 symbolsView source ↗

Symbols in this topic

wireframeMaterialfunctionWireframeMaterialSpectype

wireframeMaterial

Creates an InspectMaterial configured to render line segments from a readable mesh. Use it with meshToWireframe outputs to visualize topology edges while keeping your primary material untouched.

Import

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

Signature

TypeScript
1
export function wireframeMaterial(spec: WireframeMaterialSpec): InspectMaterial;

Parameters

ParamTypeRequiredDefaultNotes
specWireframeMaterialSpec✔—Configuration object used to allocate the pipeline.
spec.deviceDevice✔—Device that owns the pipeline, bind group layout, and uniform buffer writes.
spec.colorreadonly [number, number, number]✖[1, 1, 1]Linear RGB line color; each component must be between 0 and 1.
spec.targetFormatGPUTextureFormat✖"bgra8unorm-srgb"Color attachment format for the fragment target. Use "rgba8unorm-srgb" on implementations that lack BGRA support.

Returns: InspectMaterial — exposes the configured pipeline, bindGroupLayout, uniform byte size (144 bytes), and a writer that packs view-projection, model matrices, and the wire color.

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, wireframeMaterial } 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 = wireframeMaterial({ device, color: [1, 0.75, 0.5] });
  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

  • Uses line-list topology with depth testing enabled and no culling to guarantee all edges stay visible.
  • The vertex buffer layout expects interleaved position/normal attributes that match the meshToWireframe output stride (24 bytes).
  • Uniform writes allocate a temporary Float32Array; reuse the same uniform buffer between frames to avoid churn.
  • See also: meshToWireframe, InspectMaterial, normalDebugMaterial