WebGL學習筆記（一）
一個最簡單的webgl程序
*引入的js文件是簡單的webgl輔助函數 *
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
canvas {
margin: 0 auto;
}
</style>
<script src="../lib/webgl-debug.js" charset="utf-8"></script>
<script src="../lib/webgl-utils.js" charset="utf-8"></script>
<script src="../lib/cuon-matrix.js" charset="utf-8"></script>
<script src="../lib/cuon-utils.js" charset="utf-8"></script>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script type="text/javascript">
//頂點著色器
var VSHADER_SOURCE =
'void main(){ \n' +
'gl_Position = vec4(0.0,0.0,0.0,1.0);\n' +
'gl_PointSize = 10.0;\n' +
'}\n';
//片元著色器
var FSHADER_SOURCE =
'void main(){ \n' +
'gl_FragColor = vec4(1.0,0.0,0.0,1.0);\n' +
'}\n';
function main() {
var canvas = document.getElementById('canvas');
var gl = getWebGLContext(canvas);
if (!gl) {
console.log("sorry");
return;
}
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log("failed");
}
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS, 0, 1);
}
main();
</script>
</body>
</html>
程序中有一段著色器程序。
著色器程序有兩種：頂點著色器和片元著色器
- 頂點著色器。頂點著色器是用來描述頂點信息的，包括位置、顏色。頂點是指二維或三維中的一個點，比如二維圖形或三維圖形的端點或交點
- 片元著色器。進行 逐片元處理過程如光照的程序。可以理解為像素。
上面這段代碼的執行過程：
執行過程
下面是簡版的
簡單過程
| initShaders(gl,vshader,fshader) | 在webgl系統內部建立和初始化著色器 | |
|---|---|---|
| 參數 | gl | 指定渲染上下文 |
| vshader | 指定頂點著色器的代碼 | |
| fshader | 指定片元著色器的代碼 | |
| 返回值 | true | 初始化著色器代碼成功 |
| false | 初始化著色器代碼失敗 |
著色器代碼和C語言一樣，有一個main（）入口函數，他沒有返回值
頂點著色器的內置變量
| 類型和變量名 | 描述 | 是否必需 |
|---|---|---|
| vec4 gl_Position | 表示頂點位置 | 是 |
| float gl_PointSize | 表示點的尺寸（像素數） | 否，默認為1.0 |
GLSE ES是一種強類型的語言，必須明確指明變量的類型，下面是幾種類型
| 類型 | |
|---|---|
| float | 表示浮點數 |
| vec4 | 表示由四個浮點數組成的 矢量 |
其中，由四個分量組成的矢量被稱為齊次坐標，它能夠提高運算效率，雖然齊次坐標是四維的，但如果最后一個分量是1.0，這個齊次坐標就可以表示為“前三個分量為坐標值”的那個點；
齊次坐標如果用（x,y,z,w）,就等價于三維坐標（x/w,y/w,z/w）。
片元著色器的內置變量
| 類型和變量名 | 描述 |
|---|---|
| vec4 gl_FragColor | 指定片元顏色（RGBA格式） |
繪制操作
使用`gl.drawArrays(gl.POINTS,0,1); 該函數規范如下：
| gl.drawArrays(mode,first,count) | ||
|---|---|---|
| 執行頂點著色器，按照mode參數指定的方式繪制圖形 | ||
| 參數 | mode | 指定繪制的方式，可接受以下常量符號：gl.POINTS,gl.LINES,gl.LINE_STRIP,gl.LINE_LOOP, gl.TRIANGLES, gl.TRIANGLE_STRIP ,gl.TRIANGLE_FAN |
| first | 指定從哪個頂點開始繪制（整型數） | |
| count | 指定繪制需要用到多少個頂點（整型數） | |
| 返回值 | 無 | |
| 錯誤 | INVALI D_EN UM | 傳入的mode參數不是前述參數之一 |
| INVALID_VALUE | 傳入的first或count是負數 |
當程序調用gl.drawArrays()時，頂點著色器將被執行count次，每次處理一個頂點。一旦頂點著色器著色器執行完畢，片元著色器將開始執行。最后一個基本圖形就繪制在屏幕上了。
