webgl第26课-在图形上贴图片 - 好文

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

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

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

上一节课我们学习了颜色与纹理中--彩色三角形

这一节课我们将学习颜色与纹理中-在图像上贴图片

实现主要步骤：

纹理映射主要步骤：

我们先来了解下其中的一些知识点：

代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />
<title>webgl第26课-在图形上贴图片</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="TexturedQuad.js"></script>
</body> </html> // TexturedQuad.js (c) 2012 matsuda and kanda // Vertex shader
program var VSHADER_SOURCE = 'attribute vec4 a_Position;\n' + 'attribute vec2
a_TexCoord;\n' + 'varying vec2 v_TexCoord;\n' + 'void main() {\n' + '
gl_Position = a_Position;\n' + ' v_TexCoord = a_TexCoord;\n' + '}\n'; //
Fragment shader program var FSHADER_SOURCE = '#ifdef GL_ES\n' + 'precision
mediump float;\n' + '#endif\n' + 'uniform sampler2D u_Sampler;\n' + 'varying
vec2 v_TexCoord;\n' + 'void main() {\n' + ' gl_FragColor = texture2D(u_Sampler,
v_TexCoord);\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; } // Set the vertex information var n =
initVertexBuffers(gl); if (n < 0) { console.log('Failed to set the vertex
information'); return; } // Specify the color for clearing <canvas>
gl.clearColor(0.0, 0.0, 0.0, 1.0); // Set texture if (!initTextures(gl, n)) {
console.log('Failed to intialize the texture.'); return; } } function
initVertexBuffers(gl) { var verticesTexCoords = new Float32Array([ //
图形顶点坐标和纹理顶点坐标，坐标顺序都是逆时针顺序 //可以改下纹理坐标试试看其他的效果 -0.5, 0.5, 0.0, 1.0, -0.5, -0.5,
0.0, 0.0, 0.5, 0.5, 1.0, 1.0, 0.5, -0.5, 1.0, 0.0, ]); var n = 4; // The number
of vertices // Create the buffer object var vertexTexCoordBuffer =
gl.createBuffer(); if (!vertexTexCoordBuffer) { console.log('Failed to create
the buffer object'); return -1; } // Bind the buffer object to target
gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords, gl.STATIC_DRAW); var FSIZE =
verticesTexCoords.BYTES_PER_ELEMENT; //Get the storage location of a_Position,
assign and enable buffer 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, FSIZE * 4, 0); gl.enableVertexAttribArray(a_Position); //
Enable the assignment of the buffer object // Get the storage location of
a_TexCoord var a_TexCoord = gl.getAttribLocation(gl.program, 'a_TexCoord'); if
(a_TexCoord < 0) { console.log('Failed to get the storage location of
a_TexCoord'); return -1; } // Assign the buffer object to a_TexCoord variable
gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, FSIZE * 4, FSIZE * 2);
gl.enableVertexAttribArray(a_TexCoord); // Enable the assignment of the buffer
object return n; } function initTextures(gl, n) { var texture =
gl.createTexture(); // Create a texture object if (!texture) {
console.log('Failed to create the texture object'); return false; } // Get the
storage location of u_Sampler var u_Sampler = gl.getUniformLocation(gl.program,
'u_Sampler'); if (!u_Sampler) { console.log('Failed to get the storage location
of u_Sampler'); return false; } var image = new Image(); // Create the image
object if (!image) { console.log('Failed to create the image object'); return
false; } // Register the event handler to be called on loading an image
image.onload = function(){ loadTexture(gl, n, texture, u_Sampler, image); }; //
Tell the browser to load an image image.src = '../resources/sky.jpg'; return
true; } function loadTexture(gl, n, texture, u_Sampler, image) {
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); // Flip the image's y axis // Enable
texture unit0 gl.activeTexture(gl.TEXTURE0); // Bind the texture object to the
target gl.bindTexture(gl.TEXTURE_2D, texture); // Set the texture parameters
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); // Set the
texture image gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE,
image); // Set the texture unit 0 to the sampler gl.uniform1i(u_Sampler, 0);
gl.clear(gl.COLOR_BUFFER_BIT); // Clear <canvas>
gl.drawArrays(gl.TRIANGLE_STRIP, 0, n); // Draw the rectangle }

热门工具换一换