创建纹理贴图
2020-11-14 本文已影响0人
antlove
index.html
<html>
<head>
<meta lang="en">
<meta charset="UTF-8">
<title>纹理图片</title>
<script src="../lib/cuon-utils.js"></script>
<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-matrix.js"></script>
<style>
body{
margin:0;
}
canvas{
display:block;
border:1px solid #999;
}
.btn-group {
width: 500px;
text-align: center;
padding: 10px 0;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
<script src="./index.js"></script>
index.js
// 顶点着色器程序
var VSHADER_SOURCE =`
attribute vec4 a_Position;
attribute vec2 a_TexCoord;
varying vec2 v_TexCoord;
void main() {
//设置坐标
gl_Position = a_Position;
v_TexCoord = a_TexCoord;
}
`;
// 片元着色器
var FSHADER_SOURCE =`
#ifdef GL_ES
precision mediump float;
#endif
uniform sampler2D u_Sampler;
varying vec2 v_TexCoord;
void main() {
//设置颜色
gl_FragColor = texture2D(u_Sampler, v_TexCoord);
}
`;
// 获取canvas元素
var canvas = document.getElementById('canvas');
// 获取绘制二维上下文
var gl = canvas.getContext('webgl');
gl.clearColor(0, 0, 0, 1);
// 初始化shader
initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE);
// 初始化顶点
var n = initVertexBuffer(gl);
function draw(gl, n) {
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS, 0, n );
}
/**
* 初始化顶点
*/
function initVertexBuffer(gl) {
/* ==================== 创顶点坐标建缓冲区 ==================== */
var vertices = 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 size = 2;
var FSIZE = Float32Array.BYTES_PER_ELEMENT;
/* 创建缓冲区 */
var vertexTexCoordBuffer = gl.createBuffer();
// 将缓冲区绑定到目标
gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer);
// 向缓冲区写入数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
/* 设置顶点 */
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
// 将缓冲区对象分配给a_Position
gl.vertexAttribPointer(a_Position, size, gl.FLOAT, false, FSIZE * 4, 0);
// 激活attibue 是缓冲区对attribute变量分配生效
gl.enableVertexAttribArray(a_Position);
/* 设置纹理坐标 */
var a_TexCoord = gl.getAttribLocation(gl.program, 'a_TexCoord');
// 将缓冲区对象分配给a_Position
gl.vertexAttribPointer(a_TexCoord, size, gl.FLOAT, false, FSIZE * 4, FSIZE * 2);
// 激活attibue 是缓冲区对attribute变量分配生效
gl.enableVertexAttribArray(a_TexCoord);
return vertices.byteLength / FSIZE / 4;
}
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 = './x.jpg';
}
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);
// 配置纹理图像
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
// 将0号纹理传递给着色器中的取样器变量
gl.uniform1i(u_Sampler, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, n);
}
initTextures(gl, n);
x.jpg
x.jpg
效果如下:
image.png
注: 访问本地图片需要在chrome 启动参数中加入 --allow-file-access-from-files
image.png
