使用多幅纹理/纹理叠加
1.demo效果
如上图，这个demo加载了三幅外部纹理图片，分别是背景草原、骏马、卡通小羊，通过纹理叠加让它们呈现在同一个页面上。
2.实现要点
2.1 顶点着色器中声明varying变量v_TexCoord
在顶点着色器中需要声明attribute变量a_TexCoord和varying变量v_TexCoord，a_TexCoord用来存放纹理坐标；v_TexCoord用来向片元着色器传输纹理坐标，需要在main函数中将a_TexCoord赋值给v_TexCoord用来实现纹理坐标的传输
//顶点着色器
var VSHADER_SOURCE = '' +
'attribute vec4 a_Position;\\n' + //声明attribute变量a_Position，用来存放顶点位置信息
'attribute vec2 a_TexCoord;\\n' + //声明attribute变量a_TexCoord，用来存放纹理坐标
'varying vec2 v_TexCoord;\\n' + //声明varying变量v_TexCoord，用来向片元着色器传值纹理坐标
'void main(){\\n' +
' gl_Position = a_Position;\\n' + //变量a_Position赋值给顶点着色器内置变量gl_Position
' v_TexCoord = a_TexCoord;\\n' + //将纹理坐标传给片元着色器，
'}\\n';
2.2 片元着色器中多纹理处理
在片元着色器中也要声明varying变量v_TexCoord，用来接收顶点着色器传送的纹理坐标；还需要声明三个sampler2D类型的uniform变量，用来存放不同纹理图像的纹理单元编号，然后在main函数中使用 GLSL ES 内置函数texture2D() 来抽取每一个纹理图像的纹素颜色，这个函数需要接受两个参数：纹理单元编号和纹理坐标。之后将每一个纹素颜色相乘赋值给内置变量gl_FragColor
//片元着色器
var FSHADER_SOURCE = '' +
'precision mediump float;\\n' + // 设置精度
'uniform sampler2D u_Sampler;\\n' + //声明uniform变量u_Sampler，存放第一个纹理单元编号
'uniform sampler2D u_Sampler1;\\n' + //声明uniform变量u_Sampler1，存放第二个纹理单元编号
'uniform sampler2D u_Sampler2;\\n' + //声明uniform变量u_Sampler2，存放第三个纹理单元编号
'varying vec2 v_TexCoord;\\n' + //声明varying变量v_TexCoord，用来接收顶点着色器传送的纹理坐标
'void main(){\\n' +
' vec4 color = texture2D(u_Sampler,v_TexCoord);\\n' + //使用texture2D函数抽取纹理单元0纹素颜色
' vec4 color1 = texture2D(u_Sampler1,v_TexCoord);\\n' + //使用texture2D函数抽取纹理单元1纹素颜色
' vec4 color2 = texture2D(u_Sampler2,v_TexCoord);\\n' + //使用texture2D函数抽取纹理单元2纹素颜色
//纹素颜色相乘，并赋值给内置变量gl_FragColor
' gl_FragColor = color * color1 * color2;\\n' +
'}\\n';
2.3 外部纹理图像加载
//获取片元着色器uniform变量u_Sampler、u_Sampler1、u_Sampler2的存储地址
var u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler')
var u_Sampler1 = gl.getUniformLocation(gl.program, 'u_Sampler1')
var u_Sampler2 = gl.getUniformLocation(gl.program, 'u_Sampler2')
var image = new Image()
var image1 = new Image()
var image2 = new Image()
image.src = './resources/grassland.png' //设置纹理资源1路径
image1.src = './resources/horse.png' //设置纹理资源2路径
image2.src = './resources/sheep.png' //设置纹理资源3路径
//注册图片1加载事件的响应函数
image.onload = function () {
//调用加载纹理函数
loadTexTure(gl, n, u_Sampler, image, 0)
}
//注册图片2加载事件的响应函数
image1.onload = function () {
//调用加载纹理函数
loadTexTure(gl, n, u_Sampler1, image1, 1)
}
//注册图片3加载事件的响应函数
image2.onload = function () {
//调用加载纹理函数
loadTexTure(gl, n, u_Sampler2, image2, 2)
}
2.4 纹理叠加处理与绘图
var g_texUnit = false,g_texUnit1 = false,g_texUnit2 = false
//加载纹理函数
function loadTexTure(gl, n, u_Sampler, image, texUnit) {
var texture = gl.createTexture() //创建纹理对象
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1) //对纹理图像镜像y轴反转
if (texUnit === 0) {
gl.activeTexture(gl.TEXTURE0) //激活纹理单元0
g_texUnit = true
} else if (texUnit === 1) {
gl.activeTexture(gl.TEXTURE1) //激活纹理单元1
g_texUnit1 = true
} else if (texUnit === 2) {
gl.activeTexture(gl.TEXTURE2) //激活纹理单元2
g_texUnit2 = 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) //纹理单元编号传给片元着色器中uniform变量
//清空canvas
gl.clear(gl.COLOR_BUFFER_BIT);
//纹理图像全部处理完绘制图像
if (g_texUnit && g_texUnit1 && g_texUnit2) {
gl.drawArrays(gl.TRIANGLE_STRIP, 0, n)
gl.deleteTexture(texture)
}
}
3.demo代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--通过canvas标签创建一个800px*800px大小的画布-->
<canvas id="webgl" width="800" height="800"></canvas>
<script>
//顶点着色器
var VSHADER_SOURCE = '' +
'attribute vec4 a_Position;\\n' + //声明attribute变量a_Position，用来存放顶点位置信息
'attribute vec2 a_TexCoord;\\n' + //声明attribute变量a_TexCoord，用来存放纹理坐标
'varying vec2 v_TexCoord;\\n' + //声明varying变量v_TexCoord，用来向片元着色器传值纹理坐标
'void main(){\\n' +
' gl_Position = a_Position;\\n' + //变量a_Position赋值给顶点着色器内置变量gl_Position
' v_TexCoord = a_TexCoord;\\n' + //将纹理坐标传给片元着色器，
'}\\n';
//片元着色器
var FSHADER_SOURCE = '' +
'precision mediump float;\\n' + // 设置精度
'uniform sampler2D u_Sampler;\\n' + //声明uniform变量u_Sampler，存放第一个纹理单元编号
'uniform sampler2D u_Sampler1;\\n' + //声明uniform变量u_Sampler1，存放第二个纹理单元编号
'uniform sampler2D u_Sampler2;\\n' + //声明uniform变量u_Sampler2，存放第三个纹理单元编号
'varying vec2 v_TexCoord;\\n' + //声明varying变量v_TexCoord，用来接收顶点着色器传送的纹理坐标
'void main(){\\n' +
' vec4 color = texture2D(u_Sampler,v_TexCoord);\\n' + //使用texture2D函数抽取纹理单元0纹素颜色
' vec4 color1 = texture2D(u_Sampler1,v_TexCoord);\\n' + //使用texture2D函数抽取纹理单元1纹素颜色
' vec4 color2 = texture2D(u_Sampler2,v_TexCoord);\\n' + //使用texture2D函数抽取纹理单元2纹素颜色
//纹素颜色相乘，并赋值给内置变量gl_FragColor
' gl_FragColor = color * color1 * color2;\\n' +
'}\\n';
//初始化着色器函数
function initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE) {
//创建顶点着色器对象
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
//创建片元着色器对象
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
//引入顶点、片元着色器源代码
gl.shaderSource(vertexShader, VSHADER_SOURCE);
gl.shaderSource(fragmentShader, FSHADER_SOURCE);
//编译顶点、片元着色器
gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);
//创建程序对象program
var program = gl.createProgram();
//附着顶点着色器和片元着色器到program
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
//链接program
gl.linkProgram(program);
//使用program
gl.useProgram(program);
gl.program = program
//返回程序program对象
return program;
}
function init() {
//通过getElementById()方法获取canvas画布
var canvas = document.getElementById('webgl');
//通过方法getContext()获取WebGL上下文
var gl = canvas.getContext('webgl');
//初始化着色器
initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE);
// 设置canvas的背景色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
//清空canvas
gl.clear(gl.COLOR_BUFFER_BIT);
//初始化顶点坐标和颜色
var n = initVertexBuffers(gl)
//初始化纹理
initTextures(gl, n)
}
//初始化顶点坐标和纹理坐标
function initVertexBuffers(gl) {
var verticesTexCoords = new Float32Array([
//顶点坐标 纹理坐标
//------\\\\ //----\\\\
-0.9, 0.9, 0.0, 1.0, //顶点1
-0.9, -0.9, 0.0, 0.0, //顶点2
0.9, 0.9, 1.0, 1.0, //顶点3
0.9, -0.9, 1.0, 0.0, //顶点4
])
//创建缓冲区对象
var vertexTexCoordBuffer = gl.createBuffer();
if (!vertexTexCoordBuffer) {
console.log('创建缓冲区对象失败！')
return -1
}
//将顶点坐标和纹理坐标写入缓冲区对象
gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer)
gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords, gl.STATIC_DRAW)
//获取类型化数组中每个元素的大小
var FSIZE = verticesTexCoords.BYTES_PER_ELEMENT
//获取顶点着色器attribute变量a_Position的存储地址, 分配缓存并开启
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 4, 0)
gl.enableVertexAttribArray(a_Position)
//获取顶点着色器attribute变量a_TexCoord(纹理坐标)的存储地址, 分配缓存并开启
var 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 verticesTexCoords.length / 4
}
//初始化纹理
function initTextures(gl, n) {
//获取片元着色器uniform变量u_Sampler、u_Sampler1、u_Sampler2的存储地址
var u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler')
var u_Sampler1 = gl.getUniformLocation(gl.program, 'u_Sampler1')
var u_Sampler2 = gl.getUniformLocation(gl.program, 'u_Sampler2')
var image = new Image()
var image1 = new Image()
var image2 = new Image()
image.src = './resources/grassland.png' //设置纹理资源1路径
image1.src = './resources/horse.png' //设置纹理资源2路径
image2.src = './resources/sheep.png' //设置纹理资源3路径
//注册图片1加载事件的响应函数
image.onload = function () {
//调用加载纹理函数
loadTexTure(gl, n, u_Sampler, image, 0)
}
//注册图片2加载事件的响应函数
image1.onload = function () {
//调用加载纹理函数
loadTexTure(gl, n, u_Sampler1, image1, 1)
}
//注册图片3加载事件的响应函数
image2.onload = function () {
//调用加载纹理函数
loadTexTure(gl, n, u_Sampler2, image2, 2)
}
return true
}
var g_texUnit = false,
g_texUnit1 = false,
g_texUnit2 = false
//加载纹理函数
function loadTexTure(gl, n, u_Sampler, image, texUnit) {
var texture = gl.createTexture() //创建纹理对象
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1) //对纹理图像镜像y轴反转
if (texUnit === 0) {
gl.activeTexture(gl.TEXTURE0) //激活纹理单元0
g_texUnit = true
} else if (texUnit === 1) {
gl.activeTexture(gl.TEXTURE1) //激活纹理单元1
g_texUnit1 = true
} else if (texUnit === 2) {
gl.activeTexture(gl.TEXTURE2) //激活纹理单元2
g_texUnit2 = 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) //纹理单元编号传给片元着色器中uniform变量
//清空canvas
gl.clear(gl.COLOR_BUFFER_BIT);
//纹理图像全部处理完绘制图像
if (g_texUnit && g_texUnit1 && g_texUnit2) {
gl.drawArrays(gl.TRIANGLE_STRIP, 0, n)
gl.deleteTexture(texture)
}
}
init()
</script>
</body>
</html>
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
暂无评论内容