• Overview
• Video
• Steps
  • 1.10.1. Find Emscripten site
  • 1.10.2. Download Emscripten portable SDK archive
  • 1.10.3. Extract Emscripten portable SDK
  • 1.10.4. Install Emscripten portable SDK
  • 1.10.5. (OBSOLETE) Patch OpenSceneGraph
  • 1.10.6. Create build directory
  • 1.10.7. Configure the build
  • 1.10.8. Build application
  • 1.10.9. Run application (Firefox only)
  • 1.10.10. Run application (All browsers)
• Application

This tutorial is part of OpenSceneGraph cross-platform guide.

In this tutorial we build and run sample OpenSceneGraph application under Linux for Web. The application displays provided model with simple GLSL shaders.

Note: this tutorial requires

• OpenSceneGraph model (see 1.1. Create a cube)
• CMake and git installations (see 1.2. Install OpenSceneGraph under Linux)
• OpenSceneGraph sources (see 1.2. Install OpenSceneGraph under Linux)
• sample OpenSceneGraph application sources (see 1.5. Build and run sample OpenSceneGraph application under Linux) alongside OpenSceneGraph sources

YouTube | Download

Video depicts running and building sample OpenSceneGraph application under Xubuntu 16.04 with Emscripten 1.37.14 for Web.

Note: steps below use frames from the video as screenshots. Watch the video to see all details.

Find main Emscripten site.

We need Emscripten portable SDK, because Xubuntu 16.04 ships an outdated version.

Download the latest Emscripten portable SDK archive.

Unpack Emscripten portable SDK to your home directory.

Install Emscripten portable SDK by running the following commands:

cd /path/to/emsdk-portable

./emsdk update

./emsdk install latest

./emsdk activate latest

source ./emsdk_env.sh

Note: the above commands come from the official Emscripten installation instructions.

Note: this step is no longer necessary since 2017-07-29, because corresponding osgemscripten pull request has been accepted into upstream OpenSceneGraph.

Skip this step.

Create build directory for sample application.

Configure sample application build with the following commands:

cd /path/to/build/dir

cmake -DCMAKE_TOOLCHAIN_FILE=/path/to/emsdk-portable/emscripten/<version>/cmake/Modules/Platform/Emscripten.cmake /path/to/openscenegraph-cross-platform-guide-application/web

Note: make sure to specify Emscripten CMake toolchain file.

Build sample application with the following commands:

cd /path/to/build/dir

make -j10

This also builds OpenSceneGraph inside /path/to/openscenegraph-cross-platform-guide-application/../OpenSceneGraph/build/Emscripten.

Once the build has finished, you will have the following files:

• sample-ems.html is the main file you should open in a web browser
• sample-ems.html.mem is a special Emscripten auxiliary file
• sample-ems.data contains box.osgt (and other) resources
• sample-ems.js is sample application compiled into JavaScript

To run sample application in Firefox web browser, navigate to the build directory and open sample-ems.html file.

You should see red cube displayed.

Note: you can simply open local file, because Firefox supports XHR requests for local files.

To see the result in any web browser (including Firefox), you need to serve sample application with a web server.

If you have Python installed (Xubuntu 16.04 does), you can serve sample application with the following commands:

cd /path/to/build/dir

python -m SimpleHTTPServer

Now you can open sample application with this link: http://localhost:8000/sample-ems.html.

You should see red cube displayed.

Here's the application served by Github Pages.