Replicating lights-baked-ao example

I tried replicating the lights-baked-ao code in my own project. The result PlayCanvas | HTML5 Game Engine seems to work but doesn’t look exactly like the original. I wonder what the difference is as I’ve pretty much copied the code over. One difference is that I added the cubemap via the editor scene settings, rather than in code but I don’t think that’s the issue.

I think its tonemapping / sRGB related. Add these two lines to the example and re-run it

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

experiment with settings->rendering

OK I will give that a go. Is there a difference in the defaults in an engine only app and and editor made app? I don’t think I missed any code from the original.

yep there are differences in defaults for sure

The good news is I can set to render like the original.

However, are the settings in the editor and engine the wrong way around?

The default for in a new scene is pc.GAMMA_SRGB but this renders the washed out look.

If I set to pc.GAMMA_NONE then it renders like the original.

Also, The Settings / Rendering / Gamma drop down is showing odd value in the drop down menu. It is showing 1.0 and 2.2 rather than NONE and SRGB

sRGB = 2.2
NONE = 1

In general you should be using sRGB for better quality. And adjust lighting intensity / AO exposure and contract to look the way you wish.

Ah, those number mean something :slight_smile:

So the original example that doesn’t explicitly set defaults to GAMMA_NONE and that is what the docs also say Scene | PlayCanvas API Reference.

Whereas the editor defaults to GAMMA_SRGB as that is generally the best choice and that is why I saw the difference between my replica and the original.

I will set my replica back to GAMMA_SRGB and try setting the other properties you mention.

1 Like

Before I start investigate the other properties you mention can I just check something?

If I change the gammaCorrection setting of example in the Chrome dev tools console with frames[0] = frames[0].pc.GAMMA_SRGB it looks like the image on the right. The default GAMMA_NONE is on the left. Is that what you expect? (This is also what I see in my replica as the default setting in the editor is GAMMA_SRGB). Also in general, do you think it would be better to explicitly set properties in the github io examples so that it would be clearer, especially in cases where the default differs from the editor default?

1 Like

I think that’s correct, when initializing pc.Application yourself, much like in the engine examples, the gamma correction value isn’t the default used in editor based projects.

You may have a point here that this needs to be clarified one way or the other. Care to post an issue about this in the engine repo?

There is this issue already

1 Like

I’ve made the change to the engine default value now:


I made the same changes in my editor project as you made to the example in the PR for GAMMA_SRGB and it look much better now. :slight_smile: Many thanks.

app.scene.skyboxIntensity = 0.6; // was 1.5
    intensity: 1.6,  // was 1.2
    shadowDistance: 25, // was 50
    range: 25, // was 10
     intensity: 0.9 // was 0.7
    intensity: 2.5 // was 2.0
ambientBakeOcclusionContrast: -0.6 // was 0
ambientBakeOcclusionBrightness: -0.5 // was 0.4