到目前为止,以前的程序都是用了一个着色器(顶点着色器和片元着色器),如果一个着色器就能绘制出场景中所有的物体,那就没有问题。然而事实是,对不同物体经常需要使用不同的着色器来绘制,每个着色器中可能有非常复杂的逻辑以实现各种不同的效果。我们可以准备多个着色器,然后根据需要来切换使用它们。
实现切换着色器
为了切换着色器,需要先创建多个着色器程序对象,然后再进行绘制前选择使用的程序对象。以前在39 WebGL着色器和着色器程序对象:initShader()函数的作用中介绍了如何创建程序对象。我们使用gl.useProgram()函数来进行切换。由于现在需要显式地操作着色器和程序对象,所以不能再使用initShaders()函数。但是,可以使用定义在cuon-utils.js中的createProgram()函数,实际上initShaders()函数内部也是调用该函数来创建着色器对象的。
下面是示例程序的流程步骤,由于它创建了两个程序对象,做了两轮相同的操作,所以看上去有点长。关键的代码实际上很简单。
(1)准备用来绘制单色立方体的着色器。
(2)准备用来绘制纹理立方体的着色器。
(3)调用createProgram()函数,利用第一步创建出的着色器,创建着色器程序对象。
(4)调用createProgram()函数,利用第二步创建出的着色器,创建着色器程序对象。
(5)调用gl.useProgram()函数,指定使用第3步创建出的着色器程序对象。
(6)通过缓冲区对象向着色器中传入attribute变量并开启之。
(7)绘制单色立方体。
(8)调用gl.useProgram()函数,指定使用第4步创建出的着色器程序对象。
(9)通过缓冲区对象向着色器传入attribute变量并开启之。
(10)绘制纹理立方体。
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<style>
body {
margin: 0;
overflow: hidden;
}
#canvas {
margin: 0;
display: block;
}
</style>
</head>
<body onload="main()">
<canvas id="canvas" height="800" width="800"></canvas>
</body>
<script src="lib/webgl-utils.js"></script>
<script src="lib/webgl-debug.js"></script>
<script src="lib/cuon-utils.js"></script>
<script src="lib/cuon-matrix.js"></script>
<script>
//设置WebGL全屏显示
var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//单色立方体的着色器
var solidVertexShaderSource = "" +
"attribute vec4 a_Position;\n" +
"attribute vec4 a_Normal;\n" +
"uniform mat4 u_MvpMatrix;\n" +
"uniform mat4 u_NormalMatrix;\n" +
"varying vec4 v_Color;\n" +
"void main(){\n" +
" vec3 lightDirection = vec3(0.0,0.0, 1.0);\n" +//设置灯光的坐标位置(世界坐标下)
" vec4 color = vec4(0.0, 1.0, 1.0, 1.0);\n" + //设置立方体的颜色
" gl_Position = u_MvpMatrix * a_Position;\n" +
" vec3 normal = normalize(vec3(u_NormalMatrix * a_Normal));\n" +
" float nDotL = max(dot(normal, lightDirection), 0.0);\n" +
" v_Color = vec4(color.rgb * nDotL, color.a);\n" +
"}\n";
var solidFragmentShaderSource = "" +
"#ifdef GL_ES\n" +
"precision mediump float;\n" +
"#endif\n" +
"varying vec4 v_Color;\n" +
"void main(){\n" +
" gl_FragColor = v_Color;\n" +
"}\n";
//纹理立方体的着色器
var textureVertexShaderSource = "" +
"attribute vec4 a_Position;\n" +
"attribute vec4 a_Normal;\n" +
"attribute vec2 a_TexCoord;\n" +
"uniform mat4 u_MvpMatrix;\n" +
"uniform mat4 u_NormalMatrix;\n" +
"varying float v_NdotL;\n" +
"varying vec2 v_TexCoord;\n" +
"void main(){\n" +
" vec3 lightDirection = vec3(0.0, 0.0, 1.0);\n" +
" gl_Position = u_MvpMatrix * a_Position;\n" +
" vec3 normal = normalize(vec3(u_NormalMatrix * a_Normal));\n" +
" v_NdotL = max(dot(normal, lightDirection), 0.0);\n" +
" v_TexCoord = a_TexCoord;\n" +
"}\n";
var textureFragmentShaderSource = "" +
"#ifdef GL_ES\n" +
"precision mediump float;\n" +
"#endif\n" +
"uniform sampler2D u_Sampler;\n" +
"varying vec2 v_TexCoord;\n" +
"varying float v_NdotL;\n" +
"void main(){\n" +
" vec4 color = texture2D(u_Sampler, v_TexCoord);\n" +
" gl_FragColor = vec4(color.rgb * v_NdotL, color.a);\n" +
"}\n";
function main() {
var canvas = document.getElementById("canvas");
var gl = getWebGLContext(canvas);
if (!gl) {
console.log("你的浏览器不支持WebGL");
return;
}
//初始化两个程序对象的着色器
var solidProgram = createProgram(gl,solidVertexShaderSource,solidFragmentShaderSource);
var textureProgram = createProgram(gl,textureVertexShaderSource,textureFragmentShaderSource);
if(!solidProgram || !textureProgram){
console.log("创建程序对象失败");
return;
}
//获取单色立方体的attribute和uniform存储位置
solidProgram.a_Position = gl.getAttribLocation(solidProgram, "a_Position");
solidProgram.a_Normal = gl.getAttribLocation(solidProgram, "a_Normal");
solidProgram.u_MvpMatrix = gl.getUniformLocation(solidProgram, "u_MvpMatrix");
solidProgram.u_NormalMatrix = gl.getUniformLocation(solidProgram, "u_NormalMatrix");
//获取纹理立方体的attribute和uniform存储位置
textureProgram.a_Position = gl.getAttribLocation(textureProgram, "a_Position");
textureProgram.a_Normal = gl.getAttribLocation(textureProgram, "a_Normal");
textureProgram.a_TexCoord = gl.getAttribLocation(textureProgram, "a_TexCoord");
textureProgram.u_MvpMatrix = gl.getUniformLocation(textureProgram, "u_MvpMatrix");
textureProgram.u_NormalMatrix = gl.getUniformLocation(textureProgram, "u_NormalMatrix");
textureProgram.u_Sampler = gl.getUniformLocation(textureProgram, "u_Sampler");
if(solidProgram.a_Position < 0 || solidProgram.a_Normal < 0 || !solidProgram.u_MvpMatrix || !solidProgram.u_NormalMatrix || textureProgram.a_Position < 0 || textureProgram.a_Normal < 0 || textureProgram.a_TexCoord < 0 || !textureProgram.u_MvpMatrix || !textureProgram.u_NormalMatrix || !textureProgram.u_Sampler){
console.log("无法获取变量的存储位置");
return;
}
//设置单色立方体的相关数据,并存入缓冲区
var cube = initVertexBuffers(gl);
if(!cube){
console.log("无法设置单色立方体的相关信息");
return;
}
//设置纹理立方体的纹理数据,并存入缓冲区
var texture = initTextures(gl,textureProgram);
if(!texture){
console.log("纹理数据存储失败");
return;
}
//开启隐藏面消除功能,并设置背景色
gl.enable(gl.DEPTH_TEST);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
//计算视图投影矩阵
var viewProjectMatrix = new Matrix4();
viewProjectMatrix.setPerspective(30.0, canvas.width/canvas.height, 1.0, 100.0);
viewProjectMatrix.lookAt(0.0, 0.0, 15.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);
//开始绘制立方体
var currentAngle = 0.0; // 当前立方体的角度
function tick() {
currentAngle = animate(currentAngle); //更新角度
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
//绘制单色立方体
drawSolidCube(gl, solidProgram, cube, -2.0, currentAngle, viewProjectMatrix);
//绘制纹理立方体
drawTexCube(gl, textureProgram, cube, texture, 2.0, currentAngle, viewProjectMatrix);
requestAnimationFrame(tick);
}
tick();
}
function drawTexCube(gl, program, obj, texture, x, angle, viewProjectMatrix) {
gl.useProgram(program);
//分配缓冲对象并启用赋值
initAttributeVariable(gl, program.a_Position, obj.vertexBuffer); //顶点坐标
initAttributeVariable(gl, program.a_Normal, obj.normalBuffer); //法向量
initAttributeVariable(gl, program.a_TexCoord, obj.texCoordBuffer); //纹理坐标
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, obj.indexBuffer);
//设置好纹理对象,开启使用0号的纹理
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
//绘制单色立方体
drawCube(gl, program, obj, x, angle, viewProjectMatrix);
}
function drawSolidCube(gl, program, obj, x, angle, viewProjectMatrix) {
gl.useProgram(program);
//分配缓冲区对象并启用赋值
initAttributeVariable(gl, program.a_Position, obj.vertexBuffer); //顶点坐标
initAttributeVariable(gl, program.a_Normal, obj.normalBuffer); //法向量
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, obj.indexBuffer); //绑定索引
//绘制单色立方体
drawCube(gl, program, obj, x, angle, viewProjectMatrix);
}
//声明绘制需要变换矩阵变量
var g_modelMatrix = new Matrix4();
var g_mvpMatrix = new Matrix4();
var g_normalMatrix = new Matrix4();
function drawCube(gl, program, obj, x, angle, viewProjectMatrix) {
//计算模型矩阵
g_modelMatrix.setTranslate(x, 0.0, 0.0);
g_modelMatrix.rotate(20.0, 1.0, 0.0, 0.0);
g_modelMatrix.rotate(angle, 0.0, 1.0, 0.0);
//计算出法向量的方向,并赋值
g_normalMatrix.setInverseOf(g_modelMatrix);
g_normalMatrix.transpose();
gl.uniformMatrix4fv(program.u_NormalMatrix, false, g_normalMatrix.elements);
//计算模型视图投影矩阵
g_mvpMatrix.set(viewProjectMatrix);
g_mvpMatrix.multiply(g_modelMatrix);
gl.uniformMatrix4fv(program.u_MvpMatrix, false, g_mvpMatrix.elements);
gl.drawElements(gl.TRIANGLES, obj.numIndices, obj.indexBuffer.type, 0);
}
function initAttributeVariable(gl,a_attribute, buffer) {
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.vertexAttribPointer(a_attribute, buffer.num, buffer.type, false, 0, 0);
gl.enableVertexAttribArray(a_attribute);
}
var angle_step = 30; //每秒旋转的增量
var last = +new Date(); //保存上次调用animate()函数的方法
function animate(angle) {
var now = +new Date();
var elapsed = now - last;
last = now;
var newAngle = angle + (angle_step * elapsed)/1000.0;
return newAngle % 360.0;
}
function initTextures(gl,program) {
var texture = gl.createTexture();
if(!texture){
console.log("无法创建纹理缓冲区");
return null;
}
var img = new Image();
img.onload = function () {
//将图形数据存入纹理对象
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
//将纹理存入到第一个纹理缓冲区
gl.useProgram(program);
gl.uniform1i(program.u_Sampler, 0);
gl.bindTexture(gl.TEXTURE_2D, null); //解绑当前
};
img.src = './resources/orange.jpg';
return texture;
}
function initVertexBuffers(gl) {
// Create a cube
// v6----- v5
// /| /|
// v1------v0|
// | | | |
// | |v7---|-|v4
// |/ |/
// v2------v3
var vertices = new Float32Array([ // 单色立方体的顶点位置数据
1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, // v0-v1-v2-v3 front
1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, // v0-v3-v4-v5 right
1.0, 1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, // v0-v5-v6-v1 up
-1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, // v1-v6-v7-v2 left
-1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0, // v7-v4-v3-v2 down
1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0 // v4-v7-v6-v5 back
]);
var normals = new Float32Array([ // 单色立方体的法相量
0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, // v0-v1-v2-v3 front
1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, // v0-v3-v4-v5 right
0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // v0-v5-v6-v1 up
-1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, // v1-v6-v7-v2 left
0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, // v7-v4-v3-v2 down
0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0 // v4-v7-v6-v5 back
]);
var texCoords = new Float32Array([ // 纹理的坐标
1.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // v0-v1-v2-v3 front
0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, // v0-v3-v4-v5 right
1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 0.0, 0.0, // v0-v5-v6-v1 up
1.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // v1-v6-v7-v2 left
0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, // v7-v4-v3-v2 down
0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0 // v4-v7-v6-v5 back
]);
var indices = new Uint8Array([ // 索引值
0, 1, 2, 0, 2, 3, // front
4, 5, 6, 4, 6, 7, // right
8, 9, 10, 8, 10, 11, // up
12, 13, 14, 12, 14, 15, // left
16, 17, 18, 16, 18, 19, // down
20, 21, 22, 20, 22, 23 // back
]);
var obj = {}; //使用对象返回多个缓冲区对象
//将顶点信息写入缓冲区对象
obj.vertexBuffer = initArrayBufferForLaterUse(gl, vertices, 3, gl.FLOAT);
obj.normalBuffer = initArrayBufferForLaterUse(gl, normals, 3, gl.FLOAT);
obj.texCoordBuffer = initArrayBufferForLaterUse(gl, texCoords, 2, gl.FLOAT);
obj.indexBuffer = initElementArrayBufferForLaterUse(gl, indices, gl.UNSIGNED_BYTE);
if(!obj.vertexBuffer || !obj.normalBuffer || !obj.texCoordBuffer || !obj.indexBuffer){
return null;
}
obj.numIndices = indices.length;
//取消绑定焦点的数据
gl.bindBuffer(gl.ARRAY_BUFFER, null);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
return obj;
}
function initElementArrayBufferForLaterUse(gl,data,type) {
var buffer = gl.createBuffer(); //创建一个缓冲区对象
if(!buffer){
console.log("无法创建缓冲区对象");
return;
}
//将数据写入缓冲区
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, data, gl.STATIC_DRAW);
buffer.type = type;
return buffer;
}
function initArrayBufferForLaterUse(gl, data, num, type) {
var buffer = gl.createBuffer(); // 创建一个缓冲区对象
if(!buffer){
console.log("无法创建缓冲区对象");
return;
}
//将数据写入缓冲区对象
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
//保留必要的信息,以便后面使用
buffer.num = num;
buffer.type = type;
return buffer;
}
</script>
</html>