Yall are so amazing 
I had forgotten this feature existed. :o
The mask shader has already been ported to GLSL and now runs more efficiently. Since I haven’t rewritten the postprocess yet, I should be able to show it to you in about a day or two.
1 Like
I’ve uploaded the code I’m currently working on as a pull request.
The implementation itself is already functional. It just needs some refactoring.
6 Likes
Have you given any consideration to making it into a true outline? aka render the outline outside of the target mesh, and not partially inside as it is currently implemented?
1 Like
Outlines already appear outside the mesh in the current implementation.
And while I don’t know much about JFA, I don’t think this is the method used for drawing outlines in DCC.
Oh sorry, I thought you were implementing @fuyutami’s solution from above, not something different. Will check out your PR once it’s merged 
@AF4261 I’m not completely familiar with the JFA algorithm as well, but I don’t think it’s the best fit for this scenario. From what I understand, it only significantly outperforms the “Brute Force Algorithm” (mentioned in your shared article) when creating thick outlines. For a thin, 2px outline, it does not perform better than the BFA. I believe (correct me if I’m wrong) that an unoptimized BFA has to test a 5×5 matrix of pixels—24 comparisons in total—for each pixel to create a 2px-thick outline. In comparison, my approach always uses just 3 comparisons, regardless of the outline thickness.
I think it is likely that a similar approach is used in Blender and other DCC tools. However, this approach has some drawbacks, like ‘eating into the mesh,’ which becomes very noticeable at greater thickness (there is just no way to tell what is the inside and what is the outside when multiple meshes overlap).
This could also be the reason why Blender limits its max outline width to 5px. It is harder to notice at small thickness, but here I did 
I took a screenshot of a Blender cube with and without the outline and overlaid them—you can clearly see that it also overlaps the mesh.
JFA would be better for thick stylized outlines, but the purpose of my outliner is different.
Also, I did just notice that Babylon JFA implementation (that you shared) uses 3 large RGBA 16-bit RTTs.
3 Likes
Happy Holidays!
3 Likes
I’m really not married to JFA; in fact, I agree with your points regarding it!
I just wanted to point out an alternative for obtaining a true outline. I think the difference in our approaches lies in the use-case and how we approach feature integration in general.
My view is this: BJS is primarily built for gamedev or other game-like, interactive web experiences. Your use-case (recreating Blender object selection) is a great implementation of the outline—something that myself and I’m sure other BJS gamedevs have been on the lookout for, since BJS doesn’t really have a more complex outline feature built in.
As such, while your Blender approach is better than what we have right now in BJS, I was merely trying to provide some feedback as to what a BJS gamedev would require and set some minimal feature requirements for this to actually become a good built-in feature. From a product perspective, the Blender-style outline is not going to cut it for game development. So that’s how my “true” outline inquiry came about. If we are to have this as a feature, I’d very much like it to be “it” and not “good enough”, since all our outline options right now are lackluster, for lack of a better word.
Circling back, I tweaked your original approach to work in true outline mode by doing some extra sampling.
Original:
“True” outline:
Here’s a set of minimal requirements that I think should make it into the PR:
- True outline mode (see above)
- X-ray, colored-in version (@fuyutami demos it above)
- Multiple colors configuration
- Individual / group outlines (already done)
- Alpha blended mesh occlusion – what @fuyutami implemented is cool but it still renders the outline on a higher z-index, noticeable when you have some texture on the alpha-blended mesh – the outline renders on top of it.
- More configurable runtime parameters, like occlusion threshold, outline thickness, outline transparency, etc.
Thank you for your contributions, @fuyutami & @noname0310 
& Happy Holidays to everyone! 
1 Like
This is quite critical. 
I want to clarify that simply making a feature work is one thing, but making it integrable with Babylon.js is another matter entirely.
For example, Babylon.js’s internal code generally does not use Node Materials.
Therefore, I believe we first need an outline implementation of sufficient quality to be integrated into Babylon.js. Adding various features is a matter for later.
(TBH, I’m not confident about this.)
Here is the working PG. There are still a few things that need fixing, It’s slightly improved over fuyutami’s implementation.
https://playground.babylonjs.com/?snapshot=refs/pull/17583/merge#LA850M#2
Happy Holidays :))).
3 Likes
Obviously, that’s why you created the shader code PR, no?
In my experience, a feature needs specs (or at least a minimum set of pointers) before implementation, otherwise we end up with more issues and blockers down the road.
I can only lay out features that I found BJS was lacking during development. And yeah, the ones I suggested are pretty basic / common sense things.
This issue is currently in the process of being fixed.
Additionally, regarding thin instance support: Initially, I intended to support this. However, I felt it would be unnatural to add support because selectively rendering thin instances would require processing like discarding fragments at the shader level.
Currently, when rendering a Mesh with thin instances, outlines will appear on the thin instances as well. (a.k.a int supports thin instances)
However, enabling outline control on a per-thin-instance basis is questionable.
1 Like
It seems like being able to select individual thin instances could be a nice feature to have, but let’s discuss it with the team when they come back.
3 Likes
Is there a way to support morphTargets / morphing meshes?
These are not outline effects similar to those of Blender or Three.js
So is the outline going to be added as a feature to the main repo?
Can we agree on a feature set for it? Do you guys decide? Is there a formal process?
The PR and discussion is here:
5 Likes
The selection outline renderer PR is now merged, huge congrats to @noname0310, and @fuyutami for the initial implementation!
This is also supported by frame graphs, which allow you to do things that would otherwise be impossible:
NRGE: http://nrge.babylonjs.com/#O9XQ3U#3
Since we can access the texture of the layer (where the selections are rendered), we can apply some post-processing before compositing with the main texture. In the PG above, I added a bloom post-processing, but you can really do whatever you want with the texture!
5 Likes
Incredible!! Thank you, @noname0310 @fuyutami @Evgeni_Popov !!
I was wondering if it’s possible to have the outline not appear through meshes (something like renderingGroupId)?
I’d love to use it to highlight players in a game, but without letting players see others through walls
Or better yet, is it possible to easily toggle between see-through and non-see-through outlines (to give players temporary X-ray vision)?
The screenshot is from a clone of your PG without the bloom: https://playground.babylonjs.com/#ADUC74#4
Thank you for your help!