Why do we need two eyes? - JsConfEu October 2011
-
Upload
michalbu -
Category
Technology
-
view
4.567 -
download
1
Transcript of Why do we need two eyes? - JsConfEu October 2011
Why Do We Need Two Eyes?
Who is this guy?
- JavaScript Developer from Poland
Who is this guy?
- JavaScript Developer from Poland- Open Web Game Developer
Who is this guy?
- JavaScript Developer from Poland- Open Web Game Developer- Organizer of onGameStart @onGameStart http://ongamestart.com
Who is this guy?
- Open Web Game Developer- Organizer of onGameStart- Creator of CSS Nyan Cat & other ridiculus web demoshttp://michalbe.github.com/css-nyan-cat/
Who is this guy?
- Open Web Game Developer- Organizer of onGameStart- Creator of CSS Nyan Cat - W3C HTML5 GameDev couch
Kaucz
Who is this guy?
- Open Web Game Developer- Organizer of onGameStart- Creator of CSS Nyan Cat - W3C HTML5 GameDev coach
Koucz
Booooring! What about the eyes?
One is not enough.
One is not enough.
Three? Too much.
Three? Too much.
Three? Too much.
http://www.youtube.com/watch?v=dOivbSTpzXs
'TWO' is the answer
Not only the depth, but also size
'TWO' is the answer
cut off from the civilization
Brain
Two images in, one scene out
Analgifs
Anaglyphs
Wow! It's really fresh!
Nope! Chuck Testa!
Photography & Stereoscopy
1826
Photography & Stereoscopy
1838
Stereoscopy
Stereoscopy
First anaglyphs
Avatar 60 years ago
http://www.youtube.com/watch?v=0b96x2Qdm5E
Left/right images
Left/right images
Blending modes
Blend modes are used to determine how two Layers are blended into each other. The default blend mode in most applications is simply to hide the lower layer with whatever is present in the top layer. However, as each pixel has a numerical representation, a large number of ways to blend two layers is possible.
Blend modes
Result Color = 255 - [((255 - Top Color)*(255 - Bottom Color))/255]
Result
Can we haz some JavaScript?
Livecoding!
cx.getImageData(0, 0, width, height);pxData = imgData.datapxData[i ] = 0cx.putImageData(imgData, 0, 0);
Other anaglyphs
True anaglyphs
Grey anaglyphs
Color anaglyphs
Optimized anaglyphs
Anaglyphs in a browser
http://jsfiddle.net/U4TTR/25/
Anaglyphs in a browser
http://mrdoob.github.com/three.js/examples/webgl_materials_cubemap_balls_reflection_anaglyph.html
Thanks!
Nope! Chuck Testa!