八大疯狂的HTML5 Canvas及WebGL动画效果——8 CRAZY ANIMATIONS WITH WEBGL AND HTML5 CANVAS【收藏】

HTML5, WebGL and Javascript have changed the way animation used to be. Past few years, we can only achieve extraordinary web animation by using Flash and Java Applet. It's possible to create insane effects and crazy animations with scripting and render it on the browser. There are a few reasons that make this achievable:

  • Poweful processing power. Our computers are too powerful and sufficient enough to render most complicated animation.
  • Modern browser and web technologies. Modern browsers such as FF, Chrome, Safari and IE10 and support of new web technologies such as Canvas, SVG and WebGL.
  • Fast Internet connection. Some experiments require live streaming of data and preloaded resources.

We have found 8 stunning effects made with WebGL, HTML5 Canvas and Javascript. They are simply mind-blowing, crazy and very creative. For example, sticky thing demonstrates the gravity physic! However, keep in mind that these are experiment only and probably you won't see it used commercially because legacy browsers won't able to run it, and the web technologies are quite new. Anyway, it's good to see what the web capable to do, and certainly look forward what will happen in a few years time. Best view with Chrome and you can try it with Safari, Firefox and IE10 as well.

  • Sticky Thing

    Throw it and see if it sticks.

    八大疯狂的HTML5 Canvas及WebGL动画效果——8 CRAZY ANIMATIONS WITH WEBGL AND HTML5 CANVAS【收藏】

  • Animated Volume Particles

    Use float textures and frame buffer objects to simulate 3D particles flying through the volume an animated animal. Click and move the mouse!

    八大疯狂的HTML5 Canvas及WebGL动画效果——8 CRAZY ANIMATIONS WITH WEBGL AND HTML5 CANVAS【收藏】

  • Voxels Liquid

    3D representation of this classic 2D water effect algorithm.

    八大疯狂的HTML5 Canvas及WebGL动画效果——8 CRAZY ANIMATIONS WITH WEBGL AND HTML5 CANVAS【收藏】

  • Pulpo

    WebGl & tree.js Rules! Animated Star ray.

    八大疯狂的HTML5 Canvas及WebGL动画效果——8 CRAZY ANIMATIONS WITH WEBGL AND HTML5 CANVAS【收藏】

  • Wormz

    HTML5 Canvas Experiment with all tiny little worms

    八大疯狂的HTML5 Canvas及WebGL动画效果——8 CRAZY ANIMATIONS WITH WEBGL AND HTML5 CANVAS【收藏】

  • Crazier Tentacles

    This is a physics-based version of Crazy Tentacles. It uses the same formula to generate the target shape and elastic rod physics to make it go towards that shape.

    八大疯狂的HTML5 Canvas及WebGL动画效果——8 CRAZY ANIMATIONS WITH WEBGL AND HTML5 CANVAS【收藏】

  • Visual Random

    Multiple levels of random: where the voxel drops, the color of the voxel, the highest stack generated by the random drop. All of these things combined create an interesting perspective of what random actually looks like.

    八大疯狂的HTML5 Canvas及WebGL动画效果——8 CRAZY ANIMATIONS WITH WEBGL AND HTML5 CANVAS【收藏】

  • Conductor

    At www.mta.me, Conductor turns the New York subway system into an interactive string instrument. Using the MTA’s actual subway schedule, the piece begins in realtime by spawning trains which departed in the last minute, then continues accelerating through a 24 hour loop. The visuals are based on Massimo Vignelli’s 1972 diagram.

    八大疯狂的HTML5 Canvas及WebGL动画效果——8 CRAZY ANIMATIONS WITH WEBGL AND HTML5 CANVAS【收藏】

上一篇:跨容器Hybrid离线组件方案


下一篇:html5 canvas在线文本第二步设置(字体边框)等我全部写完,我会写在页面底部