3D Website

Maria Kavvalou

Anna Papadopoulou

3D Website

•Collaboration between TEI of Crete and Dennis Gabor College•Project : Conversion of a website into 3D•Supervisor : Dr. Kopácsi Sándor•Hungarian Partner : Judit Tövissy

Stereoscopic Vision

Each eye creates an image from it's own perspectiveBrain combines them into oneSense of depth

Anaglyph 3D

Method to give the steroscopic effect to an imageTwo color-coded copiesColor-filter glasses

Anaglyph 3D

Each filter blocks the eye from seeing the opposite colored imageBrain combines the two images and perceives one full-color 3D image

3D Website

First Approach : Copy the contents•Problems with positioning•Didn’t apply to all pages•Different result in each browser.

3D Website

Same text from the same page in :Google Chrome

Mozzila Firefox

3D Website

Second Approach : Using text shadow on the original text. CSS

Html

Anaglyph 3D

Red – Cyan : In front of (Outside) the screen

Cyan – Red : Behind the screen

Shadow distance from Original text : 4px

Shadow distance from Original text : 7px

3D Website : Final result

Thank you for your attention.