Image for post: Web VR and Augmented reality resources

Web VR and Augmented reality resources

Let's introduce Augmented Reality and Virtual Reality. What are they? Is there any difference between them? Let's start reading something on Wikipedia about Virtual Reality. "Virtual reality (VR) is a computer-generated scenario that simulates experience". The are various fields of application and it's a very interesting topic for sure.
Augmented reality (AR) is a direct or indirect live view of a physical, real-world environment whose elements are "augmented" by computer-generated perceptual information, ideally across multiple sensory modalities, including visualauditoryhapticsomatosensory, and olfactory
Now let's see the tools and resources available.

A-Frame

A web framework for building virtual reality experiences

From the official website, A-frame is "A web framework for building virtual reality experiences.". You can use npm to install the framwork with NodeJs and even build an app with Angular or ReactJS. Here is and example of app of Angular  4 and Aframe.

Primrose

Rapidly prototype VR

Let's introduce Augmented Reality and Virtual Reality. What are them? Is there any difference between them? Let's start reading something on wikipedia about Virtual Reality. "Virtual reality (VR) is a computer-generated scenario that simulates experience". The are various fields of application and it's a very interesting topic for sure.
Augmented reality (AR) is a direct or indirect live view of a physical, real-world environment whose elements are "augmented" by computer-generated perceptual information, ideally across multiple sensory modalities, including visualauditoryhapticsomatosensory, and olfactory
Now let's see tools and resources available.

ARToolKit

Emscripten port of ARToolKit to JavaScript.

argon.js was originally designed to take advantage of the augmented reality capabilities of the Argon AR-enabled web browser on iOS, simplifying the process of delivering mobile AR experiences without the need to create, ship and support native applications.

ArgonJS

A javascript framework for adding augmented reality content to web applications

Augmented reality (AR) is the idea of mixing computer-generated media (e.g., 3D objects, 2D content, spatialized audio) with someone’s view of the real world. Whether you want to create a new AR application, or add an AR view to an existing web application, the argon.js framework provides a set of abstractions and utilities for adding an AR view to your web application in a platform- and technology-independent way.

argon.js was originally designed to take advantage of the augmented reality capabilities of the Argon AR-enabled web browser on iOS, simplifying the process of delivering mobile AR experiences without the need to create, ship and support native applications.

However, argon.js will also work with other web browsers, taking advantage of their capabilities to allow your application to deliver whatever kind of AR experience each browser is capable of. While the AR capabilities a most web browsers is currently minimal, they are improving rapidly, and argon.js is designed to support this evolution.

Want to dive and and start creating AR-enabled web applications? Check out the downloads below.

ARjs

Efficient Augmented Reality for the Web

ThreeJS

A 3D javascript library, Maybe you have heard about ThreeJS before. "Three.js can use WebGL to render your scenes on all modern browsers".

Three.js is a cross-browser JavaScript library and Application Programming Interface (API) used to create and display animated 3D computer graphics in a web browser.

HammerJS

Add touch gestures to your webapp.

Hammer is a open-source library that can recognize gestures made by touch, mouse and pointerEvents.

React 360

Create exciting 360 and VR experiences using React

React 360 is a framework for the creation of interactive 360 experiences that run in your web browser. It pairs modern APIs like WebGL and WebVR with the declarative power of React, producing applications that can be consumed through a variety of devices. Leveraging web technologies and the existing React ecosystem, React 360 aims to simplify the construction of cross-platform 360 experiences. See ReactJS and web VR examples

BabylonJS

A complete JavaScript framework for building 3D games and experiences with HTML5, WebGL, WebVR and Web Audio

PixiJS Game Engine

The HTML5 Creation Engine

Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.

Phaser

Desktop and mobile HTML5 game framework

A fast, free and fun open source framework for Canvas and WebGL powered browser games