---
title: wireframeMaterial
description: 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.
---

# wireframeMaterial



## Import

```ts
import { wireframeMaterial } from "@vgpu/render/inspect";
```

## Signature

```ts
export function wireframeMaterial(spec: WireframeMaterialSpec): InspectMaterial;
```

## Parameters

| Param             | Type                               | Required | Default           | Notes                                                                                                             |
| ----------------- | ---------------------------------- | -------- | ----------------- | ----------------------------------------------------------------------------------------------------------------- |
| spec              | WireframeMaterialSpec              | ✔        | —                 | Configuration object used to allocate the pipeline.                                                               |
| spec.device       | Device                             | ✔        | —                 | Device that owns the pipeline, bind group layout, and uniform buffer writes.                                      |
| spec.color        | readonly \[number, number, number] | ✖        | \[1, 1, 1]        | Linear RGB line color; each component must be between 0 and 1.                                                    |
| spec.targetFormat | GPUTextureFormat                   | ✖        | "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

```ts
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`


---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/llms.txt](/llms.txt)

For agent-facing discovery, including API and MCP surfaces, see [/agents.md](/agents.md)