Jserv's blog

透過 OpenGL 作 WebKit 網頁描繪

之前的文章 [WebKit + Clutter：以 3D 技術給予網頁瀏覽的新體驗] 提過 [WebKit] 開始採用 [Cairo] 的向量繪圖處理能力，後者允許發揮硬體的 OpenGL 加速，我們也見到將 WebKit 描繪的網頁映射到 2D surface 的 3D 展示，不過那時候是透過 Gtk+/Cairo 先進行描繪，然後透過 [clutter] 對 2.5D 場景作進一步處理。現在，[openedhand] 的 [Iain Holmes] 著手將 WebKit 整個移植到 clutter，也就是新增 clutter platform，免除剛剛繁瑣的對應，讓這一切都能透過 clutter，直接驅動硬體 OpenGL 加速，目前還在開發中，但是給我們頗大的想像空間。

這個 Clutter/WebKit 實驗性的分支維護於 Iain 的 git tree [WebKit]，待發展成熟後，會比照 Gtk+/WebKit 的模式，整合回 WebKit 專案。我做了一些調整，讓 SVN trunk 的 clutter 與 clutter-cairo 得以銜接，可取得這份打包好的 tarball [webkit-clutter-snap-20080410.tar.bz2]，先執行 autogen.sh，然後傳遞 '--disable-gtk' '--enable-clutter' 等參數給 configure script，隨後再依據一般的建構程序即可。Clutter/WebKit 的 API 設計相當簡潔漂亮，以下示範如何建立一個純 OpenGL 繪製、WebKit 為基礎的網頁瀏覽器： [test-webkit.c]

#include <clutter/clutter.h>
#include <webkit/webkit.h>

static WebkitAdjustment *hadj, *vadj;
int main (int argc, char **argv)
{
	ClutterActor *stage;
	WebKitWebView *view;
 
	if (argc < 2) return 1;

	clutter_init (&argc, &argv);
 
	hadj = webkit_adjustment_new (0,0,0,0,0,0);
	vadj = webkit_adjustment_new (0,0,0,0,0,0);
 
	stage = clutter_stage_get_default ();
	clutter_actor_set_size (stage, 800, 400);
 
	view = webkit_web_view_new (800, 400);
	webkit_web_view_set_scroll_adjustments (view, hadj, vadj);
 
	clutter_actor_set_position (view, 0, 0);
	clutter_actor_set_size (view, 800, 400);
	clutter_actor_set_reactive (view, TRUE);
	clutter_stage_set_key_focus (stage, view);

	clutter_container_add_actor (CLUTTER_CONTAINER (stage), view);
 
	webkit_web_view_open (view, argv[1]);
	clutter_actor_show_all (stage);
 
	clutter_main ();
}

程式列表最多的地方，主要是 clutter 的布局操作，先建立 ClutterActor，給予適當的尺寸與屬性，再來建立 WebKitWebView 的物件，將之放入剛剛的 clutter 容器中 (clutter 底層採用 GObject/GLib)，最後呼叫關鍵的 webkit_web_view_open() 函式，這樣，一個網頁瀏覽器就完成了，重點是，這個 clutter 容器可任意置放於其他 2.5D 畫面中，要作絢麗的特效也是相當容易。以 Google Maps 來驗證目前開發的進度：

現在網頁字型的描繪，是透過 Pango/Freetype，並透過 GLX backend 作顯示。

感謝 Iain 的指導，協助排除許多技術問題，看來好戲正要上場了！
由 jserv 發表於 April 11, 2008 10:32 AM