top of page
  • Writer's pictureSteve

A-Frame and 2D Metaverse Code

Updated: Mar 23, 2023



Who Cares?

Why this article? So what about the "Meta" verse? What's that? Big deal. Well, you should care. Stay with me here while I wade through my history and reasons why you should. If this bores you skip to the last paragraph and maybe download the PDF and read that.

Are you a web designer with limited space on your site? A-Frame could infinitely give you web space by using Z-Space where normal websites only use X and Y space. Imagine going to a page and suddenly moving forward through space with a mouse click? No, not in VR or XR but still in 2D on a webpage. What about using A-Frame for animation? This is possible as well. Need proof? Head over to https://aframe.io and watch the animation that loads on the main page, this is A-Frame animation. See also the responsive AI demo for mouse interactivity here: https://aframe.io/examples/showcase/responsiveui/. See the bottom of the article for links to my 2D experiments.


Back Story

Ever since I was little I was fascinated by animation and cartooning. At the age of five I had decided that I wanted to be an animator and work at Disney studios.


In 1987 I went to school for graphic design in order to be able to use my ability to draw and illustrate. I thought maybe I could design my own ads using my skills and I did just that. In 1991 I saw the Internet for the first time while doing graphic design at public television and for the Mac Lab at the University of Wisconsin. I convinced my boss to allow me to build websites for the University and that was approved due to some unusual political issues happening at the same time. It wasn't easy at the time to convince anyone because website programming was considered only an engineering thing. The Governor of our State wanted each university department to prove or validate that they were a needed part of the system otherwise face elimination.


The Web Starts

I also explained that we should set the design standards for websites making the system cohesive with one design standard. At the time every department that had a web page had a student design and program something completely different. So, I was authorized to learn HTML and web design in 1991, I actually already had taught myself. It was an odd time where most people thought the Internet was a fad if they understood it at all. I argued with many about a range of topics, that video would go through the internet in the near future and that speeds would increase. These were debates with engineers and they thought it was impossible and not ignorant people. So today when I hear engineers say that StarLink from SpaceX isn't a threat to ground based optical fiber internet I see history repeating itself. StarLink will destroy ground based internet.


Flash appears on the scene

Fast forward to the late 1990s. I was still doing web design but had moved to Boulder, Colorado. I had kept up with HTML updates and learned JavaScript when that came out. I was trying to get THOR24, the travel service I worked for, to update their core offerings in order to save the company. When I started I was hired to complete 1400 web pages for each of the travel agencies they serviced. They had offered the travel agencies a website or webpage. Back in 1997 that was a big deal. But, some of the more savvy travel agencies realized that they no longer needed a service like THOR. The Internet made it possible to leapfrog over the service they used to pay for. With a website and email travelers had a way to contact the agency directly. When I realized THOR wasn't interested in upgrading I started speaking with online travel services that I thought might need a phone service that THOR offered. Maybe, I thought, they would be interested in buying them out. I did this in order to save the travel agent's jobs.


At the same time THOR had a travel service for Hotels. We had a printed list of preferred hotels and special pricing that member agencies could offer. We started putting the printed yearly catalog of hotels and special rates online. I started thinking that if we offered hotels the ability to have pictures or video of their rooms they would pay more for that service. So, I started calling video companies in the area. This is when I ran into Walter Breakell. Walter wanted to do the work and was excited about the idea. He asked about me and what my interests were and I told him I had always wanted to do animation. He mentioned this program called Future Splash Animator re titled Flash and sent me a copy of the program on CD. At the time Flash was a desktop animation program and not a web standard like it eventually became a month or two later. While I was learning Flash I looked up on the web any information I could find and literally Adobe had bought Flash and it was announced as a web standard file format. So, I could do animation and place it in a page. Few browsers supported it yet but I learned it anyway. It was an amazing thing to be able to make an animation and export it as a program that played on your desktop and also as a format like a GIF that embedded into a page. When my sister, Anne, worked on the Simpson's and eventually Universal animation I talked up Flash to the animators trying to get them to use it and go direct to the Web with their ideas. It was cool to be so ahead of everyone and share my ideas.


Early VR Fail

I also tried out desktop VR at the time but that required a download of a program and was more complicated so I didn't see that working. I did see some examples that looked like a primitive game where you could walk through scenes. I mentally put it away thinking that I could also do this in Flash and it would load faster.


Now it gets interesting

Fast forward to 2012. I was trolling kickstarter.com and came across the Oculus VR headset. Yes, that's right, 2012 is when Oculus setup it's KickStarter campaign. In 2013 I submitted a proposal to my company, The Cable Center, to create a VR version of our building. I explained that we could make it a virtual meeting place for the entire cable industry. The Cable Center approved the proposal and you can read about that here in the PDF.


VRArticleBroadband2016_compressed
.pdf
Download PDF • 1.40MB

The last paragraph

Well, I see you skipped the entire blog post. Smart. Still, download the PDF. At any rate. I have looked at market forces and if you read any of my blog post you see that I am right most of the time when I study trends. I have to be right in order to stay ahead of the curve. I consider it part of my job.


The Metaverse is supposed to be open, right? A free space. What is the Internet? Mostly free. Add Web3.0 and a new web protocol called IPFS and it will be free. But I will save that for another blog post. Now, look at A-Frame, HTML that describes virtual reality in a web page. A-Frame is based on a JavaScript library named Three.js. Three.js is code based on a web ported gaming engine code called WebGL. WebGL is so complex that you need to write about one hundred lines of code just to make a cube rotate. Trust me I wrote this thing and it was like working in straight C++. Three. js drops the code lines down to maybe ten lines of code. But, A-Frame is one or two lines of code.


As a side note you might want to get a decentralized domain name (love altcoins and tokens) by heading over to unstoppabledomains.com.


Links




Final thoughts

I looked at A-Frame long and hard and over the years thought it would go away many times. It had lost support but then the community restored it. I am starting to think it may be a way to maintain an open version of the Internet. Maybe the program A-Frame made with JavaScript that visually builds spaces named A-Frame Inspector will be the start of a robust program that auto updates and allows for visually building environments. Anyone want to help pay for this let me know. A-Frame has open sourced the code on GitHub. Download it here.


Experiment Links

https://codepen.io/luiting57/pen/rmrJEm (Applying HTML text to a 3D space)

https://codepen.io/luiting57/pen/qmRZdK (Teleportation using mouse cursor with gaze)

https://codepen.io/luiting57/pen/GRXYvBO (Simple mouse click to spin cube)

https://codepen.io/luiting57/pen/ExwdKzE (Mouse movement in 2D space onClick Test)

https://codepen.io/luiting57/pen/MrWEdv (play and pause video test)

https://codepen.io/luiting57/pen/eWrRao (Mouse tests for 2D 3D space movement)

https://codepen.io/luiting57/pen/vmapPZ (Change camera position on mouse click)

https://codepen.io/luiting57/pen/BaOGXyL (Delete video and restore on mouse click)

https://codepen.io/luiting57/pen/mdGQNvW (Embedding VR in a webpage like an image)


Education







45 views0 comments

Comments


bottom of page