@vgpu/renderAdvanced2 symbolsView source ↗

Symbols in this topic

meshToWireframe

Builds a deduplicated line-list index buffer out of a readable triangle-list mesh. Use it alongside wireframeMaterial to visualize topology edges during debugging sessions.

Import

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

Signature

TypeScript
1
export function meshToWireframe(mesh: Mesh, device: Device): Promise<WireframeMesh>;

Parameters

ParamTypeRequiredDefaultNotes
meshMeshMust have a vertex buffer created with GPUBufferUsage.COPY_SRC; otherwise the function cannot read vertex positions.
deviceDeviceSupplies the command encoder, index buffer, and queue submit used to bake the wireframe lines.

Returns: Promise<WireframeMesh> — frozen mesh-like object that reuses the source vertexBuffer, exposes a raw indexBuffer, reports whether the index data is uint16 or uint32, and includes the deduplicated lineCount.

Throws: VGPU-CORE-INVALID-USAGE when the source mesh lacks a readable vertex buffer; fix by creating the geometry via geometry(gpu, ...) or promoting it through meshToReadable first.

Examples

TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { createMockAdapter } from "@vgpu/adapter-mock";
import { meshToReadable, meshToWireframe, wireframeMaterial } from "@vgpu/render/inspect";
import { init, geometry } from "vgpu/mock";
import { box } from "vgpu/scene";
 
async function main(): Promise<void> {
  const adapter = createMockAdapter();
  const gpu = await init({ adapter });
  const solid = geometry(gpu, box({ size: 1 }));
  const readable = await meshToReadable(solid as never, gpu.device);
  const wireframe = await meshToWireframe(readable, gpu.device);
  const inspector = wireframeMaterial({ device: gpu.device });
 
  console.log(wireframe.lineCount); // 12 for a cube
  inspector.pipeline; // ready-to-use GPURenderPipeline
}
 
main().catch((error) => {
  console.error(error);
});

Notes

  • The helper quantizes edge endpoints to a 1e-6 grid before it deduplicates them; bake tiny debug meshes at a larger scale if you need finer detail.
  • Triangle pairs that share a coplanar face have their diagonal removed by comparing face normals, so smooth surfaces only emit silhouette edges.
  • The returned indexBuffer is a raw GPUBuffer. Destroy it manually when the wireframe is no longer needed or rely on device.destroy() during teardown.
  • See also: meshToReadable, wireframeMaterial, InspectMaterial