3、在Canvas中使用WebGL

時間 2019-11-19

標籤 canvas 使用 webgl 简体版

原文原文鏈接

　　上一篇介紹瞭如何在<canvas>標籤中繪製2d圖形；接下來，咱們看看如何在<canvas>中使用WebGL來繪製3d圖形。html

　　咱們開始編寫一個最短的WebGL程序：Hello WebGL;這個程序的功能很是簡單，使用指定顏色清空<canvas>標籤的繪圖區；下圖顯示了程序運行的效果，清空（用黑色）了<canvas>定義的矩形區域。web

　　咱們來看下代碼，先看一下Hello WebGL.html：編程

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="Generator" content="EditPlus®">
 6     <meta name="Author" content="Mirror">
 7     <meta name="Keywords" content="">
 8     <meta name="Description" content="">
 9     <title>Document</title>
10     <!--《WebGL編程指南》的做者爲讀者編寫的WebGL輔助函數-->
11     <script src="lib/webgl-utils.js"></script>
12     <script src="lib/webgl-debug.js"></script>
13     <script src="lib/cuon-utils.js"></script>
14     <script>
15         function main() { 16             //獲取<canvas>標籤。
17             var canvas = document.getElementById("myCanvas"); 18             //獲取WebGL繪圖上下文。
19             var gl = getWebGLContext(canvas); 20             //若是瀏覽器不支持WebGL則提示錯誤。
21             if (!gl) { 22  console.log("Failed to get the rendering context for WebGL."); 23                 return; 24  } 25             //指定清除顏色緩衝區的顏色。
26  gl.clearColor(0,0,0,1); 27             //用指定的顏色清除顏色緩衝區。
28  gl.clear(gl.COLOR_BUFFER_BIT); 29  } 30     </script>
31 </head>
32 <body onload="main()">
33     <!--定義<canvas>標籤，經過width屬性和height屬性規定它是一片400×400的繪製區域-->
34     <canvas id="myCanvas" width="400" height="400">
35         <!--當瀏覽器不支持時，會直接忽略<canvas>標籤，而直接顯示下面這一行提示-->
36  Please use the browser supporting "canvas". 37     </canvas>
38 </body>
39 </html>

Hello WebGL.html

　　文件結構很簡單：首先使用<canvas>元素定義繪圖區域；而後指定當頁面加載完成時，調用main()函數。canvas

　　在main()函數中，咱們經過id找到<canvas>標籤；直到這一步，咱們發現，跟繪製2d圖形的步驟是如出一轍的。可是下一句，獲取繪圖上下文，好像有點不同了；在繪製2d圖形的時候，咱們是經過調用canvas的getContext方法，傳入「2d」參數來獲取2d圖形的回繪圖上下文的；這裏須要解釋一下，一般來講，咱們應該使用canvas.getContext()函數來獲取繪圖上下文（就像以前那樣）。可是在獲取WebGL繪圖上下文時，canvas.getContext()函數接收的參數，在不一樣瀏覽器中會不一樣（雖然大部分瀏覽器都接收字符串「expeimental-webgl」或「webgl」，但並不是全部瀏覽器都這樣），因此咱們使用getWebGLContext(canvas)來隱藏不一樣瀏覽器之間的差別。getWebGLContext(canvas, opt_debug)函數位於cuon-utils.js文件中。在代碼裏，經過<script>標籤引入了3個js文件，這3個js文件是《WebGL編程指南》的做者寫的，裏面包含了一些對WebGL編程有用的輔助函數；瀏覽器

　　getWebGLContext(canvas, opt_debug)函數的功能是：獲取WebGL繪圖上下文；若是開啓了debug屬性，遇到錯誤時將在控制檯顯示錯誤消息。如下是該函數的具體說明：
ide

　　在獲取到繪圖上下文之後，咱們就能夠繪製圖形了，而且能夠繪製3d圖形了；這也說明，WebGL已經調用成功，咱們如今可使用WebGL函數了。咱們將上下文放到名爲gl的變量中。有了這個上下文，咱們就能夠設置顏色來清除<canvas>標籤指定的繪圖區了。在以前繪製2d圖形時，咱們在繪製以前就指定了繪圖顏色。在WebGL中，是類似的，清空繪圖區以前也須要指定顏色。gl.clearColor(RGBA)函數經過傳入RGBA格式的顏色參數指定顏色。咱們在代碼中指定了黑色，也能夠隨意指定其餘顏色。在繪製2d圖形時，RGBA每一個份量的取值範圍是0-255之間；可是在WebGL中，每一個份量的取值範圍是0-1，這和OpenGL保持了一致。一旦指定了顏色，這個顏色就會駐存在WebGL系統中，直到你從新指定新的顏色。在這以前，你能夠無數次的使用該顏色進行清除繪圖區而無須從新指定。函數

　　清除繪圖區咱們使用 gl.clear(gl.COLOR_BUFFER_BIT)函數；你可能以爲很奇怪，參數不該該是表示繪圖區的<canvas>嗎？這是因爲gl.Clear()函數繼承自OpenGL，它基於多基本緩衝區模型，比二維繪圖上下文要複雜得多。清空繪圖區，其實是在清空顏色緩衝區（經過指定的顏色去擦除已經繪製的內容），傳遞gl.COLOR_BUFFER_BIT參數就是在告訴WebGL清空顏色緩衝區。若是在使用該函數以前咱們沒有指定任何顏色，那麼默認會以RGBA(0,0,0,0)做爲清除顏色，這個顏色是全透明的，替換出來的結果就是什麼顏色都沒有，顯示爲瀏覽器自己的顏色。webgl

　　這一章咱們介紹瞭如何創建一個WebGL程序以及使用一些簡單的WebGL相關函數，下一章咱們介紹如何使用WebGL繪製基本圖形。spa

　　原文中引用的的js包【點擊下載】
debug