var VERTEX_SHADER_SOURCE =
'void main() {\n' +
' gl_Position = vec4(0.0,0.0,0.0,1.0);\n' +
' gl_PointSize = 10.0;\n' +
'}\n';
var FRAGMENT_SHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0,0.0,0.0,1.0);\n' +
'}\n';
var canvas = document.getElementById("canvas");
var gl = canvas.getContext('webgl');
if (!initShaders(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)) {
alert('Failed to init shaders');
}
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS, 0, 1);
function initShaders(gl, vertexShaderSource, fragmentShaderSource) {
var program = createProgram(gl, vertexShaderSource, fragmentShaderSource);
if (!program) {
console.log('Failed to create program');
return false;
}
gl.useProgram(program);
gl.program = program;
return true;
}
function loadShader(gl, type, source) {
// create shader object
var shader = gl.createShader(type);
if (shader == null) {
console.log('unable to create shader');
return null;
}
// set shader source code
gl.shaderSource(shader, source);
// compile the shader
gl.compileShader(shader);
// check compile status
var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (!compiled) {
var error = gl.getShaderInfoLog(shader);
console.log('Failed to compile shader: ' + error);
return null;
}
return shader;
}
function createProgram(gl, vertexShaderSource, fragmentShaderSource) {
var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
if (!vertexShader || !fragmentShader) {
return null;
}
// create a program object
var program = gl.createProgram();
if (!program) {
console.log('gl.createProgram failed');
return null;
}
// attach the shader objects
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
// link the program object
gl.linkProgram(program);
// check link status
var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
if (!linked) {
var error = gl.getProgramInfoLog(program);
console.log('Failed to link program: ' + error);
gl.deleteProgram(program);
gl.deleteShader(vertexShader);
gl.deleteShader(fragmentShader);
return null;
}
return program;
}
對于初學(xué)者來說 initShaders 的具體實現(xiàn)可以先忽略评甜，這個方法主要是編譯鏈接 shader 的。仔細(xì)讀一遍也基本能看懂仔涩，編譯鏈接 shader 是固定套路忍坷，基本都是這么寫的。
那么什么是 shader（著色器） 呢熔脂？
- shader 其實就是運(yùn)行在 GPU 中的一段程序佩研，因為圖形學(xué)是對 GPU 進(jìn)行編程。
圖形圖像從輸入到 GPU 到顯示在顯示器上霞揉，中間要經(jīng)過一系列的處理旬薯，這一系列的處理流程叫作 GPU 的 PipeLine (管線)。 - GPU PipeLine 要求程序必須提供 Vertex shader 和 Fragment shader适秩。
- Vertex shader 用來處理 vertex (頂點(diǎn))绊序，一個頂點(diǎn)中包含圖形的 position (位置) 、color 等信息秽荞。每一個頂點(diǎn)都會輸入到 Vertex shader 中執(zhí)行一次骤公，你可能會問一個圖形可能有成千上萬個頂點(diǎn)，每個頂點(diǎn)都執(zhí)行一次 Vertex shader 是不是會很慢扬跋？因為 GPU 被設(shè)計成可以并行的處理數(shù)據(jù)阶捆，所以這些頂點(diǎn)并不是串行處理的，而是可以瞬間并行處理完畢胁住。這也是設(shè)計 GPU 的初衷趁猴，高效處理圖形圖像。
- Fragment shader 用來處理 Fragment (片元) 彪见。fragment 就是顯示在屏幕上的 pixel (像素)儡司。 Fragment shader 用來計算每個像素的顏色，對于每個 fragment 都會執(zhí)行一次 Fragment shader余指。
來看看 shader 的代碼
// vertex shader
var VERTEX_SHADER_SOURCE =
'void main() {\n' +
' gl_Position = vec4(0.0,0.0,0.0,1.0);\n' +
' gl_PointSize = 10.0;\n' +
'}\n';
// fragment shader
var FRAGMENT_SHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0,0.0,0.0,1.0);\n' +
'}\n';
- shader 使用 GLSL ES (OpenGL ES shading language) 語言編寫的捕犬，這是一個類 C 語言跷坝，很容易看懂。
- \n 換行主要是為了方便調(diào)試時顯示行號
- gl_Position = vec4(0.0,0.0,0.0,1.0)
gl_Position 是 vertex shader 的內(nèi)置變量碉碉，必須賦值柴钻，表示圖形的坐標(biāo)
vec4 表示一個含有 4 個元素的 vector (向量)
- gl_PointSize = 10.0
gl_PointSize 也是內(nèi)置變量，只有畫點(diǎn)時才有效垢粮。這里給了一個固定值贴届。
- gl_FragColor = vec4(1.0,0.0,0.0,1.0)
gl_FragColor 是 fragment shader 的內(nèi)置變量，指定每個 fragment 的顏色蜡吧，這里給了一個紅色 (RGBA)
gl.drawArrays(gl.POINTS, 0, 1)
gl.drawArrays(mode, first, count)
mode 表示要畫圖形的類型毫蚓，可以是 gl.POINTS, gl.LINES，gl.TRIANGLES 等
first 從第幾個頂點(diǎn)開始畫
count 一共畫多少個頂點(diǎn)
這樣我們就畫了一個紅色的點(diǎn)昔善，但這個點(diǎn)的坐標(biāo)在哪里呢元潘？我們來看一下 webgl 坐標(biāo)系。
webgl 默認(rèn)是右手坐標(biāo)系君仆， z 軸從屏幕里面出來翩概，眼睛默認(rèn)在 (0, 0, 0) 位置往屏幕里面看。
什么是右手坐標(biāo)系返咱，自己用右手比劃一下就明白了
而 canvas 和 webgl 坐標(biāo)的映射關(guān)系是下面這樣的
canvas draw area 不一定是正方形的钥庇，一般都是長方形的。不論是正方形還是長方形咖摹，映射之后 canvas 左下角是 (-1.0,-1.0,-1.0) , 右上角是 (1.0,1.0,1.0)上沐，中間是 (0.0,0.0,0.0)
那是怎么映射過來的呢？后面講投影的時候就知道了楞艾。
我們點(diǎn)的坐標(biāo)是 vec4(0.0,0.0,0.0,1.0) 所以畫在了中間， 最后的 1.0 表示什么呢龄广？
這是一個 homogeneous coordinate （齊次坐標(biāo)）硫眯。簡單來說 齊次坐標(biāo) (x, y, z, w) 等價于 3維坐標(biāo) (x/w, y/w, z/w)。當(dāng) w=1.0 時就可以用齊次坐標(biāo)來表示3維坐標(biāo)择同。
為什么要引入齊次坐標(biāo)两入，齊次坐標(biāo)有什么用？這個我理解的也不清楚敲才，也是比較迷惑的地方裹纳。
我的理解是 1. 當(dāng) w=0 時齊次坐標(biāo)可以表示無窮遠(yuǎn) 2. 矩陣變換都是用 4×4 的齊次坐標(biāo)來計算的
練習(xí)：
- 試試改變點(diǎn)的位置 gl_Position = vec4(0.5, 0.0, 0.0, 1.0)
- 試試改變點(diǎn)的顏色
