2011 Mozilla Demoparty 赏析
fmms 13年前
<p>Mozilla Demoparty是由Mozilla Labs发起的一项旨在启发人们将艺术与web技术相结合的活动，参与者可以自由提交他们的Demo。大部分的Demo都是基于HTML5、WebGL和 CSS3等新技术构建的，并巧妙的融入了艺术元素，提高了Demo的内涵和观赏度。</p> <p><strong><span id="Akemi-2">第一名 Akemi</span></strong></p> <ul> <li>网友投票得分：3.67分</li> <li>评委投票得分：3.58分</li> <li>最终得分：3.62分</li> <li>Demo地址：<a href="/misc/goto?guid=4958189904602974095" target="_blank">http://static.britzpetermann.com/experiments/akemi/</a></li> </ul> <p>作为一个概念验证，Akemi在技术上实现了WebGL与HaXe的完美结合，并且用艺术性的视觉手段展示了著名的<a href="/misc/goto?guid=4958189905344716282" target="_blank">奇怪吸引子</a>。 在WebGL与HaXe结合的环境中，不管是视觉效果还是技术开发，都很容易达到作者想要完成的效果。比起其他的web交互技术，作者认为HaXe和 WebGL的结合是最好的选择方案，但是像FLASH IDE这种开发环境的迟缓显然给工作流程带来很多不便（FLASH无辜中枪！），而另一方面FDT用来作为HaXe的集成开发环境是相当不错的，在里面编 写HaXe代码就像是在写Java或AS3一样。</p> <p>说句题外话，大家有没有发现这个Demo和<a href="/misc/goto?guid=4958189906084671149" target="_blank">FDT5的网站</a>非常像呢？</p> <p><strong><span id="Azathioprine-3">第二名 <strong>Azathioprine</strong></span></strong></p> <ul> <li>网友投票得分：2.83分</li> <li>评委投票得分：3.58分</li> <li>最终得分：3.21分</li> <li>Demo地址：<a href="/misc/goto?guid=4958189906833935411" target="_blank">http://azathioprine.digisnap.bplaced.net/</a></li> </ul> <p>由Alcatraz团队制作的这个Demo无论是在视觉效果上还是在技术的应用上都应该算是一个重量级的作品了。制作人员为此专门编写了一个 Maya的导出插件，在实现上使用了clang作为编译器前端，使用LLVM作为后端。没啥好说的，直接欣赏这一代表着最新技术与理念的Web体验的巨作 吧！</p> <p>目前在线Demo显示403 Forbidden，不过幸好团队还在油Tube上传了视频，下面就是我们搬运回来的视频。</p> <p><strong><span id="The_Self-Explanatory_Demo-4">第三名 The Self-Explanatory Demo</span></strong></p> <ul> <li>网友投票得分：3.17分</li> <li>评委投票得分：3分</li> <li>最终得分：3.08分</li> <li>Demo地址：<a href="/misc/goto?guid=4958189907590267203" target="_blank">http://www.adrianboeing.com/demoscene/explain/megademo.html</a></li> </ul> <p>这个Demo将流行的视觉效果，如正弦波等离子体效果（Sine Wave Plasma）、水纹效果、通道效果等，和基本的数学原理结合在一起，从视觉上展现了传统几何、解析几何等门类的数学之美。</p> <p>创意不错，效果一般，如果拿来做成在线教育课件，小孩子应该挺喜欢的。（玩笑）</p> <p><strong><span id="DEMO_TOP_5-5">单体效果DEMO TOP 5</span></strong> <strong><span id="WebGL_Water-6">第一名 WebGL Water</span></strong></p> <ul> <li>网友投票得分：3.83分</li> <li>评委投票得分：4.75分</li> <li>最终得分：4.29分</li> <li>Demo地址：<a href="/misc/goto?guid=4958189908338541547" target="_blank">http://madebyevan.com/webgl-water/</a></li> </ul> <p>没错，这就是我们之前为您介绍过的那个由Evan同学制作的<a href="/misc/goto?guid=4958189909071455991" target="_blank">水体渲染的Demo</a>。果然是不负重望，居然在评委那里得到了4.75分的高分，而且也是最终得分唯一超过4分的作品，把主题DEMO都抛在了身后！</p> <p>不需要过多的介绍了吧……</p> <p><strong><span id="Demojs-fff-7">第二名 Demojs-fff</span></strong></p> <ul> <li>网友投票得分：3.5分</li> <li>评委投票得分：3.67分</li> <li>最终得分：3.59分</li> <li>Demo地址：<a href="/misc/goto?guid=4958189909810625214" target="_blank">http://plopbyte.com/demojs-fff/</a></li> </ul> <p>这个Demo使了用粒子系统配合音乐节奏完成视觉化效果，虽然很短，但看起来非常酷。由于使用了<a href="/misc/goto?guid=4958189910551839699" target="_blank">顶点纹理拾取技术（Vertex Texture Fetching）</a>，所以浏览器需要进行特殊设置。不过HiWebGL认为这种技术短期内在WebGL中并不会大规模应用，而且手机和老式显卡也并不支持这种技术。</p> <p><strong><span id="Breaking_wave-8">第三名 Breaking wave</span></strong></p> <ul> <li>网友投票得分：3.33分</li> <li>评委投票得分：3.5分</li> <li>最终得分：3.42分</li> <li>Demo地址：<a href="/misc/goto?guid=4958189911284138947" target="_blank">http://inear.se/breaking_waves</a></li> </ul> <p>这个Demo使用了3Ds MAX制作模型，导出后用three.js构建，模拟了一个摩托艇在海中冲浪的效果。</p> <p><strong><span id="Lights_Shadows-9">第四名 Lights & Shadows</span></strong></p> <ul> <li>网友投票得分：3.33分</li> <li>评委投票得分：3.5分</li> <li>最终得分：3.42分</li> <li>Demo地址：<a href="/misc/goto?guid=4958189912035408590" target="_blank">http://sinisterchipmunk.github.com/lights_and_shadows.html</a></li> </ul> <p>Demo中使用了一个点光源、一个平行光源和一个聚光灯来照亮一个茶壶，并设置了一个背景荧幕用来投射阴影，通过每个光源对茶壶产生的不同阴影，展示了阴影映射技术。</p> <p>另外该Demo是使用Jax构建的，Jax是一个WebGL开发工具，可以自动完成大部分设置，甚至包括场景管理，从而让开发者可以专注于应用的特殊需求。</p> <p><strong><span id="WebGL_Path_Tracing-10">第五名 WebGL Path Tracing</span></strong></p> <ul> <li>网友投票得分：3.5分</li> <li>评委投票得分：3.33分</li> <li>最终得分：3.42分</li> <li>Demo地址：<a href="/misc/goto?guid=4958189912784902828" target="_blank">http://madebyevan.com/webgl-path-tracing/</a></li> </ul> <p>不用多说了，这也是我们之前介绍过的、在推ter上传的非常火的<a href="/misc/goto?guid=4958189913515611302" target="_blank">用WebGL实现光线追踪</a>的Demo。制作者还是第一名的那个Evan同学。</p> <p>世界已经阻止不了他了。</p> <p><strong><span id="DEMO_TOP_3-11">音频DEMO TOP 3</span></strong> <strong><span id="Flares-12">第一名 Flares</span></strong></p> <ul> <li>网友投票得分：3分</li> <li>评委投票得分：3.66分</li> <li>最终得分：3.33分</li> <li>Demo地址：<a href="/misc/goto?guid=4958189914264249159" target="_blank">http://paul.cx/webgl-flares/</a></li> </ul> <p>这是一个用WebGL技术实现音频播放视觉化效果的Demo，作者只花了不到24小时就完成了制作。</p> <p><strong><span id="Duper_Mario_Synth-13">第二名 Duper Mario Synth</span></strong></p> <ul> <li>网友投票得分：2.83分</li> <li>评委投票得分：3.25分</li> <li>最终得分：3.04分</li> <li>Demo地址：<a href="/misc/goto?guid=4958189915004249141" target="_blank">http://jams.no.de/</a></li> </ul> <p>这其实是HiWebGL编辑团队最喜欢的一个Demo，它用电子合成器演奏了超级玛丽的主题曲的旋律，并且在canvas中搭建了一个简单的互动场 景来让观看者用类似游戏的方式改变音频的合成效果。整个Demo中没有用到任何音频剪辑，所有的声音和效果都是由浏览器生成的！你可以在<a href="/misc/goto?guid=4958189915748256628">这里</a>找到他们使用的JSON音频模型。另外，该DEMO要求使用Firefox 4+版本，或者是开启了实验性API的Chrome（在浏览器地址栏中输入“about:flags”，回车，然后找到“实验性扩展程序 API”，选择“启用”）。</p> <p><strong><span id="Beatdetektor_3-14">第三名 Beatdetektor 3</span></strong></p> <ul> <li>网友投票得分：2.67分</li> <li>评委投票得分：2.83分</li> <li>最终得分：2.75分</li> <li>Demo地址：<a href="/misc/goto?guid=4958189916507851231" target="_blank">http://cubicvr.org/BeatDetektor3-Remix/</a></li> </ul> <p>这个Demo中使用了法线贴图和平行贴图，并且增加了阴影。你可以拖拽任何一个你本地的ogg文件到浏览器中替代默认的音频文件。另外，除了天空，Demo中所有的动画和纹理都是用程序实时生成的。</p> <p>制作团队使用了Mozilla Audio API，BeatDetektor.js，CubicVR.js以及Processing.js。</p> <p><strong><span id="CSS3_DEMO_WINNER-15">CSS3 DEMO WINNER</span></strong> <strong><span id="CSS_Nyan_Cat-16">第一名 CSS Nyan Cat</span></strong></p> <ul> <li>网友投票得分：2.67分</li> <li>评委投票得分：3.5分</li> <li>最终得分：3.08分</li> <li>Demo地址：<a href="/misc/goto?guid=4958189917254604264" target="_blank">http://michalbe.github.com/css-nyan-cat/</a></li> </ul> <p>CSS3的Demo中，只评选了一个第一名，这就是那个之前给无数人洗脑的Nyan Cat！如果你还没听说过，那实在也太火星了吧！哥们，你不能总是coding，也要生活啊！赶紧来看看这个风靡世界的猫吧！<br /> <br /> 本文转载自: 浏览器之家 <a href="/misc/goto?guid=4958183281580990375" rel="nofollow">http://liulan7.net/</a> </p>