在支援HTML5的瀏覽器上執行WebGL程式的方法

2022-09-24 20:21:10 字數 776 閱讀 2400

前提條件和預期結果

目前只有少數的瀏覽器支援 webgl ,請看我的另外一篇文章:can i use webgl?.

下面的例子是在 windows 下的 chrome 16/23 以及 android 下的 firefox 17 進行測試。如果你使用的是非相容瀏覽器訪問則會彈出乙個警告。 

圖1:包含 hello world 文字的動畫的 webgl 立方體

在相容 html5 的瀏覽器上,你將會看到如下圖所示的帶動畫效果的立方體:

圖2: 示例執行的螢幕截圖

該**基於 lighting in webgl - how to simulate lighting effects in your webgl context - 非常感謝這篇教程。在該例項初始執行時,動畫的立方體是通過乙個靜態的 bitmap 圖形物件渲染的。

下面的**演示如何在程式中動態的渲染文字:

xml/html code複製內容到剪貼簿

在這裡使用 gl.pixelstorei(gl.unpack_flip_y_webgl, true); 是非常重要的,用來確保寫文字時不會前後顛倒。剩下的就很容易理解了:

xml/html code複製內容到剪貼簿

原始碼// file #1: webgl-demo.htm

xml/html code複製內容到剪貼簿

// file #02: webgl-demo.js

xml/html code複製內容到剪貼簿

本文標題: 在支援html5的瀏覽器上執行webgl程式的方法

本文位址:

HTML5 移動瀏覽器支援

全文完 以下為廣告部分 如果您想看下您的 https部署的是否安全,花1分鐘時間來 myssl.com 檢測以下吧。讓您的https 變得更安全!ssl檢測評估 快速了解https 安全情況。安全評級 a a a 行業合規檢測 證書資訊檢視 證書鏈資訊以及補完 伺服器套件資訊 證書相容性檢測等。ss...

HTML5瀏覽器支援判斷

首先判斷瀏覽器是否支援html5,根據以往的經驗判斷瀏覽器型別以及版本 這裡提供另外一張思路和方法。建立個html5的特性 看瀏覽器是否存在 參考w3c html div id intro p strong strong p div id checkvideoresult style margin ...

HTML5 各大瀏覽器對html5的支援情況

html5 各大瀏覽器對html5的支援情況 1,主流瀏覽器對html5的支援情況 1 chrome,firefox 支援html5很多年,而且有自動公升級,支援最好。2 safari,opera 同樣支援html5很多年,支援也很好。3 ie ie10起比較好了,之前很差。2,檢視具體的支援情況 ...