Asst. Prof. Dr. Bujar Raufi

Asst. Dr. Visar Shehu

Computer Science DepartmentContemporary Sciences And Technologies

South East European University

CCS6020Computer Graphics

Advanced techniques – Particles and Particle Systems

COURSE MATERIALS

OVERVIEW

Particle system definition

Particle systems Usage

PARTICLE SYSTEMS

A particle system represent a collection of point masses that obeys some physical laws (e.g, gravity, heat convection, spring behaviors, ... ).

Particle systems can be used to simulate all sorts of physical phenomena:

PARTICLE SYSTEMS

Rain

Snow

Fire

Explosion

Galaxies

Smoke

Etc…

PARTICLE STRUCTURE How a Particle is Represented?

A phase space is a space in which all possible states of a system are represented, with each possible state of the system corresponding to one unique point in the phase space

In Computer graphics phase space usually consists of all possible values of position, momentum and force variables

Position in phase space

𝑥𝑣𝑓𝑚

Velocity

Force Accumulator

Mass

PARTICLE SYSTEMS How a Particle System is Represented?

In general, we have a particle system consisting of 𝑛particles to be managed over time:

PARTICLE FORCES Each particle can experience a force which sends it

on its way.

Where do these forces come from?

Some examples:

Constant (gravity)

Position/time dependent (force fields)

Velocity-dependent (drag)

Combinations (Damped springs)

How do we compute the net force on a particle?

PARTICLE SYSTEMS WITH FORCES Force objects are black boxes that point to the

particles they influence and add in their contributions.

We can now visualize the particle system with force objects:

GRAVITY AND VISCOUS DRAG

The force due to gravity is simply:

𝑓𝑔 = 𝑚 𝐺

where 𝑚-mass and 𝐺 gravity acceleration

Often, we want to slow things down with viscous drag:

𝑓𝑑 = −𝑘 𝑣

𝑓𝑔 = 𝑚 𝐺

𝑚

𝐺

𝑓𝑑 = −𝑘 𝑣

𝑚

𝑣

EXAMPLES

PARTICLE RENDERING Particles can be rendered using various techniques

Points

Lines (from last position to current position)

Sprites (textured quad’s facing the camera)

Geometry (small objects…)

Or other approaches…

For the particle physics, we are assuming that a particle has position but no orientation. However, for rendering purposes, we could keep track of a simple orientation and even add some rotating motion, etc…

PARTICLE PROPERTIES

In physics, a basic particle is defined by it’s position, velocity, and mass

In computer animation, we may want to add various other properties:Color

Size

Life span

Anything else we want…

PARTICLE SYSTEMS IN ThreeJS

Particle Definitions:

// create the particle variables

var particleCount = 1800,

particles = new THREE.Geometry(),

pMaterial = new

THREE.ParticleBasicMaterial({

color: 0xFFFFFF,

size: 20

});

PARTICLE SYSTEMS IN ThreeJS

Particle generation:

//defining particles

for(var p = 0; p < nrParticles; p++) {

// create a particle with random

var pX = Math.random() * 800 – 450;

var pY = Math.random() * 800 – 450;

var pZ = Math.random() * 800 – 450;

particle = new THREE.Vertex(

new THREE.Vector3(pX, pY, pZ)

);

// add it to the geometry

particles.vertices.push(particle);

}

PARTICLE SYSTEMS IN ThreeJS

Particle generation:

// create the particle system

var particleSystem = new

THREE.ParticleSystem(particles, partMaterial);

// add it to the scene

scene.add(particleSystem);

PARTICLE SYSTEM: RESULT

PARTICLE SYSTEMS IN ThreeJS

Assigning textures:

//particle systems

var nrParticles = 1800;

var particles = new THREE.Geometry();

var partMaterial = new

THREE.ParticleBasicMaterial({

color:0xffffff,

size:20,

map:

THREE.ImageUtils.loadTexture("images/fire.jpg"),

blending: THREE.AdditiveBlending,

transparent: true

});

PARTICLE SYSTEM: RESULT

PARTICLE SYSTEMS –Z-Order Sorting

We also want the particles to be ordered in Z-Axes

Some particles are closer, some farther away

// also update the particle system to

// sort the particles which enables

// the behaviour we want

particleSystem.sortParticles = true;

Z-Order Sorting

PARTICLE SYSTEMS – Gravity

We also want the particles to be subjected to gravity rules

Velocity vector should be added

// create a velocity vector

particle.velocity = new THREE.Vector3(

0, // x

-Math.random(), // y: start with random vel

0);

OTHER PARTICLE SYSTEMS LIBRARY

Sparks JS

Sparks.js is lightweight 3d Particle system in javascript, for use with three.js

The Sparks can be downloaded from: https://github.com/zz85/sparks.js/

SPARKS EXAMPLESparks = new Sparks({

maxParticles : 600,

counter : new SPARKS.SteadyCounter(300)

});

var initColorSize = function(){

this.initialize = function( emitter, particle ){

particle.target.color().setHSV(0.3, 0.9, 0.4);

particle.target.size(150); };

};

emitter.addInitializer(new initColorSize());

emitter.addInitializer(new SPARKS.Position( new SPARKS.PointZone(

new THREE.Vector3(0,0,0) ) ) );

emitter.addInitializer(new SPARKS.Lifetime(0,0.8));

emitter.addInitializer(new SPARKS.Velocity(new

SPARKS.PointZone(new THREE.Vector3(0,200,00))));

emitter.addAction(new SPARKS.Age());

emitter.addAction(new SPARKS.Move());

emitter.addAction(new SPARKS.RandomDrift(1000,0,1000));

emitter.addAction(new SPARKS.Accelerate(0,-200,0));

SPARKS RESOURCES

Online editor at http://jeromeetienne.github.com/sparkseditor/

Articles at Learning Three.js

Introduction to Sparks.js

Online Editor for Sparks.js

READING MATERIALS

Diego Cantor, Brandon Jones, WebGL Beginner’s GuideChapter 7

Edward Angel, Interactive Computer Graphics: A Top-Down Approach With Shader Based OpenGL. 6th Edition. 2012

Chapter VII (pp. 374-400)

REFERENCES:

Introduction to Particles –http://www.jimmysoftware.net/slides/Particles/index.html#1

Don Fussel, Particle System Presentation -http://www.cs.utexas.edu/~fussell/courses/cs384g/lectures/lecture14-Particle_systems.pdf

Questions?