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

Question

我想做与https://www.mapbox.com/blog/mapbox-unity/ 相同的事情，但在 XWalk 视图中使用三个.js。

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

就我而言，我不使用 Unity，而是使用 Three.js。我看到了一种方法，通过将 OpenGL 上下文从 WebGL 共享到另一个活动的另一个 OpenGL 上下文。它需要：

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

重要提示：

• 目标平台：iOS、Android，（由于 MapboxGL 不支持 Windows（使用 D3D），因此防护将阻止在 Windows 手机等 D3D 平台上运行。）
• mapboxGL-JS 不是一个选项，因为我需要离线地图和其他原生功能。

Answer 1

没有办法从 WebGL 获取 OpenGL 上下文，因为 WebGL 可能适用于其他 API（即 D3D）。但是，要使用 Three.js 实现类似的功能，您可以使用 mapbox-gl-js。只需将地图渲染到屏幕外画布（未添加到 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);
}