SXR and the X3D file format
by Mitch Williams April 17, 2017
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 the SXR SDK.
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.
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:
If you have the SXR development environment already set up with Android Studio, and have downloaded SXR’s Demos repository, look for the folder
sxr-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>
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 and BS Content 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.