How to use OutlineRenderer?

Help & Support
1

Hi
I’m not able to run OutlineRenderer.
Started with a blank scene. Switched to Engine 2.5.

Added this Script to the root.

var Outline = pc.createScript('outline');

// initialize code called once per entity
Outline.prototype.initialize = function() {

    // OutlineRenderer initialisieren
    this.outlineRenderer = new pc.OutlineRenderer(this.app);
    this.outlineColor = new pc.Color(1, 1, 1, 1); // Gelbe Outline
    this.outlineRenderer.addEntity(this.app.root.findByName('Box'), this.outlineColor);
    this.cameraEntity = new pc.Entity('SceneCamera');
    this.cameraEntity.addComponent('camera', {
        clearColor: new pc.Color(0.4, 0.45, 0.5),
        nearClip: 1,
        farClip: 600
    });
    this.immediateLayer = this.app.scene.layers.getLayerByName('Immediate');

};

// update code called every frame
Outline.prototype.update = function(dt) {

            // update the outline renderer each frame, and render the outlines inside the opaque sub-layer
        // of the immediate layer

        this.outlineRenderer.frameUpdate(this.cameraEntity, this.immediateLayer, false);

};

It makes the cube a bit blueish.
But no outline.

image
image852×566 33.8 KB

Ths scene looks like this (if that helps):

image
image1144×632 82.7 KB

What do I do wrong?

Kind regards
Alain

Sources:
https://playcanvas.vercel.app/#/graphics/outlines-colored

2

Okay thanks to chatGPT.
The following code works.

The docs says that a renderlayer is optional. It says:

This needs to be supplied only if the ‘Immediate’ layer is not present in the scene.

But when I use the default “immediate”-Layer then the cube gets blueish for some reason.
When I define a new Layer called “Outline” then it works.
Why to define a new Layer if the documentation says it’s optional?

Kind regards
Alain

var OutlineEffect = pc.createScript('outlineEffect');

OutlineEffect.prototype.initialize = function () {
    var app = this.app;

    // Kamera abrufen (falls vorhanden), ansonsten eine neue erstellen
    this.camera = app.root.findByName("Camera");
    if (!this.camera) {
        this.camera = new pc.Entity();
        this.camera.addComponent("camera", {
            clearColor: new pc.Color(0.4, 0.45, 0.5)
        });
        app.root.addChild(this.camera);
        this.camera.setPosition(0, 0, 5);
    } 

    // Existierenden Cube mit Namen "Box" abrufen
    this.cube = app.root.findByName("Box");
    if (!this.cube) {
        console.error("Kein Objekt mit dem Namen 'Box' gefunden!");
        return;
    }

    // Outline Layer erstellen
    this.outlineLayer = new pc.Layer({ name: 'Outline' });
    app.scene.layers.push(this.outlineLayer);

    // OutlineRenderer erstellen und mit Layer verbinden
    this.outlineRenderer = new pc.OutlineRenderer(app, this.outlineLayer);

    // Outline auf den Cube anwenden (entsprechend dem TypeScript-Code)
    this.outlineRenderer.addEntity(this.cube, new pc.Color(1, 1, 1, 1));

    console.log("OutlineRenderer erfolgreich initialisiert!");
};

// OutlineRenderer im Update-Zyklus aktualisieren
OutlineEffect.prototype.update = function (dt) {
    if (this.outlineRenderer && this.cube) {
        const immediateLayer = this.app.scene.layers.getLayerByName('Immediate');
        if (immediateLayer) {
            this.outlineRenderer.frameUpdate(this.camera, immediateLayer, false);
        }
    }
};
3

There is another problem.
When I set the material Blend Type from Alpha to Min (Patrial Support) then the outline disapears.
How can I prevent that?
image