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