八大疯狂的 HTML5 Canvas 及 WebGL 动画效果

     <p>HTML5、WebGL和JavaScript改变了长久以来的动画制作行业。在过去的几年中，我们想要制作卓越的网页动画只能使用Flash和Java Applet。而现在，使用脚本语言和渲染器在浏览器中实现疯狂的动画效果已经成为可能。究其原因，大概有以下几点：</p>    <ul>     <li>处理器的性能越来越高。我们的电脑已经有足够的强大的能力去渲染最为复杂的动画效果。</li>     <li>现在浏览器和web技术的不断发展。浏览器如Firefox、Chrome、Safari和IE10，web技术如Canvas、SVG和WebGL。</li>     <li>网速越来越快。一些体验需要实时数据流和预加载资源，更好的网络状况能有更好的体验。</li>    </ul>    <p>我们挑选了8个由WebGL、HTML5 Canvas和Javascript制作的绝妙效果。每一个都非常简单但却发人深省，疯狂并且极具创意。</p>    <h3><span id="i">黏糊糊的东西</span></h3>    <p>用鼠标拖拽，然后扔出去，就会粘在网页边缘。</p>    <p><img class="size-full wp-image-923 aligncenter" alt="八大疯狂的 HTML5 Canvas 及 WebGL 动画效果" src="https://simg.open-open.com/show/40651d0e4b1e51ca1dc8106c751d6034.jpg" width="500" height="250" /></p>    <h3><span id="i-2">粒子动画</span></h3>    <p>使用浮点纹理和FBO来实现的动画，由粒子组成一匹奔跑的骏马。</p>    <p><img class="size-full wp-image-924 aligncenter" alt="八大疯狂的 HTML5 Canvas 及 WebGL 动画效果" src="https://simg.open-open.com/show/ea2af0764c47d203f4b4ec11b6dd520c.jpg" width="500" height="250" /></p>    <h3><span id="i-3">三维液体</span></h3>    <p>用3D的方式呈现经典的2D水面效果算法。</p>    <p><img class="size-full wp-image-925 aligncenter" alt="八大疯狂的 HTML5 Canvas 及 WebGL 动画效果" src="https://simg.open-open.com/show/f2a35d9426a82442f1424436e83dc045.jpg" width="500" height="250" /></p>    <h3><span id="i-4">章鱼</span></h3>    <p>WebGL和Three.js制作的漂亮的章鱼状的星空动画</p>    <p><img class="size-full wp-image-926 aligncenter" alt="八大疯狂的 HTML5 Canvas 及 WebGL 动画效果" src="https://simg.open-open.com/show/5684c80fe857cf9ac3e91d03491debae.jpg" width="500" height="250" /></p>    <h3><span id="i-5">蠕虫</span></h3>    <p>HTML5 Canvas制作的效果，无数条蠕虫根据灰度组成图片，你还可以拖拽一张本地图片到右侧。</p>    <p><img class="size-full wp-image-927 aligncenter" alt="八大疯狂的 HTML5 Canvas 及 WebGL 动画效果" src="https://simg.open-open.com/show/0ca277686dfbb00fcb8206c70f17aab0.jpg" width="500" height="250" /></p>    <h3><span id="i-6">疯狂的触角</span></h3>    <p><img class="size-full wp-image-928 aligncenter" alt="八大疯狂的 HTML5 Canvas 及 WebGL 动画效果" src="https://simg.open-open.com/show/b4913c2128d88bb2fda6590f8713ee08.jpg" width="500" height="250" /></p>    <h3><span id="i-7">随机视觉</span></h3>    <p><img class="size-full wp-image-929 aligncenter" alt="八大疯狂的 HTML5 Canvas 及 WebGL 动画效果" src="https://simg.open-open.com/show/dfbce59dc8864bf73f8a1ebebe729940.jpg" width="500" height="250" /></p>    <h3><span id="Conductor">Conductor</span></h3>    <p>将纽约地铁系统变成可以弹奏的弦乐器。</p>    <p><img class="size-full wp-image-930 aligncenter" alt="八大疯狂的 HTML5 Canvas 及 WebGL 动画效果" src="https://simg.open-open.com/show/9558fbd86a820843059b99d9c643b698.jpg" width="500" height="250" /></p>    <p><em>原文地址：http://favbulous.com/post/895/8-crazy-animations-withwebgl-and-html5-canvas<br /> 文/<a href="/misc/goto?guid=4958332834265084494" target="_blank">hiwebgl</a></em></p>