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

Question

我想创建一些 textures from HTMLVideoElement with WebGL and continue to work with them in WebAssembly part. I'm using some context due to emscripten_webgl_create_context。

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

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

Answer 1

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

注意：第二种方法（用 C++ 创建对象，将其传递给 JavaSCript）而不更改 emscripten 源的一种方法是用 C++ 创建 id，绑定它，然后调用 JavaScript 并让 JavaScript 查询它。也就是说

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

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

C++ 中使用的 id 被 empscripten 的 OpenGL 库黑进了 WebGLTexture 对象，所以

 const id = tex.name

您现在可以随时将 id 传回 C++，以引用纹理

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

Create textures in javascript and WebGL and identify them in WebAssembly