WebGL學習筆記（1）

基本的WebGL圖形操做（詳細參考教程：https://www.yiibai.com/webgl，須要1周左右熟悉webgl的對象方法以及着色器代碼）：
繪製三角形 drawElements gl.TRIANGLES
繪製矩形 drawElements 經過繪製兩個三角形實現
繪製點 drawElements POINTS
繪製線 drawElements gl.LINE，LINE_STRIP，LINE_LOOP
將繪製的圖形填充顏色（使用attribute color，main中傳遞給varying vColor，在片元着色器中賦值給gl_FragColor）
圖形平移（使用uniform location變量，與gl_Position 相加）
圖形縮放（使用uniform mat4矩陣，定義縮放大小矩陣，矩陣條目的每行數據乘以頂點的每列數據，矩陣相乘參考：https://blog.csdn.net/jacke121/article/details/68484813）

繪製代碼流程記要（此處簡單說明變量名及方法名，文章末尾包含了具體測試代碼）：
1. 聲明頂點數組 vertices
2. 聲明頂點索引 indices
3. 聲明顏色數組 colors
4. 建立頂點/索引/顏色緩衝對象 gl.createBuffer，gl.bindBuffer(gl.ARRARY_BUFFER,new Float32Array(…), gl.STATIC_DRAW)，gl.bufferData
5. 聲明GLSL頂點/片斷着色器代碼
6. 建立頂點/片斷着色器對象並建立着色程序與之關聯 gl.createShader(gl.VERTEX_SHADER)，gl.attachShader, gl.compileShader，gl.createProgram，gl.attachShader，gl.linkProgram，gl.useProgram
7. 寫入緩衝對象數據到着色程序 gl.getAttribLocation, gl.vertexAttribPointer(position, 3, gl.FLOAT, flase,0,0)，gl.getUniformLocation，gl.uniform4f
8. 繪製圖形 gl.clearColor，gl.enable，gl.clear，gl.viewport，gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0)，gl.drawArrays(gl.POINTS, 0, vertices.length/3 )

後續須要研究：
縮放
旋轉
立方體旋轉
交互式立方體

着重點筆記：
GSSL裏的修飾符
attribute 每一個頂點數據的頂點着色器與OpenGL ES 之間的連接，每次執行時變化
Uniform 平移位置：使用gl.getUniformLocation獲取變量，使用gl.uniform4f(變量,向量) 改變位置，使用gl.uniformMatrix4fv（location, transpose（設置爲false），值）設置矩陣
Varying 傳遞給頂點着色器的變量
GSSL裏的數據類型
Vec3 ：存儲3個值的數組類型
vec4：存儲4個值的數組類型
Mat3：存儲3個vec3的矩陣類型
Mat4：存儲4個vec4的矩陣類型

頂點着色器預約義變量
Highp vec4 gl_Position 保存頂點的位置
Mediump float gl_PointSize 保存變換點的大小

片元着色器代碼注意添加 Precision mediump float;

示例GLSL代碼：
var vertCode = `
attribute vec3 position;
attribute vec3 color;
varying vec3 vColor;
uniform vec3 translation;
void main(void){
gl_Position = vec4(position, 1.0)+ vec4(translation, 1.0);
gl_PointSize = 10.0;
vColor = color;
}
`
var fragCode = `
precision mediump float;
varying vec3 vColor;
void main(void){
gl_FragColor = vec4(vColor, 1.0);
}
`

 

測試代碼，須要本身寫一下html

var canvas = document.getElementById('my_Canvas')
var gl = canvas.getContext('experimental-webgl')

var vertices = [
-0.5, 0.5, 0.0,
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0,
]

var indices = [
0,1,2
]

var colors = [
0,1,1, ,0,1,1, 0,1,1
]

var vertex_buffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer)
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW)
gl.bindBuffer(gl.ARRAY_BUFFER, null)

var index_buffer = gl.createBuffer()
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer)
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW)
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null)

var color_buffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer)
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW)
gl.bindBuffer(gl.ARRAY_BUFFER, null)

var vertCode = `
attribute vec3 position;
attribute vec3 color;
varying vec3 vColor;
uniform vec3 translation;

uniform mat4 u_xformMatrix;

void main(void){
gl_Position = ( vec4(position, 1.0)+ vec4(translation, 1.0) ) * u_xformMatrix ;
gl_PointSize = 10.0;
vColor = color;
}
`
var fragCode = `
precision mediump float;
varying vec3 vColor;
void main(void){
gl_FragColor = vec4(vColor, 1.0);
}
`

var vertShader = gl.createShader(gl.VERTEX_SHADER)
gl.shaderSource(vertShader, vertCode)
gl.compileShader(vertShader)

var fragShader = gl.createShader(gl.FRAGMENT_SHADER)
gl.shaderSource(fragShader, fragCode)
gl.compileShader(fragShader)

var shaderProgram = gl.createProgram()
gl.attachShader(shaderProgram, vertShader)
gl.attachShader(shaderProgram, fragShader)
gl.linkProgram(shaderProgram)
gl.useProgram(shaderProgram)

//縮放

/*
三角形的3個頂點座標mat4
vertices = [
-0.5, 0.5, 0.0, 1.0 //第1個頂點 ，在左上角，注意這裏是1個gl_Position的position
-0.5, -0.5, 0.0, 1.0 //第2個頂點， 在左下角
0.5, -0.5, 0.0, 1.0 //第3個頂點，在右下角
]
第1個頂點座標的vec4
position = [-0.5, 0.5, 0.0, 1.0]

縮放矩陣mat4與 頂點座標vec4相乘，實現縮放
position * u_xformMatrix;
*/

var x = 1.5, y=1.5, z= 1
var xformMatrix = [
x, 0.0, 0.0, 0.0, // 乘頂點數據條目的第1個座標位置
0.0, y, 0.0, 0.0, // 乘頂點數據條目的第2個座標位置
0.0, 0.0, z, 0.0, // 乘頂點數據條目的第3個座標位置
0.0, 0.0, 0.0, 1.0, // 此處相乘的是gl_Position裏定義的一個1.0固定值， 即最後1個頂點的數組鍵值
]
/*
最終獲得第1個頂點座標的縮放結果爲：
position = [-0.75, 0.75, 0.0 ,1.0 ]，獲得 第1個頂點的x軸向左移動，y軸向上移動，實現了三角形的縮放變大
即xformMatrix的每行行（x,y,z軸新座標）與 vertices的每列數據（每一個頂點的x,y,z軸座標）相乘，實現了縮放

*/

var u_xformMatrix = gl.getUniformLocation(shaderProgram, 'u_xformMatrix')
gl.uniformMatrix4fv(u_xformMatrix, false, new Float32Array(xformMatrix))

gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer)
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer)
var position = gl.getAttribLocation(shaderProgram, 'position')
gl.vertexAttribPointer(position, 3, gl.FLOAT, false, 0, 0)
gl.enableVertexAttribArray(position)

gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer)
var color = gl.getAttribLocation(shaderProgram, 'color')
gl.vertexAttribPointer(color, 3, gl.FLOAT, false, 0, 0)
gl.enableVertexAttribArray(color)
//平移
var translation = gl.getUniformLocation(shaderProgram, 'translation')
//會對vertices的3個頂點的x,y,z座標進行相加實現平移，好比
/*
原vertices 頂點的座標以下：
position = [
-0.5, 0.5, 0.0, 1.0 第1個頂點，相加後變成了 -0.3, 0.4, -0.1 即 第1個頂點的x軸向右平移 y軸向下平移
-0.5, -0.5, 0.0, 1.0 第2個頂點，相加後變成了 -0.3, -0.6, -0.1 即 第2個頂點的x軸向右平移 y軸向下平移
0.5, -0.5, 0.0, 1.0 第3個頂點，相加後變成了 0.7, -0.6, -0.1 即 第3個頂點的x軸向右平移 y軸向下平移
]
這樣三角形的3個頂點都進行的平移
*/
gl.uniform3f(translation, 0.2,-0.1,-0.1)

gl.clearColor(1.0, 1.0, 1.0, 1.0)
gl.enable(gl.DEPTH_TEST)
gl.clear(gl.COLOR_BUFFER_BIT)
gl.viewport(0, 0, canvas.width, canvas.height)

gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0)