2011 Mozilla Demoparty 賞析

fmms 13年前發布 | 7K 次閱讀 Mozilla

Mozilla Demoparty是由Mozilla Labs發起的一項旨在啟發人們將藝術與web技術相結合的活動，參與者可以自由提交他們的Demo。大部分的Demo都是基于HTML5、WebGL和 CSS3等新技術構建的，并巧妙的融入了藝術元素，提高了Demo的內涵和觀賞度。

第一名 Akemi

作為一個概念驗證，Akemi在技術上實現了WebGL與HaXe的完美結合，并且用藝術性的視覺手段展示了著名的奇怪吸引子。 在WebGL與HaXe結合的環境中，不管是視覺效果還是技術開發，都很容易達到作者想要完成的效果。比起其他的web交互技術，作者認為HaXe和 WebGL的結合是最好的選擇方案，但是像FLASH IDE這種開發環境的遲緩顯然給工作流程帶來很多不便（FLASH無辜中槍！），而另一方面FDT用來作為HaXe的集成開發環境是相當不錯的，在里面編 寫HaXe代碼就像是在寫Java或AS3一樣。

說句題外話，大家有沒有發現這個Demo和FDT5的網站非常像呢？

第二名 Azathioprine

由Alcatraz團隊制作的這個Demo無論是在視覺效果上還是在技術的應用上都應該算是一個重量級的作品了。制作人員為此專門編寫了一個 Maya的導出插件，在實現上使用了clang作為編譯器前端，使用LLVM作為后端。沒啥好說的，直接欣賞這一代表著最新技術與理念的Web體驗的巨作 吧！

目前在線Demo顯示403 Forbidden，不過幸好團隊還在油Tube上傳了視頻，下面就是我們搬運回來的視頻。

第三名 The Self-Explanatory Demo

這個Demo將流行的視覺效果，如正弦波等離子體效果（Sine Wave Plasma）、水紋效果、通道效果等，和基本的數學原理結合在一起，從視覺上展現了傳統幾何、解析幾何等門類的數學之美。

創意不錯，效果一般，如果拿來做成在線教育課件，小孩子應該挺喜歡的。（玩笑）

單體效果DEMO TOP 5 第一名 WebGL Water

沒錯，這就是我們之前為您介紹過的那個由Evan同學制作的水體渲染的Demo。果然是不負重望，居然在評委那里得到了4.75分的高分，而且也是最終得分唯一超過4分的作品，把主題DEMO都拋在了身后！

不需要過多的介紹了吧……

第二名 Demojs-fff

這個Demo使了用粒子系統配合音樂節奏完成視覺化效果，雖然很短，但看起來非常酷。由于使用了頂點紋理拾取技術（Vertex Texture Fetching），所以瀏覽器需要進行特殊設置。不過HiWebGL認為這種技術短期內在WebGL中并不會大規模應用，而且手機和老式顯卡也并不支持這種技術。

第三名 Breaking wave

這個Demo使用了3Ds MAX制作模型，導出后用three.js構建，模擬了一個摩托艇在海中沖浪的效果。

第四名 Lights & Shadows

Demo中使用了一個點光源、一個平行光源和一個聚光燈來照亮一個茶壺，并設置了一個背景熒幕用來投射陰影，通過每個光源對茶壺產生的不同陰影，展示了陰影映射技術。

另外該Demo是使用Jax構建的，Jax是一個WebGL開發工具，可以自動完成大部分設置，甚至包括場景管理，從而讓開發者可以專注于應用的特殊需求。

第五名 WebGL Path Tracing

不用多說了，這也是我們之前介紹過的、在推ter上傳的非常火的用WebGL實現光線追蹤的Demo。制作者還是第一名的那個Evan同學。

世界已經阻止不了他了。

音頻DEMO TOP 3 第一名 Flares

這是一個用WebGL技術實現音頻播放視覺化效果的Demo，作者只花了不到24小時就完成了制作。

第二名 Duper Mario Synth

  • 網友投票得分：2.83分
  • 評委投票得分：3.25分
  • 最終得分：3.04分
  • Demo地址：http://jams.no.de/

這其實是HiWebGL編輯團隊最喜歡的一個Demo，它用電子合成器演奏了超級瑪麗的主題曲的旋律，并且在canvas中搭建了一個簡單的互動場 景來讓觀看者用類似游戲的方式改變音頻的合成效果。整個Demo中沒有用到任何音頻剪輯，所有的聲音和效果都是由瀏覽器生成的！你可以在這里找到他們使用的JSON音頻模型。另外，該DEMO要求使用Firefox 4+版本，或者是開啟了實驗性API的Chrome（在瀏覽器地址欄中輸入“about:flags”，回車，然后找到“實驗性擴展程序 API”，選擇“啟用”）。

第三名 Beatdetektor 3

這個Demo中使用了法線貼圖和平行貼圖，并且增加了陰影。你可以拖拽任何一個你本地的ogg文件到瀏覽器中替代默認的音頻文件。另外，除了天空，Demo中所有的動畫和紋理都是用程序實時生成的。

制作團隊使用了Mozilla Audio API，BeatDetektor.js，CubicVR.js以及Processing.js。

CSS3 DEMO WINNER 第一名 CSS Nyan Cat

CSS3的Demo中，只評選了一個第一名，這就是那個之前給無數人洗腦的Nyan Cat！如果你還沒聽說過，那實在也太火星了吧！哥們，你不能總是coding，也要生活啊！趕緊來看看這個風靡世界的貓吧！

本文轉載自: 瀏覽器之家 http://liulan7.net/

 本文由用戶 fmms 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
  本文地址：http://www.baiduhome.net/news/view/186d271