webgl第24课-几何图形的装配和光栅化 - 好文

需要电子档书籍可以Q群：828202939 <https://jq.qq.com/?_wv=1027&k=5NiS63x>
希望可以和大家一起学习、一起进步！！纯手打！！

所有的课程源代码在我上传的资源 <https://download.csdn.net/user/weixin_39452320/uploads>
里面，本来想设置开源，好像不行！博客和专栏同步！

如有错别字或有理解不到位的地方，可以留言或者加微信15250969798，在下会及时修改！！！！！

上一节课我们学习了颜色与纹理中-将非坐标数据传入顶点着色器的另外一种方式--交错组织

这一节课我们将学习颜色与纹理中-几何图形的装配和光栅化

我们前面的课程了解到顶点着色器是控制的几何图形的位置、尺寸甚至指定几何图形的颜色，最终片元着色器来决定几何图形的颜色！但是我们并不知道他们之间的具体过程！

下面我们来看一下顶点着色器和片元着色器之间的千丝万缕：

需要了解的属性：

顶点着色器到片元着色器的过程：

前面的gl.deawArrays()函数的执行过程（n=3）：

示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />
<title>webgl第24课-几何图形的装配和光栅化</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="../lib/cuon-matrix.js"></script> <script
src="HelloTriangle_FragCoord.js"></script> </body> </html> //
HelloTriangle_FragCoord.js (c) 2012 matsuda // Vertex shader program var
VSHADER_SOURCE = 'attribute vec4 a_Position;\n' + 'void main() {\n' + '
gl_Position = a_Position;\n' + '}\n'; // Fragment shader program var
FSHADER_SOURCE = 'precision mediump float;\n' + 'uniform float u_Width;\n' +
'uniform float u_Height;\n' + 'void main() {\n' + ' gl_FragColor =
vec4(gl_FragCoord.x/u_Width, 0.0, gl_FragCoord.y/u_Height, 1.0);\n' + '}\n';
function main() { // Retrieve <canvas> element var canvas =
document.getElementById('webgl'); // Get the rendering context for WebGL var gl
= getWebGLContext(canvas); if (!gl) { console.log('Failed to get the rendering
context for WebGL'); return; } // Initialize shaders if (!initShaders(gl,
VSHADER_SOURCE, FSHADER_SOURCE)) { console.log('Failed to intialize shaders.');
return; } // Write the positions of vertices to a vertex shader var n =
initVertexBuffers(gl); if (n < 0) { console.log('Failed to set the positions of
the vertices'); return; } // Specify the color for clearing <canvas>
gl.clearColor(1.0, 1.0, 1.0, 1.0); // Clear <canvas>
gl.clear(gl.COLOR_BUFFER_BIT); // Draw the rectangle
gl.drawArrays(gl.TRIANGLES, 0, n); } function initVertexBuffers(gl) { var
vertices = new Float32Array([ 0, 0.5, -0.5, -0.5, 0.5, -0.5 ]); var n = 3; //
The number of vertices // Create a buffer object var vertexBuffer =
gl.createBuffer(); if (!vertexBuffer) { console.log('Failed to create the
buffer object'); return -1; } // Bind the buffer object to target
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); // Write date into the buffer
object gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); // Pass the
position of a point to a_Position variable var a_Position =
gl.getAttribLocation(gl.program, 'a_Position'); if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position'); return -1; }
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); var u_Width =
gl.getUniformLocation(gl.program, 'u_Width'); if (!u_Width) {
console.log('Failed to get the storage location of u_Width'); return; } var
u_Height = gl.getUniformLocation(gl.program, 'u_Height'); if (!u_Height) {
console.log('Failed to get the storage location of u_Height'); return; } //
Pass the width and hight of the <canvas> gl.uniform1f(u_Width,
gl.drawingBufferWidth); gl.uniform1f(u_Height, gl.drawingBufferHeight); //
Enable the generic vertex attribute array
gl.enableVertexAttribArray(a_Position); // Unbind the buffer object
gl.bindBuffer(gl.ARRAY_BUFFER, null); return n; }
运行展示：

热门工具换一换