我会持续更新关于wegl的编程指南中的代码。
当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助
git代码地址 ：空文章来源：https://www.toymoban.com/news/detail-740705.html
上一章节中我们学习了如何使用varyting变量绘制图片，本章节，我们学习texParameteri的使用文章来源地址https://www.toymoban.com/news/detail-740705.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport">
<title>Document</title>
<style>
#canvas {
width: 100vw;
height: 100vw;
border: 1px solid greenyellow;
}
</style>
</head>
<body>
!!!!!需要指出的是要选择当前文件夹下的sky.jpg!!!!!!
<!-- <input type="file" accept="image/*" onchange="loadFile(event)"> -->
<input type="file" onchange="loadFile(event)">
<canvas id="canvas"></canvas>
<script>
// let imgSrc = 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3740843900,2506868884&fm=15&gp=0.jpg.'
let vexterSource = `
precision mediump float;
attribute vec4 a_Position;
attribute vec2 a_TexCoord;
varying vec2 v_TexCoord;
void main(){
gl_Position = a_Position;//顶点坐标
v_TexCoord = a_TexCoord;//纹理坐标系下的坐标
}
`
let fragmentSource = `
precision mediump float;
uniform sampler2D u_Sampler;//纹理
varying vec2 v_TexCoord;//纹理坐标系下的坐标
void main(){
gl_FragColor = texture2D(u_Sampler,v_TexCoord);
}
`
let canvas = document.getElementById('canvas');
let gl = canvas.getContext('webgl');
//创建顶点着色器
let vertextShader = gl.createShader(gl.VERTEX_SHADER);
//给顶点着色器赋值
gl.shaderSource(vertextShader, vexterSource);
//编译顶点着色器
gl.compileShader(vertextShader);
//创建片元着色器
let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
//给片元着色器赋值
gl.shaderSource(fragmentShader, fragmentSource)
//编译片元着色器
gl.compileShader(fragmentShader)
//检测着色器创建是否正确
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(fragmentShader));
}
//创建程序
let program = gl.createProgram();
//给程序赋值
gl.attachShader(program, vertextShader);
gl.attachShader(program, fragmentShader);
//连接程序
gl.linkProgram(program);
//使用此着色器
gl.useProgram(program);
//变量的处理
//获取顶点着色器中的变量a_Position
let a_Position = gl.getAttribLocation(program, 'a_Position');
//获取顶点着色器中的变量a_TexCoord
let a_TexCoord = gl.getAttribLocation(program, 'a_TexCoord');
//获取片元着色器中的变量u_Sampler
let u_Sampler = gl.getUniformLocation(program, 'u_Sampler');
//顶点坐标与纹理坐标
let vertexTexCoords = new Float32Array([
-0.5,0.5,-0.3,1.7,
-0.5,-0.5,-0.3,-0.2,
0.5,0.5,1.7,1.7,
0.5,-0.5,1.7,-0.2
])
let f32Seize = vertexTexCoords.BYTES_PER_ELEMENT;
//给定点设置坐标 几何图形与纹理的坐标
let vertexBuffer = gl.createBuffer();
//绑定buffer
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
//绑定数据
gl.bufferData(gl.ARRAY_BUFFER, vertexTexCoords, gl.STATIC_DRAW);
//给a_Position赋值
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, f32Seize * 4, 0);
//使用此变量
gl.enableVertexAttribArray(a_Position);
//纹理坐标
let texCoordBuffer = gl.createBuffer();
//绑定buffer
gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
//绑定数据
gl.bufferData(gl.ARRAY_BUFFER, vertexTexCoords, gl.STATIC_DRAW);
//给a_TexCoord赋值
gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, f32Seize * 4, f32Seize * 2);
//使用此变量
gl.enableVertexAttribArray(a_TexCoord);
gl.clearColor(0, 0, 0, 1.0);
//获取图片的素材
const loadFile = (event) => {
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function (event) {
// 文件里的文本会在这里被打印出来
let img = new Image();
img.src = event.target.result;
img.onload = () => {
let texture = gl.createTexture();
showImage(texture,img)
}
};
reader.readAsDataURL(file);
};
function showImage(texture, img) {
document.body.appendChild(img)
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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);
//设置着色器参数
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img);
//设置纹理数据
gl.uniform1i(u_Sampler, 0)
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
}
</script>
</body>
</html>到了这里，关于webGL编程指南 第五章 TexturedQuad_Clamp_Mirror的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
