What is A-Frame.io

What is aframe?? Before i get this i like to ask from you, Did you ever have get a virtual reality? Someones are Yes! or Not!, Do you like to get that experience? So here it is.

A-Frame is a web framework for building virtual reality (VR) experience. This web frame is an open source webframe work who can develop many things. It is primary maintained by Mozilla and WebVR community. But originally from Mozilla. A-Frame was developed to be an easy but powerful and easy way to develop VR content. As an open source project, A-Frame has grown to be one of the largest and most welcoming VR communities.

A-Frame is based on top of HTML, simple to get started. But A-Frame is not just 3D scene graph or markup language. It is an entity component system framework for three.js where developers can create 3D WebVR scenes using HTML.

Nowadays HTML provides a familiar tool for web developers and designers while incorporating a popular game development pattern used by Game engines such as Unity.

A-Frame supports most VR headsets such as Rift, Vive, Windows Mixed Reality, Daydream, Cardboard, GearVR and can even be used for augmented reality.
Although A-Frame supports yhe whole spectrum but A-frame aims to define fully immersive interactive VR experience that go beyond 360º content, making full use of positional tracking and controllers.

History

As i mentioned before A-Frame was developed by Mozilla VR team during mid-to-late 2015. A-Frame crew was Deigo Marcos, Josh Carpenter, Casey Yee, Chris Van Wiemeersch and kevin Ngo. A-Frame's public release was on December 16, 2015.

Benifits

1. 3D and VR content authoring with HTML without buils steps.
2. Visual inspector tool that can be invoked in the browser from any live A-Frame scene.
3. Compatibility with most existing web libraries and frameworks (React Js, Angular Js, D3.js, Vue.js).
4. Setup of scene with one line of HTML (<a-scene>) to handle canvas renderer, render logo, lights, controls, WebVR setup.

Now the interesting part begin here!

Getting Started

A-Frame can be developed from a plain HTML file without having to install anything. There is a great way to try online code editor, that instantly hosts and deploys for free (try it now) and also you can download it on github.

The installation page provides more options for getting started with A-Frame.
To get started learning A-Frame, check out A-Frame School for visual setup-by-setup lessons to complete documentation.

First create an .html file and include A-Frame in the <head>
Here are some examples,

1. Hello WebVR Code

</a-cylinder>

      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4 </a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
</body>
</html>

Hello WebVR code with Preview

A-Frame tutorial, Hello WebVR

2. Shopping

There is another example, it is called Shopping.

and short video,

Here is the code to Shopping,

Some pictures of it,

figure 1

figure 2

Features of A-Frame

1. VR Made Simple
Just drop in a <script> tag and <a-scene>. A-Frame will handle 3D boilerplate VR setup and default controls. Nothing to install, no buils setups.

2. Declarative HTML
HTML is easy to read, understand and copy-and-past. Being based on top of HTML, A-Frame is accessible to everyone, such as web developers, VR enthusiasts, artists, designers, educators etc.

3. Cross-Platform VR
Build VR applications for Vive, Rift, Windows Mixed Reality, Daydream, Gear VR and Cardboard with support for all respective controls. Don't have a headset or controls? don't worry it is work on standard desktop and smart phones.

4. Entity-Component Architecture
A-Frame is a powerful three.js framework, providing a declarative, compostable, reusable entity-component structure. HTML is just the tip of the iceberg; developers have unlimited access to JavaScript, DOM API's, three.js, WebVR, and WebGL.

5. Perfomance
A-Frame is optimized from the ground up for WebVR. While A-Frame uses the DOM, it's elements don't touch the browser layout engine. 3D object updates are all done in memory with little overhead under a single requestAnimationFrame call. For reference, see A-Painter, a Tilt Brush clone built in A-Frame that runs like native(90+FPS).

6. Tool Agnostic
Since the web was built on the notation of HTML, A-Frame is compatible with most libraries, frameworks and tools including React, Preact, Vue.js, d3.js, Ember.js,jQuery.

7. Visual Inspector
A-frame provides a built-in visual 3D inspector. Open up any A-Frame scene, and hit <ctrl>+<alt>+i

8. Components
Hit the ground running with A-Frame's core components such as geometries, materials, lights, animations, models, ray casters, shadows, positional audio, text and Vive | Touch | Windows Motion etc.

For more details refer A-Frame.

~Randika Madhushan

Comments

Alternative FOSS Software for Popular Premium Software

In the present software has become more expensive than hardware parts, normally we can buy average laptop under $500 but we have to spend nearly $200 just only for operating system. We all know operating system cannot fulfill all our computerized needs, so we have to buy other software too. Most of people used to use popular software because they can easily find tutorials for popular software and the developers of those software invest more money for their advertising. A considerable amount of computer users do not pay for their software, they use cracks, patches and different kind of technologies to use premium software without paying. Most of those cracks and patches are not 100% clean they comes with spyware , adware etc... We can use open source software instead of using cracked premium software. Here are some best alternative software for popular premium software. Ardour Ardour is good alternative for audio recording and editing software

Introduction To Linux Shell Scripts

I hope everyone heard about Linux Operating System before. Like other Operating Systems Linux also is made of many components. But here to get an Introduction to the Linux Shell Scripts, we need to know about its major/important components Kernel and Shell . We studied that Operating System is a software that manages computer Harware and provide an interface between Computer Hardware and Users/Softwares. Kernal is the component/program responsible for first task of an OS, that is managing computer Hardware. And Shell is the component/program responsible to provide the interface for the users/softwares with hardware. We can graphically get an idea of it as shown in following Image. Kernal and Shell of Linux OS Let's see about Linux Shell more in details. A shell is program which acts like an interpreter. It convert human readable commands received from input devices into something which kernel can understand. The shell starts to run when a user logs in or pr

What is Blockchain Technology ? An Introduction for Beginners

You all may have know or have heard about Bitcoin or other cryptocurrencies names. Those all digital currencies are reference to Blockchain Technology. Simply, Blockchain is a critical element of cryptocurrencies. Because without Blockchain, Bitcoin or other cryptocurrencies would not exist. Cryptocurrencies was a concept of the domain of cryptography and data structure in computer science. Merkle tree or hash tree is the primitive form of the Blockchain. Ralph Merkle introduced this data structure in 1979. A series of data records (a secured chain of blocks) was created using this Merkle tree and each connected to the one before it. When we create a new record in this chain, that record would contain the history of the entire chain and that's how the Blockchain was created. Distributed blockchain was intoduced by Satoshi Nakamato in 2008 and this was the backbone of Bitcoin. Let's try to undersatnd how blockchain works. Blockchain always keeps a record of

First Step to Open CV (Open Computer Vision Library) Part 1

Introduction Hello , I am going to setup the Open CV on windows OS. Open CV is in under open-source BSD license. Originally developed by Intel and this is supports the deep learning frameworks like TensorFlow. OpenCV's application areas include: 2D and 3D feature toolkits Egomotion estimation Facial recognition system Gesture recognition Human–computer interaction (HCI) Mobile robotics Motion understanding Object identification Segmentation and recognition Stereopsis stereo vision: depth perception from 2 cameras Structure from motion (SFM) Motion tracking Augmented reality It is written by mainly C++ interface and supported C++,python,java even android package,Matlab,C# for development. Therefore this tutorial I am going to use python language. Installations If you haven't already installed python get it here (My version is 2.7) and install it. Then Download and install OpenCV here (My version is Open CV 2) Configure system variable

What is open source?

The term "open source" refers to something people can modify and share because its design is publicly accessible. The term originated in the context of software development to designate a specific approach to creating computer programs. Today, however, "open source" designates a broader set of values—what we call "the open source way." Open source projects, products, or initiatives embrace and celebrate principles of open exchange, collaborative participation, rapid prototyping, transparency, meritocracy, and community-oriented development. What is open source software? Open source software is software with source code that anyone can inspect, modify, and enhance. "Source code" is the part of software that most computer users don't ever see; it's the code computer programmers can manipulate to change how a piece of software—a "program" or "application"—works. Programmers who have access to a computer progr

Getting started with Git.

What is Git? Git is a version control system (managing changes of documents) for tracking changes in computer files and coordinating work on those files among multiple people. It is primarily used for source code management in software development, but it can be used to keep track of changes in any set of files. It is used to keep track of revisions of the work done and also it allow a developer or developing team to work together on a project. Git was created by Linus Torvalds who was a Finnish-American software engineer in 2005 for development of the Linux kernel which is is an open-source monolithic (operating system architecture) Unix-like computer operating system kernel. The Three Stages Git has three main states that your files can reside in they are committed, modified, and staged: Committed means that the data is safely stored in your local database. Modified means that you have changed the file but have not committed it to your database yet.

FOSS Geeks

Search This Blog