Jump to content

Shader for subtle rounded edges to catch the light?


Recommended Posts

Just wondering if anyone knows of a way in Babylon.js to round sharp edges and corners WITHOUT adding geometric detail OR normal maps to models. There are no perfectly sharp edges in reality and especially architectural scenes can benefit if every edge has a subtle rounded chamfer to catch the light. I've heard that this can be done in a post process shader but it's computationally intensive and requires deferred rendering which BJS doesn't have.

Anyone know anything about how this might be achieved in Babylon.js?

Link to comment
Share on other sites

Hello @inteja

i looking since few weeks for exotic rendering methods to implement in Babylonjs. I have a To Do List, but i'm also a beginner, so it can take a while 'til a real pull request. I can do a version for me and maybe you, unofficial, i really dont have much time for bugreport for all the kidz on this planet.

Primarily i'm into architectural visualizations.  

*....and requires deferred rendering"
I was looking many times for a deferred rendering, can you provide a link to a document?


Link to comment
Share on other sites

I think you might thinking of this article

deferred render was implemented in three.js five years ago, but then they decided to discontinue it, the guy who implemented it, is lately again active, but only becourse of webgl 2.0

It is an expensive computation, that requires some advanced operations on the GPU side, i dont think you can make simple Stalker reboot.

Here is a quick sketch about blur on edges, nothing serious just something to think about




Link to comment
Share on other sites

@Nabroski thanks for the reply and links.

If Babylon.js can't do it natively I'd be happy even with a UV mapping algorithm in say Blender or another modelling tool, that was optimised specifically for this purpose i.e. only making hard edges a little rounded. For many architectural models like hard-surface furniture, fixtures, walls, skirting, cornices, doors and windows etc, it seems like a huge waste to add extra geometric detail or generate custom normal maps for each model in the traditional way. It just creates more textures to have to download, chews up more texture memory and results in more WebGL draw calls, when these types of models lend themselves (I think) to some kind of optimised UV normal mapping algorithm whereby you could have a single "rounded edge" normal map that contained all the combinations of rounded edges and calculate the UV coordinates based on a threshold angle between adjacent faces. E.g. the user might choose to only apply the rounded edge portion of the normal map when the threshold angle between faces was 60 degrees or more, otherwise the "flat" portion of the normal map is applied. I realise there'd be issues to work through e.g. the case of long thin polygons, and possibly the topology might need to meet certain parameters for it to work well, but I think it'd be better than generating normal maps for all these hard surfaces. That's just not practical for web deployment, but I still want the best visual quality that can be achieved.

I'm not sure I'm explaining this idea well, so I hope it makes sense. If it hasn't been done before I guess the idea is fatally flawed :)

Anyone heard of an algorithm or plugin in any modelling tool that can do this? I haven't found anything like this yet, but will keep searching.

Link to comment
Share on other sites

@inteja Hello

yes, i get an idea of you have on your mind. I currently overloaded with work. I plan some new Render Implementations in Babylonjs within 3 -5 months.  

If you found some links, math formulas, scientific papers. Feel free to paste then here in.

Other users like @NasimiAsl @Sebavan  are more fluent in Shaders and extend Babylonjs with new functions, came along this post, and probably implement it. 

Link to comment
Share on other sites

Without external maps, even if not that many verts, you will still need to modify the geometry a bit for a nice and smooth edges... 

I guess the functionality is embedded in most of the 3d editors like Maya 3ds and blender.

What does prevent you to modify a bit your models ?

Link to comment
Share on other sites

@Sebavan yes I've been thinking about it more lately and there'd be no getting around adding some geometry. I'm just trying to find something more optimal than the usual approach because especially for real-time, web deployed 3D architectural scenes, an entire house or apartment full of objects with normal maps is a lot of textures and download and store in video memory.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...