Skip to main content

Ready to market your stellar app?

Samsung Developer Program is your gateway to app monetization success.

Learn More

Samsung Developer Program

GearVRf Developer Blog

Latest developer blog posts authored by the GearVRf development team, GearVRf support team, and GearVRf partners.

GVRF and the X3D file format

by Mitch Williams April 17, 2017

You may think creating VR has a steep learning curve; that you need to be an experienced game programmer or Java/C++ expert. However, in addition to a java interface, the GearVR Framework (GVRf) supports an XML-based 3D language that along with JavaScript for interactivity (skills in-common with HTML web page designers) makes VR creation simple.

The X3D file format is an international standard specifying 3D scenes on the web. It is exported by 3D modeling tools such as 3D Studio Max, supported by many 3D printers, and is now integrated into GVRf.

X3D can be thought of as the 3D version of HTML.  It uses similar tags with left and right brackets ‘<’ and ‘>’.  Here is an example X3D file:

<X3D>
    <Scene>
        <Transform translation=”0 0 -10”>
           <Shape>
            <Appearance>
               <Material diffuseColor="1 .5 0"/>
            </Appearance>
            <Sphere/>

           </Shape>
        </Transform>

    </Scene>

</X3D>

This produces an orange sphere, 10 units away in front of the camera.

GearVRf_orange_sphere_image.jpg

You will likely see X3D embedded inside an HTML file.  Saving the code below which contains the same X3D code above, and saving it as an .htm file will show the same orange sphere on a web page:

<html>

<head>

    <title>My first X3DOM page</title>

    <script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script>

    <link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'/>

</head>

<body>

<X3D>

    <Scene>

        <Transform translation=”0 0 -10”>

           <Shape>

            <Appearance>

               <Material diffuseColor="1 .5 0"/>

            </Appearance>

            <Sphere/>

           </Shape>

        </Transform>

    </Scene>

</X3D>

</body>

</html>

The HTML file relies on a JavaScript file, x3dom.js, that parses X3D and displays the 3D scene using WebGL.  GVRf parses the same X3D file, but uses GearVR’s technology to display the orange sphere in VR.

If you have the GVRf development environment already set up with Android Studio, and have downloaded GVRf’s Demos repository (https://github.com/gearvrf/GearVRf-Demos), look for the folder ‘gvr-x3d-demo’ for other examples plus showing how to insert your .x3d files.  Remember that .x3d files will be added to Android Studio’s ‘assets’ folder.  Just change the line of code in the file X3DparserScript.java “String filename = . . . “ to your .x3d file.

Reviewing the X3D file, ‘diffuseColor’ is the color of the object (more on that later).  Color in 3D is specified as red, green, blue with values between 0 and 1.  The Sphere has red = 1, green = .5 and blue = 0, producing orange.  The Sphere can be replaced with other primitives: Box, Cone or Cylinder.

Rotation is specified as “rotation=’x, y, z, angle’” where ‘angle’ is in radians.  Thus a rotation of 90 degrees (1.57 radians) around the z-axis will be: rotation=’0 0 1 1.57’.

Now is a good time to experiment.  Change the diffuseColor, translation or the object itself.  This scene contains a red Box on the left rotated around the x-axis 1.2 radians, a green Cone in the center, and a blue Cylinder on the right rotated -.4 radians around the z-axis.

 

<X3D>

    <Scene>

        <Transform DEF='obj1' translation="-3 0 -10" rotation="1 0 0 1.2">

           <Shape>

            <Appearance>

               <Material diffuseColor="1 0 0"/>

            </Appearance>

            <Box/>

           </Shape>

        </Transform>

        <Transform DEF='obj2' translation="0 0 -10">

           <Shape>

            <Appearance>

               <Material diffuseColor="0 1 0"/>

            </Appearance>

            <Cone/>

           </Shape>

        </Transform>

        <Transform DEF='obj3' translation="3 0 -10" rotation="0 0 1 -.4">

           <Shape>

            <Appearance>

               <Material diffuseColor="0 0 1"/>

            </Appearance>

            <Cylinder/>

           </Shape>

        </Transform>

        <Viewpoint position='0 0 0'/>

        <PointLight/>

    </Scene>

</X3D>

 

GearVRf_object_image.jpg

 

Toward the bottom there is a PointLight and Viewpoint, the light and camera in the scene.  VR, just like a Hollywood movie, has “Lights, Camera, Action!”  Each Transform has a DEFine which assigns names to our Scene Objects as if they were actors in a movie. 

Feel free to experiment with the color, location and rotation of the primitives, then view them in GearVR.  If you have access to a 3D modeling program such as 3D Studio (3DS) Max, Blender or BS Content Studio, you can create your own 3D scenes and display them in GearVR.  Blender (https://www.blender.org/) and BS Content Studio (http://www.bitmanagement.com/download/studio) are free and export directly to X3D.  3DS Max exports to VRML, which can be converted to X3D using online tools such as Instant Reality converter (http://doc.instantreality.org/tools/x3d_encoding_converter/).

Additional tutorials can be found at https://doc.x3dom.org/tutorials/index.html and http://www.web3d.org/getting-started-x3d.

  • Was this article helpful?