WebGL编程指南案例解析之纹理叠加
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编程指南案例解析之纹理叠加的更多相关文章
- WebGL编程指南案例解析之绘制一个点
<!DOCTYPE html> <html> <head> <title>webgl</title> <style type=&quo ...
- WebGL编程指南案例解析之平移和旋转的矩阵实现
手写各种矩阵: //矩阵 var vShader = ` attribute vec4 a_Position; uniform mat4 u_xformMatrix; void main(){ gl_ ...
- WebGL编程指南案例解析之加载纹理(贴图)
var vShader = ` attribute vec4 a_Position; attribute vec2 a_TexCoord; varying vec2 v_TexCoord; void ...
- WebGL编程指南案例解析之绘制三个点
//案例2.绘制3个点,将顶点数据存到缓冲区对象(gl.ARRAY_BUFFER)中,然后顶点着色器从里面读数据(3个顶点) //着色器将对这些顶点进行逐个解析, //第一个顶点给到顶点着色器,赋值给 ...
- WebGL编程指南案例解析之绘制四边形
//案例4,绘制矩形,和三角形类似,但是注意因为一个矩形有4个顶点,按照两个三角形绘制矩形的话,顶点顺序要注意 var vShader = ` attribute vec4 a_Position; v ...
- WebGL编程指南案例解析之绘制三角形
//案例3.绘制三角形,将顶点数据存到缓冲区对象(gl.ARRAY_BUFFER)中,然后顶点着色器从里面读数据(3个顶点) //顶点着色器中去掉gl_PointSize = 10.0,绘制三角不能设 ...
- WebGL编程指南案例解析之3D视图视区问题
var VSHADER_SOURCE = 'attribute vec4 a_Position;\n' + 'attribute vec4 a_Color;\n' + 'uniform mat4 u_ ...
- WebGL编程指南案例解析之多数据存储于一个缓冲区以及着色器通信
//顶点着色器往片元着色器传值 //多个参数值存于一个缓冲对象中 var vShader = ` attribute vec4 a_Position; attribute float a_PointS ...
- WebGL编程指南案例解析之平移和旋转的math库实现
这里说的math库实现,指的是,通过一般的加减乘除(角度计算)来更新坐标值. 因为涉及到坐标的变化,所以这里都是基于对顶点着色器的修改 平移: var vShader = ` attribute ve ...
随机推荐
- IntelliJ IDEA问题总结
在使用Idea的过程中,会遇到各种各样的问题,下面我将在这里持续总结: 1.Unable to import maven project: See logs for details 在遇到这个问题时, ...
- Unity3d 生命周期
生命周期的开始 1.awake → 脚本被载入时调用的 ↓ 2.OnEnable → 当对象变为可用或激活状态时 ↓ 3.Start → 第一次Update之前调用 ↓ 4.FixedUpdat ...
- NPOI操作
1.操作Excel 准备生成的公共方法(将数据源DataTable转换成MemoryStream) /// <summary> /// 生成Excel /// </summary&g ...
- Linux访问windows共享(samba/smbclient/smbfs/cifs)
samba是一个实现不同操作系统之间文件共享和打印机共享的一种SMB协议的免费软件.●安装samba,samba-client和cifs-utils.x86_64此步将自动安装好相关依赖包:samba ...
- Hyper-v群集的仲裁模式配置依据
1,仲裁配置的原理 节点多数(推荐用于含有奇数个节点的群集) 可以承受的故障节点数为节点数的一半(四舍五入)减去一.例如,七个节点的群集可以承受三个节点出现故障. 节点和磁盘多数(推荐用于含有偶数个节 ...
- cygwin install git
Installation with Cygwin If you're comfortable with Cygwin, then use it to install git, ssh, wget an ...
- Android ListView常见配置说明
ListView是我们经常使用的控件,但是使用中却因为各种原因无法设置出我们需要的效果,现将常用的设置记录下来方便以后查询. 1.拖动时背景变黑 android:cacheColorHint=&quo ...
- IIS8.5支持WCF
昨天写了个WCF例子,在我电脑上怎么发布都不成功,老是报错. 后来把这个例子放到其他人电脑上发布都没问题,这应该就是我IIS的问题了.我用的是win8.1的系统,IIS版本是8.5,IIS8.5默认是 ...
- 20170813pptVBA批量插入图片
Sub AddSldIn() Dim Pre As Presentation Dim NewSld As Slide Set Pre = Application.ActivePresentation ...
- Confluence 6 为站点禁用匿名用户访问
希望为你的站点禁用匿名用户的访问,取消选择 可以使用(can use)前面的选择框,然后选择 保存所有(Save All).这时候,用户应该禁止访问你的站点直达这些用户登录你的 Confluence ...