webgl第五課-繪製一個點的另外一種寫法
需要原始碼可以Q群：828202939 或者點選這裡 希望可以和大家一起學習、一起進步！！純手打！！
書籍是PDF電子檔，也在Q群裡，所有的課程原始碼在我上傳的資源裡面，本來想設定開源，好像不行！
如有錯別字或有理解不到位的地方，可以留言或者加微信15250969798，在下會及時修改！！！！！
《使用attribute繪製一個點》
大家不要嫌煩哈，那句話怎麼說來著，欲善其事 ,必先利其器
只有基礎打牢了，才能跑得更快
如果你有OpenGL的經驗，你會發現為什麼沒有交換顏色緩衝區的程式碼
webgl最顯著的一個特點就是不需要交換顏色緩衝區
既然我們用attribute來做示例，那麼就先要知道它是啥
attribute：GLSL ES的一種變數，被用來從外部向頂點著色器內傳輸資料，只有頂點著色器才能使用它
本示例繪製一點的過程大致如下：
1.在頂點著色器中，宣告attribute變數
2.講attribute變數賦值給gl_Position變數
3.向attribute變數傳輸資料
下面將詳細講解上述的步驟：
先提幾個函式：
gl_getAttributeLocation（program,name）該函式可以獲取由name指定的attribute變數的儲存地址
program 指定包含頂點著色器和片元著色器的著色器程式物件
name 指定想要獲取儲存地址的attribute變數名稱
gl_vertexAttrib3f(location，v0,v1,v2) 將資料（v0,v1,v2）傳給由location引數指定的attribute變數
location 指定將要修改的attribute變數的儲存位置
v0,v1,v2 指定填充attribute的第一，第二，第三個分量的值
文字很沒聊，程式碼走起
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>使用attribute繪製一個點</title>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="400">
Please use a browser that supports "canvas"
</canvas>
<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
<script src="HelloPoint2.js"></script>
</body>
</html>
// 頂點著色器
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' + // 屬性變數(位置)
'attribute float a_PositSize;\n' + // 屬性變數(大小)
'void main() {\n' +
' gl_Position = a_Position;\n' +
' gl_PointSize = a_PositSize;\n' +
'}\n';
// 片元著色器，這裡設定的是綠色
var FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);\n' +
'}\n';
function main() {
//獲取canvas元素
var canvas = document.getElementById('webgl');
// 獲取上下文
var gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
}
// 初始化著色器
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to intialize shaders.');
return;
}
// 獲取attribute變數的儲存位置和大小
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
var a_PositSize = gl.getAttribLocation(gl.program, 'a_PositSize');
if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position');
return;
}
if (a_PositSize < 0) {
console.log('Failed to get the storage location of a_PositSize');
return;
}
// 將頂點位置和大小賦值給attribute變數，這裡設定這個點為100個畫素的大小
gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);
gl.vertexAttrib1f(a_PositSize, 100.0);
// 設定canvas背景色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 清除canvas
gl.clear(gl.COLOR_BUFFER_BIT);
// 繪製
gl.drawArrays(gl.POINTS, 0, 1);
}
展示結果：
