透過 OpenGL 作 WebKit 網頁描繪

之前的文章 [

webkit + clutter：以 3d 技術給予網頁瀏覽的新體驗

] 提過 [

webkit

] 開始採用 [

cairo

] 的向量繪圖處理能力，後者允許發揮硬體的 opengl 加速，我們也見到將 webkit 描繪的網頁對映到 2d su***ce 的 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
#include
static webkitadjustment *hadj, *vadj;
int main (int argc, char **argv)

程式列表最多的地方，主要是 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 ******錯誤，很怪異，你遇到過這種問題嗎？

由 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 $ $

透過 OpenGL 作 WebKit 網頁描繪

透過IT看人性

IT評彈透過IT看人性

透過表象看本質！？

透過 OpenGL 作 WebKit 網頁描繪

透過IT看人性

IT評彈 透過IT看人性

透過表象看本質！？

相關推薦

IT評彈透過IT看人性