For some of our architectural clients, we’re looking into the possibilities with BabylonJS.
Therefore we’d like to present our clients projects in an architectural style.
In the reference image you can see the style we’d like to achieve.
Here are a few other references:
It’s mainly the basic shader I’m after for the basic geometry.
For some of the ground and other surfaces, I’d use a texture, as well for the repetitive objects like trees, people, etc.
I haven’t found any topics or samples on this kind of style.
I was thinking to use a kind of toon shader as a start?
Is it possible to help me with a shader for this?
You’re right, for a lot of objects and surfaces textures are the best way to go.
But I would need a good base to materialize the basic architectural shapes.
It’s this basic clean look I’m after:
What’s important here are the edged which are accented with a elegant line.
Is that’s something which is possible in BabylonJS, and how could I achieve this?
ok, that could be a start and defenitely a solution for the highlighted objects like the building in the reference
But I’m also interested in having these lines on the edges.
Is there a possibility to render this in the material? because this accentuates only the full surfaces, and not the triangles for ex.
Please ignore the grey fill in this case.
What I’m after as a base is the line drawing, where all quad edges have a thin line.
The thicker contour edge could possibly be achieved with the toon shader.
I have a couple other methods that would give you more control but are way way way more complex.
You might want to have separate lines systems for the outline vs the inner details, but yeah its totally doable with some smart modeling and a good setup.
If you wanna go the super nerd route and do a custom shader that identifies all the element by vertex color then scales them on the vertex shader, capture a RTT of the scaled down meshes with their ID color. Then scale them back up keep the ID colors the same capture that RTT, bring over to a postprocess and then do some magic math to cut out the sections of the mask that match the color IDs. You would have to do this at least twice actually, once for the outline of the main building with all its facets scaled and then once for the facet groups of the building scaled locally by their grouping. Combine both those and next onto the shadow projection… sooooooooo basically yeah lets not do that and try to figure out a way to make this more simplistic setup work for you.
Thank you, this looks like the style I’m after.
I was wondering if there’s any chance of improving the line performance?
At the moment the line has some jitter to it when moving the camera or rotating the view.
Thanks for that addition Simon, I’m really after that slim edge width which gives this elegant style while a more thick line can help to accent some shapes.
This will definitely come in handy in our future projects.
Thanks again
Pieter
Ok, good to know we’ll have to see if that’s an option because we’ll have to break all the vertex points in order to get this look then.
I also noticed that all the surfaces are double, so each srf appears twice in the scene, on top of each other. Is That intentional? or is it unnecessary?
If there’s any chance this is possible with an object constructed by different planes? So without exploding the object? That would be even more interesting to work with.
