webvr: Add initial WebVR example

Signed-off-by: Squareys <squareys@googlemail.com>

CMakeLists.txt

@@ -55,5 +55,6 @@ option(WITH_TEXT_EXAMPLE "Build Text example (requires FreeTypeFont plugin)" OFF
 cmake_dependent_option(WITH_TEXTUREDTRIANGLE_EXAMPLE "Build TexturedTriangle example (requires TgaImporter plugin)" OFF "NOT MAGNUM_TARGET_GLES" OFF)
 option(WITH_TRIANGLE_EXAMPLE "Build Triangle example" ON)
 option(WITH_VIEWER_EXAMPLE "Build Viewer example (requires ColladaImporter plugin)" OFF)
+option(WITH_WEBVR_EXAMPLE "Build WebVR example" OFF)
 
 add_subdirectory(src)

src/CMakeLists.txt

@@ -85,3 +85,7 @@ endif()
 if(WITH_VIEWER_EXAMPLE)
     add_subdirectory(viewer)
 endif()
+
+if(WITH_WEBVR_EXAMPLE)
+    add_subdirectory(webvr)
+endif()

src/webvr/CMakeLists.txt

@@ -0,0 +1,68 @@
+#
+#   This file is part of Magnum.
+#
+#   Original authors — credit is appreciated but not required:
+#
+#       2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017 —
+#           Vladimír Vondruš <mosra@centrum.cz>
+#       2017 — Jonathan Hale <squareys@googlemail.com>
+#
+#   This is free and unencumbered software released into the public domain.
+#
+#   Anyone is free to copy, modify, publish, use, compile, sell, or distribute
+#   this software, either in source code form or as a compiled binary, for any
+#   purpose, commercial or non-commercial, and by any means.
+#
+#   In jurisdictions that recognize copyright laws, the author or authors of
+#   this software dedicate any and all copyright interest in the software to
+#   the public domain. We make this dedication for the benefit of the public
+#   at large and to the detriment of our heirs and successors. We intend this
+#   dedication to be an overt act of relinquishment in perpetuity of all
+#   present and future rights to this software under copyright law.
+#
+#   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+#   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+#   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+#   THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+#   IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+#   CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+#
+
+cmake_minimum_required(VERSION 2.8.12)
+project(MagnumWebVrExample)
+
+# CMake policies: enable MACOSX_RPATH by default
+if(POLICY CMP0042)
+    cmake_policy(SET CMP0042 NEW)
+endif()
+# Don't treat imported targets with :: as files
+if(POLICY CMP0028)
+    cmake_policy(SET CMP0028 NEW)
+endif()
+
+include(CheckSymbolExists)
+check_symbol_exists(EMSCRIPTEN_VR_API_VERSION "emscripten/vr.h" HAS_WEBVR_1_1)
+if(NOT HAS_WEBVR_1_1)
+    message(ERROR "webvr-example requires WebVR 1.1 API in emscripten.")
+endif()
+
+find_package(Magnum REQUIRED
+    MeshTools
+    Primitives
+    Shaders
+    Sdl2Application)
+
+set_directory_properties(PROPERTIES CORRADE_USE_PEDANTIC_FLAGS ON)
+
+add_executable(magnum-webvr
+    WebVrExample.cpp)
+target_link_libraries(magnum-webvr
+    Magnum::Application
+    Magnum::Magnum
+    Magnum::MeshTools
+    Magnum::Primitives
+    Magnum::Shaders)
+
+install(FILES webvr-emscripten.html EmscriptenApplication.js WebApplication.css DESTINATION ${CMAKE_INSTALL_PREFIX})
+install(TARGETS magnum-webvr DESTINATION ${CMAKE_INSTALL_PREFIX})
+install(FILES ${CMAKE_CURRENT_BINARY_DIR}/magnum-webvr.js.mem DESTINATION ${CMAKE_INSTALL_PREFIX} OPTIONAL)

src/webvr/EmscriptenApplication.js

@@ -0,0 +1,44 @@
+var Module = {
+    preRun: [],
+    postRun: [],
+
+    printErr: function(message) {
+        console.error(Array.prototype.slice.call(arguments).join(' '));
+    },
+
+    print: function(message) {
+        console.log(Array.prototype.slice.call(arguments).join(' '));
+    },
+
+    canvas: document.getElementById('module'),
+
+    setStatus: function(message) {
+        var status = document.getElementById('status');
+        if(status) status.innerHTML = message;
+    },
+
+    setStatusDescription: function(message) {
+        var statusDescription = document.getElementById('statusDescription');
+        if(statusDescription) statusDescription.innerHTML = message;
+    },
+
+    totalDependencies: 0,
+
+    monitorRunDependencies: function(left) {
+        this.totalDependencies = Math.max(this.totalDependencies, left);
+
+        if(left) {
+            Module.setStatus('Downloading...');
+            Module.setStatusDescription((this.totalDependencies - left) + '/' + this.totalDependencies);
+        } else {
+            Module.setStatus('Download complete');
+            Module.setStatusDescription('');
+        }
+    }
+};
+
+Module.setStatus('Downloading...');
+
+getElementById('module').addEventListener('webglcontextlost', function(e) {
+    console.log("Bad error:" + e);
+}, false);

src/webvr/README.md

@@ -0,0 +1,15 @@
+This example shows how to use emscripten vr (WebVR 1.1) with Magnum.
+
+![WebVR](webvr.png)
+
+Notes
+-----
+
+For the full experience, this example requires a WebVR 1.1 capable browser and a VR headset.
+
+Key controls
+------------
+
+*   **Canvas Click**: Enter VR
+*   **Escape key**: Exit VR
+

src/webvr/WebApplication.css

@@ -0,0 +1,55 @@
+body {
+    margin: 0px;
+    padding: 0px;
+    font-family: sans-serif;
+    background-color: #111111;
+    color: #aaaaaa;
+}
+
+h1 {
+    text-align: center;
+    font-size: 20px;
+}
+
+p {
+    text-align: center;
+}
+
+#listener {
+    border-style: solid;
+    border-color: #333333;
+    border-width: 1px;
+    padding: 1px;
+    width: 640px;
+    height: 480px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    position: relative;
+}
+
+#module {
+    width: 640px;
+    height: 480px;
+    z-index: 10;
+}
+
+#status {
+    position: absolute;
+    width: 640px;
+    text-align: center;
+    top: 200px;
+    font-size: 30px;
+    font-weight: bold;
+    z-index: 9;
+}
+
+#statusDescription {
+    position: absolute;
+    width: 640px;
+    text-align: center;
+    top: 250px;
+    font-size: 15px;
+    z-index: 9;
+}