Výkonné částicové systémy a WebGL
Částicové systémy
Výkon a WebGL
Ondřej Žára, @0ndras
Toto je zvukový test.
Implementace částicového systému
...máme necelých 20 30 minut, žaves
var dt = Date.now() - lastTime;
particles.forEach(function(particle) {
particle.velocity += dt * particle.acceleration;
particle.position += dt * particle.velocity;
draw(particle); // typicky kolečko či čtvereček
});
Výkon částicového systému
- Co výkon?
- Kolik částic zvládneme přijatelně plynule?
- Jaké optimalizace máme k dispozici?
- Algoritmus, JIT, Inlining
- Alokace, GC, typovaná pole
- Vykreslování
Závodník #1: Canvas, 2d context
- Simulace otáčení násobením maticí
- Float32Array, glMatrix
- Kreslení pomocí
fillRect(x, y, 2, 2)
- Ukázka
Závodník #1: Canvas, 2d context
CPU zatíženo simulací a pravděpodobně i vykreslováním
Závodník #2: Canvas, WebGL context
- Simulace stejně jako minule
- Vykreslení pomocí
gl.POINTS
- Triviální Vertex i Fragment Shader
- Ukázka
Závodník #2: Canvas, WebGL context
CPU zatíženo simulací a přenášením dat do GPU
Závodník #3: ???
- Nemělo by WebGL být rychlé?
- Co přesně je ve WebGL rychlé?
- Co všechno ví účastník konference o WebGL?
Koncepty WebGL
- Nahrát do GPU vertex+fragment shadery
- Nahrát do GPU data
- Projít data, pomocí vertex shaderu je převést na výstupní souřadnice
- Provést rasterizaci dat mezi souřadnicemi a pomocí fragment shaderu je obarvit
GOTO 2, GOTO 3 ?
Které operace jsou rychlé a které pomalé?
Koncepty WebGL
- Nahrát do GPU vertex+fragment shadery
- Nahrát do GPU data
- Projít data, pomocí vertex shaderu je převést na výstupní souřadnice
- Provést rasterizaci dat mezi souřadnicemi a pomocí fragment shaderu je obarvit
GOTO 2, GOTO 3 ?
Myšlenka: je nutné provádět simulaci v JavaScriptu?
Závodník #3: Simulace ve vertex shaderu
- Přesun dat do GPU jen jednou, na začátku
- Následné výpočty jen na úrovni vertex shaderu
- Ukázka
Závodník #3: Simulace ve vertex shaderu
CPU po zásluze odpočívá
Co dovoluje shader
- Úkolem vertex shaderu je výpočet pozice každého bodu
- Kolik vstupních dat, tolik bodů
- Mezi snímky není kam vypočítaná data uložit (!)
gl_Position = rotationMatrix * randomUnitVec3
Co dovoluje shader
- Pouze takové jevy, kde známe analytické řešení (explicitní vzorec)
- Vstupem typicky pozice, rychlost, individuální barva
gl_Position = v * t + 0.5 * g * t²- Fontána
Bonus: JS knihovna
- Vhodná pro potřeby ukázek na konferencích
- Vlastní DSL pro popis částicového systému
- Generuje kód vertex a fragment shaderu
- FPS, šoupátka na změnu parametrů
- Jak by se měla jmenovat?
Ukázka pasy.js
var scene = new pasy.Scene();
var ps = scene.particleSet()
.count(100000)
.pointSize(1, 3)
.color([.4, .2, .1])
.attribute("position", 3, function(gl, count) {
return pasy.randomSet(count, vec3, 0.05);
})
.vertex("vec3 position = a_position;");
scene.add(ps);
Prostor pro otázky
