Permalink
Browse files

more work

  • Loading branch information...
1 parent 9d5182c commit 839c1425cbfed6b980dab7cffa33c046522a308f @jeromeetienne committed Jun 11, 2013
View
104 source/_posts/2013-06-03-discovering-leap-device-sos.markdown
@@ -1,104 +0,0 @@
----
-layout: post
-title: "Discovering Leap Device"
-date: 2013-05-24 10:58
-comments: true
-categories:
-published: false
----
-
-
-Imagine controlling your computer without needing a mouse or a keyboard but only with the
-movements of your hands and fingers! That is what the Leap motion device is all about! It was
-all over the next a few months back. This device is not unlike the kinect, however it is
-designed to be used at a shorter range. The leap device is a new way of motion on your
-screen and it is able to track your hands fingers. Quite sci-fi, don't you think?
-Especially when you see the accuracy, even the slightest move of your fingers is tracked.
-They have been nice enough to send me one so that I could play with it and get an idea of
-what it does and why it is such a cool device.
-
-
-
-## What is recognized
-The leap provides quote a bit of informations on what it recognizes.
-It provides raw informations on your hand positions.
-Btw it is able to get multiple hands without issues.
-
-The position, rotation and velocity of your finger tips are provided.
-It calls them 'pointable'. It seems strange at first but it has a reason :)
-When you hold a pen in your hand, the leap is able to recognize it.
-It is thinner and longer than a finger. It is useful to point so the leap call that pointable.
-
-Another information about the hand is the palm [normal](http://en.wikipedia.org/wiki/Normal_\(geometry\)).
-It gives you the position and rotation of your palm. It may use to make a globe rotate, or fly a plane.
-One last information is the hand sphere. It acts a bit as a ball that you would hold in your hand.
-Additionnaly leap software provides various gestures recognition. Those higher level informations allows easier integrations of more complexe interactions.
-
-TODO what about the gestures recognittion ?
-
-## Applications
-Here is some applications that i found cool. You can easily install them.
-
-
-First the Visualizer. This application is installed when you installthe leap itself. It is a basic display of what the leap detects. It helps you discover what the leap can do and diagnose potential issue.
-
-Then a [flocking application](https://developer.leapmotion.com/blog/new-demo-available-flocking). In this beautifully realized application you interact with a swarm of fishes in deep sea. It is computed over GPU, so you play with an impressive number of fishes. Each of your finger tips is visualized with a nice incandescent fire. Fishes are attracted by your fingers. But as soon as you move you scare them away. Just excelent!
-
-Google modified its famous application Google earth to support leap device. Now you can fly above the earth with your hands in the air. See the [announcement for details](http://www.theverge.com/2013/4/22/4246612/google-will-release-google-earth-app-for-leap-motion).
-
-<iframe width="560" height="315" src="http://www.youtube.com/embed/RebX7YEn3GQ" frameborder="0" allowfullscreen></iframe>
-
-Then there is [leapdj](https://developer.leapmotion.com/downloads/leap-motion/leap-dj-demo). Leap device fit well with the music field. One can create virtual instruments and play them thru the leap. It is instinctive and reactive. Quite fit a musician state of mind :) here is leapdj demo. You mix live music with 2 platines, sliders for volume and balance. You can push buttons to create sounds effects. And you can do that with all your fingers at the same time. Defiantly a fun application ;)
-
-[flying demo](https://developer.leapmotion.com/downloads/leap-motion/leap-flying-demo) is an example where the leap is used as a game controller. You put your hand side to side and move them as if they were the wings of a plane.
-
-To stay updated what is new and interesting about developing on Leap, you may follow [@LeapMotionDev](https://twitter.com/LeapMotionDev) on twitter
-
-## How to get one
-So, where can you get the Leap motion?
-You can have it shipped to your place by [preordering it](https://www.leapmotion.com/preorder/new) on their site.
-The current [release date is July 22nd of this year](http://blog.leapmotion.com/post/48872742284/release-date-update).
-The device is announced at 79.99$us.
-They will also be available at the [BestBuy near you](http://www.bestbuy.com/).
-
-
-Additionnaly they have
-[parterships with HP](https://developer.leapmotion.com/blog/leap-motion-to-embed-3-d-motion-control-through-hp-collaboration)and
-[asus PCs](http://uk.ign.com/articles/2013/01/03/kinect-like-motion-tracking-coming-to-asus-pcs)
-to include it directly in some of their models.
-With all that, we can expect this device will go beyond the geek circle and reach the masses.
-For further information, you can go to the [official website](https://www.leapmotion.com/)
-
-
-## comparing with kinect
-
-The leap device has been compared to the Kinect many times. But it is quite different!
-
-First of all the leap is much smaller. the leap is less than half the size of an Iphone,
-
-the kinect is not. (include a photo of the leap device in your hand) (TODO find a ref on the kinect size)
-
-The location of the device isnt the same either. The leap has to be really close to your screen (10-20 cm) and it is designed to work at a very close range (8 cubic feet) https://www.leapmotion.com/support,
-
-on the contrary the kinect depth sensor range is [minimum 800mm and maximum 4000mm](http://msdn.microsoft.com/en-us/library/hh438998.aspx). So you see, the distances aren't the same!
-
-As you know, the Kinect has a horizontal and frontal orientation to track the movement of your whole body. The Leap is more precise and tracks only the movements of your hands and fingers, it has a vertical orientation.
-
-This makes the leap motion device much more reactive and accurate.
-
-## how to code it
-
-They got an API than they have ported in multiple langages:
-[c++](https://developer.leapmotion.com/documentation/guide/Sample_C++_Tutorial),
-[C#](https://developer.leapmotion.com/documentation/guide/Sample_C%23_Tutorial),
-[Objective C](https://developer.leapmotion.com/documentation/guide/Sample_ObjectiveC_Tutorial),
-[Java](https://developer.leapmotion.com/documentation/guide/Sample_Java_Tutorial),
-[Python](https://developer.leapmotion.com/documentation/guide/Sample_Python_Tutorial)
-and
-[javascript](https://developer.leapmotion.com/documentation/guide/Sample_JavaScript_Tutorial)
-Obviously we will focus on the javascript one :) It is called leapjs and is on [github](https://github.com/leapmotion/leapjs).
-It is very simple. There is a driver running as daemon doing the work and providing you information via websocket.
-I just started to code on it. i will talk more about this later.
-
-
-
View
21 ...13-06-03-discovering-leap-device.markdown → ...13-06-11-discovering-leap-device.markdown
@@ -1,7 +1,7 @@
---
layout: post
title: "Discovering Leap Device"
-date: 2013-05-24 10:58
+date: 2013-06-11 10:58
comments: true
categories:
---
@@ -15,7 +15,10 @@ Especially when you see the accuracy, even the slightest movement of your finger
They have been nice enough to send me one so that I could play with it and get an idea of
what it does and why it is such a cool device.
-## Applications
+<iframe width="425" height="349" src="http://www.youtube.com/embed/aP_4KPXjDpM" frameborder="0" allowfullscreen></iframe>
+
+<!-- more -->
+
Here are some applications that I found cool. You can easily install them.
### Visualizer
@@ -24,6 +27,8 @@ First the Visualizer. This application is installed when you install the leap it
It is a basic display of what the leap detects. It helps you discover what the leap
can do and diagnose potential issues.
+<iframe width="420" height="315" src="http://www.youtube.com/embed/D2oKfAnEaPQ" frameborder="0" allowfullscreen></iframe>
+
### Flocking
Then a [flocking application](https://developer.leapmotion.com/blog/new-demo-available-flocking).
@@ -45,19 +50,23 @@ See the [announcement for details](http://www.theverge.com/2013/4/22/4246612/goo
### LeapDJ
-Then there is [leapdj](https://developer.leapmotion.com/downloads/leap-motion/leap-dj-demo).
+Then there is [LeapDJ](https://developer.leapmotion.com/downloads/leap-motion/leap-dj-demo).
Leap device goes well with the music field. One can create virtual instruments and play them thru the leap.
It is instinctive and reactive. Quite fit for a musician's state of mind :) here is leapdj demo.
-You mix live music with 2 platines, sliders for volume and balance.
+You mix live music with 2 platines, sliders for volume and balance.
You can push buttons to create sounds effects. And you can do that with all your fingers at the same time.
Definitely a fun application ;)
+<iframe width="420" height="315" src="http://www.youtube.com/embed/cFOYHmRab_Q" frameborder="0" allowfullscreen></iframe>
+
### Flying Demo
[flying demo](https://developer.leapmotion.com/downloads/leap-motion/leap-flying-demo) is an example where
the leap is used as a game controller.
You put your hand side to side and move them as if they were the wings of a plane.
+<iframe width="420" height="315" src="http://www.youtube.com/embed/ACEE4yddgQ0" frameborder="0" allowfullscreen></iframe>
+
To stay updated on what is new and interesting about developing on Leap, you may follow [@LeapMotionDev](https://twitter.com/LeapMotionDev) on twitter
## How To Get One
@@ -84,8 +93,8 @@ They got an API than they have ported in multiple langages:
[Java](https://developer.leapmotion.com/documentation/guide/Sample_Java_Tutorial),
[Python](https://developer.leapmotion.com/documentation/guide/Sample_Python_Tutorial)
and
-[javascript](https://developer.leapmotion.com/documentation/guide/Sample_JavaScript_Tutorial)
-Obviously we will focus on the javascript one :) It is called leapjs and is on [github](https://github.com/leapmotion/leapjs).
+[javascript](https://developer.leapmotion.com/documentation/guide/Sample_JavaScript_Tutorial).
+Obviously we will focus on the javascript one :) It is called [leapjs on github](https://github.com/leapmotion/leapjs).
It is very simple. There is a driver running as daemon doing the work and providing you information via websocket.
I just started to code on it. I will talk more about this later.
View
103 source/_posts/2013-06-13-monitor-rendering-performance-within-threejs.md
@@ -0,0 +1,103 @@
+---
+layout: post
+title: "Monitor Rendering Performance Within Three.js"
+date: 2013-06-12 10:58
+comments: true
+categories: [three.js, performance]
+---
+
+This post is about monitoring rendering performance within three.js.
+It presents a small extension called ```threex.rendererstats```
+which collect performance informations in three.js renderer and
+makes it easy for you to include in your own games.
+
+
+
+<!-- more -->
+
+## What Is It ?
+{% img right /data/2013-06-13-monitor-rendering-performance-within-threejs/screenshot-rendererstats.png %}
+
+[threex.rendererstats](http://github.com/jeromeetienne/threex.rendererstats) collects informations
+about three.js renderer and display it realtime on your screen.
+It is released under MIT license and is available on
+[github](http://github.com/jeromeetienne/threex.rendererstats).
+See a screenshot on the right.
+
+<a href='http://jeromeetienne.github.io/threex.rendererstats/examples/basic.html' target='_blank'><input type="button" value='Try Live Demo!' style='font-size:400%;' /></a>
+
+{% img left /data/2013-06-13-monitor-rendering-performance-within-threejs/screenshot-stats.png 240x167 %}
+
+It is inpired from
+[stats.js](http://github.com/mrdoob/stats.js) by
+[mrdoob](http://mrdoob.com).
+See a screenshot on the left.
+Webgl renderer keeps some internal statistics on the scene being renderered and update it at every frame.
+It is accessible in a property ```.info```.
+threex.rendererstats just gather this informations and display it nicely on your screen.
+
+
+## How Is It Useful ?
+It is a very nice tool to monitor performances of WebGL rendering.
+As it is updated realtime, you can identify performance issues at various moments within your game
+We have seen canvas inspection recently in
+[Debugging With Chrome’s Canvas Inspection](http://learningthreejs.com/blog/2013/04/05/debugging-with-chromes-canvas-inspection/).
+[canvas inspection](http://learningthreejs.com/blog/2013/04/05/debugging-with-chromes-canvas-inspection/)
+is directly at webgl level. threex.rendererstats remains at three.js level to give you another kind
+of informations on the renderer.
+
+Lets details those informations
+There is 2 sections one for the memory, another for the renderer.
+For the memory, you got
+
+* ```info.memory.geometry``` : number of geometry currently in memory
+* ```info.memory.programs``` : number of shaders currently in memory
+* ```info.memory.texture``` : number of texture currently in memory
+
+For the render, you got
+
+* ```info.render.calls``` : number of draw calls currently used to render
+* ```info.render.vertices``` : number of vertices currently rendered
+* ```info.render.faces``` : number of triangles currently renderered
+* ```info.render.points``` : number of particles currently rendered
+
+## How To Use It ?
+
+first, include ```threex.rendererstats.js``` with the usual ```<script>``` tag.
+
+```html
+<script src='threex.rendererstats.js'></script>
+```
+
+then you initialize the object.
+
+```javascript
+var rendererStats = new THREEx.RendererStats()
+```
+
+You likely need to position it on the page with css.
+You may use something along this line
+
+```javascript
+rendererStats.domElement.style.position = 'absolute'
+rendererStats.domElement.style.left = '0px'
+rendererStats.domElement.style.bottom = '0px'
+document.body.appendChild( rendererStats.domElement )
+```
+
+finally you update it at every frame in your rendering loop.
+
+```javascript
+rendererStats.update(renderer);
+```
+
+And you are done. Quite easy to include! Now you can monitor your own three.js scenes.
+
+## Conclusion
+We have seen how to monitor performance information withing three.js.
+How to display and use the statistics collected by ```THREE.WebGLRenderer```
+itself.
+The information may appear a bit raw but it is live.
+So unexpected performance changes can be detected very early.
+
+That's all for today! have fun :)
View
BIN ...data/2013-06-13-monitor-rendering-performance-within-threejs/screenshot-rendererstats.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN ...ata/2013-06-13-monitor-rendering-performance-within-threejs/screenshot-rendererstats2.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-06-13-monitor-rendering-performance-within-threejs/screenshot-stats.png
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 839c142

Please sign in to comment.