Nebula - a fully featured particle system designer for three

I’m very proud today to introduce Nebula for desktop and its open source counterpart three-nebula - a WebGL based particle system designer and engine for three .

Nebula was created as a branch from my game/game-engine creation project; Project GoldScript. I made it because I couldn’t find any way to visually and interactively create rich, eye catching particle systems for my engine that could potentially match those made for AAA games.

With Nebula, you can create eye catching particle systems, save them as JSON and render them in any website or app that supports WebGL using three and three-nebula . Particles can be rendered direct to the GPU making for some extremely performant effects.

At present the app is in alpha and there may be issues, from UI bugs to performance problems, but I’m pleased enough with it to let people start playing around and see what kinds of things the community can create. There’s also no fully fleshed out user guide or manual right now because I’m sure users will have a lot of feedback about the first draft for the UI. I’d rather wait until I’ve addressed the first round of major concerns before investing time into writing a guide.

I’ve got a lot of plans for the future, such as an online space where people can upload, view & download other people’s particle systems and bunch of other advanced features that I’ll talk about soon.

For now, if you have questions, comments or want to simply discuss things, please head over to the repo’s discussions page in Github. If you’d like to keep up to date with the latest changes and feature additions, please follow me or the official app account on Twitter. You can also check out the app on Product Hunt

9 Likes

So much to learn. Easiest to see an example that runs in browser - start to finish. Were there any such examples in three-nebula-master.zip? Still looking, heh. nope didn’t see any … once something is running, now maybe you can learn how…the way its always been.

1 Like

Hey thanks for the feedback. Did you check out the quick start example https://codesandbox.io/s/three-nebula-quickstart-kz6uv if so and you’re still having trouble, is it that you’re not using webpack or ES modules?

If you’re not using webpack, then you can include via a script tag. The code will basically be identical except that all the dependencies that are imported will be on the window.

There is an example like this in the README

Happy to help with any other issues, perhaps I should set up a more simple code sandbox quick start just using script tags?

Right, that’s the first file opened, but missed it, that readme looks newer, more links. https://three-nebula.org/examples/custom-renderer
Running out of learning curve here … doh.

All good. Check the example in the README and see how you go.

Hi Rohan. Your work is amazing! Do you have an example that works with the current Three.js version?
This is what I am trying to do, within the three.js module… It is saying "no export for Life, Radius, Mass, etc…

<script type='text/javascript' src='/node_modules/three-nebula/build/three-nebula.js'></script>
<script type="module">
import * as THREE from "../build/three.module.js";
import System , {  Emitter,  Rate,  Span,  Position,  Mass,  Radius,  Life,  Velocity,  PointZone,  Vector3D,  Alpha,  Scale,  Color,} from 'three-nebula';

Thanks. :slight_smile: