Most web pages are composed of flat visual designs and 2D experience, so why not make it 3D? Many web designers would argue it's too expensive and unnecessary to render something on a web. Well, thanks to WebGL, we can make a 3D interface easily without much struggling as before. For an experiment, I started to think about how to make successful 3D interactions in a web page, and Youtube videos seems to be good subjects.


When you want to see the popularity of 50 videos and learn something from it at first glance, lists and tiny view counts shown on the homepage of Youtube are not an ideal solution to the problem. In this project, I use the metaphor of the height as popularity indicator. Animations of squeeze of each video show a relative comparison at the same time, which make user instantly have the sense of number of views of each video.



By clicking on a video, you can zoom in to see the actual size of the clip. By clicking the blank area, you can zoom out to see the whole view again. Additionally, if you click on the side of a cuboid, it would rotate 180 degree, which refers to bottom down menu that rotates as well (not yet implemented).

Youtube Top 50 using three.js

DEVELOPMENT SCALE
Individual
SKILLS USED
WebGL using ThreeJS, Javascript, CSS3, Youtube Feeds
HIGHLIGHT
3D Quantitative Data Visualization