According to Techcrunch recent article in June 2016, Virtual Reality (VR) is the next big thing. Facebook also made the bold move to acquire Occulus Rift, which is a company that designs VR headsets, for a staggering $2 billion. All data indicate that VR is the next big wave of change in the Media landscape. We've witnessed an exponential growth in availability of apps in the decade following commercial production of tablets and smart mobile phones. We can foresee that in the next decade, innovation in VR will also grow exponentially and websites will have a VR version that will allow users to view from their mobile devices+headset. As the hardware is currently getting more popular and sales are on the rise, there will be a demand for VR online applications.
The course was designed to teach the students about the latest technology for developing VR websites and the easiest way to make a start in designing such websites. The easiest technology that a developer or a newbie to use to make VR websites is the A-frame, developed by Mozilla. Although this technology is at an early stage, it is slowly gaining popularity. But it would require more developers to use it and build websites with the technology in order to further develop a systematic design methodology.
The first section is about using A-Frame and building on various tags to give the student to knowledge and skills to understand and use varioius objects on a VR scene. In the next sections , you will learn simple animations and use of cursors.
The course ends with simple projects such a Multicolored bubbles, Interactive Hotel rooms view and VR shopping page.
This is your first Hello World page designed with A-frame. It is adding a simple Box primitive to the page using one line of code and sourcing the correct library.
Following up on the Helloworld page, we will modify the color attribute using the names of the colors and also using their Hex codes. We will also make use of images as material for the objects.
To revis about Basic A-frame Syntaxes
A background image can be set using the <a-sky> tag. This lesson how to add a background and also shows the difference between adding a normal picture and an equirectangular image.
An entity has an opacity of 1 by default i.e it is fully opaque but transparency can be added through the use of opacity attribute. Opacity takes a value of 0 to 1 and 0 being completely transparent.
A sphere is a useful basic shape which can take colors and images as materials for rendering.
This lesson continues with add the geometric shapes Tetrahedron, Octahedron and Torus.
Test about Object Primitives
A position attribute is available for all entities by default and this allows the developer to place entities anywhere in the three dimensional space.
The rotation attribute is very useful to create animation and it is available to all entities by default. Rotation attribute allows any entity to be rotated in the three dimensions using vec3 string. A rotation of "45 90 0" means a rotation of 45° in the x-axis, 90° in the y-axis and 0° in the z-axis.
Scale is also inherently available in all entities. It allows entities to be scaled in the three dimensions. The scale take property value in vec3 format where "1 1 1" means exact scale and "2 1 1" would mean stretched in the x- dimension by twice.
Questions related to Position, Scale and Rotation
Assets Management System is used in 3D animation to ensure that resources are already loaded when rendering of the object is being done. A-frame also has its Assets Management System and it allows pre-loading of Video, Images, Sounds and other Object Models using simple tags. These resources can then be used by referring to their ID's.
The Material is a component of an entity or primitive and a Video can also be used as the material. This gives very cool effects like e.g a sphere or cube playing a video.
In the Virtual Reality world, curved surfaces are useful to display information because they allow the user to view the whole surface at the same distance if correctly positioned. An image on a large flat surface may appear distorted on the far edges.
A handy feature is to easily display images and videos on plane surfaces. This is easily done in one-liners in A-frame. These surfaces can be rotated and positioned in any way required.
As WebVR developers, you will work with 360 Video with the increasing popularity of 360 Video Recorders. With A-frame it very easy to add objects in the scene while a 360 Video is playing in the background. This lesson teaches you how to set a 360 Video as Background.
This lesson will teach you how to add certain components to 'blank' entities and set the values of properties associated with the components.
OBJ (or .OBJ) is a geometry definition file format first developed by Wavefront Technologies. This lesson teaches how to download Wavefront models and place them in the A-frame scene.
WebVR - Using Waterfront models design Virtual Reality websites as it gives the developer easy access to 3D models and A-frame gives the flexibility to use them as normal entities. With simple attributes, the models on the scene can be scaled, moved and rotated.
Basic animation can be run using <a-animation> tag. For basic animation, no script is required. It requires to set which attribute to animation e.g if position attribute is used to animate, the entity to which the animation is applied will move across the scene. If the rotation attribute is used, the entity will rotate.
PHP is used as Server Side scripting. It is the language that is used to create dynamic pages at the Server. This lesson shows how to use PHP to dynamically create any A-frame entities. The simple example used here is to generate a series of similar entities but spaced out in the 3D scene.
Ajmir has been an electronics/programming/science hobbyist since the age of 12 and obtained his Bachelor in Electronics and Communication Engineering from the University of Mauritius in the year 2001.
After graduation he attended a short course in Web Design, where he learned HTML, PHP and Java.
He has worked at various positions in the Electronics Industry, including Sales Engineer for electronic instruments, Lecturing in Power Electronics and Data Communication, Test Engineer and Debugging boards for UK Road Signs.
Ajmir worked for nearly 7 yrs at Xilinx in Dublin, Ireland as a Product Applications Engineer, supporting Xilinx FPGA Design Automation Software tools. He became a specialist in Synthesis tools/Timing Analysis at Xilinx. He also worked with Digital Signal Processing on FPGA. While at Xilinx he had the chance to meet very interesting people in the industry and attended various courses. He was privileged to have provided support to major companies in the Electronics Industry and has been in touch with real life electronics designs.
Since 2013 he got curious and grew interested in building commercial Online Applications and completed a BSc in Digital Technology at the Digital Skills Academy in Dublin.
Ajmir is interested in Mathematical Modelling, Science, Arts and Philosophy.
He is passionate about imparting knowledge to others.