WebGL学习笔记五

时间 2019-11-12

标签 webgl 学习笔记繁體版

原文原文链接

本章主要是对纹理的进一步讲解，咱们不少时候须要将现实中已有的图片在网页中展现出来而不是去创造图片，经过纹理咱们能够将光栅化的图形和图片纹理造成映射而且将图片在图形中显示出来。基本过程与前几章一致，在着色器中主要是添加了一个取样器的变量做用是从纹理单元中取出图形在不一样坐标的片元上显示出来，这里先要设置纹理坐标将纹理坐标和webGL坐标造成映射，而后是建立图像对象，建立纹理对象，开启某个纹理单元，将纹理对象与纹理单元绑定，配置纹理参数，将图像对象添加进纹理单元，将纹理单元中的纹理传给取样器，取样器根据纹理坐标和webGL坐标的对应关系显示纹理图像。javascript

http://localhost:8080/WebGL5/TexturedQuad.html

效果以下：css

看代码：html

<!DOCTYPE html> <html> <head> <title>TexturedQuad.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">  <script src="js/cuon-matrix.js"></script> <script src="js/cuon-utils.js"></script> <script src="js/webgl-debug.js"></script> <script src="js/webgl-utils.js"></script> <script type="text/javascript"> var VSHADER_SOURCE=//定点着色器 'attribute vec4 a_Position;\n'+//定义vec4的变量而且声明该变量是attribute型的 'attribute float a_PointSize;\n'+ 'attribute vec2 a_TextCoord;\n'+ 'varying vec2 v_TextCoord;\n'+ 'void main(){\n'+ 'gl_Position=a_Position;\n'+//将attribute的变量赋值给内部 'gl_PointSize=a_PointSize;\n'+ 'v_TextCoord=a_TextCoord;\n'+//将数据传给片元着色器 '}\n'; var FSHADER_SOURCE=//片元着色器 'precision mediump float;\n' + 'uniform sampler2D u_Sampler;\n'+ 'varying vec2 v_TextCoord;\n'+ 'void main(){\n'+ 'gl_FragColor=texture2D(u_Sampler,v_TextCoord);\n'+// '}\n'; function main(){ var canvas=document.getElementById("webgl"); var gl=getWebGLContext(canvas); if(!gl){ console.log("gl load fail!"); return; } if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){//初始化着色器 console.log("fail init shader()!"); return ; } var n=initVertexBuffers(gl);//将顶点坐标和纹理坐标赋值 if(n<0){ console.log("failed to set the positions of the vertices"); return; } gl.clearColor(0.0, 0.0, 1.0, 1.0); initTextures(gl,n); } function initVertexBuffers(gl){ var verticesTextCoords=new Float32Array([ -0.5,0.5,2,-0.3,1.7, -0.5,-0.5,2,-0.3,-0.2, 0.5,0.5,2,1.7,1.7, 0.5,-0.5,2,1.7,-0.2, ]);//类型化数组 var n=4;//点的个数 var vertexTexcoordBuffer=gl.createBuffer();//在webGL中建立缓冲区 if(!vertexTexcoordBuffer){ console.log("failed to create the buffer object!"); return -1; } gl.bindBuffer(gl.ARRAY_BUFFER,vertexTexcoordBuffer);//将缓冲区与ARRAY_BUFFER绑定就是指定了缓冲区的用途 gl.bufferData(gl.ARRAY_BUFFER,verticesTextCoords,gl.STATIC_DRAW);//往缓冲区写数据 STATIC_DRAW对缓冲区优化将顶点坐标和纹理坐标放进缓冲区 var FSize=verticesTextCoords.BYTES_PER_ELEMENT;//数组中每一个元素的字节大小 alert(FSize); //设置顶点坐标从缓冲区取出坐标 var a_Position=gl.getAttribLocation(gl.program,'a_Position'); gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,5*FSize,0);//将缓冲区的数据传入分配给attribute对象 2是定点的份量个数 3*FSize表示相邻两个顶点间相距的字节数也能够理解为每隔3*FSize字节取俩值是这些 0表示它的其实偏移量就是从哪开始的 gl.enableVertexAttribArray(a_Position);//开启attribute变量 //将纹理坐标分配给webgl var a_TextCoord=gl.getAttribLocation(gl.program,'a_TextCoord'); gl.vertexAttribPointer(a_TextCoord,2,gl.FLOAT,false,5*FSize,3*FSize); gl.enableVertexAttribArray(a_TextCoord); //设置点的大小 var a_PointSize=gl.getAttribLocation(gl.program,'a_PointSize'); gl.vertexAttribPointer(a_PointSize,1,gl.FLOAT,false,5*FSize,2*FSize); gl.enableVertexAttribArray(a_PointSize); return n; } function initTextures(gl,n){ alert(n); var texture=gl.createTexture();//建立纹理对象用来管理纹理 if(!texture){ console.log("failed to texture"); return false; } //u_Sampler是用来存储纹理的 var u_Sampler=gl.getUniformLocation(gl.program,'u_Sampler'); if(!u_Sampler){ console.log("failed to u_Sampler"); return false; } //加载图片建立图片对象异步加载图片加载完后调用loadTexture函数未完成前也继续执行下面的代码 var image=new Image(); image.onload=function(){ loadTexture(gl,n,texture,u_Sampler,image);//将纹理单元的图像以及参数传给取样器 }; image.src="image/sky.jpg"; return true; } function loadTexture(gl,n,texture,u_Sampler,image){ alert(image.height); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);//对图像进行Y轴反转 gl.activeTexture(gl.TEXTURE0);//开启0号单元 //console.log(gl.activeTexture(gl.TEXTURE0)); gl.bindTexture(gl.TEXTURE_2D,texture);//将纹理对象绑定到纹理单元中由于无法直接操做纹理对象可是能够操做纹理单元 gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);//配置纹理的参数 /* gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE);//在X轴上不足会自动填充 gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.MIRRORED_REPEAT);//在y轴上不足的灰自动tian */ gl.texImage2D(gl.TEXTURE_2D,0,gl.RGB,gl.RGB,gl.UNSIGNED_BYTE,image);//配置纹理图像 gl.uniform1i(u_Sampler,0);//将0单元的纹理传给纹理取样器 gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLE_STRIP,0,n); } </script> </head> <body onload="main()"> <canvas id="webgl" width="600" height="400"></canvas> </body> </html>