Switch branches/tags
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Table of contents


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


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.

1.10.1. Find Emscripten site


Find main Emscripten site.

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

1.10.2. Download Emscripten portable SDK archive


Download the latest Emscripten portable SDK archive.

1.10.3. Extract Emscripten portable SDK


Unpack Emscripten portable SDK to your home directory.

1.10.4. Install Emscripten portable SDK


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.

1.10.5. (OBSOLETE) Patch OpenSceneGraph

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.

1.10.6. Create build directory


Create build directory for sample application.

1.10.7. Configure the build


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.

1.10.8. Build application


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

1.10.9. Run application (Firefox only)


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.

1.10.10. Run application (All browsers)


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.