Giter Club home page Giter Club logo

shader-particle-engine-2's Introduction

Shader Particle Engine 2

An experiment to push as much of a particle engine's computation onto the GPU. Makes use of 3 DataTextures (spawn, velocity, and position), each one containing all the points for each created emitter.

What can it do?

The image below is 900,000 particles, rendered as GL Points, being modified using simplex noise, and supporting lighting and both casting and receiving shadows. So stuff like that, really.

Points renderered with lighting and shadows

Usage

As this is currently in development, and very much still in the "sketching" / testing out the system architecture phase, there's no hosted version, so:

  1. Check out the repo
  2. yarn or npm i
  3. yarn dev or npm run dev
  4. Open browser

Pipeline

At a high-level, the pipeline for this project is relatively simple:

Emitters -> GPGPU Calculation -> Renderer(s)

Details
  • Emitters can each have their own spawn, velocity, and position data.
  • The GPGPU Calculation phase uses the GLSL shaders to calculate the DataTextures
  • The Renderer (of which there are two: PointsRenderer and MeshRenderer) takes these DataTextures and uses them to draw either GL points or 3d meshes.

shader-particle-engine-2's People

Contributors

squarefeet avatar

Stargazers

qing avatar  avatar

Watchers

 avatar  avatar

shader-particle-engine-2's Issues

Sphere Distribution is borked when position is not at origin

Looks like there's some wonky maths going on in the velocity shader (possibly position shader too) when calculating the spherical distribution for the velocity.

If an emitter's position is at the origin, it calculates it okay for the first little while. If it's not, it looks all sorts of wrong.

BoxDistribution seems fine, so I'm assuming it's an issue with spherical distribution only.

Attractor Modifier

An attractor modifier is the first modifier that can have multiple "instances". I.e. you can have more than one attractor per Emitter.

In order to pack multiple attractor values into a single uniform, let's start off by using a Matrix4. This will allow for 4 attractors to be added to each Emitter, with each attractor having a vec3 position and a float force.

Revisit how to define an Emitter

The Emitter class is currently not that great to adjust. It's a product of hacking away on something to get it working, and now is the time to think about end-user experience.

Requirements:

  1. Ease of Emitter construction
  2. Post-construction attribute modification

Possible avenues of exploration:

  1. Configuration object passed to constructor.
  2. A JSON configuration object being used to construct an Emitter (e.g. via Emitter.from( ... ))
  3. Helper methods on the Emitter's prototype to set attributes (initial value and distribution, modifiers, etc.)
  4. Separate Spawn, Position, and Velocity classes to define these attributes that are then passed to the Emitter

Add modifier support for velocity

Currently, velocity calculations are altered by changing the velocity texture's fragment shader. This needs to be made much more user-friendly.

Modifiers will be force definitions that are passed to the velocity shader and will be added to an Emitter via something akin to addModifier.

Questions:

  1. Can I use bitmasks to tell the velocity fragment shader which modifiers are active for which emitter?
    • emitter.mask = ...
    • Frag shader: uniform float modifierBitMask[n];

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.