能否在JavaScript与WebAssembly间共享WebGL上下文及实现方案？

完全可以在JavaScript与WebAssembly之间共享同一个WebGL上下文，实现JS侧加载资源、WASM侧处理绘制逻辑的分工。WebGL上下文本质是JS环境中的对象，WASM可以通过JS互操作机制直接调用其API，无需额外复制或创建新上下文。

1. 上下文创建位置 #

必须在JavaScript侧创建WebGL上下文——WASM运行在沙箱中，无法直接访问DOM或创建WebGL上下文，依赖JS提供宿主环境能力。创建方式和常规WebGL应用一致：

const canvas = document.getElementById('gl-canvas');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
if (!gl) {
  throw new Error('WebGL not supported');
}

2. 将WebGL上下文传递给WASM #

把创建好的gl对象通过WASM导出的函数传递进去，WASM侧通过工具链（比如Emscripten）提供的绑定逻辑接收并存储上下文引用：

JS侧传递上下文 #

// 假设WASM模块已加载，导出了initWebGL初始化函数
wasmModule.instance.exports.initWebGL(gl);

WASM侧接收上下文（C/C++示例） #

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

// 全局存储WebGL上下文句柄
EMSCRIPTEN_WEBGL_CONTEXT_HANDLE glContext;

extern "C" {
  void EMSCRIPTEN_KEEPALIVE initWebGL(void* jsGlContext) {
    // 将JS侧的WebGL对象转为WASM可操作的句柄
    glContext = emscripten_webgl_get_context_handle_from_js(jsGlContext);
  }
}

3. 资源句柄的传递与复用 #

JS侧加载的纹理、着色器、缓冲区等资源，本质是整数ID（WebGL用ID唯一标识资源），可以直接把这些ID以数值形式传给WASM，WASM侧用ID调用WebGL API就能操作对应资源：

JS侧传递纹理ID给WASM #

// JS侧创建并初始化纹理
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
// ... 完成纹理数据填充、参数设置等操作
// 将纹理ID传给WASM
wasmModule.instance.exports.setDynamicTexture(texture);

WASM侧使用纹理ID绘制（C/C++示例） #

#include <GLES2/gl2.h>

GLuint dynamicTextureId;
int vertexCount = 0; // 假设已在WASM侧生成好顶点数量

extern "C" {
  void EMSCRIPTEN_KEEPALIVE setDynamicTexture(GLuint texId) {
    dynamicTextureId = texId;
  }

  void EMSCRIPTEN_KEEPALIVE drawDynamicMesh() {
    // 直接复用JS侧传入的纹理ID
    glBindTexture(GL_TEXTURE_2D, dynamicTextureId);
    // ... 绑定顶点缓冲区、设置着色器uniform、完成绘制前准备
    glDrawArrays(GL_TRIANGLES, 0, vertexCount);
  }
}

4. 性能优化要点 #

• 减少跨边界数据拷贝：顶点数据尽量在WASM侧分配内存，再通过gl.bufferData的ArrayBuffer视图传递给WebGL，避免频繁在JS和WASM间传递大量数据。
• 批量执行绘制逻辑：把连续的绘制操作放在WASM侧一次性完成，减少JS与WASM的交互次数，降低性能开销。

WebGL的资源ID是全局唯一的，只要上下文实例一致，无论在JS还是WASM侧调用API，使用同一个ID就能操作同一个资源。Emscripten等工具链已经封装了WebGL API的WASM绑定，让你可以像在原生GL环境中一样调用glDrawArrays等函数，底层自动映射到JS侧的WebGL上下文执行。

内容的提问来源于stack exchange，提问作者Ralf