Latest news about Bitcoin and all cryptocurrencies. Your daily crypto news habit.
A few months ago I joined Halo Labs to help build our AR/VR design and prototyping platform. After the first interview, I received a ātake homeā exercise, to build a simple VR scene. While I was excited to build a VR app for the first time, I was also a bit afraid. Iām coming from a web development background and I never worked on a VR project before. To my surprise, it took me roughly three hours to finish the exercise, and it even looked pretty good (well, at least toĀ meā¦).
Over the past six months, whenever I told someone that Iām developing a VR product using Web technologies, I got puzzled looks. The first annual WebXR week will take place in two weeks, and I thought itās a great time to show web developers that VR & AR + Web technologies =Ā ā¤.
The main goal of this post is to allow Web developers to enter the AR/VR world quickly and easily. The approach I have taken is not to write a guide about a specific technology or library, but rather to build a ācurriculumā that will take you from zero to expert, so you would be able to build complex AR/VR experiences. Even if you donāt plan to develop AR/VR experiences, reading this guide will give you a glimpse into the current state of the WebXR world. LetāsĀ begin.
Starting the journeyāāāGetting to know the VRĀ world
Before we begin, letās line up the terms: Virtual Reality is the use of computer technology to create a simulated environment, so when you are in VR, you are viewing a completely different reality than the one in front of you. Augmented Reality (AR) on the other hand, is an enhanced version of reality created by adding digital information on your real-life reality (like in Pokemon GO). The term XR is often used to described any of theĀ two.
While you could easily skip this step and jump directly to the WebVR frameworks, investing some time learning the basics of the XR world will greatly improve your learning speed and understanding down theĀ road.
The following resources will help you gain some background on VR and AR development, as well as the required (very basic) mathematical background:
- Introduction to Virtual Reality course by UdacityāāāThis free course is a great place to start. The course introduces the main VR platforms available today and explains how they work while teaching some basic (but important!) VRĀ terms.
- VR/AR GlossaryāāāKnowing the meaning of those basic XR terms will help you better understand articles and XR frameworks documentation. Another good resource is The VR Glossary website. I really like their infographics section, as it helped me to get my head around some VR terms andĀ topics.
- Basic 3D mathāāāThe subject I was most afraid of when I entered the VR world was math. Iām not a big math fan, and I thought that dealing with 3D requires a thorough math knowledge. Luckily, it turned out that I was wrong. The frameworks Iāll present below are relatively āhigh levelā and doesnāt require any mathematical background. From my experience, the only important thing to know before moving on is the difference between the left and right-handed coordinate systems.
Rendering 3D content on theĀ web
Now that we have some basic understanding of the XR world, we can start looking at XR web frameworks. The main framework for XR development is A-Frame (supported by Mozilla). The next section will go deeper into A-Frame, but before that, itās important to understand how A-Frame is built in order to use it effectively. Letās diveĀ in!
In 2007, Mozilla first introduced Canvas 3D, which allowed rendering interactive 3D graphics on the web. The next step was to expose an API, and by 2009 The Khronos Group started the WebGL Working Group. The first version of the specification was released in 2011.But what exactly is WebGL? to quote fromĀ Mozilla:
WebGL enables web content to use an API based on OpenGL ES 2.0 to perform 2D and 3D rendering in an HTML canvas in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and shader code (GLSL) that is executed on a computer's Graphics Processing UnitĀ (GPU)
In short, WebGL is an API that enables rendering 3D content in the browser, without the need to use plug-ins.
Today, all main browsers support the WebGL API, so we can safely use it to render 3D content on the web. The main problem? writing WebGL is hard and tedious. Itās enough to see the amount of code required to display simple 2D shapes to get discouraged. The solution? using Three.js.
The aim of the project is to create an easy to use, lightweight, 3D library. The library provides <canvas>, <svg>, CSS3D and WebGL renderers.(
Disclaimer
The views and opinions expressed in this article are solely those of the authors and do not reflect the views of Bitcoin Insider. Every investment and trading move involves risk - this is especially true for cryptocurrencies given their volatility. We strongly advise our readers to conduct their own research when making a decision.