Showing posts with label web VR. Show all posts
Showing posts with label web VR. Show all posts

Friday 26 February 2021

Build yourself a Planet - Web VR

Using Mozzila's brilliant AFrame, a web-based Virtual Reality model of a planet with rings and include a moon with an image on it.





Step 1. Basic Planet
The first step is to set a new site in Glitch.com  and then add a white sphere on a black background.


<html>

  <head>

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

  </head>

  <body>

    <a-scene>

     <a-sphere position="0 1.25 -5" radius="3" color="white" >

      </a-sphere>   

      <a-sky color="black"></a-sky>

    </a-scene>

  </body>

</html>

 

 

Using the Aframe 'tags' to create a white sphere and to create a black background

Step 2: Rotate the planet and add some colour
Now we can add a surface to the planet by finding an appropriate image to wrap around the sphere. in this example, I used the site Solar Systems Scope (https://www.solarsystemscope.com/textures/) and downloaded an image of Jupiter's surface (https://www.solarsystemscope.com/textures/download/2k_jupiter.jpg).

 

(a)If you are using Glitch: This needs to be copied into the assets folder of the project and the URL generated (by left-clicking on the image when it is in the folder) copied.

(b)On you own site upload the image to the same folder as the webpage the ‘URL’ will be filename

(c ) Alternatively use this URL in either approach https://cdn.glitch.com/febf6408-3c33-4608-ac90-b087753e5792%2F2k_jupiter.jpg?v=1573393224376

 

Now by adding src="" and in the speech-marks paste in the URL for the image; the image wraps around the sphere.

<html>

  <head>

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

  </head>

  <body>

    <a-scene>

     <a-sphere position="0 1.25 -5" radius="3" color="white" src="https://cdn.glitch.com/febf6408-3c33-4608-ac90-b087753e5792%2F2k_jupiter.jpg?v=1573393224376"

               animation="property: rotation; to: 0 360 0; loop: true; dur: 10000">

 

      </a-sphere>   

      <a-sky color="black"></a-sky>

    </a-scene>

  </body>

</html>

 

Now to rotate it  add, also within the , section animation="property: rotation; to: 0 360 0; loop: true; dur: 10000" (see above or the code at the end of the post for more details).

 



Step 3: Adding ring
In Aframe if you nest another object with the <></> of another object it's position is set relative to the first object. This principle is going to be used here put a ring around the planet. The first stage is to add the ring object is used for this and a the same rotating animation is used. We are going to use a squashed doughnut shape <a-torus> to do this. One the webpage is running you will probably need use the down arrow key to zoom out to see the ring.

 

<html>

  <head>

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

  </head>

  <body>

    <a-scene>

     <a-sphere position="0 1.25 -5" radius="3" color="white" src="https://cdn.glitch.com/febf6408-3c33-4608-ac90-b087753e5792%2F2k_jupiter.jpg?v=1573393224376"

               animation="property: rotation; to: 0 360 0; loop: true; dur: 10000">

          <a-torus position="0 0 0"

                 arc="360"

                 rotation="90 0 0"

                 color="white" radius="5"

                 radius-tubular="0.05"

                 animation="property: rotation; to:  90 0 0; loop: true; dur: 3000">

         </a-torus>

 

      </a-sphere>   

      <a-sky color="black"></a-sky>

    </a-scene>

  </body>

</html>

 


Step 4: Adding a moon
The process is really just combining elements of the steps 1-3. Create a new sphere,set the radius to something around 0.25 to 0.5; colour it with whatever you feel is appropriate, add an image (in the example code one has been added) if you want, set a rotation (it is is fun to play with these a bit and place the moon on the ring (setting position="5 0 0" in this case does this.

If the images are accessible as web sources this could be a great option.



<html>

  <head>

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

  </head>

  <body>

    <a-scene>

     <a-sphere position="0 1.25 -5" radius="3" color="white" src="https://cdn.glitch.com/febf6408-3c33-4608-ac90-b087753e5792%2F2k_jupiter.jpg?v=1573393224376"

               animation="property: rotation; to: 0 360 0; loop: true; dur: 10000">

          <a-torus position="0 0 0"

                 arc="360"

                 rotation="90 0 0"

                 color="white" radius="5"

                 radius-tubular="0.05"

                 animation="property: rotation; to:  90 0 0; loop: true; dur: 3000">

              <a-sphere position="5 0 0"

                 rotation="0 0 0"

                 radius="0.5"

                 color="yellow" src="https://cdn.glitch.com/febf6408-3c33-4608-ac90-b087753e5792%2Fpanic.png?v=1573395380360"

                 animation="property: rotation; to:  0 259 0; loop: true; dur: 3000">

              </a-sphere>

 

         </a-torus>

 

      </a-sphere>   

      <a-sky color="black"></a-sky>

    </a-scene>

  </body>

</html>

 

 

Step 5: Lets us add some text.

So we might want to put some text into the world we can do that with <a-text value=””>

<html>

  <head>

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

  </head>

  <body>

    <a-scene>

     <a-sphere position="0 1.25 -5" radius="3" color="white" src="https://cdn.glitch.com/febf6408-3c33-4608-ac90-b087753e5792%2F2k_jupiter.jpg?v=1573393224376"

               animation="property: rotation; to: 0 360 0; loop: true; dur: 10000">

          <a-torus position="0 0 0"

                 arc="360"

                 rotation="90 0 0"

                 color="white" radius="5"

                 radius-tubular="0.05"

                 animation="property: rotation; to:  90 0 0; loop: true; dur: 3000">

              <a-sphere position="5 0 0"

                 rotation="0 0 0"

                 radius="0.5"

                 color="yellow" src="https://cdn.glitch.com/febf6408-3c33-4608-ac90-b087753e5792%2Fpanic.png?v=1573395380360"

                 animation="property: rotation; to:  0 259 0; loop: true; dur: 3000">

              </a-sphere>

 

         </a-torus>

      </a-sphere> 

      <a-text value="Planet CCCU Computing" position="0 4 -2"></a-text>

      <a-sky color="black"></a-sky>

    </a-scene>

  </body>

</html>

 

We can get interesting effects if we add the text between  </a-sphere> and </a-torus> Try adding this in there. <a-text value="Planet CCCU Computing" position="0 3 -2"></a-text>

 

Have a play with altering the text and putting the line elsewhere in the code. What happens?

 

 

 

Step 6:

Now going to use an image to change the background. The image is "space" by fleskw is licensed with CC BY 2.0. To view a copy of this license, visit https://creativecommons.org/licenses/by/2.0 You will need to change the sky colour to a light colour for this to work. So change the sky line in the code to

 

      <a-sky color="white" src="https://cdn.glitch.com/425c1a98-7ba9-463d-817d-6b491a516246%2F97b3bf6d-ced1-4041-80d4-b6c9a98ba43d.jfif?v=1614341330757"></a-sky>

 

 

 

 

L



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

Saturday 14 July 2018

WebVR 4 Playtime: Putting Objects into Augmented Reality

In a previous post, I tried to persuade you that using A-Frame it is not too hard to use for some simple Augmented Reality (AR) for free, via a browser, but also runs on a mobile device. Well I going to continue and put objects with images imposed on them into this AR system - which could be quite a quick way to get an organisations logo into AR.



Summary
In the first post WebVR playtime 1: Basics of setting up, images and rotating blocksI looked at setting up a scene, rotating an object.  Second post, recapped the basics, then look at adding video, 360 degree video, and models developed elsewhere. The third post started looking at using WebVR as part of an augmented reality solution building on the great resource Creating Augmented Reality with AR.js and A-Frame by Jerome Etienne, creator of AR.js. This gave us the starting code. 

In this post, the ideas are extended further to adding or wrapping images on top of an object.


Adding images to objects
In a previous post (WebVR playtime 1: Basics of setting up, images and rotating blocks) we have seen that in A-Frame if you create a block and in the tag for the block you add an image it gets wrapped on to the block.

As an example in the following code <a-sphere position="0 0.5 -.5" radius=".5" color="yellow" src="test1.png"> a yellow sphere of 0.5 units radius is produced with the image, stored in test1.png, wrapped around the sphere. What makes this effect even more interesting is any white on the image gets replaced by the underlying colour, yellow in this case, of the object. Change the underlying colour and the image can look different.

The way the image is mapped on to the objects, changes with the object. If the object had been a box all the sides would have a copy of the image on them. A sphere and box of different colours will be used to show these effects.

In this exercise, I went back to using Mozilla's Thimble because it allows images to be added into the file area easily and I was having problems with some other editors getting images to work. The slight downside is the automatic viewing of site, doesn't work with the camera; this though is easily worked around by publishing the site and viewing it as a live webpage (to see an example using the Hiro marker (same one as used in the previous post) go to https://thimbleprojects.org/scottturneruon/517091).

Ok, so what does this code look like and do? Let's look at the code for the example just discussed https://thimbleprojects.org/scottturneruon/517091 ), which has some text; but also a white box and yellow sphere that have the same image mapped onto them.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AR and  WebVR using AFrame</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
    <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
  </head>
  <body>
    <a-scene>
      <a-entity position="-.5 0 2.5">
        <a-camera></a-camera>
      </a-entity>
      <a-text  value="UO" color="#FFF" position="-1 1.8 -0.5"  align="center" width="2.6">
        <a-text value="N" color="#FFF" position="0 -0.125 0" height="1" align="center">
        </a-text>
        <a-animation attribute="rotation" dur="10000" to="360 360 360" repeat="indefinite"></a-animation>
      </a-text>

      <a-box src="test1.png" height="0.75" position="0 0 -0.5" width="0.75" depth="0.75" >
        <a-sphere position="0 0.5 -.5" radius=".5" color="yellow" src="test1.png">
          <a-animation attribute="rotation" dur="7500" to="0 360 0" repeat="indefinite">
          </a-animation>
        </a-sphere>
        <a-animation attribute="rotation" dur="15000" to="360 360 360" repeat="indefinite">
        </a-animation>
      </a-box>
      <a-marker-camera preset="hiro"></a-marker-camera>
    </a-scene>
  </body>

</html>

Everything in the code has been discussed in the previous post but not put altogeher. It can be seen in action here, a still of the marker and AR in action and the short video showing the movement.



via GIPHY

The combination of block, sphere and text, appear when the marker is visible and started to rotate.




What next?

It would be interesting to explore adding actual icons to the blocks (copyright etc allowing) and create new markers other than the Hiro to use, including using the recognition of different markers to present different AR outputs.

The other area to explore further would be adding externally generated 3D models into the system.








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 blocksI 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

ChatGPT, Data Scientist - fitting it a bit

This is a second post about using ChatGPT to do some data analysis. In the first looked at using it to some basic statistics  https://robots...