opengl - 是否可以从 Blink 公开 WebGL 上下文？

Question

我想做与 https://www.mapbox.com/blog/mapbox-unity/ 相同的事情但在 XWalk View 中使用 three.js。

简而言之，据我所知，mapbox 插件是一个 Controller ，它可以访问 Mapbox View 的 OpenGL 上下文和 Unity View 的 OpenGL 上下文。然后插件在 Unity OpenGL 上下文中对 map 纹理进行渲染。

就我而言，我不使用 Unity，而是使用 Three.js。我看到了一种通过将来自 WebGL 的 OpenGL 上下文共享到来自另一个事件的另一个 OpenGL 上下文来实现此目的的方法。它需要:

• 通过 Blink 和 XWalk 之间的绑定(bind)从 webGL 公开 OpenGL 上下文
• 使用 XWalk Java 扩展将纹理缓冲区从 OpenGL 上下文共享到另一个事件。

重要提示:

• 目标平台:iOS、Android，(由于 MapboxGL 不支持 Windows(使用 D3D)，守卫将阻止在 Windows 手机等 D3D 平台上运行。)
• mapboxGL-JS 不是一个选项，因为我需要离线 map 和其他仅限 native 的功能。

Answer 1

没有办法从 WebGL 获取 OpenGL 上下文，因为 WebGL 可能适用于其他 API(即 D3D)。但是，要使用 Three.js 实现类似的功能，您可以使用 mapbox-gl-js。只需将 map 渲染到屏幕外 Canvas (未添加到 DOM)并将其用作 Three.js 场景中平面的纹理。

粗略地说，它可能看起来像这样:

const map = new Map({ /* options */ });
const texture = new THREE.CanvasTexture(map.getCanvas(), /* ... */);

map.on('render', () => {
    requestAnimationFrame(render);
    texture.needsUpdate = true;
});

function render() {
    myThreejsRenderer.render(mySceneWhichUsesTexture, camera);
}