From cc9ce923e4d1cd65c6d909b75dae864037291745 Mon Sep 17 00:00:00 2001 From: deathcap Date: Sat, 7 Feb 2015 17:28:34 -0800 Subject: [PATCH 01/16] Disable three.js code, add DOM element. Starting on GH-5 --- webview.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/webview.js b/webview.js index bbc2e83..56cea84 100644 --- a/webview.js +++ b/webview.js @@ -30,6 +30,7 @@ function WebviewPlugin(game, opts) } WebviewPlugin.prototype.enable = function() { + /* var THREE = this.game.THREE; loadCSS3DRenderer(THREE); // adds CSS3DObject, CSS3DSprite, CSS3DRenderer to THREE @@ -46,6 +47,7 @@ WebviewPlugin.prototype.enable = function() { // create a new scene to hold CSS var sceneCSS = new THREE.Scene(); +*/ var element = document.createElement('iframe'); element.setAttribute('id', 'voxel-webview'); @@ -54,7 +56,12 @@ WebviewPlugin.prototype.enable = function() { var elementHeight = this.elementWidth * aspectRatio; element.style.width = this.elementWidth + 'px'; element.style.height = elementHeight + 'px'; + element.style.position = 'absolute'; // display over WebGL canvas + this.element = element; + document.body.appendChild(element); + +/* var cssObject = new THREE.CSS3DObject(element); cssObject.position = planeMesh.position; cssObject.rotation = planeMesh.rotation; @@ -88,6 +95,7 @@ WebviewPlugin.prototype.enable = function() { renderWebGL(sceneWebGL); }; this.originalRender = renderWebGL; +*/ var self = this; From ff72f21d06e297aa31d4f3fe6532a5efab9c1c48 Mon Sep 17 00:00:00 2001 From: deathcap Date: Sat, 7 Feb 2015 17:45:05 -0800 Subject: [PATCH 02/16] Set transform: matrix3d CSS, but to identity matrix --- package.json | 4 +++- webview.js | 32 +++++++++++++++++++++++++++++++- 2 files changed, 34 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index e892958..9680cc4 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,8 @@ "web", "embedding" ], - "dependencies": {}, + "dependencies": { + "gl-mat4": "^1.0.3" + }, "license": "MIT" } diff --git a/webview.js b/webview.js index 56cea84..acb6cfe 100644 --- a/webview.js +++ b/webview.js @@ -1,6 +1,7 @@ 'use strict'; -var loadCSS3DRenderer = require('./CSS3DRenderer.js'); +var mat4 = require('gl-mat4'); +//var loadCSS3DRenderer = require('./CSS3DRenderer.js'); module.exports = function(game, opts) { return new WebviewPlugin(game, opts); @@ -57,8 +58,13 @@ WebviewPlugin.prototype.enable = function() { element.style.width = this.elementWidth + 'px'; element.style.height = elementHeight + 'px'; element.style.position = 'absolute'; // display over WebGL canvas + element.style.transformStyle = 'preserve-3d'; this.element = element; + this.matrix = mat4.create(); + + this.updateMatrix(); + document.body.appendChild(element); /* @@ -150,3 +156,27 @@ WebviewPlugin.prototype.disable = function() { } }; +var cssMatrix = function(m) { + return 'matrix3d(' + + m[0] + ', ' + // alas, cannot do .join on typed arrays + m[1] + ', ' + + m[2] + ', ' + + m[3] + ', ' + + m[4] + ', ' + + m[5] + ', ' + + m[6] + ', ' + + m[7] + ', ' + + m[8] + ', ' + + m[9] + ', ' + + m[10] + ', ' + + m[11] + ', ' + + m[12] + ', ' + + m[13] + ', ' + + m[14] + ', ' + + m[15] + ')'; +}; + + +WebviewPlugin.prototype.updateMatrix = function() { + this.element.style.transform = cssMatrix(this.matrix); +}; From fa7b42ec7d55915bb7abb7221933a1b1b743473a Mon Sep 17 00:00:00 2001 From: deathcap Date: Sat, 7 Feb 2015 18:25:46 -0800 Subject: [PATCH 03/16] Set CSS matrix to camera view matrix --- webview.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/webview.js b/webview.js index acb6cfe..62d8750 100644 --- a/webview.js +++ b/webview.js @@ -8,13 +8,18 @@ module.exports = function(game, opts) { }; module.exports.pluginInfo = { - loadAfter: ['voxel-commands'] + loadAfter: ['voxel-commands', 'game-shell-fps-camera', 'voxel-shader'] }; function WebviewPlugin(game, opts) { this.game = game; + this.camera = game.plugins.get('game-shell-fps-camera'); + if (!this.camera) throw new Error('voxel-webview requires game-shell-fps-camera plugin'); + this.shader = game.plugins.get('voxel-shader'); + if (!this.shader) throw new Error('voxel-webview requires voxel-shader plugin'); + this.url = opts.url || 'http://browserify.org/'; //this.url = opts.url || 'http://npmjs.org/'; // added X-Frame-Options: deny after security audit //this.url = opts.url || 'http://learningthreejs.com/'; // hits illegal return in embedded video player?? @@ -67,6 +72,8 @@ WebviewPlugin.prototype.enable = function() { document.body.appendChild(element); + this.game.shell.on('gl-render', this.onRender = this.render.bind(this)); + /* var cssObject = new THREE.CSS3DObject(element); cssObject.position = planeMesh.position; @@ -154,6 +161,8 @@ WebviewPlugin.prototype.disable = function() { commands.unregisterCommand('url', this.onURL); commands.unregisterCommand('web', this.onWeb); } + + this.game.shell.removeListener('gl-render', this.onRender); }; var cssMatrix = function(m) { @@ -180,3 +189,10 @@ var cssMatrix = function(m) { WebviewPlugin.prototype.updateMatrix = function() { this.element.style.transform = cssMatrix(this.matrix); }; + +WebviewPlugin.prototype.render = function() { + this.camera.view(this.matrix); + // TODO: projection * matrix * model + + this.updateMatrix(); +}; From 53d696b4bb5ef40f3265913cd52ca25ba0897722 Mon Sep 17 00:00:00 2001 From: deathcap Date: Sat, 7 Feb 2015 18:40:00 -0800 Subject: [PATCH 04/16] Multiply model matrix --- webview.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/webview.js b/webview.js index 62d8750..fdafe12 100644 --- a/webview.js +++ b/webview.js @@ -1,6 +1,7 @@ 'use strict'; var mat4 = require('gl-mat4'); +window.mat4=mat4;//debug //var loadCSS3DRenderer = require('./CSS3DRenderer.js'); module.exports = function(game, opts) { @@ -32,6 +33,11 @@ function WebviewPlugin(game, opts) this.planeHeight = opts.planeHeight || 10; this.elementWidth = opts.elementWidth || 1024; + this.element = undefined; + this.matrix = mat4.create(); + this.viewMatrix = mat4.create(); + this.modelMatrix = mat4.create(); + this.enable(); } @@ -66,7 +72,6 @@ WebviewPlugin.prototype.enable = function() { element.style.transformStyle = 'preserve-3d'; this.element = element; - this.matrix = mat4.create(); this.updateMatrix(); @@ -191,8 +196,12 @@ WebviewPlugin.prototype.updateMatrix = function() { }; WebviewPlugin.prototype.render = function() { - this.camera.view(this.matrix); - // TODO: projection * matrix * model + this.camera.view(this.viewMatrix); // TODO: might as well get from shader plugin .viewMatrix + + // TODO matrix = projection * view * model + mat4.multiply(this.matrix, mat4.create(), this.viewMatrix); + //mat4.multiply(this.matrix, this.shader.projectionMatrix, this.viewMatrix); // TODO + mat4.multiply(this.matrix, this.matrix, this.modelMatrix); this.updateMatrix(); }; From a079dab0c752a3d939c8a3d0fc86d4e2a1c9f832 Mon Sep 17 00:00:00 2001 From: deathcap Date: Sat, 7 Feb 2015 18:57:23 -0800 Subject: [PATCH 05/16] Get view matrix from voxel-shader directly, instead of via game-shell-fps-camera --- webview.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/webview.js b/webview.js index fdafe12..d8a3691 100644 --- a/webview.js +++ b/webview.js @@ -9,15 +9,13 @@ module.exports = function(game, opts) { }; module.exports.pluginInfo = { - loadAfter: ['voxel-commands', 'game-shell-fps-camera', 'voxel-shader'] + loadAfter: ['voxel-commands', 'voxel-shader'] }; function WebviewPlugin(game, opts) { this.game = game; - this.camera = game.plugins.get('game-shell-fps-camera'); - if (!this.camera) throw new Error('voxel-webview requires game-shell-fps-camera plugin'); this.shader = game.plugins.get('voxel-shader'); if (!this.shader) throw new Error('voxel-webview requires voxel-shader plugin'); @@ -196,10 +194,8 @@ WebviewPlugin.prototype.updateMatrix = function() { }; WebviewPlugin.prototype.render = function() { - this.camera.view(this.viewMatrix); // TODO: might as well get from shader plugin .viewMatrix - // TODO matrix = projection * view * model - mat4.multiply(this.matrix, mat4.create(), this.viewMatrix); + mat4.multiply(this.matrix, mat4.create(), this.shader.viewMatrix); //mat4.multiply(this.matrix, this.shader.projectionMatrix, this.viewMatrix); // TODO mat4.multiply(this.matrix, this.matrix, this.modelMatrix); From 3774c486a2cfbccd9cd74fe9aa84d0af2178906e Mon Sep 17 00:00:00 2001 From: deathcap Date: Sat, 7 Feb 2015 21:04:20 -0800 Subject: [PATCH 06/16] Fix disabling, remove three.js-only this.game.view reference --- webview.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webview.js b/webview.js index d8a3691..fa31cb2 100644 --- a/webview.js +++ b/webview.js @@ -156,7 +156,7 @@ WebviewPlugin.prototype.enable = function() { }; WebviewPlugin.prototype.disable = function() { - this.game.view.render = this.originalRender; + //this.game.view.render = this.originalRender; window.removeEventListener('click', this.onClick); var commands = this.game.plugins.get('voxel-commands'); @@ -196,7 +196,7 @@ WebviewPlugin.prototype.updateMatrix = function() { WebviewPlugin.prototype.render = function() { // TODO matrix = projection * view * model mat4.multiply(this.matrix, mat4.create(), this.shader.viewMatrix); - //mat4.multiply(this.matrix, this.shader.projectionMatrix, this.viewMatrix); // TODO + //mat4.multiply(this.matrix, this.shader.projectionMatrix, this.shader.viewMatrix); // TODO mat4.multiply(this.matrix, this.matrix, this.modelMatrix); this.updateMatrix(); From 86c44ecc0c28581cfde274c9ce9ac569e2eaeaf0 Mon Sep 17 00:00:00 2001 From: deathcap Date: Sat, 7 Feb 2015 21:27:57 -0800 Subject: [PATCH 07/16] Add cssWorld container with perspective transform from camera FOV --- webview.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/webview.js b/webview.js index fa31cb2..a5ec2c4 100644 --- a/webview.js +++ b/webview.js @@ -69,11 +69,18 @@ WebviewPlugin.prototype.enable = function() { element.style.position = 'absolute'; // display over WebGL canvas element.style.transformStyle = 'preserve-3d'; + // CSS world container (3D initialized in updatePerspective) + var cssWorld = document.createElement('div'); + + this.shader.on('updateProjectionMatrix', this.onUpdatePerspective = this.updatePerspective.bind(this)); + + this.cssWorld = cssWorld; this.element = element; this.updateMatrix(); - document.body.appendChild(element); + cssWorld.appendChild(element); + document.body.appendChild(cssWorld); this.game.shell.on('gl-render', this.onRender = this.render.bind(this)); @@ -166,6 +173,16 @@ WebviewPlugin.prototype.disable = function() { } this.game.shell.removeListener('gl-render', this.onRender); + this.shader.removeListener('updateProjectionMatrix', this.onUpdatePerspective); +}; + +WebviewPlugin.prototype.updatePerspective = function() { + // http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs + var cameraFOV = this.shader.cameraFOV; + var screenHeight = this.game.shell.height; + var fovValue = 0.5 / Math.tan(cameraFOV * Math.PI / 360) * screenHeight; + this.cssWorld.style.perspective = fovValue + 'px'; + this.cssWorld.style.perspectiveOrigin = '50% 50%'; }; var cssMatrix = function(m) { From 52c9a716190ae740131f22c5676a24785f028d19 Mon Sep 17 00:00:00 2001 From: deathcap Date: Sun, 8 Feb 2015 11:43:37 -0800 Subject: [PATCH 08/16] Use inverted world matrix --- webview.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/webview.js b/webview.js index a5ec2c4..9364f4a 100644 --- a/webview.js +++ b/webview.js @@ -211,10 +211,11 @@ WebviewPlugin.prototype.updateMatrix = function() { }; WebviewPlugin.prototype.render = function() { - // TODO matrix = projection * view * model - mat4.multiply(this.matrix, mat4.create(), this.shader.viewMatrix); - //mat4.multiply(this.matrix, this.shader.projectionMatrix, this.shader.viewMatrix); // TODO + // matrix = projection * view * model + mat4.multiply(this.matrix, this.shader.projectionMatrix, this.shader.viewMatrix); mat4.multiply(this.matrix, this.matrix, this.modelMatrix); + // invert world matrix + mat4.invert(this.matrix, this.matrix); this.updateMatrix(); }; From cf6223e6272bf49d4ed552fe8f6549203f414d65 Mon Sep 17 00:00:00 2001 From: deathcap Date: Sun, 8 Feb 2015 11:44:51 -0800 Subject: [PATCH 09/16] Use the matrix-to-css module --- package.json | 3 ++- webview.js | 24 ++---------------------- 2 files changed, 4 insertions(+), 23 deletions(-) diff --git a/package.json b/package.json index 9680cc4..2c67bf8 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,8 @@ "embedding" ], "dependencies": { - "gl-mat4": "^1.0.3" + "gl-mat4": "^1.0.3", + "matrix-to-css": "^1.0.4" }, "license": "MIT" } diff --git a/webview.js b/webview.js index 9364f4a..4d74a6b 100644 --- a/webview.js +++ b/webview.js @@ -1,6 +1,7 @@ 'use strict'; var mat4 = require('gl-mat4'); +var matrixToCSS = require('matrix-to-css'); window.mat4=mat4;//debug //var loadCSS3DRenderer = require('./CSS3DRenderer.js'); @@ -185,29 +186,8 @@ WebviewPlugin.prototype.updatePerspective = function() { this.cssWorld.style.perspectiveOrigin = '50% 50%'; }; -var cssMatrix = function(m) { - return 'matrix3d(' + - m[0] + ', ' + // alas, cannot do .join on typed arrays - m[1] + ', ' + - m[2] + ', ' + - m[3] + ', ' + - m[4] + ', ' + - m[5] + ', ' + - m[6] + ', ' + - m[7] + ', ' + - m[8] + ', ' + - m[9] + ', ' + - m[10] + ', ' + - m[11] + ', ' + - m[12] + ', ' + - m[13] + ', ' + - m[14] + ', ' + - m[15] + ')'; -}; - - WebviewPlugin.prototype.updateMatrix = function() { - this.element.style.transform = cssMatrix(this.matrix); + this.element.style.transform = matrixToCSS(this.matrix); }; WebviewPlugin.prototype.render = function() { From 8f9d17b509323c90bc93bf9a2bfc571e63229755 Mon Sep 17 00:00:00 2001 From: deathcap Date: Sun, 8 Feb 2015 12:41:23 -0800 Subject: [PATCH 10/16] Add translations before and after inverted world matrix from http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs --- webview.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/webview.js b/webview.js index 4d74a6b..c50a4f1 100644 --- a/webview.js +++ b/webview.js @@ -78,7 +78,7 @@ WebviewPlugin.prototype.enable = function() { this.cssWorld = cssWorld; this.element = element; - this.updateMatrix(); + this.updateCSSTransform(); cssWorld.appendChild(element); document.body.appendChild(cssWorld); @@ -181,13 +181,19 @@ WebviewPlugin.prototype.updatePerspective = function() { // http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs var cameraFOV = this.shader.cameraFOV; var screenHeight = this.game.shell.height; - var fovValue = 0.5 / Math.tan(cameraFOV * Math.PI / 360) * screenHeight; - this.cssWorld.style.perspective = fovValue + 'px'; + this.screenWhalf = this.game.shell.width / 2; + this.screenHhalf = this.game.shell.height / 2; + + this.fovPx = 0.5 / Math.tan(cameraFOV * Math.PI / 360) * screenHeight; + this.cssWorld.style.perspective = this.fovPx + 'px'; this.cssWorld.style.perspectiveOrigin = '50% 50%'; }; -WebviewPlugin.prototype.updateMatrix = function() { - this.element.style.transform = matrixToCSS(this.matrix); +WebviewPlugin.prototype.updateCSSTransform = function() { + this.element.style.transform = + 'translate3d(0,0,' + this.fovPx + 'px) ' + + matrixToCSS(this.matrix) + + ' translate3d(' + this.screenWhalf + 'px,' + this.screenHhalf + 'px, 0)'; }; WebviewPlugin.prototype.render = function() { @@ -197,5 +203,5 @@ WebviewPlugin.prototype.render = function() { // invert world matrix mat4.invert(this.matrix, this.matrix); - this.updateMatrix(); + this.updateCSSTransform(); }; From 2cceb57fba5e2551882224c991f294b59e149e77 Mon Sep 17 00:00:00 2001 From: deathcap Date: Sat, 14 Feb 2015 00:38:24 -0800 Subject: [PATCH 11/16] CSS world element covers canvas, but allows pointer events though --- webview.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/webview.js b/webview.js index c50a4f1..c370071 100644 --- a/webview.js +++ b/webview.js @@ -69,9 +69,14 @@ WebviewPlugin.prototype.enable = function() { element.style.height = elementHeight + 'px'; element.style.position = 'absolute'; // display over WebGL canvas element.style.transformStyle = 'preserve-3d'; + element.style.pointerEvents = 'auto'; // CSS world container (3D initialized in updatePerspective) var cssWorld = document.createElement('div'); + //cssWorld.style.perspectiveOrigin = '50% 50%'; // already is default + cssWorld.style.transformStyle = 'preserve-3d'; + cssWorld.style.overflow = 'hidden'; + cssWorld.style.pointerEvents = 'none'; // mouse clicks through this.shader.on('updateProjectionMatrix', this.onUpdatePerspective = this.updatePerspective.bind(this)); @@ -179,21 +184,24 @@ WebviewPlugin.prototype.disable = function() { WebviewPlugin.prototype.updatePerspective = function() { // http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs - var cameraFOV = this.shader.cameraFOV; + var cameraFOV = this.shader.cameraFOV=45; var screenHeight = this.game.shell.height; this.screenWhalf = this.game.shell.width / 2; this.screenHhalf = this.game.shell.height / 2; this.fovPx = 0.5 / Math.tan(cameraFOV * Math.PI / 360) * screenHeight; this.cssWorld.style.perspective = this.fovPx + 'px'; - this.cssWorld.style.perspectiveOrigin = '50% 50%'; + this.cssWorld.style.width = this.game.shell.width + 'px'; + this.cssWorld.style.height = this.game.shell.height + 'px'; }; WebviewPlugin.prototype.updateCSSTransform = function() { + /* TODO this.element.style.transform = 'translate3d(0,0,' + this.fovPx + 'px) ' + matrixToCSS(this.matrix) + ' translate3d(' + this.screenWhalf + 'px,' + this.screenHhalf + 'px, 0)'; + */ }; WebviewPlugin.prototype.render = function() { From e44e8e5719aa246b9c38e2137990e0f001bcb308 Mon Sep 17 00:00:00 2001 From: deathcap Date: Sun, 15 Feb 2015 21:42:56 -0800 Subject: [PATCH 12/16] Experiment using decals since they fit snugly on the face of a voxel --- webview.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/webview.js b/webview.js index c370071..dac4397 100644 --- a/webview.js +++ b/webview.js @@ -10,7 +10,7 @@ module.exports = function(game, opts) { }; module.exports.pluginInfo = { - loadAfter: ['voxel-commands', 'voxel-shader'] + loadAfter: ['voxel-commands', 'voxel-shader', 'voxel-decals'] }; function WebviewPlugin(game, opts) @@ -41,6 +41,14 @@ function WebviewPlugin(game, opts) } WebviewPlugin.prototype.enable = function() { + var decals = game.plugins.get('voxel-decals'); + if (decals) { + window.d = function() { + decals.add({position:[-1,3,-2], normal:[0,0,1], texture:'furnace_top'}); + decals.update(); + }; + } + /* var THREE = this.game.THREE; @@ -196,12 +204,10 @@ WebviewPlugin.prototype.updatePerspective = function() { }; WebviewPlugin.prototype.updateCSSTransform = function() { - /* TODO this.element.style.transform = - 'translate3d(0,0,' + this.fovPx + 'px) ' + - matrixToCSS(this.matrix) + + 'translate3d(0,0,' + (this.fovPx - 10) + 'px) ' + + //matrixToCSS(this.matrix) + ' translate3d(' + this.screenWhalf + 'px,' + this.screenHhalf + 'px, 0)'; - */ }; WebviewPlugin.prototype.render = function() { From 009d6fbc4827b8abb65cf3372e26c49fcb378ff5 Mon Sep 17 00:00:00 2001 From: deathcap Date: Sun, 15 Feb 2015 21:55:05 -0800 Subject: [PATCH 13/16] Start converting to use gl-css3d --- package.json | 3 +- webview.js | 141 +++++++-------------------------------------------- 2 files changed, 20 insertions(+), 124 deletions(-) diff --git a/package.json b/package.json index 2c67bf8..5451033 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,7 @@ "embedding" ], "dependencies": { - "gl-mat4": "^1.0.3", - "matrix-to-css": "^1.0.4" + "gl-css3d": "git://github.com/deathcap/gl-css3d.git" }, "license": "MIT" } diff --git a/webview.js b/webview.js index dac4397..fe76f67 100644 --- a/webview.js +++ b/webview.js @@ -1,16 +1,13 @@ 'use strict'; -var mat4 = require('gl-mat4'); -var matrixToCSS = require('matrix-to-css'); -window.mat4=mat4;//debug -//var loadCSS3DRenderer = require('./CSS3DRenderer.js'); +var createCSS3D = require('gl-css3d'); module.exports = function(game, opts) { return new WebviewPlugin(game, opts); }; module.exports.pluginInfo = { - loadAfter: ['voxel-commands', 'voxel-shader', 'voxel-decals'] + loadAfter: ['voxel-commands', 'voxel-shader'] }; function WebviewPlugin(game, opts) @@ -30,109 +27,25 @@ function WebviewPlugin(game, opts) this.planeWidth = opts.planeWidth || 10; this.planeHeight = opts.planeHeight || 10; - this.elementWidth = opts.elementWidth || 1024; + //this.elementWidth = opts.elementWidth || 1024; // TODO - this.element = undefined; - this.matrix = mat4.create(); - this.viewMatrix = mat4.create(); - this.modelMatrix = mat4.create(); + var iframe = document.createElement('iframe'); + iframe.src = this.url; + iframe.style.width = '100%'; + iframe.style.height = '100%'; + iframe.id = 'voxel-webview'; + + this.css3d = createCSS3D(iframe, opts); this.enable(); } WebviewPlugin.prototype.enable = function() { - var decals = game.plugins.get('voxel-decals'); - if (decals) { - window.d = function() { - decals.add({position:[-1,3,-2], normal:[0,0,1], texture:'furnace_top'}); - decals.update(); - }; - } - - /* - var THREE = this.game.THREE; - - loadCSS3DRenderer(THREE); // adds CSS3DObject, CSS3DSprite, CSS3DRenderer to THREE - - // see http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/ - // and https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/CSS3D.html - var planeMaterial = new THREE.MeshBasicMaterial({color: 0x000000, opacity: 0.1, side: THREE.DoubleSide}); - var planeGeometry = new THREE.PlaneGeometry(this.planeWidth, this.planeHeight); - var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial); - planeMesh.position.y += this.planeHeight / 2; - - // add to the WebGL scene - this.game.scene.add(planeMesh); - - // create a new scene to hold CSS - var sceneCSS = new THREE.Scene(); -*/ - - var element = document.createElement('iframe'); - element.setAttribute('id', 'voxel-webview'); - element.src = this.url; - var aspectRatio = this.planeHeight / this.planeWidth; - var elementHeight = this.elementWidth * aspectRatio; - element.style.width = this.elementWidth + 'px'; - element.style.height = elementHeight + 'px'; - element.style.position = 'absolute'; // display over WebGL canvas - element.style.transformStyle = 'preserve-3d'; - element.style.pointerEvents = 'auto'; - - // CSS world container (3D initialized in updatePerspective) - var cssWorld = document.createElement('div'); - //cssWorld.style.perspectiveOrigin = '50% 50%'; // already is default - cssWorld.style.transformStyle = 'preserve-3d'; - cssWorld.style.overflow = 'hidden'; - cssWorld.style.pointerEvents = 'none'; // mouse clicks through + this.game.shell.on('gl-init', this.onInit = this.ginit.bind(this)); this.shader.on('updateProjectionMatrix', this.onUpdatePerspective = this.updatePerspective.bind(this)); - - this.cssWorld = cssWorld; - this.element = element; - - this.updateCSSTransform(); - - cssWorld.appendChild(element); - document.body.appendChild(cssWorld); - this.game.shell.on('gl-render', this.onRender = this.render.bind(this)); -/* - var cssObject = new THREE.CSS3DObject(element); - cssObject.position = planeMesh.position; - cssObject.rotation = planeMesh.rotation; - var percentBorder = 0.05; - cssObject.scale.x /= (1 + percentBorder) * (this.elementWidth / this.planeWidth); - cssObject.scale.y /= (1 + percentBorder) * (this.elementWidth / this.planeWidth); - sceneCSS.add(cssObject); - - var rendererCSS = new THREE.CSS3DRenderer(); - rendererCSS.setSize(window.innerWidth, window.innerHeight); - rendererCSS.domElement.style.position = 'absolute'; - rendererCSS.domElement.style.top = '0'; - rendererCSS.domElement.style.margin = '0'; - rendererCSS.domElement.style.padding = '0'; - document.body.appendChild(rendererCSS.domElement); - //THREEx.WindowResize(rendererCSS, camera); - - // make sure the CSS renderer appears below the WebGL renderer - var rendererWebGL = this.game.view.renderer; - rendererCSS.domElement.style.zIndex = -1; - //rendererCSS.domElement.appendChild(this.game.view.renderer.domElement); - console.log('rendererCSS',rendererCSS); - - var sceneWebGL = this.game.scene; - var camera = this.game.view.camera; - - var renderWebGL = this.game.view.render.bind(this.game.view); - this.game.view.render = function(sceneWebGL) { - rendererCSS.render(sceneCSS, camera); - //rendererWebGL.render(sceneWebGL, camera); - renderWebGL(sceneWebGL); - }; - this.originalRender = renderWebGL; -*/ var self = this; @@ -177,7 +90,6 @@ WebviewPlugin.prototype.enable = function() { }; WebviewPlugin.prototype.disable = function() { - //this.game.view.render = this.originalRender; window.removeEventListener('click', this.onClick); var commands = this.game.plugins.get('voxel-commands'); @@ -187,35 +99,20 @@ WebviewPlugin.prototype.disable = function() { } this.game.shell.removeListener('gl-render', this.onRender); + this.game.shell.removeListener('gl-init', this.onInit); this.shader.removeListener('updateProjectionMatrix', this.onUpdatePerspective); }; -WebviewPlugin.prototype.updatePerspective = function() { - // http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs - var cameraFOV = this.shader.cameraFOV=45; - var screenHeight = this.game.shell.height; - this.screenWhalf = this.game.shell.width / 2; - this.screenHhalf = this.game.shell.height / 2; - - this.fovPx = 0.5 / Math.tan(cameraFOV * Math.PI / 360) * screenHeight; - this.cssWorld.style.perspective = this.fovPx + 'px'; - this.cssWorld.style.width = this.game.shell.width + 'px'; - this.cssWorld.style.height = this.game.shell.height + 'px'; +WebviewPlugin.prototype.ginit = function(gl) { + this.css3d.ginit(this.game.shell.gl); }; -WebviewPlugin.prototype.updateCSSTransform = function() { - this.element.style.transform = - 'translate3d(0,0,' + (this.fovPx - 10) + 'px) ' + - //matrixToCSS(this.matrix) + - ' translate3d(' + this.screenWhalf + 'px,' + this.screenHhalf + 'px, 0)'; +WebviewPlugin.prototype.updatePerspective = function() { + var cameraFOVradians = this.shader.cameraFOV * Math.PI/180; + + this.css3d.updatePerspective(cameraFOVradians, this.game.shell.width, this.game.shell.height); }; WebviewPlugin.prototype.render = function() { - // matrix = projection * view * model - mat4.multiply(this.matrix, this.shader.projectionMatrix, this.shader.viewMatrix); - mat4.multiply(this.matrix, this.matrix, this.modelMatrix); - // invert world matrix - mat4.invert(this.matrix, this.matrix); - - this.updateCSSTransform(); + this.css3d.render(this.shader.viewMatrix, this.shader.projectionMatrix); }; From 11f977c3e35cf67ac2c8e87fd531ddad8e29a772 Mon Sep 17 00:00:00 2001 From: deathcap Date: Sun, 15 Feb 2015 22:32:00 -0800 Subject: [PATCH 14/16] Fix plane width and inversion Requires gl-css3d: deathcap/gl-css3d@43f91ab853a0b2a72bdc4450ca502ab39b8f7629 Size GL cutout to match CSS3D, fixes planeWidth/Height options deathcap/gl-css3d@bd8d7de64f61700aca78643eb67bb04ab314c1cb Add flipX and flipY options --- webview.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/webview.js b/webview.js index fe76f67..ee83551 100644 --- a/webview.js +++ b/webview.js @@ -25,8 +25,8 @@ function WebviewPlugin(game, opts) //this.url = opts.url || 'http:/aol.com/'; // fails setting aol_devil_flag Uncaught SecurityError: Blocked a frame with origin "http://www.aol.com //this.url = opts.url || 'http://github.com/'; // also has X-Frame-Options: deny - this.planeWidth = opts.planeWidth || 10; - this.planeHeight = opts.planeHeight || 10; + opts.planeWidth = opts.planeWidth || 10; + opts.planeHeight = opts.planeHeight || 10; //this.elementWidth = opts.elementWidth || 1024; // TODO var iframe = document.createElement('iframe'); @@ -35,6 +35,8 @@ function WebviewPlugin(game, opts) iframe.style.height = '100%'; iframe.id = 'voxel-webview'; + //opts.tint = opts.tint || [1,0,0,0]; + opts.flipX = false; // for some reason this.css3d = createCSS3D(iframe, opts); this.enable(); From 76476644c905ce1f8d52c385b367053b1101d7ab Mon Sep 17 00:00:00 2001 From: deathcap Date: Sun, 15 Feb 2015 22:38:57 -0800 Subject: [PATCH 15/16] Add link to gl-css3d in readme --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 07a0f9a..823ccc3 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,7 @@ Embed webpages in a voxel.js world using CSS 3D ## References / see also +* [gl-css3d](https://github.com/deathcap/gl-css3d) * [Mixing HTML Pages Inside Your WebGL](http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/) * [stemkoski Three.js Examples: CSS3D](http://stemkoski.github.io/Three.js/CSS3D.html) ([source](https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/CSS3D.html)) * [Web Displays (modification for Minecraft)](http://www.minecraftforum.net/topic/1930372-162164-forge-web-displays-browse-on-the-internet-in-minecraft/) From afe1cb055111683b4d122eeeaa9975417fda5149 Mon Sep 17 00:00:00 2001 From: deathcap Date: Sun, 15 Feb 2015 22:39:24 -0800 Subject: [PATCH 16/16] Remove three.js CSS3DRenderer - replaced by gl-css3d --- CSS3DRenderer.js | 231 ----------------------------------------------- 1 file changed, 231 deletions(-) delete mode 100644 CSS3DRenderer.js diff --git a/CSS3DRenderer.js b/CSS3DRenderer.js deleted file mode 100644 index 08052bc..0000000 --- a/CSS3DRenderer.js +++ /dev/null @@ -1,231 +0,0 @@ -// based on https://github.com/mrdoob/three.js/blob/219c07680da08c5254c1b05482eb40ea038234e0/examples/js/renderers/CSS3DRenderer.js -// adapted for nodejs -module.exports = function(THREE) { - -/** - * Based on http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs - * @author mrdoob / http://mrdoob.com/ - */ - -THREE.CSS3DObject = function ( element ) { - - THREE.Object3D.call( this ); - - this.element = element; - this.element.style.position = 'absolute'; - - this.addEventListener( 'removed', function ( event ) { - - if ( this.element.parentNode !== null ) { - - this.element.parentNode.removeChild( this.element ); - - for ( var i = 0, l = this.children.length; i < l; i ++ ) { - - this.children[ i ].dispatchEvent( event ); - - } - - } - - } ); - -}; - -THREE.CSS3DObject.prototype = Object.create( THREE.Object3D.prototype ); - -THREE.CSS3DSprite = function ( element ) { - - THREE.CSS3DObject.call( this, element ); - -}; - -THREE.CSS3DSprite.prototype = Object.create( THREE.CSS3DObject.prototype ); - -// - -THREE.CSS3DRenderer = function () { - - console.log( 'THREE.CSS3DRenderer', THREE.REVISION ); - - var _width, _height; - var _widthHalf, _heightHalf; - - var matrix = new THREE.Matrix4(); - - var domElement = document.createElement( 'div' ); - domElement.style.overflow = 'hidden'; - - domElement.style.WebkitTransformStyle = 'preserve-3d'; - domElement.style.MozTransformStyle = 'preserve-3d'; - domElement.style.oTransformStyle = 'preserve-3d'; - domElement.style.transformStyle = 'preserve-3d'; - - this.domElement = domElement; - - var cameraElement = document.createElement( 'div' ); - - cameraElement.style.WebkitTransformStyle = 'preserve-3d'; - cameraElement.style.MozTransformStyle = 'preserve-3d'; - cameraElement.style.oTransformStyle = 'preserve-3d'; - cameraElement.style.transformStyle = 'preserve-3d'; - - domElement.appendChild( cameraElement ); - - this.setClearColor = function () { - - }; - - this.setSize = function ( width, height ) { - - _width = width; - _height = height; - - _widthHalf = _width / 2; - _heightHalf = _height / 2; - - domElement.style.width = width + 'px'; - domElement.style.height = height + 'px'; - - cameraElement.style.width = width + 'px'; - cameraElement.style.height = height + 'px'; - - }; - - var epsilon = function ( value ) { - - return Math.abs( value ) < 0.000001 ? 0 : value; - - }; - - var getCameraCSSMatrix = function ( matrix ) { - - var elements = matrix.elements; - - return 'matrix3d(' + - epsilon( elements[ 0 ] ) + ',' + - epsilon( - elements[ 1 ] ) + ',' + - epsilon( elements[ 2 ] ) + ',' + - epsilon( elements[ 3 ] ) + ',' + - epsilon( elements[ 4 ] ) + ',' + - epsilon( - elements[ 5 ] ) + ',' + - epsilon( elements[ 6 ] ) + ',' + - epsilon( elements[ 7 ] ) + ',' + - epsilon( elements[ 8 ] ) + ',' + - epsilon( - elements[ 9 ] ) + ',' + - epsilon( elements[ 10 ] ) + ',' + - epsilon( elements[ 11 ] ) + ',' + - epsilon( elements[ 12 ] ) + ',' + - epsilon( - elements[ 13 ] ) + ',' + - epsilon( elements[ 14 ] ) + ',' + - epsilon( elements[ 15 ] ) + - ')'; - - }; - - var getObjectCSSMatrix = function ( matrix ) { - - var elements = matrix.elements; - - return 'translate3d(-50%,-50%,0) matrix3d(' + - epsilon( elements[ 0 ] ) + ',' + - epsilon( elements[ 1 ] ) + ',' + - epsilon( elements[ 2 ] ) + ',' + - epsilon( elements[ 3 ] ) + ',' + - epsilon( - elements[ 4 ] ) + ',' + - epsilon( - elements[ 5 ] ) + ',' + - epsilon( - elements[ 6 ] ) + ',' + - epsilon( - elements[ 7 ] ) + ',' + - epsilon( elements[ 8 ] ) + ',' + - epsilon( elements[ 9 ] ) + ',' + - epsilon( elements[ 10 ] ) + ',' + - epsilon( elements[ 11 ] ) + ',' + - epsilon( elements[ 12 ] ) + ',' + - epsilon( elements[ 13 ] ) + ',' + - epsilon( elements[ 14 ] ) + ',' + - epsilon( elements[ 15 ] ) + - ')'; - - }; - - var renderObject = function ( object, camera ) { - - if ( object instanceof THREE.CSS3DObject ) { - - var style; - - 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 ); - - } else { - - style = getObjectCSSMatrix( object.matrixWorld ); - - } - - var element = object.element; - - element.style.WebkitTransform = style; - element.style.MozTransform = style; - element.style.oTransform = style; - element.style.transform = style; - - if ( element.parentNode !== cameraElement ) { - - cameraElement.appendChild( element ); - - } - - } - - for ( var i = 0, l = object.children.length; i < l; i ++ ) { - - renderObject( object.children[ i ], camera ); - - } - - }; - - this.render = function ( scene, camera ) { - - var fov = 0.5 / Math.tan( THREE.Math.degToRad( camera.fov * 0.5 ) ) * _height; - - domElement.style.WebkitPerspective = fov + "px"; - domElement.style.MozPerspective = fov + "px"; - domElement.style.oPerspective = fov + "px"; - domElement.style.perspective = fov + "px"; - - scene.updateMatrixWorld(); - - if ( camera.parent === undefined ) camera.updateMatrixWorld(); - - camera.matrixWorldInverse.getInverse( camera.matrixWorld ); - - var style = "translate3d(0,0," + fov + "px)" + getCameraCSSMatrix( camera.matrixWorldInverse ) + - " translate3d(" + _widthHalf + "px," + _heightHalf + "px, 0)"; - - cameraElement.style.WebkitTransform = style; - cameraElement.style.MozTransform = style; - cameraElement.style.oTransform = style; - cameraElement.style.transform = style; - - renderObject( scene, camera ); - - }; - -}; - -};