Responsive 3D-Models For Any Device

Visualize the 3D-Models using CSS Media Queries in any device

Gebouwd met behulp van HTML5, Canvas, CSS3, WebGL, XMLHttpRequest,

  • 334 keer bekeken
  • 0 reacties

Meer over deze demo van de maker

Using CSS Media Queries, we can

- (1) toggle different layouts for different devices (e.g. desktop-wide, desktop-normal, desktop-narrow, tablet, mobile, feature)

- (2) toggle level of details (LOD) for different devices. Normally, desktop get more CPU/GPU power to render high quality 3D-Models. However, for mobile, we can still visual the 3D-Model using low quality one. This kinds of tricks enhance the user experience about the content navigating.

In the near future, people can scan the sculpture in the museum using 3D scanner, and view or interact with it using this hack on any device! Enjoy!

Technology used:
html5, css3, javascript, canvas, webgl, opengl-es.

Video:
http://www.youtube.com/watch?v=Y-0s85_FQfs

Nog geen reacties.

Meld u aan om die van uzelf toe te voegen.

Over deze demo

Download de bron 3954.82 KB · ZIP-bestand

Deze demo is uitgebracht onder de MPL/GPL/LGPL-licentie.