Beautiful Shader in Autodesk Webgl Viewer

Hi,

I am using https://viewer.autodesk.com/ to test my cad software 3D exports and I am very attracted by the renders it can give directly in the webgl viewer.

I’m wondering how I can reach this kind of rendering in Babylon but I do not know how to achieved this
details :
-Soft shadows on ground
-Bright faces like veneer aspect

I suppose light, shader, environment map should be tweaked . Any idea is welcome

-cube.zip (116.3 KB)

Adding @PatrickRyan to help with this.

The main rendering is definitely achievable with our PBR material whereas the occlusion could probably be faked or baked in :slight_smile:

1 Like

you could fake ambient occlusion by putting a white color glow alpha map, and turning the albedo to black

in blender ( if you use it) make sure to set the blend setting to alpha blend or clip

@bozworth Thanks for your proposal but in fact when I say “my cad software”, it is because I developped one and do not use blender. I’m wondering about improving the rendering with babylon of models created by my cad. If you have any OBJ/GLTF sample with the settings you proposed from Blender, you are very welcome

Many 3D Viewers are dynamically generating a shadow texture for the ground ( just like our app :grinning: ). Basically you just have to use a orthographic camera which is looking at the bottom of your model and use it to render the model with a black color into a texture. To get soft shadows you can apply some blur filters. The final texture will be used for the ground material then … done :grin:

A bit more detail: Looking at the bottom of the model instead at the top, will enable you to limit the viewing range of the camera. That means you get a shadow only for the lower part of your model which usally looks better. For example in our app we want only the shadows from the legs of a chair. Here an example:

2 Likes

@pcarret, since you are using your own cad software and exporting an obj, you may want to either look at the glTF spec to implement an export for viewing in any WebGL renderer.

There is one issue with the render you posted above which is the the basecolor texture is rendering too dark when you look at the original texture. The main thing you are looking for to create the render is to set up the material correctly. Unfortunately, obj materials do not support physically based rendering materials so you will need to set up the material correctly once you get it in the renderer if you want to stick with the obj.

Bringing it into the sandbox you can add a PBR material by right clicking on Materials in the scene explorer, and then assign the new material to the mesh. Then you simply need to assign your albedoTexture and set up the metallic and roughness factors since there are no textures.

To get a shadow, however, you would need another mesh to catch the shadow or render a pre-baked ray traced shadow. With a pre-baked shadow, you would need to bake a ray traced shadow against a mesh to bake correctly into UV space. For real time shadows, you need to enable them and make sure you have a spot or directional light in the scene. For environment lighting, you can use any .hdr equirectangular image dropped into the sandbox.

There is no real plug and play renderer out of the box for Babylon other than the sandbox which is there for debugging assets. However, you could easily set up your own renderer that does all of the things I talked about or even walks the user through the process allowing them to make decisions such as lighting, background colors, material properties, etc.

It really depends on what your end goal is and Babylon.js as an engine is flexible enough to cover almost anything you want to do.

1 Like

@PatrickRyan Thanks for your comments and ideas.
Seems I need to work now with PBR features. Hopefully I already have a working nice gltf export.
I saw where I can start this

1 Like