透過 OpenGL 作 WebKit 網頁描繪

透過 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

迴響

为什么你的snap运行configure需要clutter0.7?但我看最新的clutter是0.6嘛

由 wenhsuan 發表於 April 20, 2008 06:04 PM

@wenhsuan,

SVN head 的 clutter 版本為 0.7

由 jserv 發表於 April 20, 2008 07:57 PM

嗯，我看到了，正想来这里说一声

由 wenhsuan 發表於 April 20, 2008 08:22 PM

我把clutter和webkit make&make install后，再编译你的test_webkit.c文件，出现了error: expected ‘=’, ‘,’, ‘;’, ‘asm’ or ‘__attribute__’ before xxxxxx错误，很怪异，你遇到过这种问题吗？

由 wenhsuan 發表於 April 21, 2008 10:01 PM

@wenhsuan: 應該是 pkg-config 的設定沒處理好，而且你將關鍵的部份 mask 掉了，看不出所以然

由 jserv 發表於 April 21, 2008 10:52 PM

jserv大大, 可否给出test-webkit.c的编译参数.

由 Drip-shui 發表於 September 24, 2008 10:49 AM

* Build instructions:
* # gcc -o test-webkit /
* test-webkit2.c /
* `pkg-config --cflags --libs webkit-clutter-1.0 /
* cairo pangocairo clutter-cairo-0.7`

for clutter 0.7

在 clutter 0.8 後，請修改為 clutter-cairo-0.8

由 jserv 發表於 September 24, 2008 05:17 PM

非常感谢您的帮助

我的实做是clutter-0.8, webkit-clutter-1.0

#!/bin/sh
LIBS=`pkg-config --libs clutter-0.8 webkit-clutter-1.0`
INCS=`pkg-config --cflags clutter-0.8 webkit-clutter-1.0`

PKG_CONFIG_PATH="/usr/lib /usr/local/lib"
gcc -o test-webkit test-webkit2.c ${INCS} ${LIBS}