PG is working, on my local project not

Questions
1

Hello,
I’ve a bit hard to debug issue with “VolumetricLightScatteringPostProcess”.
I’m trying to create a “particle trail” effect, so I’m importing a baked animation with a sphere that move along a path, I’m creating a particle system from it, and finally I’d like to have a nice glow effect on the sphere.
This is my PG, that’s not so bad
https://playground.babylonjs.com/#IQPBS4#24

The problem is that in my local project “VolumetricLightScatteringPostProcess” is not working,
but:

  1. I’m working on a local project using BJS ES6 classes
  2. I’ve created a “ParticleTrail” class so to manage more than one particle system at the same time
  3. My project consist of several modules

So, it’s a bit hard to me to publish the whole project on PG to show the problem,
so to simplify and better understand what is going on I’ve just copied and pasted the PG in my index.js, importing the full BJS namespace,
but “BABYLON.SceneLoader.ImportMesh” does not work…
“Unable to load from https://issimissimo.com/TMP/anim12.gltf: importMesh of unknown”

Why??
here’s my index.js (that is exactly as in the PG)
Many thanks!

import * as BABYLON from "@babylonjs/core/Legacy/legacy";

var createScene = function () {
    const canvas = document.getElementById("renderCanvas");
    const engine = new BABYLON.Engine(canvas);
    var scene = new BABYLON.Scene(engine);
    var camera = new BABYLON.ArcRotateCamera("camera", BABYLON.Tools.ToRadians(180),
        BABYLON.Tools.ToRadians(70), 100,
        BABYLON.Vector3.Zero(), scene);

    // This targets the camera to scene origin
    camera.setTarget(BABYLON.Vector3.Zero());

    // This attaches the camera to the canvas
    camera.attachControl(canvas, true);

    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

    // Default intensity is 1. Let's dim the light a small amount
    light.intensity = 0.9;


    BABYLON.SceneLoader.ImportMesh("",
        "https://issimissimo.com/TMP/",
        "anim12.gltf",
        scene, function (newMeshes) {
            for (var i = 0; i < newMeshes.length; i++) {
                console.log(newMeshes[i].name);
            }
            console.log(scene.animationGroups[0])
            // scene.animationGroups[0].stop();
            scene.animationGroups[0].loopAnimation = false;


            const mesh = newMeshes[1];
            // const scale = 3;
            // mesh.scaling = new BABYLON.Vector3(scale, scale, scale);
            // mesh.visibility = 0;

            // Create a particle system
            var particleSystem = new BABYLON.ParticleSystem("particles", 10000, scene);


            particleSystem.blendMode = BABYLON.BaseParticleSystem.BLENDMODE_ADD;

            //Texture of each particle
            var texture = new BABYLON.Texture("textures/glare.png", scene);
            particleSystem.particleTexture = texture

            // Where the particles come from
            particleSystem.emitter = BABYLON.Vector3.Zero(); // the starting location

            /// MESH
            var meshEmitter = new BABYLON.MeshParticleEmitter(mesh);
            particleSystem.particleEmitterType = meshEmitter;
            particleSystem.emitter = mesh;
            // particleSystem.preWarmCycles = 1;

            // Colors of all particles
            particleSystem.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0);
            particleSystem.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0);
            particleSystem.colorDead = new BABYLON.Color4(0, 0, 1, 1);
            // particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);

            // Size of each particle (random between...
            particleSystem.minSize = 0.5;
            particleSystem.maxSize = 1;

            // Life time of each particle (random between...
            particleSystem.minLifeTime = 1;
            particleSystem.maxLifeTime = 5;

            // Emission rate
            particleSystem.emitRate = 2000;

            // Speed
            particleSystem.minEmitPower = 0.1;
            particleSystem.maxEmitPower = 2;
            // particleSystem.updateSpeed = 0.0005;

            // Start the particle system
            particleSystem.start();


            scene.registerBeforeRender(() => {
                if (!scene.animationGroups[0].isPlaying) {
                    particleSystem.stop();


                }
            })


            // var godrays = new BABYLON.VolumetricLightScatteringPostProcess('godrays', 1.0, camera, mesh, 100, BABYLON.Texture.BILINEAR_SAMPLINGMODE, engine, false);
            // godrays.mesh.material.diffuseTexture = new BABYLON.Texture('textures/sun.png', scene, true, false, BABYLON.Texture.BILINEAR_SAMPLINGMODE);
            // godrays.mesh.material.diffuseTexture.hasAlpha = true;
            // godrays.exposure = 1;
            // godrays.decay = 0.9;
            // godrays.weight = 1;
            // godrays.density = 3;
        });

    return scene;
};

createScene()
2

Ok, after hours I’ve understood that:
1 - using legacy does not work
2 - the “VolumetricLightScatteringPostProcess” only work if there’s an Hemisphere light

2 Likes
3

Did this solve your issue? :smiley:

4

Yes, thank-you!

1 Like