Outline

The Outline tool uses an efficient method of post-processing to stroke entities in the scene that need to be stroked in batches, and supports strokes of different colors for entities containing children, and also supports the adjustment of stroke size.

Features

• 🔲  size - Outline size, [1~6]
• 👱🏻‍♂️  mainColor - Outline main color, used for parent entity
• 👶  subColor - Outline sub color, used for child entity

npm

The Outline is published on npm with full typing support. To install, use:

$ npm install @galacean/engine-toolkit-outline

This will allow you to import package entirely using:

import * as TOOLKIT from "@galacean/engine-toolkit-outline";

or individual classes using:

import { OutlineManager } from "@galacean/engine-toolkit-outline";

Usage

const cameraEntity = rootEntity.createChild("camera_entity");
const camera = cameraEntity.addComponent(Camera);

const outlineManager = cameraEntity.addComponent(OutlineManager);

// The entity you want to outline
outlineManager.addEntity(renderElement.component.entity);

// Clear all outline entities
outlineManager.clear();

// some configuration
outlineManager.size = 1;
outlineManager.mainColor.set(1, 1, 1, 1);
outlineManager.subColor.set(1, 1, 1, 1);

Links

• Repository
• Examples
• Documentation
• API References

License

The engine is released under the MIT license. See LICENSE file.