Hi there!
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!!
The look
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).
Line Stylization
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?
Research
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.
BabylonsJS shader
This forum post also discusses a similar look.
This PG by @nasimiasl seems to be achieving a similar effect and is build using his ShaderBuilder: https://www.babylonjs-playground.com/#1TYWYB#194
However, it does has some kind of fading effect going on. We are also missing some lines being rendered.
Work
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.