updateCallback not working in Cesium particle

CesiumJS
1

Hello Cesium Community.
I am beginner of CesiumJS and I have trouble with this.
I tried to add particle into the cesium viewer but it’s not working properly.
Here I added my current code.

async _addParticleCloud() {
        const position = Cesium.Cartesian3.fromDegrees(this.longitude, this.latitude, this._height);
        const modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(
            position,
            new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(0))
        );

        const ParticleImageURL = "/assets/smoke.png";

        const particleSystemParameters = {
            emissionRate: 10.0,
            gravity: 1,
            minimumParticleLife: 1.2,
            maximumParticleLife: 1.2,
            minimumSpeed: 1.0,
            maximumSpeed: 4.0,
            startScale: 1.0,
            endScale: 5.0,
            particleSize: 10.0,
            speed: 0.0,
            particleLife: 5.0,
            length: 30
        };

        const applyGravityAndWind = (particles: any, windSpeed: number, windDirection: number, dt: number) => {
            const length = particleSystemParameters.length * dt;
            // Calculate the displacement based on wind speed and direction
            const ellipsoid = Cesium.Ellipsoid.WGS84;
            const ENU = new Cesium.Matrix4();
            Cesium.Transforms.eastNorthUpToFixedFrame(particles.position, ellipsoid, ENU);

            const windDirectionRad = Cesium.Math.toRadians(windDirection);
            const displacement = new Cesium.Cartesian3();

            const phi = Math.atan(windSpeed / length);
            displacement.x = length * Math.sin(phi) * Math.sin(windDirectionRad); // Adjust x-axis based on wind direction
            displacement.y = length * Math.sin(phi) * Math.cos(windDirectionRad); // Adjust y-axis based on wind direction
            displacement.z = length * Math.cos(phi);

            // Update position2 of the polyline
            particles.position = Cesium.Matrix4.multiplyByPoint(ENU, displacement, new Cesium.Cartesian3());
        };
        this._particlePrimitive = this._viewer.scene.primitives.add(
            new Cesium.ParticleSystem({
                modelMatrix: modelMatrix,
                image: ParticleImageURL,
                startColor: Cesium.Color.WHITE.withAlpha(0.7),
                endColor: Cesium.Color.WHITE.withAlpha(0.1),
                startScale: 1.0,
                endScale: 5.0,
                particleLife: particleSystemParameters.particleLife,
                speed: particleSystemParameters.speed,
                lifetime: particleSystemParameters.particleLife,
                sizeInMeters: true,
                imageSize: new Cesium.Cartesian2(particleSystemParameters.particleSize, particleSystemParameters.particleSize),
                updateCallback: (particles, dt) => {
                    const { windSpeed, windDirection } = this._particleCloudSimulationProps;
                    applyGravityAndWind(particles, windSpeed, windDirection, dt);
                }
            })
        );

        if (this._particlePrimitive) {
            this._particlePrimitive.show = true;
        }
    }

I can confirm that this._particlePrimitive have the correct particle type but updateCallback didn’t call applyGravityAndWind function.
I am not sure why this is happening.
And the console prints so many these types of errors.

[Violation] ‘requestAnimationFrame’ handler took ms

Please help me if you have experience to solve such problem before.
Best regards
James

2

Hey @James_Wang, thanks for the question.

It looks like you’re using the code shared in Cesium weather effects

As I understand it this code relies on the time between frames, the dt, to be defined to give meaningful positions to the particles. I think the updateCallback is getting called it’s just not returning values that produce the smoke you want.

You can try enabling the clock/animations on the viewer and see if this fixes it.

const viewer = new Cesium.Viewer("cesiumContainer", {
  shouldAnimate: true,
});

If you have another limitation that prevents you from enabling animations then you may have to come up with a different way to calculate the new particle positions that accounts for when dt = 0

3

Hi @jjspace
Thanks for your answer.
I already added shouldAnimate but still same problem occured.

4

@James_Wang I’m sorry that didn’t work.

Would you be able to create a minimal Sandcastle that demonstrates the error happening? I was able to get your function working with minimal changes and the key there was shouldAnimate.