Nebula - a fully featured particle system designer for three

Showcase
,
1

image
image2732×1580 538 KB

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

17 Likes
2

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
3

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?

4

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.

6

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

7

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:

1 Like
8

HI , i saw your perfect library , and thank you for that, i download the ZIP file but how i can use it ? and get it to threejs , any tutorial for that , three-nebula-quickstart - CodeSandbox

1 Like
9

I was looking for a particle system, I spent the entire day studying your code, the more I look into it, the more I’m amazed by the effort behind it, it’s a well rounded, fine tuned and production ready library and the fact that it is open source, is even more humbling, I can only express my gratitude and deep respect for your crafts.

With that out of the way, I have some reserves.

I think your work is criminally underrated, I’m sorry to say this, you are not promoting it the right way, I say promoting cause from the description you made and the ambition you expressed, I can only tell this is not just some side project, and please don’t tell me you don’t have any prospect, it’s only natural to seek some reward for your labor.

_ You need more “eye catching examples”, while I understand the need to keep the samples as basic templates, you need to flex a little bit and show the true potential of your library. They say a picture is worth a thousand words an amazing animated example is worth more.

_ Shockingly you are tying your work exclusively with “three.js” (don’t get me wrong, I love three.js), but from what I’ve seen your library does not depend only on three.js, the CustomRenderer can emit particles with a DOM, SVG, HTMLCanvas objects in 2D and 3D space, I can run it with fabirc.js or (may mrdoob, forgive me) “babylon.js”.

_ May be a better documentation system, I had to do a lot of testing to understand how every behavior/initializer works.

I hope you take my criticisms as constructive ones, I truly like your work and wish you the best.

1 Like
10

when i Rotate the camera in the editor the effect rotates with it how can i stop that?