[WebGL入門]二,開始WebGL之前,先了解一下canvas
注:文章譯自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的額外說明,我會加上[lufy:],另外,鄙人webgl研究還不夠深入,一些專業詞語,如果翻譯有誤,歡迎大家指正。
HTML5和canvas標籤
現在(2012年2月)HTML5依然處於草案階段。
HTML5支援網頁端的多媒體功能和畫布功能,追加了很多全新的更合理的Tag標籤,各個瀏覽器也都在逐漸的完善這些新的特性。
Canvas物件表示一個 HTML畫布元素,如它的名字一樣,它定義了一個API支援指令碼化客戶端來繪製圖形或是圖片,可以通過javascript來操作這些API。當然WebGL也是利用canvas來實現的,不過在此之前,先來簡單的說明一下canvas。
lufy:2012年12月17日W3C正式宣佈凝結了大量網路工作者心血的HTML5規範已經正式定稿,有訊息稱,在2014年底,HTML5將成為一種完整的成品標準。
canvas標籤的基礎知識
canvas和img等標籤一樣,是一個可以自由制定大小的矩形區域。
通過javascript可以對矩形區域進行操作,可以自由的繪製圖形,文字等。而且,可以新增影子,進行塗色,另外還可以對繪製的圖形進行旋轉等操作。而且,Web上常用的gif,jpg,png等格式的圖片,也可以直接進行繪製。
但是,能夠管理操作動畫等處理的物件和方法是沒有的。也就是說,為了製作動態的應用,通常會使用javascript進行迴圈處理。
在渲染速度上,由於javascript近幾年的執行速度在不斷的飛速上升,所以,如果不是特別複雜的應用的話,達到60FPS還是不成問題的。下面是我之前用canvas做的一個小遊戲,現在把它貼出來。*已經上傳到了jsdo.it。
scrolling="no" src="http://jsdo.it/blogparts/hnsm" width="465" height="546" style="border:1px #CCC solid;width:465px;">沒有使用WebGL,只是利用了canvas一般的API,已經能夠達到這種程度了。雖然說實際執行的結果依賴於執行的環境,但是還是相當不錯的吧。
WebGL和canvas
可以看到,使用canvas已經可以比較自由的繪製各種圖形了,那麼,為什麼還要用WebGL來做處理呢?
實際上,剛才貼出來的jsdo.it上的那個小遊戲,是利用了canvas的2d的context功能。
context是一個封裝了繪圖處理的各種API的物件,這個物件中包含了所有的繪圖函式和屬性,你可以把它想象成一個司令塔,一切的設定和處理命令都是由它發出的。
2d的context可以進行圖形,文字以及圖片資料的描畫,但是也僅限於此,像它的名字一樣,只能用於2d空間的繪圖。
和這個相對的,WebGL是三維,可以描畫3D圖形,區別於之前的2dcontext,它叫做webglcontext。
webglcontext物件和2dcontext物件 一樣,提供了各種各樣的屬性和方法,通過webglcontext,可以實現利用WebGL來描畫圖形。
總結
關於context,在我寫這篇文章的時候,只提供了2d和webgl兩種定義。但是webglcontext暫時叫做experimental-webgl,以後,還有可能會出現新的型別,這個現在就不考慮了。
本網站的所有內容,都是使用WebGL來說明的,而2dcontext和今後出現的新的context,並沒有打算去研究。(當然,也可能會出現一些2dcontext的內容......)
下次,開始介紹3d繪圖的基礎知識。
相關文章
- webgl入門(1)-什麼是webglWeb
- webgl入門(2)-初識webgl和著色器Web
- webgl世界 matrix入門Web
- [WebGL入門]四,渲染準備Web
- Khronos Group的WebGL工作組主席Ken Russell為《WebGL入門指南》作序Web
- WebGL基礎(一): 從一個滑鼠畫點開始瞭解原生webGLWeb
- Canvas + WebGL中文藝術字渲染CanvasWeb
- [WebGL入門]十四,繪製多邊形Web
- WebGL入門之基於WebGL的3D視覺化引擎介紹Web3D視覺化
- webgl 系列 —— 初識 WebGLWeb
- Three.js入門篇之1 - WebGL on HTMLJSWebHTML
- [WebGL入門]七,context的初始化WebContext
- [WebGL入門]六,頂點和多邊形Web
- [WebGL入門]一,瀏覽器的準備Web瀏覽器
- WebGL載入本地模型Web模型
- webgl入門(3)-座標系與滑鼠互動Web
- webGL入門-四階貝塞爾曲線繪製Web
- [WebGL入門]十,矩陣計算和外部庫Web矩陣
- [WebGL入門]九,頂點快取的基礎Web快取
- [WebGL入門]五,矩陣的基礎知識Web矩陣
- [WebGL入門]十二,模型資料和頂點屬性Web模型
- [WebGL入門]十一,著色器的編譯和連線Web編譯
- [WebGL入門]八,著色器的說明和基礎Web
- WebGL自學課程(14):WebGL使用Mipmap紋理Web
- 分享一個WebGL開發的網站-用JavaScript + WebGL開發3D模型Web網站JavaScript3D模型
- WEBGL橢圓Web
- WebGL-DemoWeb
- Webgl 紋理Web
- 認識WebGLWeb
- [WebGL入門]十三,minMatrix.js和座標變換矩陣WebJS矩陣
- [WebGL入門]三,3D繪圖的基礎知識Web3D繪圖
- test 2D渲染器 WebGL WebGL2Web
- 想做大模型開發前,先來了解一下MoE大模型
- 基於HTML5 Canvas WebGL製作分離摩托車HTMLCanvasWeb
- WebGL 的 Hello WorldWeb
- 解決webgl使用canvas.toDataURL()沒有內容的問題WebCanvas
- 《WebGL程式設計指南》學習筆記——2.使用< canvas >元素Web程式設計筆記Canvas
- 瀏覽器端繪圖技術SVG VML Canvas WebGL介紹瀏覽器繪圖SVGCanvasWeb