Lighting in a product configurator

Work in progress
1

Hi everyone !

Working on a new product configurator, it’s going well thanks to all the help I get here :slight_smile:

As you might now my thing is coding, but really not a 3D modeler! I do basic stuff such as putting textures and such, but the models I use aren’t made by me.
One thing I really lack is knowledge about how to light things up nicely.

I’ve looked at some documentation and tutorials (especially for blender) and I understood that the way that I do it, is bad! I throw a bunch of lights around and hope for the best haha!
But also I understood (maybe wrongly?) that I can’t get the same results in PlayCanvas.

This is my new project so far : PlayCanvas 3D HTML5 Game Engine (the real project is private as it contains all the models, I made an example project with the exact same lightning settings)

What I did for now is this :

  • I have a plane only to show a nice light halo, with a wide spot right above the model
    image
    image1022×617 60.3 KB
  • Then for the product itself, I’ve thrown 3 point lights around it… this is probably the really bad part.
  • I removed the Skybox layer from the camera, and set the Ambient Color in the rendering settings to pure black. This way we can’t see the edges of the plane anymore.

So I’m looking for tips or tutorials explaining how to do it right for a product configurator in PlayCanvas :smiley:

Thanks in advance!

2

Hi @TonyLGC,

That’s a good start! A thing to try next is image based lighting, especially for product configurators it can make a big difference.

It’s basically a way to get lighting and reflections from a provided cubemap, check this manual page:

https://developer.playcanvas.com/en/user-manual/graphics/physical-rendering/image-based-lighting/

2 Likes
3

Note, you can also control if the skybox lighting affects a certain object by controlling it in the material level (instead of removing it from the active camera):

image

4

Thanks for the help @Leonidas :slight_smile:

I’ve isolated my floor plane and his “ambiance spot” in his own layer, and disabled all other lights.

I’ve experimented with several cubemaps (HDRI’s converted with this cool tool ! HDRI to CubeMap ) and I obtained an interesting result.

No lights + IBL : Product Configurator Testing - PLAYCANVAS
With 3 point lights + no IBL : forum_example - PLAYCANVAS

Still, something is nicer with the light components, I think it are the shadows.
This is a real photo, and you can see the shadows underneath the sleeves for example :

image
image1000×1000 141 KB

With the IBL, I seems that no shadows are cast (maybe missing an option?)

Could it be that I should mix both solutions? And/Or find a tutorial to learn how a real photographer would light his subject?

5

You can also experiment in the viewer, if your mesh is a glb
https://playcanvas.com/viewer

you can control single directional light, and also IBL (pick on of the skyboxes)
also I suggest to enable sRGB lighting and also test some tonemapping (also exposed in the viewer)

        app.scene.gammaCorrection = pc.GAMMA_SRGB;
        app.scene.toneMapping = pc.TONEMAP_ACES;

(this are in Settings of the editor also)

1 Like
6

IBL doesn’t cast shadows. Sounds like you will need an AO map.

Check this example for the effect of AO on a model: https://playcanvas.com/project/348970/overview/terminator-t800

2 Likes
7

True, thanks :slight_smile: Even without textures, it helps me seeing the effects of these skyboxes!

I looks like this is already enabled (I guess “2.2” in the settings is the same as sRGB enabled)
pc.app.scene.gammaCorrection is already equal to pc.GAMMA_sRGB
the linear ToneMap looks best in this case and in my opinion

Wow ! That’s beautiful !
Unfortunately, it looks like this need some work on blender first, and the person making these models is already overbooked (and there are 60+ models, even more later hehe)

I’m going to try to set up better lights and see what I can get :slight_smile:

1 Like