Geometry Renderer

Geometry renderer is a functional interface provided by the engine for batch rendering of various geometries, mainly used for debugging (such as displaying the enclosing boxes of objects) and the gizmo batch display of Cocos Creator.

The effect of the geometry renderer is shown in the following figure.

The features of Geometry Renderer is as follows:

Where.

• solid: whether to support solid mode, if not, then display wireframe mode
• depth test: whether to support depth test, if support then the blocked part of the translucent display, not blocked part of the opaque display, if not support then all opaque display
• lighting: whether to support simple lighting, if not, use no light mode
• transform: whether support transform, if support, developer can pass in a transform matrix, the transform matrix will act on the geometry of the vertices, convenient to display the geometry of any coordinate space

API

• Typescript: geometry-render.ts.
• Native: GeometryRenderer.h.

Supported Geometry Types

Geometry Type	Interface
Dashed Line	addDashedLine
Line	addLine
Triangle	addTriangle
Quad	addQuad
BoundingBox	addBoundingBox
Cross	addCross
Frustum	addFrustum
Capsule	addCapsule
Cylinder	addCylinder
Cone	addCone
Circle	addCircle
Arc	addArc
Polygon	addPolygon
Disc	addDisc
Sector	addSector
Sphere	addSphere
Torus	addTorus
Octahedron	addOctahedron
Bezier curves	addBezier
Spline curves with three modes: Folded segments, Multi-segment Bessel curves, Catmull-Rom curves	addSpline
Mesh	addMesh
Index Based Mesh	addIndexedMesh

Example

Since the vertex cache is cleared after rendering these geometries per frame, it is necessary to add geometries to the geometry renderer object (located in the camera) per frame in functions like update.

To use this feature you need to enable Geometry Renderer in Project Settings -> Feature Cropping.

Note: Please make sure your project is 3D based.

The code example is as follows:

import { _decorator, Component, Camera, Color } from 'cc';
const { ccclass, property, executeInEditMode} = _decorator;

@ccclass('Geometry')
@executeInEditMode(true)
export class Geometry extends Component {

    @property(Camera)
    mainCamera:Camera = null;

    start() {        
        this.mainCamera?.camera.initGeometryRenderer();
    }

    update(deltaTime: number) {
        this.mainCamera?.camera?.geometryRenderer?.addCircle(this.node.worldPosition, 1, Color.GREEN, 20);
    }
}

The result is as follows: