Permalink
Browse files

completing htmlmixer page

  • Loading branch information...
1 parent e8e4fb8 commit c40848141d37be367b0f0597c7e313d4e2198858 @jeromeetienne committed Apr 30, 2013
Showing with 87 additions and 16 deletions.
  1. +3 −3 ...{2012-12-07-move-a-cube-with-your-head.markdown → 2013-03-12-move-a-cube-with-your-head.markdown}
  2. +17 −13 ...gap-between-html-and-webgl.markdown → 2013-04-30-closing-the-gap-between-html-and-webgl.markdown}
  3. BIN ...trackr-dot-js → 2013-03-12-playing-with-headtrackr-dot-js}/screenshots/screenshot-box3d-small.png
  4. BIN ...h-headtrackr-dot-js → 2013-03-12-playing-with-headtrackr-dot-js}/screenshots/screenshot-box3d.png
  5. BIN ...kr-dot-js → 2013-03-12-playing-with-headtrackr-dot-js}/screenshots/screenshot-debugview-small.png
  6. BIN ...adtrackr-dot-js → 2013-03-12-playing-with-headtrackr-dot-js}/screenshots/screenshot-debugview.png
  7. BIN ...dtrackr-dot-js → 2013-03-12-playing-with-headtrackr-dot-js}/screenshots/screenshot-demo-small.png
  8. BIN ...th-headtrackr-dot-js → 2013-03-12-playing-with-headtrackr-dot-js}/screenshots/screenshot-demo.png
  9. +67 −0 source/data/2013-04-30-closing-the-gap-between-html-and-webgl/index.html
  10. BIN source/data/2013-04-30-closing-the-gap-between-html-and-webgl/screenshots/grid-css-small.png
  11. BIN source/data/2013-04-30-closing-the-gap-between-html-and-webgl/screenshots/grid-css.png
  12. BIN source/data/2013-04-30-closing-the-gap-between-html-and-webgl/screenshots/grid-only-small.png
  13. BIN source/data/2013-04-30-closing-the-gap-between-html-and-webgl/screenshots/grid-only.png
  14. BIN ...d-webgl → 2013-04-30-closing-the-gap-between-html-and-webgl/screenshots}/navigation-bar-small.png
  15. BIN ...tml-and-webgl → 2013-04-30-closing-the-gap-between-html-and-webgl/screenshots}/navigation-bar.png
  16. BIN source/data/2013-04-30-closing-the-gap-between-html-and-webgl/screenshots/object-behind-small.png
  17. BIN source/data/2013-04-30-closing-the-gap-between-html-and-webgl/screenshots/object-behind.png
  18. BIN source/data/2013-04-30-closing-the-gap-between-html-and-webgl/screenshots/object-infront-small.png
  19. BIN source/data/2013-04-30-closing-the-gap-between-html-and-webgl/screenshots/object-infront.png
  20. BIN source/data/2013-04-30-closing-the-gap-between-html-and-webgl/screenshots/object-inmiddle-small.png
  21. BIN source/data/2013-04-30-closing-the-gap-between-html-and-webgl/screenshots/object-inmiddle.png
  22. BIN ...-and-webgl → 2013-04-30-closing-the-gap-between-html-and-webgl/screenshots}/webgl-plane-small.png
  23. BIN ...n-html-and-webgl → 2013-04-30-closing-the-gap-between-html-and-webgl/screenshots}/webgl-plane.png
@@ -78,7 +78,7 @@ or
## Demo Time !!
-{% img left /data/2012-12-07-playing-with-headtrackr-dot-js/screenshots/screenshot-box3d-small.png %}
+{% img left /data/2013-03-12-playing-with-headtrackr-dot-js/screenshots/screenshot-box3d-small.png %}
As usual we did a plugin for
[tQuery API](http://jeromeetienne.github.com/tquery)
to make it easy to use in our environement.
@@ -88,7 +88,7 @@ where your heads controls a box in 3d.
For best result, *make sure your face is well and evenly lighted*
-{% img right /data/2012-12-07-playing-with-headtrackr-dot-js/screenshots/screenshot-demo-small.png %}
+{% img right /data/2013-03-12-playing-with-headtrackr-dot-js/screenshots/screenshot-demo-small.png %}
Another [demo](http://jeromeetienne.github.com/tquery/plugins/headtrackr/examples/demo.html)
where the camera follows your head.
The whole scene moves as you move your head, providing quite an immersive experience.
@@ -148,7 +148,7 @@ It is possible to stop it with ```.stop()``` or to reset it via ```.reset()```.
### Debug View is Cool For User Feedback
-{% img right /data/2012-12-07-playing-with-headtrackr-dot-js/screenshots/screenshot-debugview-small.png %}
+{% img right /data/2013-03-12-playing-with-headtrackr-dot-js/screenshots/screenshot-debugview-small.png %}
If you wish enable the debugView, aka the little visualisation the headtracker result.
It gives feedback to the user on what is happening.
Thus the user can move his head accordingly or to change lighting of the room.
@@ -1,29 +1,32 @@
---
layout: post
title: "Mixing HTML pages inside your WebGL"
-date: 2013-04-23 11:11
+date: 2013-04-30 11:11
comments: true
-categories:
+categories: [three.js]
---
-Wouldn't that be cool if we were able to mix normal Web page in our webgl? To interact with them as we usually do? to view them, to click on them... To scroll, to hover or even to type in input tag.
-Oh yeah it would be so great! We, webgl people, are currently an isolated Island in the web world. Being able to mix with normal page would give us access to so much interactive content.
+Wouldn't that be cool if we were able to mix normal web pages in our webgl? To interact with them as we usually do? to view them, to click on them... To scroll, to hover or even to type in input tags.
+Oh yeah it would be so great! We, webgl people, are currently an isolated Island in the web world. Being able to mix with normal page would give us access to so much interactive content.
In this post, we gonna see how to do exactly this: how to seamlessly mix normal DOM elements in our webgl scene. They will actually appear as part of the 3d scene. Don't worry it is surprisingly easy with three.js.
-
<center>
- <iframe width="425" height="349" src="http://www.youtube.com/embed/837O1YloCRc" frameborder="0" allowfullscreen></iframe>
+ <iframe width="425" height="349" src="http://www.youtube.com/embed/ScZcUEDGjJI" frameborder="0" allowfullscreen></iframe>
</center>
<!-- more -->
## Demo of a youtube browser mixed in WebGL
-{% img right /data/2013-04-23-closing-the-gap-between-html-and-webgl/navigation-bar-small.png %}
+{% img right /data/2013-04-30-closing-the-gap-between-html-and-webgl/navigation-bar-small.png %}
-First let's see the result in action. Here is a demo I did to show all the videos I have done for this blog. [Try it out](http://jeromeetienne.github.io/videobrowser4learningthreejs)!
+First let's see the result in action. Here is a demo I did to show all the videos I have done for this blog.
+[Try it out](http://jeromeetienne.github.io/videobrowser4learningthreejs)!
It shows a 3d scene with a tv set and three characters sitting on grass.
+<a href='http://jeromeetienne.github.io/videobrowser4learningthreejs/' target='_blank'><input type="button" value='Try Learningthree.js video browser!' style='font-size:200%' /></a>
+<a href='/data/2013-04-30-closing-the-gap-between-html-and-webgl/index.html' target='_blank'><input type="button" value='Try Demo!' style='font-size:200%' /></a>
+
The key point is on the tvset screen. This is an actual YouTube player. Not me emulating it, this is the real thing! You can access it anytime from the blog navigation bar as
you can see on the right.
This
@@ -50,9 +53,7 @@ Here are some [tutorials](http://www.html5rocks.com/en/tutorials/3d/css/)
[it](https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transforms).
css3d is done for this exact purpose, to position and rotate a DOM element in 3d.
-{% img right /data/2013-04-23-closing-the-gap-between-html-and-webgl/webgl-plane-small.png %}
-
-(TODO redo sreenshot with black grid)
+{% img right /data/2013-04-30-closing-the-gap-between-html-and-webgl/screenshots/grid-only-small.png %}
Good News! three.js can already render things using this technology.
It is called [THREE.CSS3DRenderer](https://github.com/mrdoob/three.js/blob/master/examples/js/renderers/CSS3DRenderer.js).
@@ -93,7 +94,7 @@ cssObject.rotation = planeMesh.rotation;
cssScene.add(cssObject);
```
-(TODO put a screenshot of the css object with an image behind the webgl plane)
+{% img right /data/2013-04-30-closing-the-gap-between-html-and-webgl/screenshots/grid-css-small.png %}
All seems to go well.
We got the same plane in css and webgl. Now we need to see the dom element behind the webgl plane.
@@ -110,7 +111,8 @@ cssRenderer.domElement.style.position = 'absolute';
cssRenderer.domElement.style.top = 0;
```
-(TODO two screenshots with torus in normal material, one in front of the grid, one behind the grid)
+{% img right /data/2013-04-30-closing-the-gap-between-html-and-webgl/screenshots/object-inmiddle-small.png %}
+{% img left /data/2013-04-30-closing-the-gap-between-html-and-webgl/screenshots/object-infront-small.png %}
We are in good shape but not yet done. We still need to make both react as if they were one.
What happens if we add a torus 3d object in front of webgl plane? As you can see on the
@@ -141,6 +143,8 @@ from
To get a feel of blending, you can play with them in
[this example](http://threejs.org/examples/webgl_materials_blending_custom.html).
+{% img right /data/2013-04-30-closing-the-gap-between-html-and-webgl/object-behind-small.png %}
+
The one which interest us is called ```THREE.NoBlending```.
When drawing the face, it will completely ignore the color below and set it to the color of the face.
So if we put our face color to black aka ```(0, 0, 0)``` and opacity to ```0```, we gonna obtained what we want.
@@ -0,0 +1,67 @@
+<!doctype html><title>Minimal tQuery Page</title>
+<script src="vendor/tquery-bundle.js"></script>
+<script src="vendor/CSS3DRenderer.js"></script>
+<body style='background-color: #bbbbbb'><script>
+ var world = tQuery.createWorld().boilerplate().start();
+// var object = tQuery.createTorusKnot().addTo(world);
+
+ world.tRenderer().setClearColor( 'black', 0);
+
+// world.removeCameraControls();
+ world.camera().translateZ(20)
+
+ // your code goes here
+ tQuery.createPlane().addTo(world)
+ .scaleBy(16)
+ .setBasicMaterial()
+ // .wireframe(true)
+ // .wireframeLinewidth(3)
+ .opacity(0)
+ .blending(THREE.NoBlending)
+ .color('black')
+ .back()
+
+ tQuery.createTorusKnot().addTo(world)
+ .position(-8,0,-4)
+ .scaleBy(12)
+ tQuery.createTorusKnot().addTo(world)
+ .position( 8,0, 4)
+ .scaleBy(12)
+
+ 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.bind(rendererCSS, world.camera().get(0));
+
+ // put the mainRenderer on top
+ var rendererMain = world.tRenderer();
+ rendererMain.domElement.style.position = 'absolute';
+ rendererMain.domElement.style.top = 0;
+ rendererMain.domElement.style.zIndex = 1;
+ rendererCSS.domElement.appendChild( rendererMain.domElement );
+
+ var element = document.createElement('iframe')
+ element.src = 'http://learningthreejs.com'
+ element.style.width = '1024px';
+ element.style.height = '1024px';
+
+ // var element = document.createElement( 'div' );
+ // element.style.width = '100px';
+ // element.style.height = '100px';
+ // element.style.background = new THREE.Color( Math.random() * 0xffffff ).getStyle();
+
+ var sceneCSS = new THREE.Scene();
+ var objectCSS = new THREE.CSS3DObject( element );
+window.objectCSS = objectCSS
+ objectCSS.scale.multiplyScalar(1/63.5)
+ sceneCSS.add( objectCSS );
+
+ world.loop().hookPostRender(function(delta, now){
+ rendererCSS.render( sceneCSS, world.tCamera() );
+ })
+</script></body>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit c408481

Please sign in to comment.