3

I would like to do the same thing than https://www.mapbox.com/blog/mapbox-unity/ but with three.js in a XWalk view.

In short, as I understand it, the mapbox plugin is a controller which has access to the OpenGL context of a Mapbox view and to the OpenGL context of a Unity view. Then the plugin does a render to texture of map in the Unity OpenGL context.

In my case I dont use Unity but Three.js. I see a way to do this by sharing the OpenGL context from WebGL to another OpenGL context from another activity. It would need to:

  • expose an OpenGL context from webGL via a binding betwwen Blink and XWalk
  • use a XWalk Java extension to share a texture buffer from the OpenGL context to another activity.

Important notes:

  • aimed plaforms: iOS, Android, (As MapboxGL does not support Windows (using D3D) a guard will prevent running on D3D platform such as Windows phone.)
  • mapboxGL-JS is not an option as I need offline map and other native only features.
dagatsoin
  • 2,626
  • 6
  • 25
  • 54
  • I doubt there is any way to do that. However, mapbox provide a well featured webgl renderer. It's open-source, and can be modified to render maps onto texture/FBO. So you can use this texture in threejs or whatever. – pleup Dec 15 '16 at 23:44
  • Good point but I need to use it offline so I can't use the JS version. – dagatsoin Dec 16 '16 at 06:58

1 Answers1

2

There's no way to get an OpenGL context from WebGL one simply because WebGL may work on other APIs (i.e. D3D). However, to achieve similar thing with Three.js you can use mapbox-gl-js. Just render a map to an offscreen canvas (not added to DOM) and use it as a texture for a plane in your Three.js scene.

Roughly, it may look somewhat like this:

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);
}
Kirill Dmitrenko
  • 3,474
  • 23
  • 31
  • Thx for your answer but mapbox gl-js is not an option. I need native feature like offline maps. I edited my question about it. (and about D3D too) – dagatsoin Jan 31 '17 at 09:38