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;