Architectural isometric material style


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?


Do you really need shader?
Seems that you may use simple materials with colors or (tiled) diffuse textures.

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?


You may either render outline - OutlineRenderer | Babylon.js Documentation

or highlight layer Highlighting Meshes | Babylon.js Documentation
(it also will give you blur control).

1 Like

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.

Thanks in advance!

I think you may just change the textures of chosen mesh from grayish to colored ones.

Hi Labris,

Thank you for your reply.
But it’s more something like this I’m after:

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.

Another example:

Shadows and shaded parts are secondary, I’m mainly after the linedrawing-style.

Thanks in advance!

You may be interested in this thread if you want to render quads instead of triangles: Barycentric Genration? - #3 by Pryme8

However, it may not be enough looking at your screenshot above, maybe you can try the edge render: Rendering Edges | Babylon.js Documentation

1 Like

There are further thoughts on this at Wireframe hidden line shader? maybe something in there may help.

Hi John, Will try this tomorrow

Thank you for the tip

Something like this?

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.


You would have to make the lines thicker I guess that seems to be the aliasing.

If you want lots more control, then we would have to head off into the weeds and I don’t have time for that :sob:

1 Like

Hi! Pay attention on SSAO. Disabling of this effect encrease lines quality and perfomance.

Pryme8 PG without SSAO:


woops forgot I had that on there, was a relic from when trying to tweak the visual. good catch.


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

1 Like

Be aware, I had to set up the model very specifically. You might want to download the OBJ and take a look.

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.


unintentional was bet it was something with the exporter, I rushed the model and when splitting it up I prolly forgot to delete the original vertices.

NP, but it’s essential here that all the vertex points are broken?