Line Stylization

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 :slight_smile:, 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.

2 Likes

hi make your PG sample(the real object if that possible) let we work on it together
i explain all part of shader to you (under my limited knowlage )

2 Likes

This is the link to the paper:
https://gfx.cs.princeton.edu/pubs/Cole_2010_TFM/index.php

Thanks! Any help is welcome!

I’ll create a PG sample with some good objects this evening. Will keep you updated!

1 Like

@nasimiasl I’ve created a PG based on your sample with an extra chair: https://www.babylonjs-playground.com/indexStable.html#1TYWYB#205

Could you eleborate how your shader works?

I’ve updated the sample so that it doesn’t do the fading effect:
https://www.babylonjs-playground.com/indexStable.html#1TYWYB#207

The shader is currently not rendering some lines. Is that easy to fix?

maybe

https://www.babylonjs-playground.com/indexStable.html#1TYWYB#210
under progress

@promontis

2 Likes

https://www.babylonjs-playground.com/indexStable.html#1TYWYB#213

https://www.babylonjs-playground.com/indexStable.html#1TYWYB#215

3 Likes

This starts to look really good!

I’ve began doing the ‘book of shaders’ course to see if I can get a grasp on this thing as well.

2 Likes

Did you take this any further?