A-Frame : Web XR Animation Testing Scene & Overview
Tags: aframe, javascript, webdev, devjournal
Published: 2022-06-26 05:05:17

<span id="#articleText">

<h2>Table of Contents</h2>
<a href="#summary" target="_blank">Summary</a>
<a href="#controls" target="_blank">Controls</a>
<a href="#what-to-do" target="_blank">What to Do</a>
<a href="#animations" target="_blank">Animations</a>
<a href="#components" target="_blank">Components</a>
<a href="#favorites" target="_blank">Favorites</a>
<a href="#difficulties" target="_blank">Difficulties</a>
<a href="#future-builds" target="_blank">Future Builds</a>

<!-- Demo -->
<h3><a href="https://mintycrisp.com/xr-animation-testing-playground-aframe-fullscreen-share.html" target="_blank">Open Demo &gt;</a></h3>
<!-- Line Break -->
<hr />

<h2 id="summary">Summary</h2>
<p>An experimental scene filled will many different types of animated properties and material tests for visual references.</p>
<!-- Line Break -->
<hr />
<h2 id="controls">Controls</h2>
<div class="row">
<div class="col-6 col-12-medium">
<h4>View Cursor Movement</h4>
<ul>
	<li>Desktop - Mouse</li>
	<li>Mobile - Gyro / Swipe</li>
	<li>VR - Headset</li>
</ul>
</div>
<div class="col-6 col-12-medium">
<h4>Movement (Desktop Only)</h4>
<ul>
	<li>Desktop - Keyboard [WASD]</li>
</ul>
</div>
</div>

<!-- Line Break -->
<hr />

<h2 id="what-to-do">What to Do</h2>
<p>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. All animations avoid the bool type which are merely timed on / off switches.</p>

<!-- Line Break -->
<hr />

<div class="row">
<div class="col-6 col-12-medium">
<h2 id="animations">Animations</h2>
<h4>Entity Properties with Tween Support</h4>
<ul>
	<li>Rotation</li>
	<li>Position</li>
	<li>Scale</li>

	<li><strong>Material &gt;</strong> Emissive Color</li>
	<li><strong>Material &gt;</strong> Emissive Intensity</li>
	<li><strong>Material &gt;</strong> Color</li>
	<li><strong>Material &gt;</strong> Opacity</li>

	<li><strong>Light &gt;</strong> Color</li>
	<li><strong>Light &gt;</strong> Angle</li>
	<li><strong>Light &gt;</strong> Intensity</li>
	<li><strong>Light &gt;</strong> Distance</li>
	<li><strong>Light &gt;</strong> Decay</li>
	<li><strong>Light &gt;</strong> Penumbra</li>

</ul>
</div>
<div class="col-6 col-12-medium">
<h4>Geometry Properties with Tween Illusion</h4>
<p>Geometry animation is very heavy on performance as it creates new mesh on every tick, but used minimally could look very cool.</p>
<ul>
	<li><strong>Geometry &gt;</strong> Depth</li>
	<li><strong>Geometry &gt;</strong> Height</li>
	<li><strong>Geometry &gt;</strong> Q</li>
	<li><strong>Geometry &gt;</strong> P</li>
	<li><strong>Geometry &gt;</strong> Phi Length</li>
	<li><strong>Geometry &gt;</strong> Radius</li>
	<li><strong>Geometry &gt;</strong> Radius Top</li>
	<li><strong>Geometry &gt;</strong> Radius Tubular</li>
	<li><strong>Geometry &gt;</strong> Segments</li>
	<li><strong>Geometry &gt;</strong> Segments Height</li>
	<li><strong>Geometry &gt;</strong> Segments Width</li>
	<li><strong>Geometry &gt;</strong> Segments Depth</li>
	<li><strong>Geometry &gt;</strong> Segments Phi</li>
	<li><strong>Geometry &gt;</strong> Segments Radial</li>
	<li><strong>Geometry &gt;</strong> Segments Theta</li>
	<li><strong>Geometry &gt;</strong> Segments Tubular</li>
	<li><strong>Geometry &gt;</strong> Theta Start</li>
	<li><strong>Geometry &gt;</strong> Theta Length</li>
	<li><strong>Geometry &gt;</strong> Vertex A</li>
	<li><strong>Geometry &gt;</strong> Width</li>

</ul>
</div>
</div>

<div class="row">
<div class="col-12 col-12-medium">
<h4 id="components">Public Components</h4>
<ul>
	<li><a href="https://github.com/aframevr/aframe/" target="_blank">A-Frame 1.3.0</a></li>
	<li><a href="https://github.com/n5ro/aframe-extras" target="_blank">A-Frame Extras 6.1.0 </a></li>
	<li><a href="https://github.com/supermedium/superframe/tree/master/components/animation-timeline/" target="_blank">A-Frame Timeline 2.0.0</a></li>
	<li><a href="https://github.com/zcanter/aframe-gradient-sky" target="_blank">A-Frame Gradient Sky</a></li>

</ul>
</div>
</div>

<!-- Line Break -->
<hr />

<div class="row">
<h2 id="favorites">Favorites</h2>
<p>That lights are so animateable. Practically every property can be tweened and really has the potential for some fascinating light shows and effects.</p>

</div>

<!-- Line Break -->
<hr />

<div class="row">
<h2 id="difficulties">Difficulties</h2>
<p>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.</p>
<p>And finding out Geometry animations being so heavy. This scene has way too much of it, but it's okay for a test scene. </p>
</div>
<!-- Line Break -->
<hr />

<h3 id="future-builds">What I want to build upon this, in the future...</h3>
<blockquote>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.</blockquote>
<!-- Line Break -->
<hr />

<div class="row">
<h2>Thank you for your time!</h2>
<li>More <a href="https://dev.to/mintycrisp">Dev</a> Articles</li>
<li>My homepage <a href="https://mintycrisp.com" target="_blank" >mintycrisp.com</a></li>
<li>View my <a href="https://github.com/Minty-Crisp" target="_blank" >Github</a> Repositories</li>
<li>Peruse my <a href="https://twitter.com/minty_crisp" target="_blank" >Tweets</a></li>
<li><a href="https://ko-fi.com/mintycrisp" target="_blank" >Ko-fi</a> tips if you enjoy my work</li>
<h2> - Minty Crisp ^-^</h2>
<a href="https://mintycrisp.com/xr-animation-testing-playground-aframe.html"><img src="http://mintycrisp.com/assets/img/logo-tiny.png"></a>
</div>

<!-- End Article Text -->
</span>