Particle system on Babylon.js Editor v4.2

Questions
1

Hi @julien-moreau
Sorry for my asking while you are busy. I try to use particle system on BJS Editor v4.2.
When I put on the particle component on preview and run, the screen is black.

With checking dev tools, a lot of error is showing like these.

logger.js:43 
        
       BJS - [20:50:51]: Unable to compile effect:

logger.js:43 
        
       BJS - [20:50:51]: Uniforms:  world, view, viewProjection, vEyePosition, vLightsType, vAmbientColor, vAlbedoColor, vReflectivityColor, vMetallicReflectanceFactors, vEmissiveColor, visibility, vReflectionColor, vFogInfos, vFogColor, pointSize, vAlbedoInfos, vAmbientInfos, vOpacityInfos, vReflectionInfos, vReflectionPosition, vReflectionSize, vEmissiveInfos, vReflectivityInfos, vReflectionFilteringInfo, vMetallicReflectanceInfos, vMicroSurfaceSamplerInfos, vBumpInfos, vLightmapInfos, mBones, vClipPlane, vClipPlane2, vClipPlane3, vClipPlane4, vClipPlane5, vClipPlane6, albedoMatrix, ambientMatrix, opacityMatrix, reflectionMatrix, emissiveMatrix, reflectivityMatrix, normalMatrix, microSurfaceSamplerMatrix, bumpMatrix, lightmapMatrix, metallicReflectanceMatrix, vLightingIntensity, logarithmicDepthConstant, vSphericalX, vSphericalY, vSphericalZ, vSphericalXX_ZZ, vSphericalYY_ZZ, vSphericalZZ, vSphericalXY, vSphericalYZ, vSphericalZX, vSphericalL00, vSphericalL1_1, vSphericalL10, vSphericalL11, vSphericalL2_2, vSphericalL2_1, vSphericalL20, vSphericalL21, vSphericalL22, vReflectionMicrosurfaceInfos, vTangentSpaceParams, boneTextureWidth, vDebugMode, vDetailInfos, vDiffusionDistance, vTintColor, vSubSurfaceIntensity, vRefractionMicrosurfaceInfos, vRefractionFilteringInfo, vRefractionInfos, vThicknessInfos, vThicknessParam, refractionMatrix, thicknessMatrix, scatteringDiffusionProfile, vClearCoatTangentSpaceParams, vClearCoatParams, vClearCoatRefractionParams, vClearCoatTintParams, clearCoatColorAtDistance, clearCoatMatrix, clearCoatRoughnessMatrix, clearCoatBumpMatrix, clearCoatTintMatrix, vClearCoatInfos, vClearCoatBumpInfos, vClearCoatTintInfos, vAnisotropy, vAnisotropyInfos, anisotropyMatrix, vSheenColor, vSheenRoughness, vSheenInfos, sheenMatrix, sheenRoughnessMatrix, previousWorld, previousViewProjection, vLightData0, vLightDiffuse0, vLightSpecular0, vLightDirection0, vLightFalloff0, vLightGround0, lightMatrix0, shadowsInfo0, depthValues0, viewFrustumZ0, cascadeBlendFactor0, lightSizeUVCorrection0, depthCorrection0, penumbraDarkness0, frustumLengths0, albedoSampler, reflectivitySampler, ambientSampler, emissiveSampler, bumpSampler, lightmapSampler, opacitySampler, reflectionSampler, reflectionSamplerLow, reflectionSamplerHigh, irradianceSampler, microSurfaceSampler, environmentBrdfSampler, boneSampler, metallicReflectanceSampler, detailSampler, thicknessSampler, refractionSampler, refractionSamplerLow, refractionSamplerHigh, clearCoatSampler, clearCoatRoughnessSampler, clearCoatBumpSampler, clearCoatTintSampler, anisotropySampler, sheenSampler, sheenRoughnessSampler, shadowSampler0, depthSampler0

It seems that the particle object cause the issue.
Could you tell me how to use the particle?

Thanks in advance.

2

When I used BJS editor v2.5, the particle system did not have any issues. (Sorry for my old info).

FYI
Babylon.js EditorたParticle Systemă‚’äœżăŁăŠé­”æł•ć‰Łă‚šăƒ•ă‚§ă‚Żăƒˆă‚’äœœă‚ŠăŸă—ăŸ - CrossRoad (crossroad-tech.com)

3

Sorry for my multiple posts.

Let me share my update info.

I tried to update package.json with using npm commands like these. But situation didn’t change.

$ npm install @babylonjs/core@5.5.5
$ npm install @babylonjs/gui@5.5.5
$ npm install @babylonjs/loaders@5.5.5
$ npm install @babylonjs/materials@5.5.5
$ npm install @babylonjs/post-processes@5.5.5
$ npm install @babylonjs/procedural-textures@5.5.5

What I’d like to do is that showing flame sword effects, shock wave effect and so on.

An example of shock wave effect

2 Likes
4

I don’t think the 4.2 editor is compatible with Babylon 5.X, you’ll have to downgrade your Babylon version :slight_smile: Tagging @julien-moreau who can help you too

5

@carolhmj
Thanks for your comment. Yes, you’re right.
I have nothing to lose by trying it then I tried. I’ve already downgrade Babylon version :slight_smile:

I hope @julien-moreau kindly reply to me.

1 Like
6

Hi @julien-moreau
Sorry for multiple messages. I solved my issue by myself.

I could not still use particle system on BJS Editor v4.2.0 but I could use flame particle generated by me on Particle Editor.

Here is a flame sword and character on BJS Editor (under development)

Hope you’re safe :slight_smile:

3 Likes
7

Hi @Limes2018 !
So sorry for the delay, I was off for these weeks but I’m back!

Particle systems should work in the Editor so I have a bug some here that i’m trying to figure out.
Also, mixing a project with Babylon.JS v5 and the Editor <= 4.2.0 may generate edge cases. During my holidays I was working on finializing the editor using the newly Babylon.JS v5. I’ll let you know once released.

I hope to have it released with the particle systems fix

1 Like
8

@Limes2018 I found an issue,

The method to find a particle system, when using @fromParticleSystems decorator, must be attached to the object having the script using the decorator

(ps) => ps.emitter === n && ps.name === link.particleSystemName

Do you agree that it should not test the emitter and only return by name?

@sebavan also I can see that particle systems are parsed in the importMesh method of BabylonSceneLoader Babylon.js/babylonFileLoader.ts at master · BabylonJS/Babylon.js · GitHub but not in the load method (which calls loadAssetContainer) Babylon.js/babylonFileLoader.ts at master · BabylonJS/Babylon.js · GitHub

Is that a desired behavior?

1 Like
9

Do you mind creating a PR ?

10

@sebavan sure! As soon as I can :slight_smile:

2 Likes
11

@Limes2018 I found the issue while trying to contribute lol. No need to contribute, juste add:

import "@babylonjs/core/Particles/particleSystemComponent";

in your index.ts file at the root of the src folder. This is mandatory to get particle systems (and other scene components) support in the final bundle produced by webpack. These imports can’t be done in scripts because they are required on the fly once scene has been loaded.

A good practive should be to import all needed scene components in the index.ts file

@sebavan sorry for the inconvenience, I already tried to add this import yesterday but I’ve put it at the wrong place -_-

1 Like
12

@julien-moreau

Thanks for your kind reply and suggestion!

I added the following line in my src/index.ts.

import "@babylonjs/core/Particles/particleSystemComponent";

After adding the line, I added a particle system in “Asset Browser” and named it as “test”.

Next, I added the “test” in graph view. Pressing “Run” button, but situation has not been changed


The error seems to be the same as previous my post.

Sorry for just informing my trial.

13

I have found a potential issue in particle systems in the Editor.
In the .ps file in your assets that contains your particle system configuration, can you tell what is the value of metadata.editorPath ? Is it relative or absolute ?

Also, to be sure, have you re-built or watched your project with webpack to be sure the final bundle contains the import mentionned above?

Thanks for your answser

14

@julien-moreau

Thanks for your reply. Here is my test.ps file. I opened it by Visual Studio Code.
metadata.editarPath is absolute.

{
	"name": "test",
	"id": "38d993ae-64bb-4567-81e7-5b6d4d2e404a",
	"capacity": 1000,
	"emitterId": "59fb3ce4-30a3-4315-9bbe-1c99adc2ec9a",
	"particleEmitterType": {
		"type": "BoxParticleEmitter",
		"direction1": [
			0,
			1,
			0
		],
		"direction2": [
			0,
			1,
			0
		],
		"minEmitBox": [
			-0.5,
			-0.5,
			-0.5
		],
		"maxEmitBox": [
			0.5,
			0.5,
			0.5
		]
	},
	"isLocal": false,
	"animations": [],
	"beginAnimationOnStart": false,
	"beginAnimationFrom": 0,
	"beginAnimationTo": 60,
	"beginAnimationLoop": false,
	"startDelay": 0,
	"renderingGroupId": 0,
	"isBillboardBased": true,
	"billboardMode": 7,
	"minAngularSpeed": 0,
	"maxAngularSpeed": 0,
	"minSize": 1,
	"maxSize": 1,
	"minScaleX": 1,
	"maxScaleX": 1,
	"minScaleY": 1,
	"maxScaleY": 1,
	"minEmitPower": 1,
	"maxEmitPower": 1,
	"minLifeTime": 1,
	"maxLifeTime": 1,
	"emitRate": 10,
	"gravity": [
		0,
		0,
		0
	],
	"noiseStrength": [
		10,
		10,
		10
	],
	"color1": [
		1,
		1,
		1,
		1
	],
	"color2": [
		1,
		1,
		1,
		1
	],
	"colorDead": [
		0,
		0,
		0,
		1
	],
	"updateSpeed": 0.01,
	"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,
	"metadata": {
		"editorPath": "/Users/limes/Documents/BJSEditor/TPS_game_v2/assets/test.ps"
	}
}

I also pressed “File” > “Build Project”.
After the build, I opened “dist > bundle.js”. I could find neither “test.ps” nor “editorPath”: “/Users/limes/Documents/BJSEditor/TPS_game_v2/assets/test.ps” in the bundle.js.

Is it appropriate answer?

1 Like
15

Sure it is a good answer! Can you replace the editorPath to this one: “editorPath”: “test.ps”

I just fixed this issue in the editor, this happens when the ps is created in the root folder of assets. Will be released with the babylonjs v5 support

Once done, please re-save your project and tell me if it works?
I tested on my side after the bug was fixed and I successfully retrieved the ps reference using the decorator

16

Thanks for your kind and rapid reply.

It is hard to say that the issue in my environment is still alive.
(Of course I did re-save and generating scene.)

Here is my screenshot. If I misunderstand your suggestion, I’d glad to hear.

20220602
202206022509×1881 268 KB

17

Perfect! The last issue is that the particle system must have as emitter the mesh that has the script attached.

Here the particle system « test » should be a child of « Character ». In the graph just drag’n’drop it and it should work

I have removed this restriction so for next version it’ll not have to be a child of anything particular

18

@julien-moreau

Thanks for your reply! Again I’m sorry to say that I could solve the issue.

I put “test” on a child of “Character” like this.The “Character” has a typescript. But situation was not changed.

20220603
202206033012×1888 301 KB

Do I have to add decorating on the typescript file? Currently the ts file does not contain any particle system like “@fromParticleSystem”.

Also should I send current my BJS Editor project?

Sorry for taking your time again.

19

Hi @Limes2018 !
Yes please send me the project so I can take a look and try to unlock

Thanks a lot for your patience !

20

@julien-moreau
OK. Let me prepare to share my project. Due to dealing with my main job, I’ll reply you again one or two days later.

Thanks also for your patience.

1 Like