NebulaFX

Source Code

Project Info

Developed For: Personal Project

Platforms: Web

Responsibilities: Programming and Design

Tools: React, Typescript, WebGPU

Team size: 1

Time Frame: from May 2026 to present

Introduction

NebulaFX is a GPU‑accelerated particle simulation engine for the Web, using compute pipelines and instanced rendering to handle large particle workloads efficiently. The system is implemented in React + TypeScript and powered by the WebGPU API for high‑performance simulation and rendering.

A live demo is provided on this page, allowing users to tweak particle parameters—such as size, colour, and emission behaviour—and observe the updated simulation instantly.

Main Features

Here are some of the main features of this particle simulator:

  1. It supports 2D particle rendering at the moment.
  2. Except for calculating how many particles to spawn each frame, all particle computations are performed entirely on the GPU.

  3. The rendering canvas supports zooming and panning via the middle mouse button.

  4. The canvas background colour can be customised.

  5. The simulation can be paused, stopped, or restarted at any time.

  6. Several particle properties—such as size, lifetime, speed, and colour—can be edited in real time.

  7. Many particle attributes support multiple modes, including constant values and randomized ranges.

  8. the rate of spawning particles can be editted by user.

Future Plans

At the moment, this simulator is only a demo, but my goal is to turn it into a fully featured particle‑authoring tool capable of creating beautiful and complex VFX. Many of the planned features are inspired by Unity’s particle system.
Below is the planned roadmap for the next version, in order: 

  1. Refactor the codebase: the current structure isn’t very scalable, so reorganising it will make future feature development much easier.

  2. Add ‘over‑time’ properties: currently, particle attributes like size and color are only set at spawn. The next step is to support size‑over‑time, color‑over‑time, and similar curves to make the system more flexible.

  3. Introduce spawn shapes: add emission shapes such as circle and rectangle to control where particles appear and the direction they travel.

  4. Add particle texture selection: particles currently use a single preset texture. The plan is to allow users to choose from multiple textures or upload their own.

  5. Add rotation properties: support for start rotation and rotation‑over‑time will be added.

  6. Implement burst emitters: right now, new particles are spawned only based on a continuous spawn rate. Burst emitters will allow spawning particles at specific times, similar to Unity’s particle emission burst properties.
  7. Improve the UI/UX: refine the interface to make the application more elegant, intuitive, and visually polished.