webgl学习六 纹理贴图
2020-11-23 本文已影响0人
MrSwilder
<html>
<head>
<title>
纹理贴图
</title>
<script type="text/javascript" src="./lib/webgl-debug.js"></script>
<script type="text/javascript" src="./lib/webgl-utils.js"></script>
<script type="text/javascript" src="./lib/cuon-utils.js"></script>
<script type="text/javascript" src="./lib/cuon-matrix.js"></script>
</head>
<body onload="main()">
<canvas id='canvas' width="1920" height="1080"></canvas>
<script type="text/javascript">
//定义变量存储位置
//attribute：存储顶点位置，经常变的，无精度限定
//uniform:存储不变的值，有精度限定
var VShader =
"attribute vec4 a_position;\n" +
"attribute vec2 a_texurecoord;\n"+
"varying vec2 v_textureCoord;\n"+
"void main(){\n" +
"gl_Position=a_position;" +
"gl_PointSize=10.0;\n" +
"v_textureCoord=a_texurecoord;\n"+
"}"
var FShader =
"precision mediump float;\n" +
"uniform sampler2D u_sampler;\n"+
"varying vec2 v_textureCoord\n;"+
"void main(){\n" +
"gl_FragColor=texture2D(u_sampler,v_textureCoord);\n" +
"}"
function main() {
var canvas = document.getElementById("canvas");
var gl = getWebGLContext(canvas);
if (!gl) {
console.log("获取webgl上下文失败")
return;
}
if (!initShaders(gl, VShader, FShader)) {
console.log("初始化着色器失败");
return;
}
//获取着色器中的变量的地址
var a_position = gl.getAttribLocation(gl.program, 'a_position')
if (a_position < 0) {
console.log("获取a_position变量地址失败")
return;
}
var a_texurecoord = gl.getAttribLocation(gl.program, 'a_texurecoord')
if (a_texurecoord < 0) {
console.log("获取a_texurecoord变量地址失败")
return;
}
initVertexBuffer(gl, a_position,a_texurecoord);
initTexture()
//初始化纹理贴图
function initTexture() {
//创建纹理
var texture=gl.createTexture();
//获取纹理坐标的存储地址
var u_Sampler=gl.getUniformLocation(gl.program,"u_sampler");
console.log(u_Sampler)
var image=new Image();
image.onload=function(){
loadTexture(gl,texture,image,u_Sampler);
}
image.src="./img/ff.png"
}
}
function loadTexture(gl,texture,image,u_Sampler){
//进行y轴翻转
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);
//开启0号纹理单元
gl.activeTexture(gl.TEXTURE0);
//向纹理单元绑定纹理对象
gl.bindTexture(gl.TEXTURE_2D,texture);
//设置纹理参数
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR)
//配置纹理图像
gl.texImage2D(gl.TEXTURE_2D,0,gl.RGB,gl.RGB,gl.UNSIGNED_BYTE,image);
//将0号纹理传递给着色器
gl.uniform1i(u_Sampler,0)
gl.clearColor(0, 0, 0, 1)
gl.clear(gl.COLOR_BUFFER_BIT)
gl.drawArrays(gl.TRIANGLES, 0, 6)
}
//初始化颜色缓冲区
function initVertexBuffer(gl, a_position,a_texurecoord) {
var vertexs = new Float32Array([
1.0, 1.0, 0.0,1,1,
-1.0, 1.0, 0.0,0,1,
-1.0, -1.0, 0.0,0,0,
-1.0, -1.0, 0.0,0,0,
1.0, -1.0, 0.0,1,0,
1.0, 1.0, 0.0,1,1
])
//计算所占字节数
var fsize = vertexs.BYTES_PER_ELEMENT;
//创建缓冲区
var vextexBuffer = gl.createBuffer();
if (!vextexBuffer) {
console.log("创建缓冲区失败")
return;
}
//绑定到顶点缓冲区
gl.bindBuffer(gl.ARRAY_BUFFER, vextexBuffer);
//给顶点缓冲区传值,GL_STATIC_DRAW表示数据变得很少
gl.bufferData(gl.ARRAY_BUFFER, vertexs, gl.STATIC_DRAW);
//将顶点缓冲区的值给a_position变量
gl.vertexAttribPointer(a_position, 3, gl.FLOAT, false, fsize * 5, 0);
gl.enableVertexAttribArray(a_position)
gl.vertexAttribPointer(a_texurecoord, 2, gl.FLOAT, false, fsize * 5, fsize * 3);
//开启顶点缓冲区中的Attribute类型变量a_position
gl.enableVertexAttribArray(a_texurecoord)
}
</script>
</body>
</html>
效果：
图片.png
