GitHub Dev Twitter Ko-Fi

XR Animation Testing Playground

Full Screen >

Summary

An experimental scene filled will many different types of animated properties and material tests for visual references.


Controls

View Cursor Movement

  • Desktop - Mouse
  • Mobile - Gyro / Swipe
  • VR - Headset

Movement (Desktop Only)

  • Desktop - Keyboard [WASD]

What to Do

Use the View Cursor to look around the 360 environment of the various animations to get an idea of what kind of animations can look smooth through their cycles. Avoiding the bool type which are merely timed on / off switches.


Animations

Entity Properties with Tween Support

  • Rotation
  • Position
  • Scale
  • Material > Emissive Color
  • Material > Emissive Intensity
  • Material > Color
  • Material > Opacity
  • Light > Color
  • Light > Angle
  • Light > Intensity
  • Light > Distance
  • Light > Decay
  • Light > Penumbra

Geometry Properties with Tween Illusion

Geometry animation is very heavy on performance as it creates new mesh on every tick, but used minimally could look very cool.

  • Geometry > Depth
  • Geometry > Height
  • Geometry > Q
  • Geometry > P
  • Geometry > Phi Length
  • Geometry > Radius
  • Geometry > Radius Top
  • Geometry > Radius Tubular
  • Geometry > Segments
  • Geometry > Segments Height
  • Geometry > Segments Width
  • Geometry > Segments Depth
  • Geometry > Segments Phi
  • Geometry > Segments Radial
  • Geometry > Segments Theta
  • Geometry > Segments Tubular
  • Geometry > Theta Start
  • Geometry > Theta Length
  • Geometry > Vertex A
  • Geometry > Width

Favorites

That lights are so animateable. Practically every property can be tweened and really has the potential for some fascinating light shows and effects.


Difficulties

The anchor point of an entity always being dead center. It's not adjustable within A-Frame from my research and I could not find a component or a ThreeJS way I could integrate to tweak that anchor position. It made animating something growing or shrinking in 1 direction very difficult, for example. The blue bar growing and shrinking has 2 animations. 1 for growing and 1 to animate the position in attempt to compensate as if it's anchor point was on the left edge. It does not look very good too.

And finding out Geometry animations being so heavy. This scene has way too much of it, but it's okay for a test scene.


What I want to build upon this, in the future...

So many more possibilities for built-in animations especially if creating a manual animation component in javascript. Something like making a typewriter reveal effect for text display. There are also a good amount of additional Javascript frameworks like ammo.js and anime.js that can be integrated, but also smaller abstract ones like that many vtubers use to rigify their body to a 3D avatar via camera. Translating something that into the XR ecosystem would be a huge boon for it's immersive qualities.

< Previous

^ Top

Full Screen >