glfw 的基本设置会导致与 emscripten 生成的 js 文件中的事件侦听器有关的运行时错误
Basic setup for glfw causes a runtime error with regards to eventlistener in emscripten generated js file
长话短说，我试图为opengl c ++演示创建最简单的设置，我遇到的问题似乎与 画布的初始化与在 WASM 文件的 JavaScript 包装器中找到的事件侦听器有关。我是新手，所以我只会发布 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
这是来自控制台的完整错误.log以铬为单位
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 Errorn 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
我设法对一个工作示例进行了逆向工程，并以此为基础回答，因此这是下面的工作代码，编译良好且不会给出任何错误，只有来自 JavaScript 文件的两个警告。
emcc -std=c++11 glfw.cpp -o glfw.js -s USE_WEBGL2=3 -s FULL_ES3=3 -s USE_GLFW=3 -s 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;
}
相关文章：
- .cpp和.h文件中的模板专用化声明
- 为什么两个不同的未命名名称空间可以共存于一个cpp文件中
- 文本文件中的单词链表
- CMake-按正确顺序将项目与C运行时对象文件链接
- glfw 的基本设置会导致与 emscripten 生成的 js 文件中的事件侦听器有关的运行时错误
- 将二进制字符串/文件内容从 c++ 传递到节点 js
- 上传大文件并解析时使用 Node.js v10.15.1 时出现致命错误
- 如何在Qt.js文件中使用C++枚举
- Linux复制文件连接到节点JS / Python / C / C 之后
- C ++ tiny-js 从外部文件执行 JavaScript 函数
- 将文本文件创建到节点.js的插件C++
- Node.JS/C++/Python - 编辑 Excel .xlsx文件
- 是否有适用于 sigma.js兼容 json 文件的专用格式
- 将Node.js+Socket.io封装到OSX可执行文件中的可靠方法?(或C/C++/Objective-C库作为替代
- 从C++Node.js插件渲染文件
- 在构建Node.js/Node-webkit插件时，通过binding.gyp将.cpp文件编译为Objective-C
- 如何从一个 QtScript .js 文件中调用另一个 QtScript .js文件
- QWebView可以从Qt资源文件中加载*.js并运行它们吗?
- Node.js C++将多个CC文件扩展为一个模块
- ofstream没有创建文件(Node.js插件)
