Interactive Learning Platform for Babylon.js Node Particle Editor - NPE Guide

Demos and projects
1

I’m excited to share NPE Guide - an interactive learning platform for mastering the Babylon.js Node Particle Editor through step-by-step tutorials and hands-on practice.

What is NPE Guide?

A web-based educational application that provides comprehensive lessons for learning particle system creation with Babylon.js. Features include:

  • Interactive step-by-step lessons from basics to advanced techniques

  • Live editor preview with integrated Babylon.js Node Particle Editor

  • Detailed block documentation with property explanations

  • Bilingual support (English/Russian)

Purpose

While Babylon.js has excellent documentation with lessons, the UI of the documentation doesn’t allow for efficient learning and exploration. NPE Guide addresses this by providing a more intuitive, interactive learning experience with structured lessons, practical examples, and real-time visual feedback - making it easier for both beginners and experienced developers to master the Node Particle Editor.

How Can You Help?

This project is open to contributions! You can help by:

  • Adding new lessons or improving existing content

  • Reporting issues or suggesting features

  • Translating to additional languages

  • Contributing code improvements

Looking Forward to Your Suggestions!

I’m actively seeking feedback and suggestions from the community. Whether you have ideas for new lesson topics, ways to improve the learning experience, or feature suggestions - your input is valuable and will help make NPE Guide better for everyone!

Try it out: https://soullnik.github.io/npe-guide/

12 Likes
2

This is huge !!! @Deltakosh will love it !!!

3

My only feedback is that the blocks drag and drops are positionned wrongly but it is a pleasure to learn this way, well done.

1 Like
4

Thanks for the feedback, I’m not sure if this problem can be solved in Guide app or if the problem is due to the fact that the editor calculates dropNewBlock using offsetLeft/offsetTop instead of getBoundingClientRect(). I also have problems with the styles inside npe

5

Dude! This is EXCELLENT!

Do you mind updating our doc page to add a link to your tool? This is so deserved!!

cc @AlitarSemiramis FYI

6

Yes, I also want to integrate all the examples from the docs into the guide, but in the form of tutorials.

2 Likes
7

You rock my man!

8

Do you have any idea, why we get wrong position from drag and drop inside npe in guide?

9

I think it’s because of the screen size of the NPE editor which is reduced and the calculation of the position of the cursor at the time of release. This creates a lag.
I guess it’s something like that.

10

This is amazing!

1 Like
11

This is really just a quick initial version. I plan to train a few people on the guide and, based on their feedback, create a final version.

1 Like
12

Unfortunately, I did not check :frowning:

13

This is amazing! I have been learning about NPE so I will go through this guide and if you want any feedback I am happy to share if I have any.

1 Like
14

Of course, this is exactly what is currently lacking: testing, editing of lesson content and reworking of examples that will clearly reflect the topic.

1 Like
15

NPE Guide has been updated

  • Fixed block positioning on drop

  • Updated layout and styles

  • Added topics and additional lessons

  • Added saving user solutions to localStorage per lesson

Your progress is now saved automatically.

2 Likes
16

Guys, in the Guide I see a problem with the styles for some blocks, inputs in NPE, does anyone know how to import the correct styles?

17

let me add @georgie and @ryantrem who might have a clue ?

18

I assume you are just calling NodeParticleSystemSet.editAsync()?

I took a quick look and it looks to me like some of the styles are not being applied on specific elements, but I can’t tell why at this point. I will check with some other folks.

Also just FYI, we are in the process of a complete UI overhaul, and with the new UI system we use a CSS-in-JS solution, and I expect this kind of issue won’t happen when that work is done (in the coming months!).

19

@AlitarSemiramis and I looked at this more together and here are a couple takeaways:

  1. The custom font is not embedded into the bundle. It must be manually loaded in your web app. You can add <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" /> to the <head> of your page and that should pull in the custom font.
  2. For the other random sampling of issues that we checked, it seems that the styling for UI elements in NPE sometimes fall through to browser defaults (for things like color etc.). In your app, you define defaults for some of these that replace the browser defaults, and so we fall through to your app’s defaults instead of the browser defaults. I think this is technically a shortcoming of NPE (or any tool that supports being used as a library and embedded in a web page) as it should be exhaustive in styling and not leave anything to defaults. That said, I think fully fixing this in the old UI system would be a lot of work, and we are full steam on getting the new one implemented. I think the best bet might be for an imperfect integration right now, and in the near future when the new system is in place I expect all these problems will no longer be applicable.
2 Likes
20

Could you maybe use a shadow dom (e.g. attachShadow) on an element hosting NPE? I think that would hide your styles from NPE and then maybe we’d get the right behavior?

1 Like