3

我想做与https://www.mapbox.com/blog/mapbox-unity/相同的事情，但在 XWalk 视图中使用three.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 不是一个选项，因为我需要离线地图和其他原生功能。
4

1 回答 1

2

没有办法从 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);
}
于 2017-01-31T09:31:34.833 回答