Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

completing htmlmixer page

  • Loading branch information...
commit c40848141d37be367b0f0597c7e313d4e2198858 1 parent e8e4fb8
@jeromeetienne authored
Showing with 87 additions and 16 deletions.
  1. +3 −3 ...osts/{2012-12-07-move-a-cube-with-your-head.markdown → 2013-03-12-move-a-cube-with-your-head.markdown}
  2. +17 −13 ...-the-gap-between-html-and-webgl.markdown → 2013-04-30-closing-the-gap-between-html-and-webgl.markdown}
  3. 0  ...-headtrackr-dot-js → 2013-03-12-playing-with-headtrackr-dot-js}/screenshots/screenshot-box3d-small.png
  4. 0  ...g-with-headtrackr-dot-js → 2013-03-12-playing-with-headtrackr-dot-js}/screenshots/screenshot-box3d.png
  5. 0  ...dtrackr-dot-js → 2013-03-12-playing-with-headtrackr-dot-js}/screenshots/screenshot-debugview-small.png
  6. 0  ...th-headtrackr-dot-js → 2013-03-12-playing-with-headtrackr-dot-js}/screenshots/screenshot-debugview.png
  7. 0  ...h-headtrackr-dot-js → 2013-03-12-playing-with-headtrackr-dot-js}/screenshots/screenshot-demo-small.png
  8. 0  ...ng-with-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. 0  ...ml-and-webgl → 2013-04-30-closing-the-gap-between-html-and-webgl/screenshots}/navigation-bar-small.png
  15. 0  ...een-html-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. 0  ...-html-and-webgl → 2013-04-30-closing-the-gap-between-html-and-webgl/screenshots}/webgl-plane-small.png
  23. 0  ...etween-html-and-webgl → 2013-04-30-closing-the-gap-between-html-and-webgl/screenshots}/webgl-plane.png
View
6 ...12-07-move-a-cube-with-your-head.markdown → ...03-12-move-a-cube-with-your-head.markdown
@@ -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.
View
30 ...g-the-gap-between-html-and-webgl.markdown → ...g-the-gap-between-html-and-webgl.markdown
@@ -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.
View
0  ...js/screenshots/screenshot-box3d-small.png → ...js/screenshots/screenshot-box3d-small.png
File renamed without changes
View
0  ...r-dot-js/screenshots/screenshot-box3d.png → ...r-dot-js/screenshots/screenshot-box3d.png
File renamed without changes
View
0  ...creenshots/screenshot-debugview-small.png → ...creenshots/screenshot-debugview-small.png
File renamed without changes
View
0  ...t-js/screenshots/screenshot-debugview.png → ...t-js/screenshots/screenshot-debugview.png
File renamed without changes
View
0  ...-js/screenshots/screenshot-demo-small.png → ...-js/screenshots/screenshot-demo-small.png
File renamed without changes
View
0  ...kr-dot-js/screenshots/screenshot-demo.png → ...kr-dot-js/screenshots/screenshot-demo.png
File renamed without changes
View
67 source/data/2013-04-30-closing-the-gap-between-html-and-webgl/index.html
@@ -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>
View
BIN  source/data/2013-04-30-closing-the-gap-between-html-and-webgl/screenshots/grid-css-small.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  source/data/2013-04-30-closing-the-gap-between-html-and-webgl/screenshots/grid-css.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  ...ce/data/2013-04-30-closing-the-gap-between-html-and-webgl/screenshots/grid-only-small.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  source/data/2013-04-30-closing-the-gap-between-html-and-webgl/screenshots/grid-only.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
0  ...n-html-and-webgl/navigation-bar-small.png → ...ebgl/screenshots/navigation-bar-small.png
File renamed without changes
View
0  ...between-html-and-webgl/navigation-bar.png → ...-and-webgl/screenshots/navigation-bar.png
File renamed without changes
View
BIN  ...ata/2013-04-30-closing-the-gap-between-html-and-webgl/screenshots/object-behind-small.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  source/data/2013-04-30-closing-the-gap-between-html-and-webgl/screenshots/object-behind.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  ...ta/2013-04-30-closing-the-gap-between-html-and-webgl/screenshots/object-infront-small.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  source/data/2013-04-30-closing-the-gap-between-html-and-webgl/screenshots/object-infront.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  ...a/2013-04-30-closing-the-gap-between-html-and-webgl/screenshots/object-inmiddle-small.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  ...ce/data/2013-04-30-closing-the-gap-between-html-and-webgl/screenshots/object-inmiddle.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
0  ...ween-html-and-webgl/webgl-plane-small.png → ...d-webgl/screenshots/webgl-plane-small.png
File renamed without changes
View
0  ...ap-between-html-and-webgl/webgl-plane.png → ...tml-and-webgl/screenshots/webgl-plane.png
File renamed without changes
Please sign in to comment.
Something went wrong with that request. Please try again.