WEBGL学习之图片的显示

        在webgl中显示图片，第一点需要注意图片的是像素必须是2的n次幂，第二点需要注意的是由于坐标系的不同需要将图片进行Y轴反转处理。剩下的显示流程与多顶点传入的流程基本一致。（Y轴反转->打开存储单元->绑定存储单元->配置纹理的参数->配置显示的图片与图片的参数->传递着色器）

/*** 顶点着色器 */
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'
/*** 片元着色器*/
var FSHEADER_SOURCES ='precision mediump float;\n' +//精度声明'uniform sampler2D u_Sampler;\n' +'varying vec2 v_TexCoord;\n' +'void main() {\n' +'gl_FragColor = texture2D(u_Sampler, v_TexCoord);\n' +// 'gl_FragColor = vec4(1.0,1.0,0.0,1.0);\n' +'}\n'function main() {let canvas = document.getElementById('webgl');let gl = getWebGLContext(canvas);if (!gl) {console.log("main gl error");return;}if (!initShaders(gl, VSHADER_SOURCE, FSHEADER_SOURCES)) {console.log("main VSHADER_SOURCE FSHEADER_SOURCES error")return;}let n = initVertexBuffers(gl);initTextures(gl, n);}
/*** 初始化纹理的uv坐标*/
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;var vertexTexCoordBuffer = gl.createBuffer();if (!vertexTexCoordBuffer) {console.log("initVertexBuffers vertexBuffer");return;}//字节长度var FSIZE = verticesTexCoords.BYTES_PER_ELEMENT;gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer);gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords, gl.STATIC_DRAW);var a_Position = gl.getAttribLocation(gl.program, 'a_Position');if (a_Position < 0) {console.log("initVertexBuffers a_Position");return;}gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 4, 0);gl.enableVertexAttribArray(a_Position);//赋值颜色var a_TexCoord = gl.getAttribLocation(gl.program, 'a_TexCoord');gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, FSIZE * 4, FSIZE * 2);gl.enableVertexAttribArray(a_TexCoord);return n;
}
/*** 初始化加载纹理*/
function initTextures(gl, n) {var texture = gl.createTexture();var u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler');var image = new Image();image.onload = function () {loadTexture(gl, n, texture, u_Sampler, image);}image.src = '/Users/zhangshuwen/Desktop/WebGL/resources/gril.jpg';return true;
}
/*** 处理纹理图片*/
function loadTexture(gl, n, texture, u_Sampler, image) {//坐标系问题需要对纹理进行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);//将image图片绑定到指定的纹理单元 并且指定图片格式gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);//将纹理传递给片元着色器gl.uniform1i(u_Sampler, 0);gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLE_STRIP, 0, n);}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！