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.
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?
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
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.
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.
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.