创建纹理
<html>
<head>11</head>
<body>
<canvas id = "test" width = "500" height = "500">canvas </canvas>
<script >
//顶点着色器
var vertexShaderSource =
'attribute vec4 a_Position;\n' +
'attribute vec2 a_TexCoord;\n' +
'varying vec2 v_TexCoord;\n' + //varying变量
'void main() {\n' +
'gl_Position = a_Position;\n'+ //设置坐标
'v_TexCoord = a_TexCoord;\n' + //将数据传给片元着色器
'}\n';
//片元着色器
var fragmentShaderSource =
'#ifdef GL_ES\n' +
'precision mediump float;\n' +
'#endif\n' +
'uniform sampler2D u_Sampler;\n'+
'varying vec2 v_TexCoord;\n' + //varying变量
'void main() {\n' +
'gl_FragColor = texture2D(u_Sampler, v_TexCoord);\n'+ //设置颜色
'}\n';
//创建着色器方法，输入参数：渲染上下文，着色器类型，数据源
function createShader(gl, type, source)
{
//创建着色器对象
var shader = gl.createShader(type);
//提供数据源
gl.shaderSource(shader,source);
//编译着色器
gl.compileShader(shader);
//链接
var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if(success)
{
return shader;
}
console.log(gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
}
//将顶点着色器和像素着色器链接到一个着色程序
function createProgram(gl, vertexShader, fragmentShader)
{
var program = gl.createProgram();
gl.attachShader( program, vertexShader);
gl.attachShader( program, fragmentShader);
gl.linkProgram( program );
var success = gl.getProgramParameter(program, gl.LINK_STATUS);
if(success)
{
console.log("link right");
return program;
}
console.log(gl.getProgramInfoLog(program));
gl.deleteProgram(program);
}
function initVertexBuffers(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 vertexBuffer = gl.createBuffer();
//将缓冲区对象绑定到目标
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
//向绑定的缓冲区对象中写入数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
var FSIZE = vertices.BYTES_PER_ELEMENT;
//获取位置变量并传递顶点位置
var thePosition = gl.getAttribLocation(program, 'a_Position');
//将缓冲区对象分配给位置变量
gl.vertexAttribPointer(thePosition, 2, gl.FLOAT, false, FSIZE * 4, 0 );
//启动缓冲区
gl.enableVertexAttribArray(thePosition);
//纹理坐标
var theTexCoord = gl.getAttribLocation(program, 'a_TexCoord');
gl.vertexAttribPointer(theTexCoord, 2, gl.FLOAT, false, FSIZE * 4, FSIZE * 2 );
gl.enableVertexAttribArray(theTexCoord);
}
function loadTexture(gl, n, texture, u_Sampler, image)
{
//对纹理图像进行y轴翻转
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);
//开启0号纹理单元
gl.activeTexture(gl.TEXTURE0);
//向target绑定纹理对象
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);
}
function initTextures(gl,n)
{
//创建纹理对象
var texture = gl.createTexture();
if (!texture)
{
console.log('Failed to create the texture object');
return false;
}
console.log('success to create the texture object');
//获取u_Sampler的存储位置
var u_Sampler = gl.getUniformLocation(program,'u_Sampler');
if (!u_Sampler)
{
console.log('Failed to get the storage location of u_Sampler');
return false;
}
console.log('success to get the storage location of u_Sampler');
//创建一个image对象
var image = new Image();
if (!image)
{
console.log('Failed to create the image object');
return false;
}
console.log('success to create the image object');
//注册图像加载事件的响应函数
image.onload = function()
{
loadTexture(gl, n, texture, u_Sampler, image);
}
image.src = 'http://localhost:8080/apps/resources/sky.jpg';
}
var canvas = document.getElementById("test");
//创建webgl渲染上下文
var gl = canvas.getContext("webgl");
if(!gl)
{
console.log("wrong");
}
else
{
console.log("right");
}
//初始化着色器
var vertexShader = createShader(gl,gl.VERTEX_SHADER,vertexShaderSource);
var fragmentShader = createShader(gl,gl.FRAGMENT_SHADER, fragmentShaderSource);
var program = createProgram(gl, vertexShader, fragmentShader);
gl.useProgram(program);
var numberVertices = 4;
initVertexBuffers(gl);
//清除颜色
gl.clearColor(0.0,0.0,0.0,1.0);
initTextures(gl,numberVertices);
</script>
</body>
</html>