Augmented Reality

by Henry Kroll, III.

Web browsers support hardware-accelerated 3D. Virtual reality (VR) headsets are everywhere. Augmented reality (AR) is poised to deliver extra dimensions of user-friendliness, fun, and interactivity. AR seeks to improve upon reality by adding 3D computer visuals. So what?

Unfortunately, we still think of AR as something separate from web browsing. It's not. But, up until this point, AR has been implemented as a separate app or web page. It is displayed in its own box. Models do not float over, integrate with, or become part of the web page. Like, perhaps they should.

In this page, we have implemented AR in a totally new and revolutionary way. But as usual, our innovations will be ignored by search engines. With our code, 3D objects become integrated as part of a web page. They may be manipulated with the usual CSS transitions, animations and effects. As might be expected, these attention-getting gadgets may be spun around and viewed from any angle with a mouse or touchpad. Individual parts of each model can have programmed, interactive behaviors and javascript events. Use them to introduce products, provide an immersive, "hands-on" education, or just share ideas and concepts in an interactive way that traditional web pages with videos and animations can not provide. In most cases, 3D objects have smaller file sizes than comparable videos, thus saving bandwidth and providing for faster page load times.

But this is by no means the limit of what AR can do. We hook up each object's look, behaviors, and actions to the web page's document object model (DOM). So web developers can take full control with their creativity, attaching events to geometry, or manipulating every aspect of a model's functionality. These 3D Elements are programmable with JavaScript to perform actions such as, for example, sitting or standing on command, or maybe launching into a sales pitch. Think, instead of ads, virtual sales people walking out onto the page and introducing products, showing off their functionality. Make avatars react to events, such as someone attemptint to leave before a form is filled out completely. Or they could trigger info boxes, audible notifications, or other page actions depending on what part of the model is clicked.

Blender 2.8 is the best, free application to create models. Or import them from vast online libraries. Add texture, camera, and lights, and bake in a few keyframe animations or triggerable actions. Then export the scene to .gltf format. Our scripts are aware of embedded camera angles, lights, textures, and animations, so characters look and act more or less the same as they do in Blender.

Where you go from here is up to you. You can have avatars that interact with visitors. Introduce new features of the website. Showcase products in new and interesting ways. Make games using simple JavaScript and HTML. Individual components of each model are responsive and actionable. Attach JavaScript events to parts of models or scenes as they unfold. Do things that can not be done with flat images or animations.

---