时间戳

首页 > 解决方案 > 在 javascript 和 WebGL 中创建纹理并在 WebAssembly 中识别它们

javascript - 在 javascript 和 WebGL 中创建纹理并在 WebAssembly 中识别它们

问题描述

我想用 WebGL 从 HTMLVideoElement 创建一些纹理，并继续在 WebAssembly 部分使用它们。由于emscripten_webgl_create_context我正在使用一些上下文。

在 OpenGL 中，我可以使用glGenTextures创建纹理并拥有指向纹理的指针。

有什么方法可以在 Javascript 部分（使用 WebGL）中创建纹理并将有效指针或任何其他 id 传递到 WebAssembly 部分，以便我可以识别纹理？

标签： javascriptwebglwebassembly

解决方案

只是一个猜测，但我认为您需要修改 emscripten OpenGL 源代码。如果您看一下，您会看到 WebGL 对象与此处的 id 相关联。您需要添加一个函数才能在此处注册外部 JavaScript WebGL 对象，或者您需要添加一个函数让 C++ 生成 id，然后从 JavaScript 获取对象。

注意：您可以在不更改 emscripten 源的情况下执行第二种方法（在 C++ 中创建对象，将其传递给 JavaSCript）的一种方法是在 C++ 中创建 id，绑定它，然后调用 JavaScript 并让 JavaScript 查询它。换句话说

 GLuint tex;
 glGenTextures(1, tex);
 glBindTexture(GL_TEXTURE_2D, tex);

..现在调用您制作的一些javascript函数..

 function someJSFunction() {
   // look up the currently bound TEXTURE_2D
   const tex = gl.getParameter(gl.TEXTURE_BINDING_2D);
   ...

WebGLTextureC++ 中使用的 id被 empscripten 的 OpenGL 库侵入到对象上，所以

 const id = tex.name

您现在可以id在任何时候想要引用纹理时传回 C++

此外，使用上面的代码，您可以构建一个 c++ 函数，该函数在 C++ 中分配一个可以从 JavaScript 调用的纹理。由于它会留下它刚刚创建的纹理，因此您可以查询纹理，如上所示。

推荐阅读