[SOLVED] How to achieve the same color rendering in the engine as in the editor

I have two very simple projects.
One is created in the editor and displays a red cube: PlayCanvas 3D HTML5 Game Engine
The second does exactly the same, but is created without the editor (using only the Playcanvas library): Pacman

In the second project I tried to set everything exactly the same (cube material, light, scene settings) as it is set in the project created in the editor, but still both projects have different final colors.

Where is the problem?

This is how I set up the cube, scene and light in the “engine” project (I used the values I found in the editor):

        // Camera
        let cam = new pc.Entity();

        cam.addComponent(pc.eCompomentType.camera, {
            nearClip: 0.1,
            fov: 45,
            frustumCulling: false,
            clearColor: new pc.Color(0.1, 0.1, 0.1)
        });
        cam.setPosition(0, 0, 10);
        this._app.root.addChild(cam);

        // Ambient color and scene setup
        this._app.scene.toneMapping = pc.TONEMAP_LINEAR;
        this._app.scene.exposure = 1;
        this._app.scene.gammaCorrection = pc.GAMMA_SRGB;
        this._app.scene.ambientLight.fromString("#333333");

        // Dynamic light
        let light = new pc.Entity();

        light.addComponent(pc.eCompomentType.light, {
            type: pc.LIGHTTYPE_DIRECTIONAL,
            color: new pc.Color().fromString("#FFFFFF"),
            intensity: 1,
            isStatic: true,

            bake: false,
            affectDynamic: true,
            affectLightmapped: false,

            castShadows: false,
        });
        light.setEulerAngles(-45, 135, 0);
        this._app.root.addChild(light);

        // Red box
        let mat = new pc.StandardMaterial();
        mat.diffuse.set(1, 0, 0);
        mat.update();

        let box = new pc.Entity();

        box.addComponent(pc.eCompomentType.render, {
            type: pc.eModelType.box,
            material: mat
        });
        this._app.root.addChild(box);

The background colour of ‘black’ is due to the fill colour of the camera being different between from the the editor and your engine version.

In the Editor, it’s (0.118, 0.118, 0.118, 1), but your engine only code is (0.1, 0.1, 0.1, 1)

The red being different is likely due to the Standard Material defaults being different between the Editor and Engine.

There are a lot of parameters so you would have to check the properties one by one between the two to check that they are exactly the same. For example, ambient, shineness and specular color were different from a quick look.

1 Like

Thank you.