So we have finally got the contracts in place to start work on a cool interface to the Lunar Reconnaissance Orbiter moon data and modeling coming out of the Diviner team at UCLA. The idea is to re-use the indexing system we developed to localize game events on a true-world-sized virtual planet. We are taking that same game engine and using it to aid in model and display Diviner data and thermal model maps in real-time. And by real-time, I mean full 3D at (hopefully) FPS game speed, and in a web browser using HTML5 technologies!
This is not a simple Google Earth/Moon/Mars mega-texture approach where the surface is split into many tiles at many resolutions; instead we do it more like a spectral solver for PDEs on a sphere, including the time component.
The core system maps very well to a recursive functional style, and so is entirely coded in OCaml. We then compile that to a fast native app (using labGL rendering) or to Javascript (via ocamljs and WebGL). The latter is more interesting as every non-IE browser now supports webGL).
The big problem with webGL is that all of the engines that have so far been developed for it are based off native OpenGL engines. They try to mimic the use of 3D models, texturing and CPU side geometry used in a desktop environment; especially when porting an existing game from a mobile or native platform. Javascript has very different performance trade-offs, and not surprisingly, webGL comes into its own when used with all of the support a browser provides rather than fighting it.
For example to set up a texture from an image (ignoring preloading etc.):
function texFromElem(tex,elem) {
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, elem);
}
img = new Image();
itex = gl.createTexture();
img.onload = function() { texFromElem(itex, img); }
img.src = "some-url";
All the image loading and decoding is done for you. As an aside: really cool thing here is that texImage2D can take any HTML5 image like element. So something like this:
vid = document.createElement("video");
itex = gl.createTexture();
vid.innerHTML = "<source src='"+some_url+"'/>";
vid.autoplay = true;
setInterval(function() { texFromElem(tex, vid); }, 50) ;
…gives you a video texture ! (with some extra house keeping). Even cooler than that: the element can even be another canvas element, with either 2D or webGL inside it! (although good luck keeping the browsers stable at this point)
We’ve been developing a webGL framework that make direct use of browser-supplied parts, and we are trying to push as much of the computation as we can off into shaders. The result will be a 3D Moon interface that that has the same high-speed feel of a console game, rendering all the image data as fast as you can move around, but using real data from space and running right inside your web browser using the latest HTML5 technologies!
Although we have been developing the engine so far using ocamljs, we are also evaluating the use of js_of_ocaml. The latter works directly via bytecode compilation, which makes it easier to maintain than the patched compiler toolchain that the (otherwise excellent) ocamljs requires. Stay tuned for more news on this…