效果
image.png
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./cuon-matrix.js"></script>
</head>
<body>
<canvas id="canvas" width="600" height="600" style="border: 1px solid #ff0000;"></canvas>
<script>
let canvas = document.getElementById('canvas');
let gl = canvas.getContext('webgl');
// 顶点着色器
let 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";
// 片元着色器
let FSHADER_SOURCE =
"#ifdef GL_ES\n"+
"precision mediump float;\n"+
"#endif\n"+
"uniform sampler2D u_Sampler0;\n"+
"uniform sampler2D u_Sampler1;\n"+
"varying vec2 v_TexCoord;\n"+
"void main(){\n"+
" vec4 color0 = texture2D(u_Sampler0, v_TexCoord);\n"+
" vec4 color1 = texture2D(u_Sampler1, v_TexCoord);\n"+
" gl_FragColor = color0 * color1;\n"+
"}\n";
// 初始化着色器
function initShaders(gl, vSource, fSource){
let vShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vShader, vSource);
gl.compileShader(vShader);
let fShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fShader, fSource);
gl.compileShader(fShader);
let program = gl.createProgram();
gl.attachShader(program, vShader);
gl.attachShader(program, fShader);
gl.linkProgram(program);
gl.useProgram(program);
gl.program = program;
}
// 设置定点位置-缓冲区对象
function initVertexBuffers(gl){
let 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
]);
let n = 4;
// 创建顶点位置大小颜色缓冲区对象
let vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
let fsize = vertices.BYTES_PER_ELEMENT;
let a_Position = gl.getAttribLocation(gl.program, 'a_Position');
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, fsize*4, fsize*0);
gl.enableVertexAttribArray(a_Position);
let 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 initTexture(gl, n){
let texture0 = gl.createTexture();
let u_Sampler0 = gl.getUniformLocation(gl.program, 'u_Sampler0');
let image0 = new Image();
image0.onload = function(){
loadTexture(gl, n, texture0, u_Sampler0, image0, 0);
}
image0.src = "http://localhost:8080/sky.jpg";
let texture1 = gl.createTexture();
let u_Sampler1 = gl.getUniformLocation(gl.program, 'u_Sampler1');
let image1 = new Image();
image1.onload = function(){
loadTexture(gl, n, texture1, u_Sampler1, image1, 1);
}
image1.src = "http://localhost:8080/circle.gif";
return true;
}
// 标记纹理单元是否已经就绪
let g_texUnit0 = false, g_textUnit1 = false;
// 配置纹理
function loadTexture(gl, n, texture, u_Sampler, image, texUnit){
// 对纹理图像进行Y轴反转
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
if(texUnit == 0){
// 开启0号纹理
gl.activeTexture(gl.TEXTURE0);
g_texUnit0 = true;
}else{
// 开启1号纹理
gl.activeTexture(gl.TEXTURE1);
g_texUnit1 = true;
}
// 绑定纹理对象
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);
// 将纹理传给着色器中的取样器变量
gl.uniform1i(u_Sampler, texUnit);
if(g_texUnit0 && g_texUnit1){
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}
}
initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE);
initVertexBuffers(gl);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
initTexture(gl, 4);
</script>
</body>
</html>
网友评论