Why do we need two eyes? - JsConfEu October 2011

download Why do we need two eyes? - JsConfEu October 2011

If you can't read please download the document

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!