Remove dependency on three.js (use gl-css3d)

[deathcap]

Remove the three.js dependency (port to stackgl for voxel-engine#ndarray). notes:

---

voxel-webview 0.1 uses the CSS3DRenderer effect for three.js, adding an Object3D to the scene graph then having three.js render it, and afterwards copying the computed transformation matrix then applying it to 3D CSS using transform: matrix3d(…).

With the new voxel-engine#ndarray, using the gl-modules/stackgl suite, all voxel-webview has to do is compute the appropriate transformation matrix, then apply it as 3D CSS to the HTML element, in the gl-render event handler. With WebGL, projection * view * model matrix multiplication is performed on the GU in GLSL, but we can instead do it in JavaScript before setting the CSS transform, and/or stack additional transforms (translate3d, rotate3d, etc., beyond matrix3d). voxel-shader has both a view and projection matrix; voxel-webview can supply its own model matrix.

Hooking up the voxel-shader viewMatrix to the 3D CSS transform, some progress, moves with the camera:

but multiplying this.shader.projectionMatrix with this.shaderViewMatrix (in that order) is not quite right:

CSS3DRenderer.js does quite a few more transforms:

  if ( object instanceof THREE.CSS3DSprite ) {

    // http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/

    matrix.copy( camera.matrixWorldInverse );
    matrix.transpose();
    matrix.copyPosition( object.matrixWorld );
    matrix.scale( object.scale );

    matrix.elements[ 3 ] = 0;
    matrix.elements[ 7 ] = 0;
    matrix.elements[ 11 ] = 0;
    matrix.elements[ 15 ] = 1;

    style = getObjectCSSMatrix( matrix );

and getObjectCSSMatrix negates 4,5,6th, before translate3d(-50%,-50%,0). render() sets:

var style = "translate3d(0,0," + fov + "px)" + getCameraCSSMatrix( camera.matrixWorldInverse ) +
  " translate3d(" + _widthHalf + "px," + _heightHalf + "px, 0)";

added the inverted world matrix, and translations before and after, as above, but something is off:

[deathcap]

New module working, using stackgl: https://github.com/deathcap/gl-css3d (ref GH-6, this is a more generic "3D CSS synced to WebGL" implementation). Now to integrate it back with voxel.js in voxel-webview...

[deathcap]

with gl-css3d opts.tint=[1,0,0,0]. Fixed disabling blending in deathcap/gl-css3d@e7969da:

and with no tint:

shows up (though lower than before, have to dig a few blocks into the ground to see), but for some reason, only one side renders and it is inverted (unlike the http://deathcap.github.io/gl-css3d/ demo - different camera parameters?)

[deathcap]

on stackgl branch:

shifted lower into the ground than the three.js version (which sat on top of it), but that was never configurable (though see some ideas in GH-3 for crafting a 'web view' block which can be placed and have voxel-webview render on top of it), and this (Google Chrome?) bug makes it cut in and out when the player moves around: deathcap/gl-css3d#3 - but at least it is usable