var vShader = `
attribute vec4 a_Position;
attribute vec2 a_TexCoord;
varying vec2 v_TexCoord;
void main(){
gl_Position = a_Position;
v_TexCoord = a_TexCoord;
}
`; var fShader = `
//设定默认精度
#ifdef GL_ES
precision mediump float;
#endif
uniform sampler2D u_Sampler;
uniform sampler2D u_Sampler1;

varying vec2 v_TexCoord;
void main(){
vec4 color = texture2D(u_Sampler,v_TexCoord);
vec4 color1 = texture2D(u_Sampler1,v_TexCoord);
gl_FragColor = color * color1;
}
`; function main(){
//获取canvas元素
var canvas = document.getElementById('webgl'); //获取webgl上下文
var gl = getWebGLContext(canvas); if(!gl){
console.log('Failed to get the rendering context for WebGL!');
return;
}
//初始化着色器
if(!initShaders(gl,vShader,fShader)){
console.log('Failed to initialize shaders.');
return;
}
var n = initVertexBuffers(gl);
if(n < ){
console.log('Failed to set the positions of the vertices!');
return;
}
if(!initTextures(gl,n)){
console.log('Failed to initialize textures.');
return;
} //用指定颜色填充webgl容器,就是设置背景
gl.clearColor(0.4, 0.5, 0.0, 1.0); function initVertexBuffers(gl){
var verticesTex = 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 = ;//点的个数
//创建缓冲区对象
var vertexTexBuffer = gl.createBuffer();
if(!vertexTexBuffer){
console.log('Failed to create the buffer object!');
return -;
}
//将数据添加到缓冲区(绑定在缓冲区对象上)
gl.bindBuffer(gl.ARRAY_BUFFER,vertexTexBuffer);
gl.bufferData(gl.ARRAY_BUFFER,verticesTex,gl.STATIC_DRAW);
var fsize = verticesTex.BYTES_PER_ELEMENT; //获取shaderProgram中attribute变量‘a_Position’的地址
var a_Position = gl.getAttribLocation(gl.program,'a_Position');
if (a_Position < ) {
console.log('Failed to get the storage location of a_Position');
return -;
}
//将缓冲区对象分配给a_Position变量并开启访问
gl.vertexAttribPointer(a_Position,,gl.FLOAT,false,fsize * ,);
gl.enableVertexAttribArray(a_Position); var a_TexCoord = gl.getAttribLocation(gl.program,'a_TexCoord');
if (a_TexCoord < ) {
console.log('Failed to get the storage location of a_TexCoord');
return -;
}
//将缓冲区对象分配给a_TexCoord变量并开启访问
gl.vertexAttribPointer(a_TexCoord,,gl.FLOAT,false,fsize * ,fsize * );
gl.enableVertexAttribArray(a_TexCoord); return n;
} //初始化纹理图片,通过image传入
function initTextures(){
//创建纹理对象
var texture = gl.createTexture();
var texture1 = gl.createTexture(); //读取u_Sampler存储位置
var u_Sampler = gl.getUniformLocation(gl.program,'u_Sampler');
var u_Sampler1 = gl.getUniformLocation(gl.program,'u_Sampler1'); var image = new Image(),image1 = new Image; image.onload = function(){
loadTexture(gl,n,texture,u_Sampler,image,);
}
image1.onload = function(){
loadTexture(gl,n,texture1,u_Sampler1,image1,);
} image.src = '../image/sky.JPG';
image1.src = '../image/circle.gif'; return true;
}
var flag = false,flag1= false;
//加载纹理
function loadTexture(gl,n,texture,u_Sampler,image,index){
//对问题图像进行y轴反转
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,);
//开启纹理单元
if(index ==0){
gl.activeTexture(gl.TEXTURE0);
flag = true;
}else{
gl.activeTexture(gl.TEXTURE1);
flag1 = true;
}
//向target绑定纹理对象
gl.bindTexture(gl.TEXTURE_2D,texture);
//配置纹理参数
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
//处理图片像素非2的幂次方的配置
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); //配置纹理图像
gl.texImage2D(gl.TEXTURE_2D,,gl.RGB,gl.RGB,gl.UNSIGNED_BYTE,image); //将纹理传递给着色器
gl.uniform1i(u_Sampler,index); if(flag && flag1){
gl.clear(gl.COLOR_BUFFER_BIT); // Clear <canvas>
gl.drawArrays(gl.TRIANGLE_STRIP, 0
, n);
}

}
} main();

相对于之前的为正方形添加单个纹理来说,多了一些变化,文中已经用红字标出:

①片元着色器中新增一个取样器,并且main方法输出的颜色是这两个取色器颜色的乘积;

②用两个纹理对象来加载纹理,并且启用不同的纹理单元(gl.TEXTURE0、gl.TEXTURE1);配置好参数后将纹理传递给对应的纹理单元

③在两个纹理都激活之后才开始绘图

效果:

WebGL编程指南案例解析之纹理叠加的更多相关文章

  1. WebGL编程指南案例解析之绘制一个点

    <!DOCTYPE html> <html> <head> <title>webgl</title> <style type=&quo ...

  2. WebGL编程指南案例解析之平移和旋转的矩阵实现

    手写各种矩阵: //矩阵 var vShader = ` attribute vec4 a_Position; uniform mat4 u_xformMatrix; void main(){ gl_ ...

  3. WebGL编程指南案例解析之加载纹理(贴图)

    var vShader = ` attribute vec4 a_Position; attribute vec2 a_TexCoord; varying vec2 v_TexCoord; void ...

  4. WebGL编程指南案例解析之绘制三个点

    //案例2.绘制3个点,将顶点数据存到缓冲区对象(gl.ARRAY_BUFFER)中,然后顶点着色器从里面读数据(3个顶点) //着色器将对这些顶点进行逐个解析, //第一个顶点给到顶点着色器,赋值给 ...

  5. WebGL编程指南案例解析之绘制四边形

    //案例4,绘制矩形,和三角形类似,但是注意因为一个矩形有4个顶点,按照两个三角形绘制矩形的话,顶点顺序要注意 var vShader = ` attribute vec4 a_Position; v ...

  6. WebGL编程指南案例解析之绘制三角形

    //案例3.绘制三角形,将顶点数据存到缓冲区对象(gl.ARRAY_BUFFER)中,然后顶点着色器从里面读数据(3个顶点) //顶点着色器中去掉gl_PointSize = 10.0,绘制三角不能设 ...

  7. WebGL编程指南案例解析之3D视图视区问题

    var VSHADER_SOURCE = 'attribute vec4 a_Position;\n' + 'attribute vec4 a_Color;\n' + 'uniform mat4 u_ ...

  8. WebGL编程指南案例解析之多数据存储于一个缓冲区以及着色器通信

    //顶点着色器往片元着色器传值 //多个参数值存于一个缓冲对象中 var vShader = ` attribute vec4 a_Position; attribute float a_PointS ...

  9. WebGL编程指南案例解析之平移和旋转的math库实现

    这里说的math库实现,指的是,通过一般的加减乘除(角度计算)来更新坐标值. 因为涉及到坐标的变化,所以这里都是基于对顶点着色器的修改 平移: var vShader = ` attribute ve ...

随机推荐

  1. IntelliJ IDEA问题总结

    在使用Idea的过程中,会遇到各种各样的问题,下面我将在这里持续总结: 1.Unable to import maven project: See logs for details 在遇到这个问题时, ...

  2. Unity3d 生命周期

    生命周期的开始 1.awake   → 脚本被载入时调用的 ↓ 2.OnEnable  → 当对象变为可用或激活状态时 ↓ 3.Start → 第一次Update之前调用 ↓ 4.FixedUpdat ...

  3. NPOI操作

    1.操作Excel 准备生成的公共方法(将数据源DataTable转换成MemoryStream) /// <summary> /// 生成Excel /// </summary&g ...

  4. Linux访问windows共享(samba/smbclient/smbfs/cifs)

    samba是一个实现不同操作系统之间文件共享和打印机共享的一种SMB协议的免费软件.●安装samba,samba-client和cifs-utils.x86_64此步将自动安装好相关依赖包:samba ...

  5. Hyper-v群集的仲裁模式配置依据

    1,仲裁配置的原理 节点多数(推荐用于含有奇数个节点的群集) 可以承受的故障节点数为节点数的一半(四舍五入)减去一.例如,七个节点的群集可以承受三个节点出现故障. 节点和磁盘多数(推荐用于含有偶数个节 ...

  6. cygwin install git

    Installation with Cygwin If you're comfortable with Cygwin, then use it to install git, ssh, wget an ...

  7. Android ListView常见配置说明

    ListView是我们经常使用的控件,但是使用中却因为各种原因无法设置出我们需要的效果,现将常用的设置记录下来方便以后查询. 1.拖动时背景变黑 android:cacheColorHint=&quo ...

  8. IIS8.5支持WCF

    昨天写了个WCF例子,在我电脑上怎么发布都不成功,老是报错. 后来把这个例子放到其他人电脑上发布都没问题,这应该就是我IIS的问题了.我用的是win8.1的系统,IIS版本是8.5,IIS8.5默认是 ...

  9. 20170813pptVBA批量插入图片

    Sub AddSldIn() Dim Pre As Presentation Dim NewSld As Slide Set Pre = Application.ActivePresentation ...

  10. Confluence 6 为站点禁用匿名用户访问

    希望为你的站点禁用匿名用户的访问,取消选择 可以使用(can use)前面的选择框,然后选择 保存所有(Save All).这时候,用户应该禁止访问你的站点直达这些用户登录你的 Confluence ...