I’ve been using BabylonJS for some months now, and I love it! Now I’m trying get my renderings to look as Sketchup. Seems like a very cool rendering style!!
You can view the look most easily in their online environment.
I’ve tried to post links their online environment, but as a new user I can only post two links (sorry, but very annoying). I’ve also tried to include both images, but I can also only add one image , so you can also google it, it is pretty easy to find.
I have found a similar look being used by archilogic (.com).
From what I’ve learned this is called ‘Line Stylization’. Sometimes people refer to it as outline or edge rendering, although the result is not the same: outlines only draw the outer lines and not all the lines.
BabylonJS does have support for edge rendering, but the look is quiet different, especially in rounded objects. Or maybe I’m using it wrong?
I’ve done research on how to achieve Line Stylization.
There are several papers available, but this one seems to be the most usable:
Two Fast Methods for High-Quality Line Visibility
The github repository contains the shaders for both of the techniques. However, they make use of a geometry shader, which I don’t think is supported in webgl.
This forum post also discusses a similar look.
However, it does has some kind of fading effect going on. We are also missing some lines being rendered.
In this post I’ll try and build out the shader. I’m kind of new to this whole shader, but I like a challenge! Feel free to jump in if you’d like to help.