WebKit.js for rendering embedded web views instead of iframe

[deathcap]

Use the WebKit.js renderer instead of, or as an alternative to, the browser's built-in iframe-based rendering:

https://github.com/trevorlinton/webkit.js Pure JavaScript port of WebKit using emscriptem

http://badassjs.com/post/73526882798/webkit-js-its-happening-for-real-with

[deathcap]

webkit.js looks promising, the demo http://trevorlinton.github.io does not support network requests however, but interestingly it does use WebGL. As for voxel-webview, it is at a crossroads, there are two major different approaches it could take going forward:

3D CSS synced to WebGL: the current voxel-webview implementation, based on Jerome Etienne's article Mixing HTML Pages Inside Your WebGL. voxel-webview uses an HTML iframe tag, because it is most general, but basically any HTML can be used with this technique to render as a billboard in a WebGL scene. Doesn't have to be a third-party web page view (representing a 'computer terminal' in the voxel metaverse), could be e.g., stylized text, images, video, documents, forms, etc., whatever can be represented in HTML and is most useful for the application at hand.

This works quite well but the big downside is the 3D CSS is not truly part of the WebGL scene, merely layered on top of it, so it will not be affected by any modifications to the GL rendering process — such as voxel-vr side-by-side stereoscopic rendering, or voxel-pp post-processing. To work in VR, would have to be special-cased to create two 3D CSS elements, and there might be issues with fullscreening to the VR device the canvas + DOM, instead of just the canvas pixels (in https://www.youtube.com/playlist?list=PLUj8-Hhrb-a0Z3f70ygX5fXLk8Sa4mTQZ Browser-Based Virtual Reality in HTML5 - a browser developer mentioned they are working on supporting VR for 3D CSS, context unclear though). Which is why the second approach is appealing:

Rendering to a canvas texture with interactivity: this is what webkit.js does (or aims to do, "Routing mouse and keyboard events are still in the works"), implements tons of rendering logic and draws the final pixels to an HTML5 canvas. Since it is just pixels, the same image could be used as a 2d texture in a WebGL 3D scene quite easily (gl-texture2d supports ImageData, HTMLCanvas, HTMLImage, HTMLVideo, and ndarray formats). User input would need to be wired up (mouse /keyboard events, hit regions?) but should be possible.

Being a normal part of the 3D scene, this approach has none of the problems of the first. It is also extensible to other applications — like an https://github.com/deathcap/voxel-ideas/issues/40 In-world text editor - with vim.js or primrose, editors which both render to a HTML canvas, providing the texture data to display and handling user input. Most generally these could be viewed as 'interactive billboard textures' and applied to the side of voxel(s), for any number of purposes (embedded web browsers, text editors, touchscreens, computers, miscellaneous machinery). Sort of like voxel-decals (which is used for the block break progress in voxel-mine), but for dynamic and interactive content.

[deathcap]

Correction: voxel-webview does not use a billboard; billboards are sprites that always face the user, see draw-billboard (another example: item drops in Minecraft, before they were 3d). Even though CSS3DRenderer (from three.js example) uses this matrix from // 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;

the webview does not behave as a billboard; its just an ordinary flat plane, and doesn't always have to face the user.

[deathcap]

Or https://github.com/PixelsCommander/HTML-GL (via: https://news.ycombinator.com/item?id=9310488)