CCS6020 Computer Graphics - bujarraufi.files.wordpress.com · PARTICLE RENDERING Particles can be...
Transcript of CCS6020 Computer Graphics - bujarraufi.files.wordpress.com · PARTICLE RENDERING Particles can be...
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?