Creating an outline/edge shader

This is cool, very nice seeing that you made something this cool this quickly. I believe that I saw something like this before, can’t find the post, but remember the people working on it had been dealing with a lot of performance issues because the amount of ray casting; it was a while ago and their have been a lot of updates since then, but you’ll still be limited in resolution and how much you can do with it. Still cool tho. BTW, if your able to make this more detailed, consider making lines further away thicker or skinnier; Manifold Garden did this, thought it was pretty cool.

looks interesting, hopefully you find something useful in it.

Still working on it, but I found the actual code that does the edge finding.

It only finds the CLOSEST edge, and the way it does it is like this: you feed it a ray cast, and it gets the position and normal of the raycast result (which represents a plane in 3d space). It then explores outward on the plane with raycasts until it goes past the edge, then (I think) it moves down relative to the surface of the part we were hitting, and raycasts back towards the origin to get a position and normal of the next face (which is another plane in 3d space). It then calculates the ray that represents the line of intersection between the two planes we have, and then explores along that edge with raycasts (somehow, I don’t quite understand that right now.)

I actually got some kind of outlining going, there are still some bugs though.

If you’re ok with manually writing out geometry info, maybe you could look into wireframe handle adornments?

1 Like

That sounds complicated af, but I think I get it. How many ray casts are you doing in total tho?

A lot. I actually pivoted a bit. He has code to get the edges of every single thing in roblox except for meshparts and unions, which use the other method. I’m now trying to use that information to figure out if edges coincide.

It may take a few seconds due to a large amount of comparisons but I’m okay hiding the screen for the player until its done.

Might also be better to do it in studio before you publish if all you need is edge data.

You could save up time by doing custom thick raycasting, which is basically sweeping a convex mesh in a direction and checking if it hits something. Easier to compute and provides the necessary amount of information to see if you really need to test it further. Not sure if you are up to do the incredible complicated challenge of writing a mesh sweeper, but it is a pretty cool challenge.

Yea, I might make it a plugin so you can bake it. The problem I’m running into is still just getting rid of overlapping edges being outlined.

Interesting…I will definitely look into that.

1 Like

I think the final part of the puzzle is combing my current edge thing that I derived from stravant and integrating it with the flush surfaces code

How’s it goin? Are you having any luck?

I have exams rn, will work on it later

With the new exciting update EditableImage and EditableMesh we can likely create a render that can create an edge detection shader. Shaders are already being made: link

1 Like

Hooooolllyyy crap! This is incredible! I’d honestly given up at this point but this is rekindling my curiosity

Edit: I just read it properly… is this a legit way to make images dynamically :scream:


1 Like

For anyone reading this thread, I’d probably recommend following the thread that PinkFoxsil just attached, I’ll probably eventually post a working version of the outlining here if I get it to work, but having editable images and meshes like this allows for so much more (the raymarching demonstration in that thread is legitimately blowing my mind…)

Sorry to clog this with replies, but I’ve come up with two different paths.

The first is to do what I was doing before, using a canvas where I raycast a bunch of times to figure out where I need to draw a black pixel to simulate an outline. I doubt this is extremely feasible because of the larger amount of raycasts to get a good fidelity (really depends whether editableimages or raycasts bottleneck first)

The second is much harder but might be more feasible in performance, I think it might be possible to use the new editablemesh feature, to find the edges of objects easily, and it would just be a matter of figuring out whether any given line is flush with another, and if it isn’t generate a black outline on that line.

I’ll try the first suggestion for now.

If you use a module like CanvasDraw most of the overhead of EditableImages can be avoided

Yes, I am currently using that (saves me the trouble of making a module, plus Ethanthegrand14 is way better than me at lua programming probably.

Looks like the overhead from running so many raycasts is the real issue… It runs fine with a low resolution canvas but anything that’s halfway decent runs way too slow. I’m not the best at optimizing stuff but either way I doubt roblox is built for so many raycasts.