Exporting a Sumerian Scene to glTF - Amazon Sumerian

Exporting a Sumerian Scene to glTF

Amazon Sumerian can now export to GL Transmission Format (glTF), a royalty-free specification for the efficient transmission and loading of 3D scenes and models by applications. glTF is supported by external tools such as Babylon.js, Three.js, and Blender.

In this tutorial, you will learn about:

  • Exporting your Sumerian scene to a file in the glTF format

  • Previewing your glTF using a preview tool

  • Loading your glTF with Babylon.js and Three.js

  • Importing your glTF into Blender

Prerequisites

Step 1: Set Up a Scene to Export

In this step, we will set up a basic Sumerian scene to export. The scene will contain a few entities, a light, and a camera to demonstrate the different scene objects that Sumerian can export.

  1. Create a new Sumerian scene using the "Empty" template

  2. Once the editor loads, create a new Box, a Sphere, and a Cylinder from the Create Entity menu. This will allow us to see how Sumerian handles exporting different types of 3D models.

  3. Next, create a Directional Light from the Create Entity menu. Adjust its position in the canvas so that it shines onto the other entities. In the Light component, adjust the Intensity to 2.5 so that our light will show up clearly.

  4. Click Import Assets above the canvas and download the PBR Material Pack: Tile from the asset library. Wait for it to finish loading into the Asset Panel.

  5. Select the Box you created earlier, then select and drag the Tile_Teal_MAT material from the asset panel onto the entity’s Material component.

  6. Repeat the previous step to add the Tile_Octo_MAT material to your Sphere and the Tile_Arc_MAT material to your Cylinder.

Now you have a sample scene to export to glTF. In the following sections, we will walk through the export process and see how to test importing it in Babylon.js, Three.js, and Blender.

Step 2: Exporting to glTF

In this step, we will export our Sumerian scene into the glTF format from the Sumerian editor.

  1. Open the sample scene you created in Step 1 of this tutorial.

  2. In the upper left corner of the editor click the Scene drop-down menu.

  3. From the menu select Export to glTF.

  4. Under "Include in glTF export," adjust the checkboxes so that only "Cameras" and "Lights" are selected.

  5. Click Export to glTF to begin the bundling and export process.

When the process completes, your browser will start a download of a compressed Zip file.

Step 3: Check the Assets in your glTF Zip

Once the export completes, unzip the file you downloaded and check it for the correct files and assets. In the case of our sample scene, it will look like this:

Every glTF export will include the following files:

  • root.gltf (this will be the name of the glTF file regardless of what the scene was named)

  • README.md

  • log_[SCENE]-gltf-[DATE].txt (a log file of the export dialogue)

We also have three .bin files and a variety of .jpg files. The .bin files are 3D model files for the geometries we exported; i.e., the Cylinder, Box, and Sphere primitives. The .jpg files are the various textures on the materials we included.

The glTF file itself contains data about the exported scene, including the positions of all the entities and references to the files used for the 3D models and textures. Remember that if you move the glTF file to another directory, you must move the model and texture files along with it, or you will break those references.

Step 4: Preview the glTF File and Assets

In this step, you will learn how to preview your scene assets using an external previewer. While there are many previewers available to use, we will be using the glTF Viewer.

  1. Unzip or extract the contents of the Zip file exported from Sumerian, if you haven’t already.

  2. Go to the glTF Viewer.

  3. Drag and drop all of the extracted files onto the viewer’s canvas.

    • Note: make sure to include all of the asset files from the bundle, including all model and texture files, or the scene may not import properly.

You have now successfully rendered your exported scene in the glTF Viewer tool.

Step 5: Importing Your glTF File in Babylon.js, Three.js and Blender

In this step you will learn how to import or use your Sumerian generated assets in Babylon.js, Three.js, and Blender.

Babylon.js

Babylon.js is a WebGL-based 3D engine built with a Javascript library. You can read more about using Babylon.js at their documentation page.

There are many ways to create Babylon.js applications, but the simplest, demonstrated here, is to use pure HTML:

  1. Find a good location on your local computer to put the necessary files and create a new folder there called my-sumerian-export.

  2. Within your folder, create another folder called scene.

  3. Add all of the files from your glTF bundle, including models and textures, to the new scene folder.

  4. Open a new file in your favorite text-editing program and add the following as its contents:

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Babylon Template</title> <style> html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } </style> <script src="https://cdn.babylonjs.com/babylon.js"></script> <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.js"></script> <script src="https://cdn.babylonjs.com/loaders/babylon.glTF2FileLoader.js"></script> <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script> </head> <body> <canvas id="renderCanvas" touch-action="none"></canvas> //touch-action="none" for best results from PEP <script> var canvas = document.getElementById("renderCanvas"); // Get the canvas element var engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine //Load the scene from external glTF BABYLON.SceneLoader.Load( './scene/', 'root.gltf', engine, scene => { const gltfCamera = scene.cameras[0]; const scale = new BABYLON.Vector3(0, 0, 0); const rotation = new BABYLON.Quaternion(); const position = new BABYLON.Vector3(0,0,0); if(gltfCamera){ const tempWorldMatrix = gltfCamera.getWorldMatrix(); tempWorldMatrix.decompose(scale, rotation, position); } const target = new BABYLON.Vector3(0, 0, 0); const camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, target, scene); if(gltfCamera){ camera.fov = gltfCamera.fov; camera.minZ = gltfCamera.minZ; camera.minY = gltfCamera.minY; } camera.setPosition(position); // recomputes alpha, beta, and radius (0, 0, 10 above) camera.attachControl(canvas, true); // Register a render loop to repeatedly render the scene engine.runRenderLoop(function() { scene.render(); }); }); // Watch for browser/canvas resize events window.addEventListener("resize", function () { engine.resize(); }); </script> </body> </html>
  5. Save the file as my-babylon.html to the my-sumerian-export folder created earlier.

  6. Open a terminal window at the same directory to which you saved the .html file.

  7. Execute the following commands:

    npm install http-server -g
    • This will install globally a module for running a local http server, if it’s not already on your machine. This is necessary to allow your browser to access the glTF file on your local machine without violating certain web security protocols.

    http-server . -p 8000
    • This will run the server at a local network location where you can access it.

  8. Finally, open your web browser and navigate to localhost:8000/my-babylon.html

When it loads, you should see the entities from your original Sumerian scene rendering in the browser, viewed from the scene’s main camera.

Three.js

Three.js is another WebGL-based Javascript library you can use to create a scene using your glTF file. To learn more about Three.js, see their documentation page.

Three.js applications can also be created with simple HTML, so these steps will closely follow those outlined earlier for Babylon.js. The main difference will be setting up our HTML differently to use the Three.js library.

  1. As before, create a my-sumerian-export folder in a suitable location (if you also followed the preceding Babylon tutorial, be sure to make a separate folder for this one).

  2. Create a subdirectory called scene.

  3. Drop the unzipped contents of your Sumerian glTF export into scene.

  4. Create a new text file with the following as its contents:

    <html> <head> <title>My first three.js app</title> <style> body { margin: 0; } canvas { display: block; } </style> </head> <body> <script src="https://cdn.jsdelivr.net/npm/three@0.114.0/build/three.min.js"></script> <script type='module'> import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.114.0/examples/jsm/loaders/GLTFLoader.js'; import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.114.0/examples/jsm/controls/OrbitControls.js'; var loader = new GLTFLoader(); loader.load( '/scene/root.gltf', gltf => { var scene = new THREE.Scene(); scene.background = new THREE.Color('gray'); scene.add(gltf.scene); var camera = gltf.cameras[0]; if(!camera){ camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); scene.add( camera ); } var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var controls = new OrbitControls( camera, renderer.domElement ); var animate = function () { requestAnimationFrame( animate ); controls.update(); renderer.render( scene, camera ); }; animate(); // Watch for browser/canvas resize events window.addEventListener("resize", function () { renderer.setSize( window.innerWidth, window.innerHeight ); }); } ); </script> </body> </html>
  5. Save the file as my-three.html to the my-sumerian-export folder created earlier.

  6. Open a terminal window at the same directory to which you saved the .html file.

  7. Execute the following commands (see the previous Babylon.js section for an explanation of what these commands are doing):

    npm install http-server -g http-server . -p 8000
  8. Navigate your web browser to localhost:8000/my-three.html.

You’ve now successfully imported your scene to a working Three.js application.

Blender

Blender is a popular free tool for creating and editing 3D graphics and models. As of version 2.8, Blender supports importing models from glTF files. Here’s how to get started in Blender with your exported Sumerian scene:

  1. Download and install Blender, if you haven’t already.

  2. After exporting your scene as a glTF, open the Blender application.

  3. Select File and then choose Import and then choose glTF 2.0 (.glb/.gltf).

  4. Navigate to the un-zipped/extracted glTF folder. Select the root.gltf file.

You will now see your scene loaded in Blender.

It may look at first as though the textures did not import, but that’s only because Blender doesn’t show them in its default viewing mode. Select the "Shading" tab from the top bar and you will see them appear as expected:

Now you know how to export a Sumerian scene to the glTF format and import it to Three.js, Babylon.js, and Blender.

You can read more about using the glTF Export feature and what parts of the scene it exports in Exporting to glTF from the Amazon Sumerian Editor in the Amazon Sumerian User Guide, or in the README file included in the exported Zip file.