[SOLVED] Trying to Match Appearance in Editor and Engine

Help & Support
1

In order to understand better how things work, I am trying to learn the Engine by rebuilding a project from the Editor. I also plan on having my students do this with a project they just did, to better appreciate what is going on. They used the WebXR Starter project, so I’m trying to replicate that.

I’ve got most of it working, but the colors are off. For example, I have almost entirely black cubes. Beyond that, I think most of my colors are off. In the image on the left below, the window on the left is the Playcanvas Editor launched project, and the one or the right is my Engine project.

image
image5350×2036 1.13 MB

I think I’ve replicated most of the objects, and I’ve looked at the Scene settings and (I think) got those in the project too.

Is there anything known that would cause this? I could upload this to github and post a link, if that would help. But I suspect I’m just doing “something dumb”.

2

Hi @blairmacintyre,

Hmm, I am not sure what exactly is missing, from the shadows I can tell you got all lights in place (and that template has a lot!). Are you generating lightmaps in your engine-only example?

Most of the lights in that example are set to bake lightmaps on runtime:

image
image1204×858 243 KB

3

Another factor could be the ambient light colour?

4

Yep, I’ve got lightmapping turned on (see my other post about the lightmapper property being missing from the .d.ts file!).

Here’s my app and scene settings (that I gleaned from the project):

    // Initialize the engine
    var canvas = document.getElementById('application-canvas') as HTMLCanvasElement;
    var app: pc.Application;
    try {
        app = new pc.Application(canvas, {
            elementInput: new pc.ElementInput(canvas, {
                useMouse: true,
                useTouch: true
            }),
            mouse: new pc.Mouse(canvas),
            touch: new pc.TouchDevice(canvas),
            gamepads: new pc.GamePads(), 
            keyboard: new pc.Keyboard(window),
            graphicsDeviceOptions: {
                'antialias': true,
                'alpha': false,
                'preserveDrawingBuffer': false,
                'preferWebGl2': true
            },
            assetPrefix: '../assets/'
        });
    } catch (e) {
        displayError('Could not initialize application. Error: ' + e);
        return;
    }

    app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
    app.setCanvasResolution(pc.RESOLUTION_AUTO);
    // use device pixel ratio
    app.graphicsDevice.maxPixelRatio = window.devicePixelRatio;

    app.scene.toneMapping = pc.TONEMAP_ACES;
    app.scene.ambientLight = new pc.Color(51/255.0,51/255.0,51/255.0);
    app.scene.exposure = 1.5;
    app.scene.gammaCorrection = 2.2;
    app.scene.fog = pc.FOG_NONE;

    // For baked lights, this property perhaps has the biggest
    // impact on lightmap resolution:
    app.scene.lightmapSizeMultiplier = 32;
    app.scene.lightmapMode = pc.BAKE_COLOR;
    app.scene.lightmapMaxResolution = 2048;

    app.lightmapper.bake(null, pc.BAKE_COLOR);
1 Like
5

Yow, there must be some weird bug:

  • in the editor, the scene has gamma set to 2.2. If I change to 1, it’s very light.
  • in the download of the scene, the json has gamma set to 1 for the scene.

Low and behold, if I set gamma to 1 instead of 2.2, it looks better.

image
image5726×2036 1.32 MB

6

Yay, glad you managed to get the two scenes rendering identically.

I’m not sure what the issue is when gamma values in the scene JSON though. I just created a vanilla blank project and exported with both gamma 1 and 2.2. I then diffed the JSON:

image
image1760×1375 241 KB

For gamma 1 in the Editor, gamma_correction is set to 0.
For gamma 2.2 in the Editor, gamma_correction is set to 1.

This aligns with these constants in the engine:

Let me know if I’m misunderstanding something. :smile:

2 Likes
7

Right, as @will pointed out and you’ve found out by trial and error gamma correction requires using the engine constants instead of setting a number dirrectly:

app.scene.gammaCorrection = pc.GAMMA_SRGB;

https://developer.playcanvas.com/en/api/pc.Scene.html#gammaCorrection

1 Like
8

Aha! That makes total sense. By and large I clicked through to the docs in the editor before creating the corresponding code for the engine, but I carelessly assumed gamma correction was a number, not a constant! Mystery solved.

“So many details, so many details.”

2 Likes