Object with outline

I actually want to outline an object from the beginning to the end of the game so I don’t need any extra functions, because otherwise it get too complicated.

I thought in the latest version of PlayCanvas there was the option to simply outline an object, but it looks like I misunderstood that.

Can anyone help with that?

There’s an engine example to do this. It’s basically a shader effect.

https://playcanvas.github.io/#graphics/model-outline.html

1 Like

Hi @yaustar, I had indeed seen that example, but unfortunately I don’t see a tutorial on how to apply that in my project. I don’t know about shaders.

Hi @Albertos,

Take a look at this:

2 Likes

I had seen that project of yours indeed. Only I doubted if this was still up to date and the scripts looked very complicated. :see_no_evil:

The scripts are a direct transfer from the engine Outline example, which is indeed complicated :slight_smile:

Not sure if something has changed since, but you can compare the code and see.

Hay @Leonidas, I have now managed to give my charachter an outline.

I only have a few questions:

  • How can I determine which objects are outlined and which are not?

  • Can I give certain objects a different outline color?

  • How can I adjust the transparency of the outline color?

  • What is the posteffect-outline.js for?

Thanks in advance!

Add or remove the OutlineLayer layer to any model.

Sadly no, without extending the post process effect to run once for each color. This is quite advanced and will also have a performance hit per color added.

I’ve extended the shader to use the alpha color value:

image

That’s the actual post process effect (shader) rendering the outline.

The applyOutline.js script is responsible for feeding data to the effect.

I really want to give my enemies a different outline color than my player. Is there really no way to do this? :sob: Is it even possible to outline multiple objects at once or will this also cause performance problems? :sweat_smile:

Adjusting the alpha color does not seem to have any effect in my game. :see_no_evil:

You need to fork again my project, I’ve made changes/extended the shader (posteffect-outline.js).

image

You can outline as many models as you like with the same color with the current script.

Sadly not with the current implementation. Someone will have to extend the postprocess effect to run one pass for each different color.

Or find a different technique to create an outline effect. The Playcanvas editor uses a different methodology, extending the material/shader for each model. Not easy to implement but you can study the Playcanvas editor source code, it isn’t minified.

Great! Thank you! This working now! :smiley:

I hope so! I really like the outline on my player, but if only the player has an outline, it feels like it is not complete.

Unfortunately, the outline is also not displayed properly on a mobile device.
Hopefully there will be an update in which this has been solved and also several colors can be used.

Laptop:
OutlineNormal

Mobile:
OutlineMobile

Hmm strange, tried the Model Outline project on my phone and it seems to be behaving.

Can you try that as well?

Yes, that project works well indeed.

But also the grey blocks in my game have a smaller box outline, so not only the character.

Maybe I set up something wrong?

This is strange, not sure why you are getting this.

Usually it’s something with the project render settings that can mess up post process effects. I’ve tried all the combinations for the following flags, but the outline behaves and it’s placed correctly:

image

Hmm okay, I’ll check and compare everything later today.

Have you also figured how to hide the outline behind certain mesh?
I would like the outline to appear only if not occluded.
Like the exemple shown here on the right:

Ηι @PixiLabo,

Sadly with a post process effect this isn’t so easy. It will have to be expanded to read from the depth map and do a raycast per pixel.

I’d say for that use case the following solution might be easier:

Hello @Leonidas,

I have checked everything again but cannot find any differences in project settings and so on.

  • Camera has the apply and click script.

  • Light and entity has the OutlineLayer layer.

The only thing I notice is that when I launch my project for the first time it starts in portrait and yours in landscape. When I change the orientation of the device to landscape everything works fine. However, when I change your project to portrait it still works well.

Hmm I am not able to reproduce this. I’ve tried starting the Model Outline project in landscape mode, but it works fine.

Not sure what to propose. Have you tried the outline to add it on any other project of yours or starting from scratch on an empty project?