Playground example with lights and materials like p3d?

Hi everybody

I want to make some screenshots and videos of a collection of models. I like the set up of , but unfortunately the code is obfuscated so I can’t use that page without recurring to unestable hacks.

My requirements are very simple, metallic monocolor for each model, and just rotate the camera when necessary. I’m more interested in the lights and such

Does anyone knows a similar example or public project in playground?


Adding @PatrickRyan for the artisitic part but would our sandbox be kind of similar to what you need : or the viewer : Babylon.js Viewer | Babylon.js Documentation

1 Like

Hi Sebavan

Thanks for these resources. I want to point that the coding is not an issue, it’s just that the models don’t look as pretty as when I just use p3d. I think Patrick will be able to give me some tips about it.

@David_Diaz what you are seeing in the p3d example appears to be a PBR lighting model that is using an interior IBL for the environment light. In spinning the sample model around, you can see a few can lights and a window but I can’t tell much more than that from the reflections.

I am guessing that when you say that your models don’t look as nice with p3d, it may be the combination of the available environment and punctual lights not working with your models. The best thing is to choose an HDRI that fits with and compliments your object. For example, in this demo for our 4.2 release, I chose an exterior HDRI that would make sense for the bottle to sit on a table while also including the sun in the image so that I could drop a directional light in the scene aligned with the sun to cast the shadow.

The environment lighting does a lot of the heavy lifting for PBR assets, so is the most important part of a good render. Punctual lighting can add nice touches like a cast shadow, but does not give you any bounce from the environment. You can see in the scene above, I even culled the directional light from the bottle mesh since I already had enough light from the IBL and didn’t need to add more, but still needed a cast shadow on the table top.

Some other examples, even simple ones, of environment lighting setups:

Those last three all use the same environment map shown here, which works in all three cases. The biggest note to take away with that environment is that it works especially well for metallic materials due to the large areas of light and hard edges to them combined with a high contrast with the background. This is the same process used in studio product photography, especially for watches and jewelry. The geometric, high-contrast reflections reinforce the idea that what you are looking at is metal.

The best place to start looking for a suitable HDRI for you is HDRI Haven but realize that these are typically shot with a very high EV range so there is a lot of light in the scene. This is great for ray tracers, but can pose issues for rasterizers. We did an article a while ago about how to handle this kind of issue.

I hope this gets you started, but once you have a playground set up, feel free to ping back with any questions you have.


Wow, thanks Patrick, this was way better than expected.

I’m going to follow your suggestions, I’m sure they will help.


This is the core definition of @PatrickRyan

1 Like