WebGL入门(四十)-通过切换着色器实现一个页面同时展示多个立方体
Posted 点燃火柴
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了WebGL入门(四十)-通过切换着色器实现一个页面同时展示多个立方体相关的知识，希望对你有一定的参考价值。
通过切换着色器实现一个页面同时展示多个立方体
1. demo效果
2. demo实现步骤
这一次的demo实现的核心是切换着色器程序对象，首先要创建所需的着色器和着色器的程序对象，然后在进行绘制的时候选择使用的着色器程序对象，使用 gl.useProgram() 函数实现切换着色器程序对象，整个demo的具体步骤如下
2.1 准备绘制单色立方体的着色器
顶点着色器
//单色立方体顶点着色器
var SOLID_VSHADER_SOURCE = '' +
'attribute vec4 a_Position;\\n' + //声明attribute变量a_Position，用来存放顶点位置信息
'attribute vec4 a_Color;\\n' + //声明attribute变量a_Color，用来存放顶点颜色信息
'attribute vec4 a_Normal;\\n' + //声明attribute变量a_Normal，用来存放法向量
'uniform mat4 u_MvpMatrix;\\n' + //声明uniform变量u_MvpMatrix，用来存放模型视图投影组合矩阵
'uniform mat4 u_NormalMatrix;\\n' + //声明uniform变量u_NormalMatrix，用来存放变换法向量矩阵
'uniform vec3 u_LightColor;\\n' + //声明uniform变量u_LightColor，用来存放光线颜色
'uniform vec3 u_LightDirection;\\n' + //声明uniform变量u_LightDirection，用来存放入射光方向，归一化的世界坐标
'varying vec4 v_Color;\\n' + //声明varying变量v_Color，用来向片元着色器传值顶点颜色信息
'void main(){\\n' +
' gl_Position = u_MvpMatrix * a_Position;\\n' + //将模型视图投影组合矩阵与顶点坐标相乘赋值给顶点着色器内置变量gl_Position
' vec3 normal = normalize(vec3(u_NormalMatrix * a_Normal));\\n' + //对计算变换后的法向量并归一化处理
' float nDotL = max(dot(u_LightDirection, normal), 0.0);\\n' + //计算光线方向和法向量点积
' vec3 diffuse = u_LightColor * vec3(a_Color) * nDotL;\\n' + //计算漫反射光的颜色
' v_Color = vec4(diffuse, a_Color.a);\\n' + //将光线颜色和环境光颜色相加的结果传给片元着色器
'}\\n'
片元着色器
//单色立方体片元着色器
var SOLID_FSHADER_SOURCE = '' +
'#ifdef GL_ES\\n' +
' precision mediump float;\\n' + // 设置精度
'#endif\\n' +
'varying vec4 v_Color;\\n' + //声明varying变量v_Color，用来接收顶点着色器传送的片元颜色信息
'void main(){\\n' +
' gl_FragColor = v_Color;\\n' + //将顶点着色器传送的片元颜色赋值给内置变量gl_FragColor
'}\\n'
2.2 准备绘制纹理立方体的着色器
顶点着色器
//纹理立方体顶点着色器
var TEXTURE_VSHADER_SOURCE = '' +
'attribute vec4 a_Position;\\n' + //声明attribute变量a_Position，用来存放顶点位置信息
'attribute vec4 a_Normal;\\n' + //声明attribute变量a_Normal，用来存放法向量
'attribute vec2 a_TexCoord;\\n' + //声明attribute变量a_TexCoord，用来存放纹理坐标
'uniform mat4 u_MvpMatrix;\\n' + //声明uniform变量u_MvpMatrix，用来存放模型视图投影组合矩阵
'uniform mat4 u_NormalMatrix;\\n' + //声明uniform变量u_NormalMatrix，用来存放变换法向量矩阵
'varying float v_NdotL;\\n' + //声明varying变量v_NdotL，用来向片元着色器传值光线方向和法向量点积
'varying vec2 v_TexCoord;\\n' + //声明varying变量v_TexCoord，用来向片元着色器传值纹理坐标
'void main(){\\n' +
' gl_Position = u_MvpMatrix * a_Position;\\n' + //将模型视图投影组合矩阵与顶点坐标相乘赋值给顶点着色器内置变量gl_Position
' vec3 lightDirection = vec3(0.0, 0.0, 1.0);\\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 TEXTURE_FSHADER_SOURCE = '' +
'#ifdef GL_ES\\n' +
' precision mediump float;\\n' + // 设置精度
'#endif\\n' +
'uniform sampler2D u_Sampler;\\n' + //声明uniform变量u_Sampler，存放第一个纹理单元编号
'varying vec2 v_TexCoord;\\n' + //声明varying变量v_TexCoord，用来接收顶点着色器传送的纹理坐标
'varying float v_NdotL;\\n' + //声明varying变量v_NdotL，用来接收顶点着色器传送的光线方向和法向量点积
'void main(){\\n' +
' vec4 color = texture2D(u_Sampler, v_TexCoord);\\n' + //抽取纹理单元0纹素颜色
' gl_FragColor = vec4(color.rgb * v_NdotL, color.a);\\n' + //计算物体漫反射光照射后的颜色并赋值给内置变量gl_FragColor
'}\\n'
2.3 创建绘制单色立方体的程序对象
function loadShader(gl, type, source) {
// 创建顶点着色器对象
var shader = gl.createShader(type)
if (shader == null) {
console.log('创建着色器失败')
return null
}
// 引入着色器源代码
gl.shaderSource(shader, source)
// 编译着色器
gl.compileShader(shader)
// 检查顶是否编译成功
var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS)
if (!compiled) {
var error = gl.getShaderInfoLog(shader)
console.log('编译着色器失败: ' + error)
gl.deleteShader(shader)
return null
}
return shader
}
//创建程序对象
function createProgram(gl, vshader, fshader) {
//创建顶点着色器对象
var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader)
//创建片元着色器对象
var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader)
if (!vertexShader || !fragmentShader) {
return null
}
//创建程序对象program
var program = gl.createProgram()
if (!gl.createProgram()) {
return null
}
//分配顶点着色器和片元着色器到program
gl.attachShader(program, vertexShader)
gl.attachShader(program, fragmentShader)
//链接program
gl.linkProgram(program)
//检查程序对象是否连接成功
var linked = gl.getProgramParameter(program, gl.LINK_STATUS)
if (!linked) {
var error = gl.getProgramInfoLog(program)
console.log('程序对象连接失败: ' + error)
gl.deleteProgram(program)
gl.deleteShader(fragmentShader)
gl.deleteShader(vertexShader)
return null
}
//返回程序program对象
return program
}
//创建绘制单色立方体的程序对象
var solidProgram = createProgram(gl, SOLID_VSHADER_SOURCE, SOLID_FSHADER_SOURCE)
2.4 创建绘制纹理立方体的程序对象
创建绘制纹理立方体的程序对象与创建单色立方体的程序对象使用了相同的函数，这里只展示调用部分
//创建绘制纹理立方体的程序对象
var texProgram = createProgram(gl, TEXTURE_VSHADER_SOURCE, TEXTURE_FSHADER_SOURCE)
2.5 准备绘制单色立方体的数据并写入缓冲区对象
function initArrayBufferForLaterUse(gl, data, num, type) {
//创建缓冲区对象
var buffer = gl.createBuffer()
if (!buffer) {
console.log('创建缓冲区对象失败')
return null
}
//将数据写入缓冲区对象
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW)
//设置num和type后续使用
buffer.num = num
buffer.type = type
return buffer
}
function initElementArrayBufferForLaterUse(gl, data, type) {
//创建缓冲区对象
var buffer = gl.createBuffer()
if (!buffer) {
console.log('创建缓冲区对象失败')
return null
}
//将数据写入缓冲区对象
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer)
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, data, gl.STATIC_DRAW)
//设置type后续使用
buffer.type = type
return buffer
}
function initVertexBuffers(gl) {
var v0 = [1.0, 1.0, 1.0]
var v1 = [-1.0, 1.0, 1.0]
var v2 = [-1.0, -1.0, 1.0]
var v3 = [1.0, -1.0, 1.0]
var v4 = [1.0, -1.0, -1.0]
var v5 = [1.0, 1.0, -1.0]
var v6 = [-1.0, 1.0, -1.0]
var v7 = [-1.0, -1.0, -1.0]
//顶点
var vertices = new Float32Array([
...v0, ...v1, ...v2, ...v3, // 前
...v0, ...v3, ...v4, ...v5, // 右
...v0, ...v5, ...v6, ...v1, // 上
...v1, ...v6, ...v7, ...v2, // 左
...v7, ...v4, ...v3, ...v2, // 下
...v4, ...v7, ...v6, ...v5 // 后
])
var fontColor = [0.8, 0.5, 1.0, 0.4]
var backColor = [0.5, 1.0, 1.0, 0.4]
var leftColor = [1.0, 1.0, 0.5, 0.4]
var rightColor = [0.2, 1.0, 0.5, 0.8]
var topColor = [0.2, 0.5, 1.0, 0.8]
var downColor = [1.0, 1.0, 1.0, 0.8]
// 顶点的颜色
var colors = new Float32Array([
...fontColor, ...fontColor, ...fontColor, ...fontColor, // v0-v1-v2-v3 前
...rightColor, ...rightColor, ...rightColor, ...rightColor, // v0-v3-v4-v5 右
...topColor, ...topColor, ...topColor, ...topColor, // v0-v5-v6-v1 上
...leftColor, ...leftColor, ...leftColor, ...leftColor, // v1-v6-v7-v2 左
...downColor, ...downColor, ...downColor, ...downColor, // v7-v4-v3-v2 下
...backColor, ...backColor, ...backColor, ...backColor, // v4-v7-v6-v5 后
])
var font = [0.0, 0.0, 1.0]
var back = [0.0, 0.0, -1.0]
var left = [-1.0, 0.0, 0.0]
var right = [1.0, 0.0, 0.0]
var top = [0.0, 1.0, 0.0]
var down = [0.0, -1.0, 0.0]
// 法向量
var normals = new Float32Array([
...font, ...font, ...font, ...font, // v0-v1-v2-v3 前
...right, ...right, ...right, ...right, // v0-v3-v4-v5 右
...top, ...top, ...top, ...top, // v0-v5-v6-v1 上
...left, ...left, ...left, ...left, // v1-v6-v7-v2 左
...down, ...down, ...down, ...down, // v7-v4-v3-v2 下
...back, ...back, ...back, ...back, // v4-v7-v6-v5 后
])
// 纹理贴图
var texCoords = new Float32Array([
1.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // v0-v1-v2-v3 前
0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, // v0-v3-v4-v5 右
1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 0.0, 0.0, // v0-v5-v6-v1 上
1.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // v1-v6-v7-v2 左
0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, // v7-v4-v3-v2 下
0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0 // v4-v7-v6-v5 后
])
// 绘制的索引
var indices = new Uint8Array([
0, 1, 2, 0, 2, 3, // 前
4, 5, 6, 4, 6, 7, // 右
8, 9, 10, 8, 10, 11, // 上
12, 13, 14, 12, 14, 15, // 左
16, 17, 18, 16, 18, 19, // 下
20, 21, 22, 20, 22, 23 // 后
])
var obj = {}
obj.vertexBuffer = initArrayBufferForLaterUse(gl, vertices, 3, gl.FLOAT)
obj.colorBuffer = initArrayBufferForLaterUse(gl, colors, 4, 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)
//设置顶点索引数量
obj.indicesNum = indices.length
//缓冲区对象解绑
gl.bindBuffer(gl.ARRAY_BUFFER, null)
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null)
return obj
}
2.6 准备绘制纹理立方体的数据并写入缓冲区对象
function initTextures(gl, program) {
//创建纹理对象
var texture = gl.createTexture()
if (!texture) {
console.log('创建纹理对象失败')
return false
}
//创建图片对象
var image = new Image()
if (!image) {
console.log('创建图片对象失败')
return false
}
image.src = './resources/sky_roof.jpg' //设置纹理资源路径
//注册图片加载事件的响应函数
image.onload = function () {
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1) //对纹理图像镜像y轴反转
gl.activeTexture(gl.TEXTURE0) //激活纹理单元0
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, image) //纹理图像分配给纹理对象
gl.useProgram(program) //指定程序对象
gl.uniform1i(program.u_Sampler, 0) //纹理单元编号0传给片元着色器中uniform变量u_Sampler
gl.bindTexture(gl.TEXTURE_2D, null) //解绑纹理对象
}
return texture
}
2.7 绘制单色立方体
在绘制的过程中有以下三点需要注意
- 切换着色器
由于我们绘制物体要使用不同的着色器程序对象，所以每次绘制物体的时候要指定对应的着色器程序对象，调用gl.useProgram()函数，每次切换着色器程序对象后，需要重新绑定缓冲区对象 - 为变量分配缓存并开启
绘制物体的变量都是绘制之前写入缓冲区对象，但是没有分配和开启，所以在绘制的时候需要为这些变量分配缓冲区并开启，需要依次调用initAttributeVariable() 函数 - 重新绑定索引缓冲区
顶点索引存放在不同的缓冲区目标上，这里需要单独重新绑定对应的缓冲区
//绘制单色立方体
drawSolidCube(gl, solidProgram, cube, -2.0, viewProjMatrix, currentAngle)
//绘制单色立方体
function drawSolidCube(gl, program, o, x, viewProjMatrix, angle) {
gl.useProgram(program) //指定程序对象
initAttributeVariable(gl, program.a_Position, o.vertexBuffer) //顶点坐标
initAttributeVariable(gl, program.a_Color, o.colorBuffer) //顶点颜色
initAttributeVariable(gl, program.a_Normal, o.normalBuffer) OpenGL/WebGL着色器开发入门指南