Hi folks,
Does anyone have any pointers on how I could achieve a clay render look to my scene?
This is what I have at the moment for the environment:
for the furniture:
and I’d like to get something more similar to this, probably a bit brighter:
Thanks in advance, cheers,
Thibaut
@PatrickRyan may have some tips for you.
What you can also try is to use SSAO2 as it seems your third screenshot as ambient occlusion enabled.
Well, the first thing I can instantly detect when comparing your SS and the example is that you have no shadows.
I would start with the adding of a shadow generator with soft shadows.
Edit: you do have shadows on the environment but I cannot see them on the furniture.
You should try to work your lights and shadows and for the smooth look effect, you can work the rendering pipeline and try SSAO/SSAO2 as suggested above.
@tibotiber not clay as such but you could also look at the screen space curvature or “cavity” effect.
Oh that looks nice. I luv it.
I realise I probably posted this while being too tired and didn’t provide much information except the screenshots, my apologies. I have created a PG that’s as close as I can get to my app’s setup: https://playground.babylonjs.com/#WGZLGJ#2786. In my app, the walls would be extruded from polygons, and assets are either parametric or gltf models. Here it’s a gltf scene exported from my app for simplicity.
I currently have:
CascadedShadowGenerator in webgl2 and the one from the PG in webgl1)PBRMetallicRoughnessMaterial from the PGI think there is a lot I need to learn about lighting and materials. On the materials side, I’d like to look more “mate”, but I’m unsure how to do that. On the light side, should I focus on ambient light or texture first?
@Evgeni_Popov @mawa for SSAO, does it make sense as I only have a directional light for the moment? Would it be useful if I added an ambient light or texture? Is SSAO compatible with webgl1? I will be trying it in the coming days.
@mawa you’re right, the object I posted was missing shadows as I took it from my model viewer instead of the full scene. It casts and receives shadows once in the full scene (see PG).
@inteja the cavity effect looks neat 
although not quite what I’m trying to get. Thanks for sharing.
Note: I have no idea what is used to create the last screenshot, probably blender or something similar, not necessarily a realtime rendering engine.
I hope this clarifies some things. Thanks for the help!
Looking at it, I would say this is a 3d render. It’s hard to tell what it is exactly with just a screenshot and this very low level of very soft shadows. Though, I believe you can achieve something quite close with BJS. May be you should just try using soft shadows and adding a very low hemi or even 3-points light could help getting this more complex lighting. I don’t think the directional light alone will do the job.
As for the overall smoothing of the shapes, I would look to the rendering pipeline. SSAO2 or MSAA however would require WebGL2.
@tibotiber, what you are seeing in the third screenshot in your original post is baked lighting from a ray tracer applied as a texture. This could be applied as a shadow map or it could be just used as an unlit texture if you don’t want lights in your scene. There is another thread where I talk about this process and how to set it up for Babylon.
You could use SSAO to get more of an AO look to your model if you don’t want to bake lighting, but that is expensive and would require WebGL2 and if so you would run into some problems with Safari. However, if you want dynamic soft shadows like in that screen shot, you would definitely need WebGL2 to use our contact hardening shadows and those are expensive due to the sampling and blurring dynamic shadows.
You could go the route of baking your AO map and then a shadowmap and still have some punctual light in your scene, which would open up shadows from the shadow map if needed, but doing something like simulating time of day changing wouldn’t work.
Basically, unless you need to change the shadows based on lights moving around, it is always cheapest to bake your shadows. If you need to move elements within your environment to be able to be repositioned, you could bake your shadow map for your environment and use either a shadow catcher with a baked shadow for your furniture or rely on real time shadows for your furniture’s shadows cast onto the environment. It really depends on the look you are going for and what you need the scene to do. Hope this gives you some ideas.
Hi @mawa and @PatrickRyan, this is super helpful. I failed to mention this, but my scene is completely dynamic, both walls and furniture can be moved, time of day lighting is also in the backlog. My app is basically a canvas-based floor plan editor with a “live” 3D render. Based on this I understand baking lights / shadows / AO map is not possible at all, not even for the environment. Is that right?
From what I understand, this leaves me with the SSAO option. I currently have adaptive shadow handling for WebGL1 vs 2, Safari (zzz), and to get passed PCF breaking on some Android builds. I’d be ok with adding SSAO for selected hardware specs to gracefully adapt the experience. Also note that my scenes are quite small and low poly so I might be able to get bearable SSAO cost. I understand SSAO2 is WebGL2 only, but SSAO(1) would be supported by WebGL1 right?
I also will try a low hemi light and soft shadows as suggested by @mawa 
and maybe some ambient lighting from a skybox texture (would that help?).
Is it all a light and shadow game in your opinion or can I get closer through fine-tuning materials as well?
I’m planning to look at how they manage to get such nice material / light at https://gltf.pmnd.rs (try Suzanne). It’s using the Stage component from GitHub - pmndrs/drei: 🌭 useful helpers for react-three-fiber. I’ll dig into the code there at some point, and report back here if I understand something new. (Edit: At first sight, it seems the environment is playing a key role.)
Thanks a lot for the help, I have a lot to learn once I get passed the geometry side of things and I appreciate having this forum to turn to .
Will come back to you with post and lower-end (webGL1) ‘graceful adaptation of the experience’ but I’m in line with guru;) @PatrickRyan in the post above. This ‘graceful adaptation’ is also a point of importance for me (actually, a must-have). There is no doubt that working with soft shadows (your experience) will have a great visual impact when switching to webGL1. I’m afraid you’ll need to make some compromise or even adapt your lower-level experience.
Meanwhile, I just wanted to quickly share with you a point that can be of importance to get this design/effect you are looking for. You can work the ‘angle’ of your light (casting a shadow) and also adjust the ‘exponent’, bias, distance and normal bias (be careful though with some of these entries, some are very sensitive and need to be adjusted up to 3 decimals). You will get very different results and at some point (close to Math.PI) the angle of your light will switch (as if it had a reflector something). Working the angle and the distance of your light(s) casting shadow(s) can really help getting this smooth and long shadow effect. Again, preferably a WebGL2 targeted solution and as said above, it will be a bit costly on performance. But the effect is good in my opinion.
Here a couple of quick screenshots from my scene:
This sounds like a good compromise for your case.
LoL, tried to quickly set-up a PG but ended-up nearly with the same result as yours (just adding a lot of crap on the way;)
‘https://playground.babylonjs.com/#WGZLGJ#2798’
One thing I noticed though is that your scene is really tiny-mini. This doesn’t help when wanting to create this long and soft shadows effect. The other as per your question is that yes, I think you will need to work your material a little. I’m not sure PBR is the best pick for this effect but changing to (i.e.) a standard material radically changes the inputs on your lights and shadows. I don’t have more time (though I would have loved to try more). Did I mention I really like this type of design. Makes me think of mirror edge:) I hope you will share the result with us (and I hope it will be awesome:)
@tibotiber, when I originally read the title of the thread, I thought I would be talking about matcaps (a ZBrush term for material capture) where you use a simple texture to drive value of a pixel based on the world normal of the mesh transformed into view space, using the X and Y components of the vector as a UV to look up a value in that texture. Basically this:
You can see that the texture is just a simple image of a sphere with light cast on it using up 0-1 space, and we translate that lookup into colors based on the mesh normal. This “locks” the lighting to the camera, so as the object turns by the camera rotating, the light stays still. However, if you remove the transformation to view space, you can lock the lighting to the object if you want.
This technique will not give you cast shadows as there is no light calculation in the shader. But you can author the texture to look however you like and the mesh will be “lit” accordingly:
You can grab the node material and replace any image you want in the texture block. You could go further with the node material and add lighting/shadow into the shader as well, but this is a very simple and cheap effect that does not rely on any advanced techniques, yet gives you control over the look of your models.
Thanks @mawa, the PG is packed with ideas to explore: lights, emissiveTexture under the StandardMaterial, ContactHardeningShadow, a lot to unpack for me in the rendering pipeline as well.
I will be exploring this slowly in the coming weeks / months, and post back when I get some good progress.
Thanks @PatrickRyan, this looks really promising! I read about NME a while back and it felt both powerful and “distant”, mostly from my own lack of knowledge on the matter. This motivates me to dig into it .
Appreciate all the inputs I’ve got here, thanks folks!
Yes, this part with using node materials for shadow and lights looks really cool (and a bit frightening for a basic user/coordinator) like myself.
Meanwhile, about the overall effect and the use of a light map for this soft-shadows effect, I was remembering one of the old/founding PGs but couldn’t find it. I found it again this morning, in the ‘playground demo’ thread. It is this one.
‘https://playground.babylonjs.com/#H2FTZW#18’
Say you would replace all lightmap tex with BW. You would end with something like this. Quite close to your SS, isn’t it?
Though of course, this would work only for the parts that don’t move (or as per the explained above technique) I was wondering, Can you move the walls as well? like a home or shop builder?
Wow, that looks awesome indeed, thanks for digging that PG for me 
. I’m seeing that the HDR texture (and environmentIntensity) is also having a big impact, similarly to what I observed in https://gltf.pmnd.rs/.
The light maps as shadows are really neat, but yes, my whole scene is dynamic. It’s a floor plan editor (www.smplrspace.com).
How do you achieve that exactly? Like literally get the jpg files and B&W them before using them?
Well, if everything including your walls and lights is dynamic, this technique will not really help (except may be for doing small fixes on a ‘prefab’ here or there. You will need to go with ‘real time’ shadowing or use one of the advanced techniques explained above or combine techniques (good luck with this one, I don’t think I will be able to help you there… this is just too advanced for me;)
I understand the hesitancy around custom shaders as that is a topic that does require some experience to get working right. However, I will say that our node material editor does make the process of creating shaders easier as the tool will create the optimized glsl code for you with a lot of shortcuts built into the nodes.
If you have to rely on a completely dynamic scene, you won’t be able to bake ray traced shadows at all. The best you will be able to do would be to add shadow catchers under each of your assets that need to cast a shadow onto the environment. These can be baked as textures, but you do need to be a little cautious if you are mixing real time shadows as well since the fidelity of the shadows will be different.
One thing you can do that could help, even while using real time shadows, would be to bake ambient occlusion textures and use those as your base color textures to add some cavity detail to the models. This technique won’t work as well if there isn’t some detail on the models (flat cubes for walls) but does help with a more complex model like a folding chair for example.
What this looks like is this (just replacing the base color with the AO texture in the sandbox to illustrate). Original:
AO as unlit:
Using it with a standard PBR material will also add lighting/shadow on top of this texture.
Yes, I believe it’s essentially there (on those objects like your desk object screenshot) where you’d need to bring in those details and cavity look and feel also not too much depending on lights and real time shadows. Sounds like a good solution.
