How to solve Uncaught Particle system started with a targetStopDuration dependant gradient

Questions
1

Hi all!

I tried particle editor on bjs 4.2.0-alpha.17. Some particle was generated normally, but particle including gradient properties was failed.

The following code works.


var lineParticle={"name":"CPU particle system","id":"default system","capacity":10000,"emitter":[0,0,0],"particleEmitterType":{"type":"PointParticleEmitter","direction1":[0,1,0],"direction2":[0,1,0]},"texture":{"tags":null,"url":"https://www.babylonjs.com/assets/Flare.png","uOffset":0,"vOffset":0,"uScale":1,"vScale":1,"uAng":0,"vAng":0,"wAng":0,"uRotationCenter":0.5,"vRotationCenter":0.5,"wRotationCenter":0.5,"isBlocking":true,"uniqueId":14,"name":"https://www.babylonjs.com/assets/Flare.png","hasAlpha":false,"getAlphaFromRGB":false,"level":1,"coordinatesIndex":0,"coordinatesMode":0,"wrapU":1,"wrapV":1,"wrapR":1,"anisotropicFilteringLevel":4,"isCube":false,"is3D":false,"is2DArray":false,"gammaSpace":true,"invertZ":false,"lodLevelInAlpha":false,"lodGenerationOffset":0,"lodGenerationScale":0,"linearSpecularLOD":false,"isRenderTarget":false,"animations":[],"invertY":true,"samplingMode":3},"isLocal":false,"animations":[],"beginAnimationOnStart":false,"beginAnimationFrom":0,"beginAnimationTo":60,"beginAnimationLoop":false,"startDelay":0,"renderingGroupId":0,"isBillboardBased":true,"billboardMode":7,"minAngularSpeed":0,"maxAngularSpeed":0,"minSize":0.1,"maxSize":0.1,"minScaleX":1,"maxScaleX":1,"minScaleY":1,"maxScaleY":1,"minEmitPower":5,"maxEmitPower":5,"minLifeTime":0.99,"maxLifeTime":1,"emitRate":30,"gravity":[0,0,0],"noiseStrength":[10,10,10],"color1":[1,1,1,1],"color2":[1,1,1,1],"colorDead":[1,1,1,0],"updateSpeed":0.016666666666666666,"targetStopDuration":0,"blendMode":0,"preWarmCycles":0,"preWarmStepOffset":1,"minInitialRotation":0,"maxInitialRotation":0,"startSpriteCellID":0,"endSpriteCellID":0,"spriteCellChangeSpeed":1,"spriteCellWidth":0,"spriteCellHeight":0,"spriteRandomStartCell":false,"isAnimationSheetEnabled":false,"textureMask":[1,1,1,1],"customShader":null,"preventAutoStart":false};

var lineParticleySystem = ParticleSystem.Parse(lineParticle,scene,"",true);

The next one does not works.

var lineParticle={"name":"CPU particle system","id":"default system","capacity":10000,"emitter":[0,0,0],"particleEmitterType":{"type":"PointParticleEmitter","direction1":[0,1,0],"direction2":[0,1,0]},"texture":{"tags":null,"url":"https://www.babylonjs.com/assets/Flare.png","uOffset":0,"vOffset":0,"uScale":1,"vScale":1,"uAng":0,"vAng":0,"wAng":0,"uRotationCenter":0.5,"vRotationCenter":0.5,"wRotationCenter":0.5,"isBlocking":true,"uniqueId":14,"name":"https://www.babylonjs.com/assets/Flare.png","hasAlpha":false,"getAlphaFromRGB":false,"level":1,"coordinatesIndex":0,"coordinatesMode":0,"wrapU":1,"wrapV":1,"wrapR":1,"anisotropicFilteringLevel":4,"isCube":false,"is3D":false,"is2DArray":false,"gammaSpace":true,"invertZ":false,"lodLevelInAlpha":false,"lodGenerationOffset":0,"lodGenerationScale":0,"linearSpecularLOD":false,"isRenderTarget":false,"animations":[],"invertY":true,"samplingMode":3},"isLocal":false,"animations":[],"beginAnimationOnStart":false,"beginAnimationFrom":0,"beginAnimationTo":60,"beginAnimationLoop":false,"startDelay":0,"renderingGroupId":0,"isBillboardBased":true,"billboardMode":7,"minAngularSpeed":0,"maxAngularSpeed":0,"minSize":0.1,"maxSize":0.1,"minScaleX":1,"maxScaleX":1,"minScaleY":1,"maxScaleY":1,"minEmitPower":5,"maxEmitPower":5,"minLifeTime":0.99,"maxLifeTime":1,"emitRate":30,"gravity":[0,0,0],"noiseStrength":[10,10,10],"color1":[1,1,1,1],"color2":[1,1,1,1],"colorDead":[1,1,1,0],"updateSpeed":0.016666666666666666,"targetStopDuration":0,"blendMode":0,"preWarmCycles":0,"preWarmStepOffset":1,"minInitialRotation":0,"maxInitialRotation":0,"startSpriteCellID":0,"endSpriteCellID":0,"spriteCellChangeSpeed":1,"spriteCellWidth":0,"spriteCellHeight":0,"spriteRandomStartCell":false,"isAnimationSheetEnabled":false,"sizeGradients":[{"gradient":0,"factor1":0.1,"factor2":0},{"gradient":1,"factor1":0.6,"factor2":0.7}],"lifeTimeGradients":[{"gradient":0,"factor1":0.6,"factor2":0.6},{"gradient":1,"factor1":0.7,"factor2":0.7}],"textureMask":[1,1,1,1],"customShader":null,"preventAutoStart":false};

var lineParticleySystem = ParticleSystem.Parse(lineParticle,scene,"",true);

Error


particleSystem.js:947 Uncaught Particle system started with a targetStopDuration dependant gradient (eg. startSizeGradients) but no targetStopDuration set

The difference is whether sizeGradients and lifetimeGradients are included or not.

    "sizeGradients": [
        {
            "gradient": 0,
            "factor1": 0.1,
            "factor2": 0
        },
        {
            "gradient": 1,
            "factor1": 0.6,
            "factor2": 0.7
        }
    ],
    "lifeTimeGradients": [
        {
            "gradient": 0,
            "factor1": 0.6,
            "factor2": 0.6
        },
        {
            "gradient": 1,
            "factor1": 0.7,
            "factor2": 0.7
        }
    ],

If these properties are included, the result shows “Uncaught Particle system started with a targetStopDuration” error.
If these properties are not included, it works.

If the following code are added, “Uncaught Particle system started with a targetStopDuration” is also showed.

lineParticleySystem.addLifeTimeGradient(0,0.1,0);
lineParticleySystem.addLifeTimeGradient(1,0.6,0.7);

Is it some issue on bjs 4.2.0-alpha.17?

Any comment is helpful for me.

2

Hello! do you mind creating a repro in the PG?

3

Thanks for your reply!

Please check my repo.

$ npm webpack webpack-cli webpack-dev-server
$ npx webpack-dev-server

Check the code.

src/index.js L90-

var lineParticle ={json format data};
var lineParticleySystem = ParticleSystem.Parse(lineParticle,scene,"",true);
var lineParticleSource = new AbstractMesh("particleSource", scene);
lineParticleSource.position = new Vector3(0,0,0);

lineParticleySystem.beginAnimationOnStart=false;
lineParticleySystem.beginAnimationLoop =false;
lineParticleySystem.targetStopDuration=0;
//lineParticleySystem.addLifeTimeGradient(0,0.1);
//lineParticleySystem.addLifeTimeGradient(1,0.6);

lineParticleySystem.emitter = lineParticleSource;
lineParticleySystem.start();

Thanks again!!

4

In meant in the playground :slight_smile: as this is easier for us to debug

5

In meant in the playground :slight_smile: as this is easier for us to debug

Sorry for my misunderstand. I made a PG.

    //works (without gradient pattern1)
    //var lineParticle ={"name":"CPU particle system","id":"default system","capacity":10000,"emitter":[0,0,0],"particleEmitterType":{"type":"BoxParticleEmitter","direction1":[-3,8,3],"direction2":[3,8,-3],"minEmitBox":[-0.3,0,0],"maxEmitBox":[0.3,0,0]},"texture":{"tags":null,"url":"https://www.babylonjs.com/assets/Flare.png","uOffset":0,"vOffset":0,"uScale":1,"vScale":1,"uAng":0,"vAng":0,"wAng":0,"uRotationCenter":0.5,"vRotationCenter":0.5,"wRotationCenter":0.5,"isBlocking":true,"uniqueId":11,"name":"https://www.babylonjs.com/assets/Flare.png","hasAlpha":false,"getAlphaFromRGB":false,"level":1,"coordinatesIndex":0,"coordinatesMode":0,"wrapU":1,"wrapV":1,"wrapR":1,"anisotropicFilteringLevel":4,"isCube":false,"is3D":false,"is2DArray":false,"gammaSpace":true,"invertZ":false,"lodLevelInAlpha":false,"lodGenerationOffset":0,"lodGenerationScale":0,"linearSpecularLOD":false,"isRenderTarget":false,"animations":[],"invertY":true,"samplingMode":3},"isLocal":false,"animations":[],"beginAnimationOnStart":false,"beginAnimationFrom":0,"beginAnimationTo":60,"beginAnimationLoop":false,"startDelay":0,"renderingGroupId":0,"isBillboardBased":true,"billboardMode":7,"minAngularSpeed":0,"maxAngularSpeed":3.14,"minSize":0.1,"maxSize":0.5,"minScaleX":1,"maxScaleX":1,"minScaleY":1,"maxScaleY":1,"minEmitPower":0.5,"maxEmitPower":0.75,"minLifeTime":0.1,"maxLifeTime":3.5,"emitRate":30,"gravity":[0,-9,0],"noiseStrength":[10,10,10],"color1":[1,1,1,1],"color2":[1,1,1,1],"colorDead":[1,1,1,0],"updateSpeed":0.005,"targetStopDuration":0,"blendMode":0,"preWarmCycles":0,"preWarmStepOffset":1,"minInitialRotation":0,"maxInitialRotation":0,"startSpriteCellID":0,"endSpriteCellID":0,"spriteCellChangeSpeed":1,"spriteCellWidth":0,"spriteCellHeight":0,"spriteRandomStartCell":false,"isAnimationSheetEnabled":false,"textureMask":[1,1,1,1],"customShader":null,"preventAutoStart":false};

    //works (without gradient pattern2)
    //var lineParticle={"name":"CPU particle system","id":"default system","capacity":10000,"emitter":[0,0,0],"particleEmitterType":{"type":"PointParticleEmitter","direction1":[0,1,0],"direction2":[0,1,0]},"texture":{"tags":null,"url":"https://www.babylonjs.com/assets/Flare.png","uOffset":0,"vOffset":0,"uScale":1,"vScale":1,"uAng":0,"vAng":0,"wAng":0,"uRotationCenter":0.5,"vRotationCenter":0.5,"wRotationCenter":0.5,"isBlocking":true,"uniqueId":14,"name":"https://www.babylonjs.com/assets/Flare.png","hasAlpha":false,"getAlphaFromRGB":false,"level":1,"coordinatesIndex":0,"coordinatesMode":0,"wrapU":1,"wrapV":1,"wrapR":1,"anisotropicFilteringLevel":4,"isCube":false,"is3D":false,"is2DArray":false,"gammaSpace":true,"invertZ":false,"lodLevelInAlpha":false,"lodGenerationOffset":0,"lodGenerationScale":0,"linearSpecularLOD":false,"isRenderTarget":false,"animations":[],"invertY":true,"samplingMode":3},"isLocal":false,"animations":[],"beginAnimationOnStart":false,"beginAnimationFrom":0,"beginAnimationTo":60,"beginAnimationLoop":false,"startDelay":0,"renderingGroupId":0,"isBillboardBased":true,"billboardMode":7,"minAngularSpeed":0,"maxAngularSpeed":0,"minSize":0.1,"maxSize":0.1,"minScaleX":1,"maxScaleX":1,"minScaleY":1,"maxScaleY":1,"minEmitPower":5,"maxEmitPower":5,"minLifeTime":0.99,"maxLifeTime":1,"emitRate":30,"gravity":[0,0,0],"noiseStrength":[10,10,10],"color1":[1,1,1,1],"color2":[1,1,1,1],"colorDead":[1,1,1,0],"updateSpeed":0.016666666666666666,"targetStopDuration":0,"blendMode":0,"preWarmCycles":0,"preWarmStepOffset":1,"minInitialRotation":0,"maxInitialRotation":0,"startSpriteCellID":0,"endSpriteCellID":0,"spriteCellChangeSpeed":1,"spriteCellWidth":0,"spriteCellHeight":0,"spriteRandomStartCell":false,"isAnimationSheetEnabled":false,"textureMask":[1,1,1,1],"customShader":null,"preventAutoStart":false};

    //not work 
    var lineParticle={"name":"CPU particle system","id":"default system","capacity":10000,"emitter":[0,0,0],"particleEmitterType":{"type":"PointParticleEmitter","direction1":[0,1,0],"direction2":[0,1,0]},"texture":{"tags":null,"url":"https://www.babylonjs.com/assets/Flare.png","uOffset":0,"vOffset":0,"uScale":1,"vScale":1,"uAng":0,"vAng":0,"wAng":0,"uRotationCenter":0.5,"vRotationCenter":0.5,"wRotationCenter":0.5,"isBlocking":true,"uniqueId":14,"name":"https://www.babylonjs.com/assets/Flare.png","hasAlpha":false,"getAlphaFromRGB":false,"level":1,"coordinatesIndex":0,"coordinatesMode":0,"wrapU":1,"wrapV":1,"wrapR":1,"anisotropicFilteringLevel":4,"isCube":false,"is3D":false,"is2DArray":false,"gammaSpace":true,"invertZ":false,"lodLevelInAlpha":false,"lodGenerationOffset":0,"lodGenerationScale":0,"linearSpecularLOD":false,"isRenderTarget":false,"animations":[],"invertY":true,"samplingMode":3},"isLocal":false,"animations":[],"beginAnimationOnStart":false,"beginAnimationFrom":0,"beginAnimationTo":60,"beginAnimationLoop":false,"startDelay":0,"renderingGroupId":0,"isBillboardBased":true,"billboardMode":7,"minAngularSpeed":0,"maxAngularSpeed":0,"minSize":0.1,"maxSize":0.1,"minScaleX":1,"maxScaleX":1,"minScaleY":1,"maxScaleY":1,"minEmitPower":5,"maxEmitPower":5,"minLifeTime":0.99,"maxLifeTime":1,"emitRate":30,"gravity":[0,0,0],"noiseStrength":[10,10,10],"color1":[1,1,1,1],"color2":[1,1,1,1],"colorDead":[1,1,1,0],"updateSpeed":0.016666666666666666,"targetStopDuration":0,"blendMode":0,"preWarmCycles":0,"preWarmStepOffset":1,"minInitialRotation":0,"maxInitialRotation":0,"startSpriteCellID":0,"endSpriteCellID":0,"spriteCellChangeSpeed":1,"spriteCellWidth":0,"spriteCellHeight":0,"spriteRandomStartCell":false,"isAnimationSheetEnabled":false,"sizeGradients":[{"gradient":0,"factor1":0.1,"factor2":0},{"gradient":1,"factor1":0.6,"factor2":0.7}],"lifeTimeGradients":[{"gradient":0,"factor1":0.6,"factor2":0.6},{"gradient":1,"factor1":0.7,"factor2":0.7}],"textureMask":[1,1,1,1],"customShader":null,"preventAutoStart":false};

The third “lineParticle” in the PG does not works.

6

well everything is in the console error :slight_smile:

here is a fix: https://playground.babylonjs.com/#Y0SJXE#3

In your case you are using lifeTimeGradients which (from the doc):

image
image989Ă—364 44.2 KB

https://doc.babylonjs.com/babylon101/particles#size

1 Like
7

Thanks for fix!! My github repo also works!!

I read the doc but overlooked about targetStopDuration. I’ll check again.

Many thanks :slight_smile: