Augmented Reality for JavaScript Developers

Augmented Reality for JavaScript Developers

English | MP4 | AVC 1920×1080 | AAC 48KHz 2ch | 4h 09m | 877 MB

Explore the limitless applications of AR. Build Efficient Augmented Reality Experiences Using web Technologies

Augmented reality is the idea of mixing computer-generated media with someone’s view of the real world. AR.js provides a framework and set of utilities to develop augmented reality applications efficiently just using web technologies.

This course will show the learning ropes on how to produce interactive augmented reality experiences with nothing but a set of web technologies such as JavaScript and HTML. We’ll start off with a basic introduction to Augmented reality experiences and an introduction to all the libraries and development tools that we are going to utilize in this video course. We’ll begin by setting up our basic structure for our very first AR web application using the AR.js framework. We then move on to setting up our camera feed to localize our AR markers. After that, we’ll deep dive into learning to overlay 3D content on top of our markers with three.js where we’ll learn to apply realistic lighting and shadows to the 3D objects that we create using the different camera controls provided by Three.js to effortlessly navigate around your 3D scenes. After getting our 3D right we’ll learn how to integrate both the 3D and our camera feed onto the screen. Towards the end of the video, we’ll create a couple of real-world AR web application to better apply our gained knowledge.Finally, we get started into building Projects such as a 3D business card and AR data histogram.

By the time we are done with the course we would be able to create AR applications with A-Frame along with AR.js and with awe.js and also create Business cards and Data histograms.

What You Will Learn

  • Explore various AR technologies and the differences between Augmented reality vs Virtual Reality.
  • Create a simple AR application with-Frame and AR.js and learn how to add animation to your objects
  • Work with technologies like Three.js to add different geometry, shades, lightings and camera angles to your model.
  • Build an extensive AR Applications with awe.js by creating scenes, objects and adding events.
  • Test your projects on different mobile platforms and explore if there are any compatibility issues.
  • Proceed to build your own customised business card and Data Histogram using AR.js, A-Frame, and awe.js
Table of Contents

01 The Course Overview
02 Overview of AR Development
03 AR Features Versus VR Features
04 AR Ready Devices
05 Course Topics
06 Setting up Our Project and Creating Our Scene
07 Object Meshes and Mesh Attributes
08 Adding Text and Animations to Objects
09 Adding Textures to Objects
10 Adding AR.js to Our Application
11 Discussing Three.js and Setting up Our Project
12 Creating a Basic Scene
13 Exploring Different Geometry Meshes
14 Creating Materials
15 Creating Shaders
16 Lights and Cameras
17 Loading a Model
18 Setting up, Creating the Load Function
19 Adding POIs, Projections, and Events
20 Creating a Case Statement with Conditionals
21 Adding Our Last Box and Create a Compatibility Error Message
22 Testing Our App
23 Going over Web Hosting with Heroku
24 Deploying Our AR.js and Awe.js Applications to Heroku
25 AR Web Applications on Mobile Browsers
26 Creating an AR Business Card with A-frame and AR.js
27 Creating an AR Histogram with Awe.js