Samsung Internet VR

Overview

Samsung Internet for Android is a simple yet fast and reliable web browser for your mobile devices. It is the default browser for Samsung Galaxy devices and provides a highly optimized experience for its users. Samsung Internet is continuously evolving to provide you with the best browsing experience.

In this tutorial, we will tackle how to create a Virtual Reality environment to make browsing the web more immersive and engaging using your mobile device and Gear VR.

Objective

Create a VR environment using A-Frame as a foundation and experience it with the Gear VR.

Setup

Application Development

1. Remix this project by pushing the Remix button. This will copy everything into your own project.

Figure 1 Remixing a project

Figure 1 Remixing a project

2. The code to edit is in index.html. It is a boilerplate HTML file with the JavaScript library for A-Frame added. The first code we'll add is the main A-Frame component. This sets up all the rendering and VR capabilities.

<a-scene></a-scene>

3. The next thing we'll add is a plane for the floor. This uses the <a-entity> tag inside the <a-scene> tag. The geometry component is used to add 3D shapes to the entity. rotation is used to rotate the plane to turn it from a vertical surface to one which lies along the ground.

<a-entity geometry="primitive:plane;height:500;width:500" position="5 -2.48 -5" rotation="-90 0 0"></a-entity>

4. We can change how the plane looks by using the material attribute. material="color:#00a5ae;roughness:1". The color can be any HTML color including names like 'lavenderblush' or 'skyblue' or hexcodes like '#abcedf'

Your <a-entity> should now look like this:

<a-entity geometry="primitive:plane;height:500;width:500" position="5 -2.48 -5" rotation="-90 0 0" material="color:#00a5ae;roughness:1"></a-entity>

5. The intention is to use the plane to represent water and to make an island using a cube, so we're going to add an additional element for the land.

<a-entity geometry="primitive:box;depth:20;height:20;width:20" shadow="cast:false;receive:true;" position="4 -9.94 0.80" material="color:#449b5b;roughness:1"></a-entity>

6. For the light we can use the <a-light> element. We can set the color to whatever we would like.

<a-light light="type:ambient;intensity:0.2;color:skyblue"></a-light>
<a-light position="-1 18 -14" light="color:#ffe6ba;castShadow:true;shadowCameraNear:1;shadowCameraTop:10;shadowCameraBottom:-10;shadowCameraLeft:-20;shadowMapHeight:1024;shadowMapWidth:1024;shadowBias:0.1;shadowCameraRight:10;penumbra:1">
<a-sphere material="shader:flat;color:white;"></a-sphere>

7. For the sky we can use the <a-sky> element. The sky element is a giant inside-out sphere. We can set the color to whatever we would like. In this case we can pick a nice sunset color (or whatever you prefer).

<a-sky color="#ffc368"></a-sky>

8. We can also import 3D models to the scene. We are using a lighthouse model. You can add it to the scene like this:

<a-assets>
    <!-- Model from Google Poly https://poly.google.com/view/eOEwsOqdcHl by Alex “SAFFY” Safayan -->
    <a-asset-item id="lighthouse-obj" src="https://cdn.glitch.com/e8b5d783-bf86-4104-9d3b-92edbcf0eb86%2Fmodel-triangulated.obj?1536741656667"></a-asset-item>
    <a-asset-item id="lighthouse-mtl" src="https://cdn.glitch.com/e8b5d783-bf86-4104-9d3b-92edbcf0eb86%2Fmaterials.mtl?1536741988245"></a-asset-item>
</a-assets>

<a-entity obj-model="obj:#lighthouse-obj;mtl:#lighthouse-mtl" position="10.12 7.50 -5.38" scale="10 10 10"></a-entity>
  • <a-assetslt; and <a-asset-itemlt; are used to import and store 3D models.

  • obj-model="obj:#lighthouse-obj;mtl:#lighthouse-mtl" makes the <a-entity> use those assets.

You have now completed your lighthouse island scene!

9. To try this out in the Gear VR headset, you will need one of the Samsung phones provided. Open up the Samsung Internet browser (labelled "Internet") on the phone.

10. Take a look at the URL for your project (the one that loaded up in the separate tab when you pressed 'Show Live'). Type in this URL in the Samsung Internet URL bar.

11. Now put the smartphone in a Gear VR headset. Once you put the headset on, you should see the same scene inside a window in Virtual Reality.

12. Tap on the trackpad on the side of the headset to 'click' on the goggles icon in the bottom-right corner. This will make the scene fill the whole 360 degree environment. Take a look around and enjoy your first WebVR experience!