Class WireRenderer

Renders wireframe shapes for a single frame, for debugging and visualization. Shapes are submitted as line segments to the layer given by WireRenderer#layer, which defaults to the LAYERID_IMMEDIATE layer, and are discarded once the frame has been rendered, so they must be issued again on every frame they should be visible.

The renderer holds the state used by the shapes it draws - WireRenderer#color, WireRenderer#layer, WireRenderer#depthTest, WireRenderer#segments and WireRenderer#transform. Fields can be assigned between calls, and drawing many shapes with the same state allocates nothing:

const wire = new WireRenderer(app);
wire.color = Color.RED;

app.on('update', () => {
    for (const item of items) {
        wire.sphere(item.position, item.radius);
    }
});

A second set of state is simply a second instance. Instances hold no GPU resources, and those sharing a layer and depth test mode submit into the same batch, so using several has no additional rendering cost:

const xray = new WireRenderer(app);
xray.depthTest = false;

These are thin lines, one pixel wide. For thick lines with caps, joins and dashes, intended as part of the rendered scene rather than as a debugging aid, see WideLineRenderer instead.

Index

Constructors

constructor

new WireRenderer(app: AppBase): WireRenderer
Creates a new WireRenderer instance.
Parameters
- app: AppBase
  The application.
Returns WireRenderer
Example
```
const wire = new WireRenderer(app);
```
- Defined in extras/renderers/wire-renderer.js:155

Properties

color

color: Color = ...

The color used by shapes, specified in sRGB color space. The alpha component is respected. Defaults to white.

depthTest

depthTest: boolean = true

Whether shapes are depth tested against the depth buffer. Defaults to true.

layer

layer: Layer | null = null

The layer shapes are rendered into, or null to use the LAYERID_IMMEDIATE layer. Defaults to null.

segments

segments: number = 20

The number of line segments used to approximate a full circle. Defaults to 20.

transform

transform: Mat4 | null = null

A matrix applied to every point of every shape, or null for no transform. Assign this to draw a group of shapes in the local space of a node. Defaults to null.

Methods

arrow

arrow(from: Vec3, to: Vec3): void
Renders an arrow, as a shaft with four barbs at its tip.
Parameters
- from: Vec3
  The tail of the arrow.
- to: Vec3
  The tip of the arrow.
Returns void
Example
```
wire.arrow(position, position.clone().add(velocity));
```
- Defined in extras/renderers/wire-renderer.js:792

axes

axes(matrix: Mat4, size: number): void
Renders the three axes of a matrix, colored red, green and blue for x, y and z respectively. This function ignores WireRenderer#color.
Parameters
- matrix: Mat4
  The transform whose axes are rendered.
- size: number
  The length of each axis.
Returns void
Example
```
wire.axes(entity.getWorldTransform(), 1);
```
- Defined in extras/renderers/wire-renderer.js:833

box

box(box: BoundingBox | OrientedBox): void
Renders the edges of a bounding box. An OrientedBox is rendered in its own orientation, composed with WireRenderer#transform.
Parameters
- box: BoundingBox | OrientedBox
  The box to render.
Returns void
Example
```
wire.box(meshInstance.aabb);
```
- Defined in extras/renderers/wire-renderer.js:539

boxMinMax

boxMinMax(min: Vec3, max: Vec3): void
Renders the edges of a box specified by its min and max corners.
Parameters
- min: Vec3
  The min corner of the box.
- max: Vec3
  The max corner of the box.
Returns void
Example
```
wire.boxMinMax(new Vec3(-1, -1, -1), new Vec3(1, 1, 1));
```
- Defined in extras/renderers/wire-renderer.js:506

capsule

capsule(start: Vec3, end: Vec3, radius: number): void
Renders a capsule as a ring and hemispherical cap at each end, joined by four side lines.
Parameters
- start: Vec3
  The center of the start cap sphere.
- end: Vec3
  The center of the end cap sphere.
- radius: number
  The radius of the capsule.
Returns void
Example
```
wire.capsule(feet, head, 0.4);
```
- Defined in extras/renderers/wire-renderer.js:656

circle

circle(center: Vec3, normal: Vec3, radius: number): void
Renders a circle lying in the plane described by a normal.
Parameters
- center: Vec3
  The center of the circle.
- normal: Vec3
  The normal of the plane containing the circle. Need not be normalized.
- radius: number
  The radius of the circle.
Returns void
Example
```
wire.circle(Vec3.ZERO, Vec3.UP, 5);
```
- Defined in extras/renderers/wire-renderer.js:594

cone

cone(apex: Vec3, direction: Vec3, angle: number, length: number): void
Renders a cone as a base ring joined to its apex by four side lines. The parameters match those describing a spot light, so a light's cone can be visualized directly.
Parameters
- apex: Vec3
  The tip of the cone.
- direction: Vec3
  The direction the cone opens along. Need not be normalized.
- angle: number
  The half-angle of the cone, in degrees, measured from direction to the cone edge.
- length: number
  The distance from the apex to the base.
Returns void
Example
```
wire.cone(position, direction, 30, 10);
```
- Defined in extras/renderers/wire-renderer.js:692

cylinder

cylinder(start: Vec3, end: Vec3, radius: number): void
Renders a cylinder as a ring at each end joined by four side lines.
Parameters
- start: Vec3
  The center of the start cap.
- end: Vec3
  The center of the end cap.
- radius: number
  The radius of the cylinder.
Returns void
Example
```
wire.cylinder(base, tip, 0.5);
```
- Defined in extras/renderers/wire-renderer.js:612

frustum

frustum(source: Mat4 | CameraComponent): void
Renders the edges of a view frustum. The camera does not need to be enabled or rendering, so the view volume of an inactive camera can be visualized.
Parameters
- source: Mat4 | CameraComponent
  A camera, or a view-projection matrix.
Returns void
Example
```
wire.frustum(otherCamera.camera);
```
- Defined in extras/renderers/wire-renderer.js:859

light

light(light: LightComponent, size?: number): void
Renders the shape and extent of a light, using the light's own color. An omni light is drawn as a sphere of its range, a spot light as its cone, and a directional light as an arrow showing the direction it shines in. A light shines along the negative y-axis of its entity, so the shape follows that axis rather than the entity's forward direction.
Parameters
- light: LightComponent
  The light to render.
- Optionalsize: number = 1
  The length of the arrow used for a directional light, which has no inherent extent. Defaults to 1.
Returns void
Example
```
wire.light(entity.light);
```
- Defined in extras/renderers/wire-renderer.js:925

line

line(start: Vec3, end: Vec3): void
Renders a single line segment.
Parameters
- start: Vec3
  The start of the line, in world space.
- end: Vec3
  The end of the line, in world space.
Returns void
Example
```
wire.line(new Vec3(0, 0, 0), new Vec3(0, 1, 0));
```
- Defined in extras/renderers/wire-renderer.js:389

lines

lines(positions: Vec3[], colors?: Color[]): void
Renders discrete line segments, formed by consecutive pairs of points.
Parameters
- positions: Vec3[]
  The points to draw lines between. The length must be a multiple of two.
- Optionalcolors: Color[]
  One color per point, or undefined to use WireRenderer#color. The color of each segment is interpolated between its ends.
Returns void
Example
```
wire.lines([start, end], [Color.RED, Color.WHITE]);
```
- Defined in extras/renderers/wire-renderer.js:404

linesPacked

linesPacked(
positions: number[] | Float32Array<ArrayBufferLike>,
colors?: number[] | Float32Array<ArrayBufferLike>,
): void
Renders discrete line segments from packed arrays of numbers. This is the fastest of the line functions, as it avoids reading individual Vec3 and Color instances.
Parameters
- positions: number[] | Float32Array<ArrayBufferLike>
  Packed xyz coordinates, forming pairs of points.
- Optionalcolors: number[] | Float32Array<ArrayBufferLike>
  Packed rgba values, one color per point, or undefined to use WireRenderer#color.
Returns void
Example
```
wire.linesPacked([0, 0, 0, 0, 1, 0]);
```
- Defined in extras/renderers/wire-renderer.js:429

loop

loop(positions: Vec3[], colors?: Color[]): void
Renders a closed strip of connected line segments, joining the last point back to the first.
Parameters
- positions: Vec3[]
  The points of the loop, in order.
- Optionalcolors: Color[]
  One color per point, or undefined to use WireRenderer#color.
Returns void
Example
```
wire.loop(outline);
```
- Defined in extras/renderers/wire-renderer.js:487

plane

plane(center: Vec3, normal: Vec3, size: number): void
Renders a square section of a plane, with a short stub along its normal.

The rotation of the square within its plane is derived from the normal, and no such derivation is continuous over all directions. An animated normal will therefore make the square appear to jump as it passes the direction where the derivation switches. To rotate a square smoothly, pass a fixed normal and drive WireRenderer#transform instead.
Parameters
- center: Vec3
  The center of the square.
- normal: Vec3
  The normal of the plane. Need not be normalized.
- size: number
  The side length of the square.
Returns void
Example
```
wire.plane(Vec3.ZERO, Vec3.UP, 10);
```
- Defined in extras/renderers/wire-renderer.js:732

point

point(position: Vec3, size: number): void
Renders a small axis-aligned cross marking a position.
Parameters
- position: Vec3
  The position to mark.
- size: number
  The overall length of each arm of the cross.
Returns void
Example
```
wire.point(hit.point, 0.2);
```
- Defined in extras/renderers/wire-renderer.js:773

polyline

polyline(positions: Vec3[], colors?: Color[]): void
Renders an open strip of connected line segments.
Parameters
- positions: Vec3[]
  The points of the strip, in order.
- Optionalcolors: Color[]
  One color per point, or undefined to use WireRenderer#color.
Returns void
Example
```
wire.polyline(trajectory);
```
- Defined in extras/renderers/wire-renderer.js:467

sphere

sphere(center: Vec3, radius: number): void
Renders a sphere as three great circles, one in each of the primary planes.
Parameters
- center: Vec3
  The center of the sphere.
- radius: number
  The radius of the sphere.
Returns void
Example
```
wire.sphere(new Vec3(0, 1, 0), 0.5);
```
- Defined in extras/renderers/wire-renderer.js:567

Class WireRenderer

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Returns WireRenderer

Example

Properties

color

depthTest

layer

segments

transform

Methods

arrow

Parameters

Returns void

Example

axes

Parameters

Returns void

Example

box

Parameters

Returns void

Example

boxMinMax

Parameters

Returns void

Example

capsule

Parameters

Returns void

Example

circle

Parameters

Returns void

Example

cone

Parameters

Returns void

Example

cylinder

Parameters

Returns void

Example

frustum

Parameters

Returns void

Example

light

Parameters

Returns void

Example

line

Parameters

Returns void

Example

lines

Parameters

Returns void

Example

linesPacked

Parameters

Returns void

Example

loop

Parameters

Returns void

Example

plane

Parameters

Returns void

Example

point

Parameters

Returns void