WebXR animation demos
Fireworks
10 Fireworks show.
To make "Peony" unit sphere of numPoints random
rounded points is used.
Sphere radius S is scaled linear with time.
"Chrysanthemum" (or "aster") is made by one rendering call of
numInst scaled instanced spheres:
r = r0 + st gl_InstanceID, r0 = S (1 - Δ),
st = S Δ / numInst
where Δ determines "fire arrow" relative length.
At last "Willow" points are just shifted as
dy = Dy r2 (see the black curve above).
VR fireworks by Magnus Lallassu
VR Fireworks
by Lee Stemkoski (Adelphi University)
Animated butterflies
Instanced 18 Butterflies animation.
EXT_texture_filter_anisotropic extension and
gl.LINEAR_MIPMAP_LINEAR texture filtering mode are used.
See also "Mimapped" Butterflies and
still Butterfly with comments.
Nightly Butterflies with particles effect.
Butterflies and fire animation.
"Skybox" and butterflies are rendered by the same shader.
2 Skybox textures are generated in
offscreen canvas2d. It is used for butterflies too :)
As I think, if you move (translate) your head in a 6DoF Oculus then "Skybox" (40x40x40 cube)
will be moved too (a little). They say that to remove translation from control matrices one
need to transform mat4 to mat3. Unfortunately, I can not test that in 3DoF Oculus Go.
See also beautiful Effects Animation Butterfly.
More Animations
Lissajous ribbons and
animated ribbons.
High Refresh Rate + Fixed Foveated Rendering Oculus test.
A remake of an old (2000) VRML model:
x = sin(ωxt + φx ),
y = sin(ωyt + φy ),
z = sin(ωzt + φz ).
Look at similar Paul Burke's
3D knots.
Old 2D animated Lissajous figures.
3 Animated Dolphins
(old "3 Dolphins" low polygons 3DS models from the Avalon Repository is used).
See also Animated Dolphin demo and
Little Dolphine WebGL game.
Particle systems
Fire,
Waterfall,
2000 Bubbles and
Fireballs demos use point primitives.
For particle sprites one can use point primitives or
billboards. Points are more simple and efficient.
Orientation of the points is tied to screen, so they rotate with the screen
if you tilt your head left or right (but it is not visible for me).
My old WebGL fire demo.
300 Spirits - motion blur demo.
20 particle sprites (point primitives) are used for every "spirit" to
make motion blur effect.
Tetrahedral and
cubic fractal sponges.
Hau kun's points demo
(WebGL test).
WebXR samples
updated 3 July 2020