I have been testing using Shadow DOM and see if we could fix this on our end, but this is not a simple fix on our end sadly 
Good news is this problem will go away with the new system as @ryantrem said.
@ryantrem Thanks a lot for the advice. It turns out that many styles were behaving incorrectly due to tailwind reset. I used revert and it seemed to fix everything. Unfortunately, I couldn’t use ShadowDom because I was getting some errors in the engine and scene. There’s also a problem with the colorPicker position. I tried to solve it, but I think the problem is with the incorrect position calculation, which doesn’t take the dimensions into account correctly.
1 Like
Also, many thanks for the feedback from @AlitarSemiramis, thanks to him I improved the guide even more.
1 Like
Recent Updates to NPE Guide
We’ve improved the NPE Guide with updates to lessons, UI, and infrastructure.
Enhanced Lesson Content:
-
Updated terminology for consistency (e.g., “UpdatePositionBlock” → “Update Position Block”)
-
Expanded step-by-step instructions with block connections and configurations
-
Added contextual details to help understand block functions
-
Updated shape blocks (replaced PointShapeBlock with CylinderShapeBlock and SphereShapeBlock)
-
Added support for texture files (flare.png) in particle systems
New Features:
-
Clear functionality: reset your work in the Node Particle Editor
-
404 error handling: improved navigation for missing pages
-
Custom link system: interactive links for filter values and textures in lesson content
Technical Improvements:
-
Refactored Babylon.js imports to use scoped packages
-
Simplified CSS classes for cleaner styling
-
Integrated Typekit stylesheet for improved typography
-
Enhanced CSS reset for NPE container consistency
Translations:
- Updated English and Russian translations to reflect terminology changes and new features
These updates improve clarity, usability, and maintainability of the guide.
3 Likes
Updates:
Updated babylonjs packages
Updated lessons Topic 2 (Lessons 1, 3, 4), Topic 3, Topic 5 and Topic 6. Switched to interactive links for filter values and textures in lesson content
For Topic 4, Lesson 2 specifically: replaced manual sprite cell index calculation (Age/Lifetime/Divide/Multiply/FloatToInt/UpdateSpriteCellIndex) with automatic animation using BasicSpriteUpdateBlock and spriteCellChangeSpeed in SetupSpriteSheetBlock. Simplified the structure and updated all lesson content accordingly.
Question about Lesson 4.2:
@Deltakosh
In lesson 4.2, we have a particle system similar to the playground example (https://playground.babylonjs.com/#0K3AQ2#48), but simplified. The structure is almost identical, yet the behavior differs. The playground example shows smooth sprite animation, while ours behaves differently. Do you have any idea?
1 Like
Checking!!
Bug found:
Fix texture invert part by deltakosh · Pull Request #17694 · BabylonJS/Babylon.js
You will have to make sure to set the texture invertY to false in your npe:
3 Likes