Console shows Babylon being ran twice? Is this normal?

I am following a tutorial and trying to learn Babylon.js

In my Console for both Brave and Chrome I see this when I run it. I am using React.

Is this normal when you import and use Babylon.js for it to run itself twice?

I would attach the code, but as I am a new user I cannot do that so I pasted in the code I am working with.

Screenshot is at the bottom.

import { Scene, Engine, FreeCamera, Vector3, Light, HemisphericLight, MeshBuilder, CubeTexture, PBRMaterial, Texture, Color3, GlowLayer } from "babylonjs";

import AsphaltArm from '../textures/asphalt/asphalt_02_arm_1k.jpg';
import AsphaltDiff from '../textures/asphalt/asphalt_02_diff_1k.jpg';
import AsphaltNorGl from '../textures/asphalt/asphalt_02_nor_gl_1k.jpg';


import ScifiColor from '../textures/scifi/Sci-fi_Wall_011_basecolor.jpg';
import ScifiMetallic from '../textures/scifi/Sci-fi_Wall_011_metallic.jpg';
import ScifiNorm from '../textures/scifi/Sci-fi_Wall_011_normal.jpg';
import ScifiEmissive from '../textures/scifi/Sci-fi_Wall_011_emissive.jpg';


import WideStreetEnvironment from '../hdrs/street/wide_street_02_2k.env';

class PBR {
    constructor(canvas) {
        this.canvas = canvas;

        this.engine = new Engine(this.canvas, true);

        // this.scene = this.CreateScene();
        // this.CreateSceneEnvironment();

        // this.engine.runRenderLoop(() => {
        //     this.scene.render();
        // });
    }

    CreateScene = () => {
        const scene = new Scene(this.engine);

        return scene;
    }

    CreateSceneEnvironment = () => {

        const camera = new FreeCamera("camera", new Vector3(0, 1, -5), this.scene);
        camera.attachControl();
        camera.speed = 0.25;

        const hemiLight = new HemisphericLight("hemiLight", new Vector3(0, 1, 0), this.scene);
        hemiLight.intensity = 0;


        const envTexture = CubeTexture.CreateFromPrefilteredData(WideStreetEnvironment, this.scene);
        this.scene.environmentTexture = envTexture;
        this.scene.createDefaultSkybox(envTexture, true);
        this.scene.environmentIntensity = 0.25; // reduces entire scene lighting.



        const ground = MeshBuilder.CreateGround("ground", { width: 10, height: 10 }, this.scene);
        ground.material = this.CreateAsphaltMaterial();

        const ball = MeshBuilder.CreateSphere("ball", { diameter: 1 }, this.scene);
        ball.position = new Vector3(0, 1, 0);
        ball.material = this.CreateBallMaterial();

    }



    CreateAsphaltMaterial = () => {

        const pbr = new PBRMaterial("pbr", this.scene);

        pbr.albedoTexture = new Texture(AsphaltDiff, this.scene);
        pbr.bumpTexture = new Texture(AsphaltNorGl, this.scene);
        pbr.invertNormalMapX = true; // you may need to invert the normal map if the texture inself looks inverted like the divets being pressed inside instead of out.
        pbr.invertNormalMapY = true; // you may need to invert the normal map if the texture inself looks inverted like the divets being pressed inside instead of out.

        // pbr.albedoTexture.scale

        pbr.metallicTexture = new Texture(AsphaltArm, this.scene);

        pbr.useAmbientOcclusionFromMetallicTextureRed = true;
        pbr.useRoughnessFromMetallicTextureGreen = true;
        pbr.useMetallnessFromMetallicTextureBlue = true;



        // pbr.roughness = 1;       // roughness can come from the textures themselves

        return pbr;

    }



    CreateBallMaterial = () => {

        const pbr = new PBRMaterial("pbr", this.scene);

        pbr.environmentIntensity = 0.25;

        pbr.albedoTexture = new Texture(ScifiColor, this.scene);

        pbr.bumpTexture = new Texture(ScifiNorm, this.scene);

        pbr.invertNormalMapX = true; // you may need to invert the normal map if the texture inself looks inverted like the divets being pressed inside instead of out.
        pbr.invertNormalMapY = true; // you may need to invert the normal map if the texture inself looks inverted like the divets being pressed inside instead of out.

        pbr.metallicTexture = new Texture(ScifiMetallic, this.scene);

        // pbr.useAmbientOcclusionFromMetallicTextureRed = true;
        // pbr.useRoughnessFromMetallicTextureGreen = true;
        // pbr.useMetallnessFromMetallicTextureBlue = true;

        pbr.emissiveColor = new Color3(1,1,1);
        pbr.emissiveTexture = new Texture(ScifiEmissive, this.scene);
        pbr.emissiveIntensity = 1;


        const glowLayer = new GlowLayer("glow", this.scene);
        glowLayer.intensity = 1;

        pbr.roughness = 1;

        return pbr;

    }

}

export default PBR;





A shot in the dark: Where do you call the constructor of this PBR class? Is it possible data changes in your react app triggered new PBR() twice? Can you try to put a log in the constructor and see if its called twice?

I agree with @slin
First easy thing is to put a console.log in the constructor.

Seems that at some point you create the second engine.

By chance are you using ReactJS? And if so, are you using React.StrictMode, perhaps around your App component? If so, that could be another reason for seeing double.

1 Like