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

README.md

Table of contents

Overview

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

Video

YouTube | Download

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

Steps

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

1.10.1. Find Emscripten site

Screenshot

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

Screenshot

Download the latest Emscripten portable SDK archive.

1.10.3. Extract Emscripten portable SDK

Screenshot

Unpack Emscripten portable SDK to your home directory.

1.10.4. Install Emscripten portable SDK

Screenshot

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

Screenshot

Create build directory for sample application.

1.10.7. Configure the build

Screenshot

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

Screenshot

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)

Screenshot

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)

Screenshot

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.

Application

Here's the application served by Github Pages.