Object with outline

I have apply everything to a new project and get the same issue.

https://playcanvas.com/editor/scene/921089

If it’s an issue with my implementation, it may be, try testing the original Playcanvas outline example.

https://playcanvas.github.io/

1 Like

I have no idea how to try that.
A tutorial with such examples would be a welcome addition for novice users.

I think a standard project setting needs to be changed.

Sorry the project was private but is public now.

Try commenting out line 121 in the apply-outline.js script (horizontalFov etc.), since the original Model Outline project used the orbit-camera.js scripts.

In those scripts there is a checkAspectRatio method running initially and on window resize, the outline effect is following that logic. If you aren’t using the orbit-camera script then comment out that line and you will be fine.

Yes, thats it! Thank you!

I saw that there was an update for the outline in the new release? Do you know more about that and how I can incorporate this in the current scripts?

The update was already included in the editor project that you forked:

  • thickness control
  • color alpha support

Just did a pull request to extend the engine example to include that.

You are the best @Leonidas! :smiling_face_with_three_hearts:

1 Like

Hello @Leonidas. Thank you for sharing this example on outlining objects!

I would like to apply it to my project. I found that the outline does not align with my objects when the camera’s FOV is not 45. What kind of calculations would be needed to take into consideration the FOV value when drawing the outline?

Many thanks!

1 Like

Hi @Chanelle and welcome,

Change line 74 of the apply-outline.js script to this:

    this.outlineCamera.addComponent("camera", {
        clearColor: new pc.Color(0.0, 0.0, 0.0, 0.0),
        layers: [this.outlineLayer.id],
        fov: this.app.root.findByName('Camera').camera.fov
    });

The idea is that the outlineCamera created in code here should match the parameters of your main render camera.

Looks like I’m a bit late to the party here, but is the outline used in the PC editor effectively a similar post effect? It looks really crisp. I just wonder if this is a special GL call or still a post shader? Probably one for you @yaustar @Leonidas

Hi @Mark_Lundin,

The outline used in editor isn’t a post process effect but a material effect added on each selected mesh instance.

You can check how it’s implemented by opening the editor.js script, it’s not minified on purpose, you can find it by opening the browser dev tools while in editor.

About the outline shader. How is the performance compared to just duplicating, extruding and just inverting the normals of the geometry?, I want to use outlines on a game targeted for mid end mobile devices, and I’m not sure what’s more demanding.

I think the editor version of the outline effect, that is rendering it as an outline effect does something similar. It doesn’t duplicate the geometry per say but it adds an additional draw call I think. That would be something similar to what you suggest.

Now regarding performance I’d say it depends on how many active outlines you plan to have per frame. If it’s only a handful ones then I think that is the most performant option.

But if you plan on adding a lot of, especially high poly, models, then you will get a performance hit in triangles / draw calls per frame. There the post process effect solution would be more ideal.

1 Like

@Leonidas How is outline implemented in playcanvas editor, and is it also post-processing?

Hi @OliverXH and welcome,

The editor code is un-minified so you can take a look at the editor.js source file using the browser dev tools. Outline in editor isn’t using a post process effect but adds a special shader to each model selected that renders it.

@Leonidas

Thank you for your answer. I have checked the source code, but I was still a little confused. I’m using Threejs now, so want to implement it in Threejs.

Hi yaustar, do you know how to solve this?

I didn’t create the project. You will have to contact ths owner to investigate.