[wip]

src/player/CMakeLists.txt

@@ -55,6 +55,9 @@ if(CORRADE_TARGET_EMSCRIPTEN)
 endif()
 
 if(CORRADE_TARGET_EMSCRIPTEN)
+    # globals yay :/
+    set(CMAKE_EXE_LINKER_FLAGS "${CMAKE_EXE_LINKER_FLAGS} -s 'EXTRA_EXPORTED_RUNTIME_METHODS=[\"ccall\"]' -s ALLOW_MEMORY_GROWTH=1")
+
     install(FILES player.html DESTINATION ${MAGNUM_DEPLOY_PREFIX}/magnum-player RENAME index.html)
     install(TARGETS magnum-player DESTINATION ${MAGNUM_DEPLOY_PREFIX}/magnum-player)
     install(FILES

src/player/EmscriptenApplication.js

@@ -54,7 +54,48 @@ for(var i = 0; i != args.length; ++i) {
 }
 
 Module.setStatus('Downloading...');
-/*
-Module.canvas.addEventListener('contextmenu', function(event) {
+
+function handleDragOver(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'copy';
+}
+
+function loadImage(imageData) {
+// const startTime = new Date();
+const numBytes = imageData.length * imageData.BYTES_PER_ELEMENT;
+const dataPtr = Module._malloc(numBytes);
+const dataOnHeap = new Uint8Array(Module.HEAPU8.buffer, dataPtr, numBytes);
+dataOnHeap.set(imageData);
+Module.ccall('load', null, ['number', 'number'], [dataPtr, imageData.length]);
+// const didLoad = Module.loadJPEGImage(dataOnHeap.byteOffset, imageData.length);
+Module._free(dataPtr);
+console.log('[Copy to Heap (Cwrap)] Time to load: ');// + (new Date() - startTime));
+
+return true;
+}
+
+function handleDrop(event) {
+    event.stopPropagation();
     event.preventDefault();
-}, true);*/
+    const files = event.dataTransfer.files;
+    if (files && files.length === 1) {
+      const fileReader = new FileReader();
+      fileReader.onload = (event) => {
+        if (loadImage(new Uint8Array(event.target.result))) {
+//           this._invalidate();
+        }
+      };
+
+      fileReader.onerror = () => {
+        console.error('Unable to read file ' + file.name + '.');
+      };
+
+      fileReader.readAsArrayBuffer(files[0]);
+    } else {
+      console.error('Unsupported files or content dropped.');
+    }
+}
+
+document.getElementById('module').addEventListener('drop', handleDrop);
+document.getElementById('module').addEventListener('dragover', handleDragOver);

src/player/Player.cpp

@@ -55,6 +55,10 @@
 #include <Magnum/Trade/SceneData.h>
 #include <Magnum/Trade/TextureData.h>
 
+#ifdef CORRADE_TARGET_EMSCRIPTEN
+#include <emscripten/emscripten.h>
+#endif
+
 namespace Magnum {
 
 using namespace Math::Literals;
@@ -66,6 +70,10 @@ class Player: public Platform::Application {
     public:
         explicit Player(const Arguments& arguments);
 
+//         #ifdef CORRADE_TARGET_EMSCRIPTEN
+        void load(Containers::ArrayView<const char> data);
+//         #endif
+
     private:
         void drawEvent() override;
         void viewportEvent(const Vector2i& size) override;
@@ -75,7 +83,6 @@ class Player: public Platform::Application {
         void mouseScrollEvent(MouseScrollEvent& event) override;
 
         Vector3 positionOnSphere(const Vector2i& position) const;
-
         void load(Trade::AbstractImporter& importer);
 
         void addObject(Trade::AbstractImporter& importer, Containers::ArrayView<Object3D*> objects, Containers::ArrayView<const Containers::Optional<Trade::PhongMaterialData>> materials, Object3D& parent, UnsignedInt i);
@@ -129,6 +136,8 @@ class TexturedDrawable: public SceneGraph::Drawable3D {
         GL::Texture2D& _texture;
 };
 
+Player* app;
+
 Player::Player(const Arguments& arguments):
     Platform::Application{arguments, Configuration{}
         .setTitle("Magnum Player")
@@ -149,11 +158,12 @@ Player::Player(const Arguments& arguments):
     _coloredShader
         .setAmbientColor(0x111111_rgbf)
         .setSpecularColor(0xffffff_rgbf)
-        .setShininess(80.0f);
+        .setShininess(1000.0f);
     _texturedShader
         .setAmbientColor(0x00000000_rgbaf)
-        .setSpecularColor(0x111111_rgbf)
-        .setShininess(80.0f);
+        .setDiffuseColor(0xffffffff_rgbaf)
+        .setSpecularColor(0xffffff00_rgbaf)
+        .setShininess(1000.0f);
 
     #ifndef CORRADE_TARGET_EMSCRIPTEN
     /* Load a scene importer plugin */
@@ -171,6 +181,22 @@ Player::Player(const Arguments& arguments):
     #endif
 
     setSwapInterval(1);
+    app = this;
+}
+
+void Player::load(Containers::ArrayView<const char> data) {
+    std::unique_ptr<Trade::AbstractImporter> importer =
+        _manager.loadAndInstantiate("TinyGltfImporter");
+    if(!importer) std::exit(1);
+
+    Debug{} << "Opening D&D data";
+
+    /* Load file */
+    if(!importer->openData(data))
+        std::exit(4);
+
+    load(*importer);
+    redraw();
 }
 
 void Player::load(Trade::AbstractImporter& importer) {
@@ -285,7 +311,7 @@ void Player::load(Trade::AbstractImporter& importer) {
     /* Basic camera setup */
     (*(_data->camera = new SceneGraph::Camera3D{*_data->cameraObject}))
         .setAspectRatioPolicy(SceneGraph::AspectRatioPolicy::Extend)
-        .setProjectionMatrix(Matrix4::perspectiveProjection(35.0_degf, 1.0f, 0.01f, 1000.0f))
+        .setProjectionMatrix(Matrix4::perspectiveProjection(35.0_degf, 1.0f, 0.01f, Constants::inf()))
         .setViewport(GL::defaultFramebuffer.viewport().size());
 
     /* Use the settings with parameters of the camera in the model, if any,
@@ -335,8 +361,9 @@ void Player::load(Trade::AbstractImporter& importer) {
         break;
     }
 
-    /* Start the animation */
-    _data->player.setPlayCount(0)
+    /* Start the animation */ /** @todo fix the SIGFPE */
+    if(!_data->player.isEmpty()) _data->player
+        .setPlayCount(0)
         .play(std::chrono::system_clock::now().time_since_epoch());
 }
 
@@ -419,7 +446,7 @@ void Player::drawEvent() {
     GL::defaultFramebuffer.clear(GL::FramebufferClear::Color|GL::FramebufferClear::Depth);
 
     if(_data) {
-        _data->player.advance(std::chrono::system_clock::now().time_since_epoch());
+        if(!_data->player.isEmpty()) _data->player.advance(std::chrono::system_clock::now().time_since_epoch());
 
         _data->camera->draw(_data->drawables);
 
@@ -483,4 +510,15 @@ void Player::mouseMoveEvent(MouseMoveEvent& event) {
 
 }
 
+extern "C" {
+    #ifdef CORRADE_TARGET_EMSCRIPTEN
+    EMSCRIPTEN_KEEPALIVE
+    #endif
+    void load(const char* ptr, const std::size_t size);
+
+    void load(const char* ptr, const std::size_t size) {
+        Magnum::app->load(Corrade::Containers::arrayView(ptr, size));
+    }
+}
+
 MAGNUM_APPLICATION_MAIN(Magnum::Player)

src/player/player.html

@@ -1,12 +1,13 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Magnum Player</title>
+    <title>Magnum glTF Player</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="WebApplication.css" />
   </head>
   <body>
-    <h1>Magnum Player</h1>
+    <h1>Magnum glTF Player</h1>
+    <p style="max-width: 640px; text-align: center; margin-left: auto; margin-right: auto;">Drag &amp; drop your <tt>*.glb</tt> (or an <em>embedded</em> <tt>*.gltf</tt>) file into the grey rectange below to play it. Refresh the browser if it gets stuck. I'm not responsible for anything :P</p>
     <div id="listener">
       <canvas id="module"></canvas>
       <div id="status">Initialization...</div>