Does anyone have any advice on getting the scene and lighting correct for a basic Jewelry setup? I am trying get a basic setup that looks good similar to a light box with my own stl / obj file. Can someone give some basic lighting advice, hdr, etc to get this type of look? Thank you so much!
You can push this farther too, but this would be the general idea. You just need to tweak the settings now.
Once you get close to the desired look, spin up a default rendering pipeline on top and do some color correction/look up tables plus some anti-aliasing to get it smack on the look you want.
Gotta love BJS, that setup took all of a few mins to put together.
5 Likes
Hi there, and welcome to the BabylonJS forums!
The first thing to note is that materials loaded from OBJ/STL files are represented in Babylon as StandardMaterial, which is one of our more restrictive classes. I mention this because, off the top of my head, I’m not sure how extensive its environment support is. You might want to work instead with PBRMaterial. You can either convert your asset to glTF, whose materials will automatically be loaded into Babylon as PBRMaterial, or you can dispose the old StandardMaterial manually when loading the asset and re-assign the mesh to a PBRMaterial.
Once you have a PBRMaterial, you could experiment with all of the settings available for the material via the BabylonJS sandbox.
I’m no artist, but perhaps @PatrickRyan can recommend some more specific PBR settings to look into 
3 Likes
Thank you for a good starting point!
Thank you I will look into PBRMaterial
@dhoff002 I will say that @alexchuber is spot on that you want to be working with PBRMaterial so you have access to Image-Based Lighting (IBL) in the form of environment cubemaps for reflections. Here is a sample playground that shows how PBRMaterial works with environment textures through metallic and roughness values. In terms of rendering jewelry in a way that we expect, the best thing to do is to look at ads for jewelry. Most of them are shot with very high contrast lighting in a studio. This means you will have a very dark room with a few softboxes in it to create high contrast for the reflections on the precious metals. So an environment map like the studio environment we have in the sandbox or any studio environment that you can find will help sell the idea of the scene being jewelry. Feel free to ping back with more questions.
@dhoff002 there’s also been quite a lot of prior discussion and cool work done on this topic, so if you search the forum for “diamond”, “gem” and ‘jewellery”, you’ll find heaps.
1 Like
… or you can take the high road and create your diamonds directly with a shader. 
2 Likes
I saw this one already… this guy is a shader magician 
I used one of his pimped mandelbrot shader here: BabylonJS Demo
2 Likes
Wow great advice, here is what I have for now with a simple pendant I made in CAD. Does anyone have advice on which environments could make the silver metal look less yellow and more natural yet still not wash out the silver with lighting right away? Let me know what improvements anyone can suggest to this play ground: Babylon.js Playground
1 Like
Once I was obsessed with diamonds and tried some different techniques. Maybe you’ll find some of my creations useful:
1 Like
Wow your diamond shader demo is amazing!!! how did you get the gold to look so amazing!! and those diamonds, so amazing too!
2 Likes
I am just trying to get basic silver jewelry with no diamonds looking good for e-commerce, I guess at this point I just need to load some HDRs and convert them to ENV to test different ENV. I want one to look more metallic and the other one to just look flat silver similar to a 3D cad software look.
Any suggestions on HDR or material properties would be great!
Do you have Substance Painter?
no, I am not sure what that is, I will have to look it up.
I have used Substance Painter’s gold material on the ring. It set all the PBR textures needed to achieve realistic gold appearance of the ring. The ENV texture is also important. A good one will make the gold material even better looking.
You can use any texturing software (Substance Painter is paid but very advanced), there are free ones available as well or you can download the PBR textures and apply them manually by code or for example in Blender (this way it is much much harder to achieve eye catching viusalization comparing to using a texturing software)
Download this GLB, and open it in: https://sandbox.babylonjs.com/
These textures are the culprit of getting a good looking material and the texturing softwares have quite a large library for different materials and you can apply them to your model very easily and they let you preview your material using different envs as well.
As you can see I used only the Base, the Metallic Roughnes and the Normal texture to achieve quite a cool looking golden surface (Ring Material):
You can go even further by using other PBR textures.
Default sandbox env:
Plaza sandbox env:
Studio sandbox env:
Thank you, yeah this great!!
I hope this is not off topic… but is it possible in BabylonJS, to make use of the possibilities of an HDR display for even more beautiful specular highlights? (WebGPU)
I’m trying to simulate glass/diamant for a while now with PBRMaterial, and still have problems with the pipeline and backwards compatibility…
Is there a tutorial out there? Has anyone built something for HDR displays in mind?
let s add @Evgeni_Popov but as I am not sure how HDR support is from WebGPU is performing regarding tonemapping and such ?
There’s a tonemapping property in the GPUCanvasConfiguration structure:
Here’s an example using HDR (if supported by the monitor and browser):
However, we do not yet support it in Babylon.js.
2 Likes