WebGL學(xué)習(xí)筆記（一）
一個(gè)最簡(jiǎn)單的webgl程序
*引入的js文件是簡(jiǎn)單的webgl輔助函數(shù) *
<!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">
//頂點(diǎn)著色器
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>
程序中有一段著色器程序串前。
著色器程序有兩種：頂點(diǎn)著色器和片元著色器
- 頂點(diǎn)著色器撩轰。頂點(diǎn)著色器是用來描述頂點(diǎn)信息的，包括位置唉俗、顏色。頂點(diǎn)是指二維或三維中的一個(gè)點(diǎn)喻鳄，比如二維圖形或三維圖形的端點(diǎn)或交點(diǎn)
- 片元著色器郊酒。進(jìn)行 逐片元處理過程如光照的程序拆宛∩ど荩可以理解為像素。
上面這段代碼的執(zhí)行過程：
執(zhí)行過程
下面是簡(jiǎn)版的
簡(jiǎn)單過程
| initShaders(gl,vshader,fshader) | 在webgl系統(tǒng)內(nèi)部建立和初始化著色器 | |
|---|---|---|
| 參數(shù) | gl | 指定渲染上下文 |
| vshader | 指定頂點(diǎn)著色器的代碼 | |
| fshader | 指定片元著色器的代碼 | |
| 返回值 | true | 初始化著色器代碼成功 |
| false | 初始化著色器代碼失敗 |
著色器代碼和C語言一樣浑厚，有一個(gè)main（）入口函數(shù)股耽，他沒有返回值
頂點(diǎn)著色器的內(nèi)置變量
| 類型和變量名 | 描述 | 是否必需 |
|---|---|---|
| vec4 gl_Position | 表示頂點(diǎn)位置 | 是 |
| float gl_PointSize | 表示點(diǎn)的尺寸（像素?cái)?shù)） | 否，默認(rèn)為1.0 |
GLSE ES是一種強(qiáng)類型的語言钳幅，必須明確指明變量的類型物蝙，下面是幾種類型
| 類型 | |
|---|---|
| float | 表示浮點(diǎn)數(shù) |
| vec4 | 表示由四個(gè)浮點(diǎn)數(shù)組成的 矢量 |
其中，由四個(gè)分量組成的矢量被稱為齊次坐標(biāo)敢艰，它能夠提高運(yùn)算效率诬乞，雖然齊次坐標(biāo)是四維的，但如果最后一個(gè)分量是1.0，這個(gè)齊次坐標(biāo)就可以表示為“前三個(gè)分量為坐標(biāo)值”的那個(gè)點(diǎn)丽惭；
齊次坐標(biāo)如果用（x,y,z,w）,就等價(jià)于三維坐標(biāo)（x/w,y/w,z/w）击奶。
片元著色器的內(nèi)置變量
| 類型和變量名 | 描述 |
|---|---|
| vec4 gl_FragColor | 指定片元顏色（RGBA格式） |
繪制操作
使用`gl.drawArrays(gl.POINTS,0,1); 該函數(shù)規(guī)范如下：
| gl.drawArrays(mode,first,count) | ||
|---|---|---|
| 執(zhí)行頂點(diǎn)著色器辈双，按照mode參數(shù)指定的方式繪制圖形 | ||
| 參數(shù) | mode | 指定繪制的方式责掏，可接受以下常量符號(hào)：gl.POINTS,gl.LINES,gl.LINE_STRIP,gl.LINE_LOOP, gl.TRIANGLES, gl.TRIANGLE_STRIP ,gl.TRIANGLE_FAN |
| first | 指定從哪個(gè)頂點(diǎn)開始繪制（整型數(shù)） | |
| count | 指定繪制需要用到多少個(gè)頂點(diǎn)（整型數(shù)） | |
| 返回值 | 無 | |
| 錯(cuò)誤 | INVALI D_EN UM | 傳入的mode參數(shù)不是前述參數(shù)之一 |
| INVALID_VALUE | 傳入的first或count是負(fù)數(shù) |
當(dāng)程序調(diào)用gl.drawArrays()時(shí)，頂點(diǎn)著色器將被執(zhí)行count次湃望，每次處理一個(gè)頂點(diǎn)换衬。一旦頂點(diǎn)著色器著色器執(zhí)行完畢，片元著色器將開始執(zhí)行证芭。最后一個(gè)基本圖形就繪制在屏幕上了瞳浦。
