Jserv's blog

WebKit + Clutter：以 3D 技術給予網頁瀏覽的新體驗

3D 桌面系統技術變化相當快，現今的硬體運算能力也相當夠，連一隻小小的手機，都有 133 MHz 的處理速度，更遑論進步神速的 GPU，但除了展現華麗精湛的特效外，到底還能作什麼呢？兩年前的 OSDC.tw 曾提及 [從 Web Browser 與 3D 技術發展看未來桌面系統的挑戰]，做了一些整理，這幾年觀察了若干提案，自己也試著做了 prototype 3D desktop，在驚訝於技術變化一日千里的同時，也在思考此等對人機介面的助益。

發展十餘年的網頁瀏覽器，儼然成為嶄新的平台，就如開啟潘朵拉的盒子一般，為這個世界帶來無數的變化，自此，無論是工作環境、居家、3G 手機等等，都不乏有網頁瀏覽器的蹤跡。不同領域的交會更是給我們無限的想像空間，網頁也不再是死板板的模樣，不過，畢竟網頁往往受限於圖形桌面環境的設計思維，即便進入所謂 "Web 2.0" 的紀元，網頁瀏覽仍是線性的操作，這對於強調人機互動的手持式裝置或移動運算環境，顯得格格不入。我對於「網頁」一詞，抱持著很大的想像，感覺就該如紀錄若干資訊的紙張一般，而 WWW 就扮演串連這些頁面的角色，如此一來，我們可在辦公室看這些頁面，通勤的過程中，也能取出觀看並作些像是分類、疊合、對比的處理。頁面的表面積不應該是限制，重點是紀錄於此的資訊，以及我們如何去看待。若能妥善整合 3D 技術，應可帶來更直覺的互動效果，也同時提昇思考的維度：

• 網頁何嘗不能就如我們熟悉不過的紙張一般呢？
• 網頁何嘗不能如紙張一般收藏剪裁呢？
• 動態網頁何嘗不能想像為顯微鏡載玻片底下的生氣蓬勃微生物呢？

這幾年經歷過不同環境的瀏覽器發展，從 UNIX 工作站、Kiosk，到 PDA 與手機，螢幕尺寸不但是種限制，也扼殺許多應用的可能性，我想，或許是因為我們過度拘泥於表現的形式，卻沒有掌握其本質。活躍發展、跨越許多軟硬體環境的 [WebKit] 提供了質量俱佳的瀏覽器發展平台，並實做了 [HTML5] 中絕大部分嶄新的規格，RIA (Rich Internet Application) 的應用更是藉此得到強而有力的基礎。優雅的 [Clutter] toolkit 建構於 OpenGL 之上，提供兼顧效能與彈性的豐富視覺呈現，而今年一月份開始，WebKit 與 Clutter 彼此擦出了令人炫目的火花，前述的 3D 網頁呈現與互動，也是指日可待。

與 Firefox 3 (以 Gecko 1.9+ 為基礎) 一樣，WebKit 開始借重 [Cairo] 向量繪圖處理，透過其實驗性的 [OpenVG] backend，得以有效發揮硬體加速能力，但本身仍保持架構的簡潔，Clutter 有個 Cairo binding，所以可以很巧妙的透過 OpenVG + Cairo + Clutter，實現高效能的精湛視覺呈現。對手持裝置來說，中高階的產品紛紛整合 3D/OpenGL GPU，若能充分使用硬體加速，不僅能給予更好的使用體驗，還能讓能源管理作出更好的優化處理，裝置的可用性也可望提昇。在圖形處理的基礎建設趨於完備後，整合 WebKit 就更有趣了。

上圖是 WebKit + Clutter 運作的情況，展示了不同視角下，「網頁」的視覺變化，Zoom In/Out (或稱 pinch and expand) 操作對 OpenGL 來說，再也自然不過，如此一來，網頁的「收納」型態可有更多的方式，我錄製了影片以闡述這個想法：

• [webkit-on-opengl.avi] (MPEG-4, 2.7Mb)
• [webkit-on-opengl.ogg] (Theora video, 12Mb)

整合好的 WebKit + Clutter 展示程式可自 [webkit-opengl-bin.tar.bz2] (i686-linux) 取得，在 Debian/Ubuntu 執行需要 [ICU] (International Components for Unicode) 與 [libcurl] (處理 network protocol)，取得如下：

# apt-get install libicu36 libcurl4-openssl

事實上，libcurl 也有 GnuTLS 的支援 (libcurl4-gnutls)，不過我已經寫死在程式中。解開後直接執行目錄中的 RUN.sh 即可。當然，這只是開端，顯然有許多可改進的空間，唯一的限制，應該是我們的想像力罷了。
由 jserv 發表於 March 15, 2008 09:43 PM