Базовая настройка для glfw вызывает ошибку во время выполнения в отношении eventlistener в сгенерированном emscripten файле js - PullRequest
Новая
       20

Базовая настройка для glfw вызывает ошибку во время выполнения в отношении eventlistener в сгенерированном emscripten файле js

0 голосов
/ 29 августа 2018

Короче говоря, я попытался создать простейшую возможную настройку для демонстрации opengl c ++, и проблема, которую я имею, кажется, связана с инициализация холста в отношении обработчика событий, который находится в оболочке javascript для файла wasm. Я новичок в этом, поэтому я просто отправлю код в cpp, html-файл и командная строка, используемые для компиляции проекта, плюс ошибка в chromium.

Это glfw.cpp 

#include <emscripten/emscripten.h>
#include <emscripten/bind.h>
using namespace emscripten;

#define GLFW_INCLUDE_ES3

#include <GLFW/glfw3.h>
#include <GLES3/gl3.h>


void initialize()
{
 // Initialise GLFW
    if( !glfwInit() )
    {

        EM_ASM_({
          console.log(' failed: ');
        }, 0);  
    }

    EM_ASM_({
      console.log(' end initialization: ');
    }, 0);  
}
EMSCRIPTEN_BINDINGS(glfw) 
{   
    function("initialize", &initialize);
}

Это glfw.html 

<!doctype html>
<html> 
<head>
</head>
<body>
<canvas id="canvas" oncontextmenu="event.preventDefault()" style = "height: 100%; width: 100%; background-color:red;"></canvas>
    <script>    
        var Module = 
        {
            canvas: function() 
            {
                console.log("canvas");
                var canvas = document.getElementById('canvas');
                canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);

                return canvas;
            },
            onRuntimeInitialized: function() 
            {
                Module.initialize();
            }               
        };  
    </script>
    <script type="text/javascript" src="glfw.js"> </script> 
</body>
</html>

команда для компиляции проекта

emcc --bind -o glfw.js glfw.cpp -s USE_GLFW = 3

и это полная ошибка из console.log в chromium 

glfw.js:1645 Fetch finished loading: GET "http://localhost:8080/glfw.wasm".
doNativeWasm @ glfw.js:1645
Module.asm @ glfw.js:1735
(anonymous) @ glfw.js:4813
glfw.js:1650 wasm streaming compile failed: TypeError: Module.canvas.addEventListener is not a function
(anonymous) @ glfw.js:1650
Promise.catch (async)
doNativeWasm @ glfw.js:1647
Module.asm @ glfw.js:1735
(anonymous) @ glfw.js:4813
glfw.js:1651 falling back to ArrayBuffer instantiation
(anonymous) @ glfw.js:1651
Promise.catch (async)
doNativeWasm @ glfw.js:1647
Module.asm @ glfw.js:1735
(anonymous) @ glfw.js:4813
glfw.js:1560 Fetch finished loading: GET "http://localhost:8080/glfw.wasm".
getBinaryPromise @ glfw.js:1560
instantiateArrayBuffer @ glfw.js:1633
(anonymous) @ glfw.js:1652
Promise.catch (async)
doNativeWasm @ glfw.js:1647
Module.asm @ glfw.js:1735
(anonymous) @ glfw.js:4813
glfw.js:5228 Assertion failed: the Module object should not be replaced during async compilation - perhaps the order of HTML elements is wrong?
glfw.js:5229 Assertion failed: the Module object should not be replaced during async compilation - perhaps the order of HTML elements is wrong?
abort @ glfw.js:5229
assert @ glfw.js:434
receiveInstantiatedSource @ glfw.js:1628
Promise.then (async)
instantiateArrayBuffer @ glfw.js:1635
(anonymous) @ glfw.js:1652
Promise.catch (async)
doNativeWasm @ glfw.js:1647
Module.asm @ glfw.js:1735
(anonymous) @ glfw.js:4813
glfw.js:1636 failed to asynchronously prepare wasm: abort("Assertion failed: the Module object should not be replaced during async compilation - perhaps the order of HTML elements is wrong?") at Error
    at jsStackTrace (http://localhost:8080/glfw.js:1033:13)
    at stackTrace (http://localhost:8080/glfw.js:1050:12)
    at abort (http://localhost:8080/glfw.js:5239:44)
    at assert (http://localhost:8080/glfw.js:434:5)
    at receiveInstantiatedSource (http://localhost:8080/glfw.js:1628:7)
(anonymous) @ glfw.js:1636
Promise.catch (async)
instantiateArrayBuffer @ glfw.js:1635
(anonymous) @ glfw.js:1652
Promise.catch (async)
doNativeWasm @ glfw.js:1647
Module.asm @ glfw.js:1735
(anonymous) @ glfw.js:4813
glfw.js:5228 abort("Assertion failed: the Module object should not be replaced during async compilation - perhaps the order of HTML elements is wrong?") at Error
    at jsStackTrace (http://localhost:8080/glfw.js:1033:13)
    at stackTrace (http://localhost:8080/glfw.js:1050:12)
    at abort (http://localhost:8080/glfw.js:5239:44)
    at assert (http://localhost:8080/glfw.js:434:5)
    at receiveInstantiatedSource (http://localhost:8080/glfw.js:1628:7)
glfw.js:5229 abort("Assertion failed: the Module object should not be replaced during async compilation - perhaps the order of HTML elements is wrong?") at Error
    at jsStackTrace (http://localhost:8080/glfw.js:1033:13)
    at stackTrace (http://localhost:8080/glfw.js:1050:12)
    at abort (http://localhost:8080/glfw.js:5239:44)
    at assert (http://localhost:8080/glfw.js:434:5)
    at receiveInstantiatedSource (http://localhost:8080/glfw.js:1628:7)
abort @ glfw.js:5229
(anonymous) @ glfw.js:1637
Promise.catch (async)
instantiateArrayBuffer @ glfw.js:1635
(anonymous) @ glfw.js:1652
Promise.catch (async)
doNativeWasm @ glfw.js:1647
Module.asm @ glfw.js:1735
(anonymous) @ glfw.js:4813
glfw.html:1 Uncaught (in promise) abort("abort(\"Assertion failed: the Module object should not be replaced during async compilation - perhaps the order of HTML elements is wrong?\") at Error\n    at jsStackTrace (http://localhost:8080/glfw.js:1033:13)\n    at stackTrace (http://localhost:8080/glfw.js:1050:12)\n    at abort (http://localhost:8080/glfw.js:5239:44)\n    at assert (http://localhost:8080/glfw.js:434:5)\n    at receiveInstantiatedSource (http://localhost:8080/glfw.js:1628:7)") at Error
    at jsStackTrace (http://localhost:8080/glfw.js:1033:13)
    at stackTrace (http://localhost:8080/glfw.js:1050:12)
    at abort (http://localhost:8080/glfw.js:5239:44)
    at http://localhost:8080/glfw.js:1637:9

1 Ответ

0 голосов
/ 30 августа 2018

Мне удалось провести обратный инжиниринг рабочего примера и основать на нем свой ответ, так что это рабочий код, приведенный ниже, который прекрасно компилируется и не выдает никаких ошибок, только два предупреждения из файла JavaScript.

emcc -std = c ++ 11 glfw.cpp -o glfw.js -s USE_WEBGL2 = 3 -s FULL_ES3 = 3 -s USE_GLFW = 3 -с WASM = 3 

   <!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Emscripten-Generated Code</title>
    <style>
      body 
      {
        font-family: arial;
        margin: 0;
        padding: none;
      }

      .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
      div.emscripten { text-align: center; }      
      div.emscripten_border { border: 1px solid black; } 
      canvas.emscripten { border: 0px none; background-color: black; }

    </style>
  </head>
  <body>    
    <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
    <script type='text/javascript'>     

      var Module = 
      {        
        canvas: (function() {
          var canvas = document.getElementById('canvas');      
          canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);

          return canvas;
        })()
      };    

    </script>
    <script async type="text/javascript" src="glfw.js"></script>
  </body>
</html>

Bind.h на самом деле не нужен, за исключением ошибки с пространством имен, если он не включен. 

#include <emscripten/emscripten.h>
#include <emscripten/bind.h>

#define GLFW_INCLUDE_ES3
#include <GLFW/glfw3.h>
#include <GLES3/gl3.h>
using namespace emscripten;

int main()
{
 // Initialise GLFW
    if( !glfwInit() )
    {

        EM_ASM_({
          console.log(' failed: ');
        }, 0);  
    }

    EM_ASM_({
      console.log(' end initialization: ');
    }, 0);  

    return 0;
}
...