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. Flex布局兼容知识点总结

    转载,原文http://www.cnblogs.com/tugenhua0707/p/5180841.html,部分截取 假设父容器class为 box,子项目为item.旧版语法如下:一:定义容器的 ...

  2. NPOI操作

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

  3. Qt5.3.2(VS2010)_调试_进入Qt源码

    1.必须是 Debug模式 2. http://blog.csdn.net/mayenjoy/article/details/42535789 http://blog.csdn.net/goforwa ...

  4. Codeforces 595B - Pasha and Phone

    595B - Pasha and Phone 代码: #include<bits/stdc++.h> using namespace std; #define ll long long # ...

  5. WCF配置后支持通过URL进行http方式调用

    最近遇到一个小型项目,主要就是通过手机写入NFC信息,思考许久后决定就写一个简单的CS程序来搞定这个问题,可是当涉及到手机和PC通信的时候首先考虑到的就是IIS,同时因为数据库是SQLite,思前想后 ...

  6. English trip -- VC(情景课)10 B Around the house 在家里

    Vocablulary focus  核心词汇 cook play the guitar listen to music watch TV read magazines work in the gar ...

  7. (GoRails) 用app/decorators来取代app/helpers; delegate()方法

    视频:https://gorails.com/episodes/decorators-from-scratch?autoplay=1 装饰设置风格:把Model层变的干净,但不使用app/helper ...

  8. CF 711B - Chris and Magic Square

    挺简单的一道题,但是做的时候没想好就开始写代码了,导致迷之WA,还是要多练习啊. #include <iostream> #include <cstdio> #include ...

  9. java MongoDB查询(一)简单查询

    前言 MongoDB的java驱动提供了查询的功能,查询条件也是bson对象,这篇就看下怎么进行简单的数据查询 1.数据结构 集合:firstCollection 数据内容: { "_id& ...

  10. 『Numpy学习指南』排序&索引&抽取函数介绍

    排序: numpy.lexsort(): numpy.lexsort()是个排字典序函数,因为很有意思,感觉也蛮有用的,所以单独列出来讲一下: 强调一点,本函数只接受一个参数! import nump ...