Robots and Physical Computing: VR

Showing posts with label VR. Show all posts

Wednesday 11 July 2018

WebVR 3 Playtime: Augmented Reality

I am going to try to persuade you that using A-Frame it is not hard to do some simple Augmented Reality (AR) for free, via a browser, but that also can run on a mobile device.

Introduction
This is part of a short series of articles about some experiments with WebVR Web-based Virtual Reality - in this case based on the wonderful A-Frame (https://aframe.io) . In the first post WebVR playtime 1: Basics of setting up, images and rotating blocks, I looked at setting up a scene and then rotating an object. In the second post, recapped the basics, then look at adding video, 360 degree video, and models developed elsewhere.

In this post we are going to start looking at using WebVR as part of an augmented reality solution. I going to start by building on the great resource Creating Augmented Reality with AR.js and A-Frame by Jerome Etienne, creator of AR.js - the starting code below and the basis of the solution comes from that resource.

Getting started.
In the previous two posts I used Thimble from Mozilla, I had a problem with access my camera using Thimble so I switched to Glitch - you may need to register - and Codepen.io.

The code below was adapted from the Creating Augmented Reality with AR.js and A-Frame page.

<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>

<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs>



<a-marker-camera preset="hiro"></a-marker-camera>
</a-scene>

</body>
The first script line is the same as in the previous posts setting up the A-Frame WebVR. The second one adds the additional functionality for Augmented Reality via markers. The only other new feature is within the <a-scene></a-scene> tags, a new set of tags <a-marker-camera> saying which markers is being used; in this case, a preset one called Hiro (see below), which available in AR.js.

A blue box and text were added to the scene - just in the same way as adding boxes and text in the first of this series. Shown in code pen below

Using the Hiro marker go to https://codepen.io/scottturneruon/pen/gKVWYq to play!

Next Step
To take this forward I wanted to replace the text and box with some rotating text when the marker is visible. On the AR in action can be found at http://bit.ly/2N0nvWx; you will need the Hiro marker.

The code for the AR in action is shown below.
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs>

<a-text value="University of" color="blue" position="0 0.5 -0.5" align="center" height="2"><a-animation attribute="rotation" dur="5000" to="360 0 0" direction="alternate" repeat="indefinite"></a-animation>
</a-text>
<a-text value="Northampton" color="blue" position="0 0.325 0" height="3" align="center"><a-animation attribute="rotation" dur="5000" to="360 0 0" direction="alternate" repeat="indefinite"></a-animation>
</a-text>

<a-marker-camera preset="hiro"></a-marker-camera>
</a-scene>

</body>

Where next
Adding images to objects and adding models are the next experiments.

To read more go to

All opinions in this blog are the Author's and should not in any way be seen as reflecting the views of any organisation the Author has any association with. Twitter @scottturneruon

Tuesday 27 February 2018

WebVR playtime 2: video, 360 video and objects

This is going to be a short series of articles about some experiments with WebVR Web based Virtual Reality - in this case based on the wonderful A-Frame (https://aframe.io) . In the first post WebVR playtime 1: Basics of setting up, images and rotating blocks. I looked at setting up a scene and then rotating an object.

In this post, I going to recap the basics, then look at adding video, 360 degree video, and models developed elsewhere.

1. The approach and setting up
I chose to use A-Frame (https://aframe.io) inside Thimble (https://thimble.mozilla.org ); Thimble was selected for four reasons it is an online editor, simple to use, it is free and you see the preview immediately. In Thimble though try to keep the image or video file sizes small.

You can pretty much treat it as HTML, after you have added the script file shown in bold.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
</head>
<body>
<a-scene>

</a-scene>
</body>

</html>
The items to be add all go between <a-scene> and </a-scene>:
<a-text value="Hello" color="black" position="0 1.8 0.5" width="10"></a-text>
<a-sky color="orange" ></a-sky>
For example
<a-scene>
<a-text value="Hello" color="black" position="0 1.8 0.5" width="10"></a-text>
<a-sky color="orange" ></a-sky>
</a-scene>

The video below shows setting up and adding a box to the scene.

2. Adding video
Actual in some ways it as easy to add video as adding an image, at it's simplest adding src="" with either the URL or relative filename in the speech marks can be used for both images and video. Alternatively using <a-video src=""></a-video> combination with again the filename or URL between speech marks adds a block and pastes the video on top. The video below shows a worked example of these two approaches

3. 360 degree video.
A-Frame allows 360 degree to be incorporated into the scene using the <a-videosphere> tag. The video below shows a worked example of this. The video below shows another worked example.

4. 3D objects and Assets
We can also add 3D models that others have developed into our scene. In the video below a Penguin, defined externally using .obj for the model and .mtl for the material, is loaded into the scene.

To read more go to https://aframe.io/docs/0.7.0/introduction/

All opinions in this blog are the Author's and should not in any way be seen as reflecting the views of any organisation the Author has any association with. Twitter @scottturneruon

Sunday 25 February 2018

WebVR playtime 1: Basics of setting up, images and rotating blocks.

This is going to be a short series of articles about some experiments with WebVR Web based Virtual Reality - in this case based on the wonderful A-Frame (https://aframe.io) . Ok, a bit of context, I have been working with some MSc students on this area and we have been exploring this area together - I love learning from and with my students.

Firstly, it is great fun and nowhere near as hard as I thought it was going to be when I first started.

1. The approach
My approach is to use A-Frame (https://aframe.io) inside Thimble (https://thimble.mozilla.org ). Thimble was selected for four reasons it is an online editor, simple to use, it is free and you see the preview immediately. Its main downside is the size of images and videos has to be relatively small and not too many of them.

2. How easy is it?
You can pretty much treat it as HTML, after you have added the script file shown in bold.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
</head>
<body>
<a-scene>

</a-scene>
</body>

</html>
The items to be add all go between <a-scene> and </a-scene> with a parent-child relationship; for example A block of text saying Hello in black and making the sky orange are all 'children' of <a-sceme>:
<a-text value="Hello" color="black" position="0 1.8 0.5" width="10"></a-text>
<a-sky color="orange" ></a-sky>
For example
<a-scene>
<a-text value="Hello" color="black" position="0 1.8 0.5" width="10"></a-text>
<a-sky color="orange" ></a-sky>
</a-scene>

The video below shows setting up and adding a box to the scene.

This next video takes this a little further by adding rotation to an object.

In this video mapping an image to an object and changing camera position is looked at.

In later posts some further ideas will be explored.

To read more go to https://aframe.io/docs/0.7.0/introduction/

All opinions in this blog are the Author's and should not in any way be seen as reflecting the views of any organisation the Author has any association with. Twitter @scottturneruon

Friday 11 March 2016

Virtual Reality Minecraft on a PC

This is an update of the an earlier post.

As a little experiment with the Oculus Rift I wondered if I could view a Minecraft world through the oculus Rift. The answer is yes and relatively easily (certain easier than I though it was going to be). The Oculus Rift used with this was from the first developer kit, there are some latency issues (you move, it moves slightly later)

Download Minecrift from: https://share.oculusvr.com/app/minecrift

Unzip the files and run the installer file.

figure 1

You should get something similar to figure 1. All I did then was press OK.

Figure 2

Run the Minecraft launcher and create a new profile. After creating a new profile, edit it to change Use version to release minecrift-1.6.4-b12-nohydra which can be found in the drop down menu.

Now save the profile.

Play the Minecraft normally, but with the Oculus Rift on (it helps to have two people one wearing the Oculus Rift, the other pressing keys to control the movement).

Figure 3

Most people who have tried it, enjoyed it; but you really can only play for a short while. If are susceptible motion sickness I wouldn't try this.

Related links
http://minecraft-vr.com/

http://www.theriftarcade.com/minecrift/

http://vrwiki.wikispaces.com/Minecrift

http://www.pcgamer.com/2013/05/10/minecraft-is-the-latest-game-to-get-oculus-rift-support-with-minecrift-mod/

http://riftmod.com/how-to-setup-minecraft-for-oculus-rift/

I would be interested in finding out what others are doing with combining Minecraft with other devices/software via comments.

All views are the author's and do not necessarily reflect the views of any organisations the author is associated with in any way. Nor is post advocating the use of approach described above, but is reporting on an experiment.