webgl balloon

frei nach

CHRISTO's

"Big Air Package"

Veröffentlicht als Exponat auf

trivialspace.net

source code zugänglich auf GitHub

Highlights

Modellierung und Verformung der Ballon-Geometrie in Shadern

Procedurale Shader-Texturen

Eigene Cubemap-Implementierung

lets play with the code!

Ballon Geometrie

Initialisierung JavaScript (CoffeeScript) :

sphere = new THREE.SphereGeometry 1, 600, 800

der Rest passiert im Shader!

Und zwar so:

http://glsl.heroku.com/e#9789.0

Funktionsweise

Verzerrung der Kurven in der Nähe der Kugelpole nötig

Dunkle stellen der Textur ziehen den Vertex in Richtung Mitte

Sinus-Kurve auf einem Zylinder ergibt einen geschlossenen Ring

3 Implementierungen des Deformierungs-Shaders

grob, zur Verzerrung der Kugel

fein, als sichtbare Kontur der Seile

schattiert, zur Berechnung des Lichts

Was fehlt noch?

- Lichtquelle außerhalb des Ballons

- Stoff-Textur

Stoff-Textur

http://glsl.heroku.com/e#9783.1

Stoff-Textur

Unterteilung der Textur-Koordinaten in Streifen:

float stripeNumber = floor(uv.x * STRIPE_COUNT);
float stripeCoord = fract(uv.x * STRIPE_COUNT);

Die Noise-Werte werden aus einer kontinurierlichen Perlin-Noise-Textur ausgelesen

Lichtquelle

Cubemap mit Lichttextur

Parallaxenverschiebung
(Lichtqulle bewegt sich
langsamer als Ballonoberflache)

Eigenhändige Berechnung

der Textur-Koordinaten

Muss auch im Shader implementiert werden!

Implementierung

vertex-shader

vec3 pos = (modelMatrix * vec4(position, 1.0)).xyz;
v_QubeMapPos = pos - cameraPosition * 0.5;

fragment-shader

vec2 uv = vec2(0.0); 
vec3 qubeUv = normalize(v_QubeMapPos); 
float maxVal = max(abs(qubeUv.x), max(abs(qubeUv.y), abs(qubeUv.z))); 
qubeUv = qubeUv / maxVal; 
if (abs(qubeUv.x) > 0.999) { 
    uv = (qubeUv.yz * 0.5 + 0.5) / 3.0; 
    if (qubeUv.x < 0.0) { uv.y += 1.0 / 3.0; } 
} else if (abs(qubeUv.y) > 0.999) { 
    uv = (qubeUv.xz * 0.5 + 0.5) / 3.0; 
    uv.x += 1.0 / 3.0; 
    if (qubeUv.y < 0.0) { uv.y += 1.0 / 3.0; }
} ...