首页 > 代码库 > WebGL学习笔记五
WebGL学习笔记五
本章主要是对纹理的进一步讲解，我们很多时候需要将现实中已有 的图片在网页中展示出来而不是去创造图片，通过纹理 我们可以将光栅化的图形和图片纹理形成映射并且将图片在图形 中显示出来。基本过程与前几章一致，在着色器中主要是添加了一个取样器的变量作用是从纹理单元中取出图形在不同坐标的片元上显示出来，这里先要设置纹理坐标将纹理坐标和webGL坐标形成映射，然后是创建图像对象，创建纹理对象，开启某个纹理单元，将纹理对象与纹理单元绑定，配置纹理参数，将图像对象添加进纹理单元，将纹理单元中的纹理传给取样器，取样器根据纹理坐标和webGL坐标的对应关系显示纹理图像。
http://localhost:8080/WebGL5/TexturedQuad.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">
<!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->
<script src="http://www.mamicode.com/js/cuon-matrix.js"></script>
<script src="http://www.mamicode.com/js/cuon-utils.js"></script>
<script src="http://www.mamicode.com/js/webgl-debug.js"></script>
<script src="http://www.mamicode.com/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="http://www.mamicode.com/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 onl oad="main()">
<canvas id="webgl" width="600" height="400"></canvas>
</body>
</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">
<!--<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/styles.css">-->
<script src="http://www.mamicode.com/js/cuon-matrix.js"></script>
<script src="http://www.mamicode.com/js/cuon-utils.js"></script>
<script src="http://www.mamicode.com/js/webgl-debug.js"></script>
<script src="http://www.mamicode.com/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="http://www.mamicode.com/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 onl oad="main()">
<canvas id="webgl" width="600" height="400"></canvas>
</body>
</html>
WebGL学习笔记五
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。