1.webgl点光源的漫反射
点光源的特点:
- 点光源照射到物体上的每个顶点的入射光方向是各不相同的。
- 需要一个点光源的位置。
- 需要一个点光源的光颜色。
需要计算的是
我们需要计算出每个顶点的入射光线的方向。
点光源向四周放射光线，所以顶点处的光线方向是由点光源坐标 - 顶点坐标而得到得矢量
入射光线的方向 = 点光源的坐标 - 顶点坐标
顶点着色器中
声明点光源的位置
'uniform vec3 u_LightPosition;\n' + // 点光源的位置
获取地址，并且赋值
const u_LightPosition = gl.getUniformLocation(gl.program, 'u_LightPosition'); // 获取点光源位置的存储地址
gl.uniform3f(u_LightPosition, 0.0, 3.0, 4.0);
声明模型矩阵
'uniform mat4 u_ModelMatrix;\n' + // 模型矩阵
获取地址，赋值模型矩阵
const modemoMatrixt = new Matrix4();
// modemoMatrixt.setTranslate(0, 0, 0); // 设置平移的坐标
modemoMatrixt.setRotate(0, 0, 1, 0) // 设置旋转的角度，旋转轴
const u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
gl.uniformMatrix4fv(u_ModelMatrix, false, modemoMatrixt.elements);
具体计算入射光的方向
' vec4 vertexPosition = u_ModelMatrix * a_Position;\n' + // 每个顶点的坐标,经过模型矩阵变化之后的顶点坐标
' vec3 lightDirection = normalize(u_LightPosition - vec3(vertexPosition));\n' + // 计算每个顶点的入射光向量
// u_LightPosition 点光源的位置
// vertexPosition 经过变化之后的顶点坐标
// lightDirection 点光源入射光的方向
然后我们计算法线向量 与 入射光的方向的夹角
' float nDotl = max(dot(lightDirection, normal), 0.0);\n' + // 计算每个顶点的法向量与入射光向量的夹角余弦值
最终计算点光源的漫反射的颜色
物体基底色
光反射的颜色
夹角
' vec3 diffuse = a_Color.rgb * u_LightColor * nDotl;\n' + // 计算点光源漫反射的光颜色
计算出环境光的颜色
' vec3 ambient = u_AmbientLight * a_Color.rgb;\n' + // 环境光反射的颜色
赋值给varying类型的变量，使其能在片源着色器中使用
' c_Color = vec4(diffuse + ambient, a_Color);\n' + // 环境光反射的颜色 + 点光源反射的颜色, 物体基础底色
片源着色器中
const FSHADER_SOURCE =
'#ifdef GL_ES\n' +
'precision mediump float;\n' +
'#endif\n' +
'varying vec4 c_Color;\n' +
'void main(){\n' +
' gl_FragColor = c_Color;\n' +
'}\n';
详细代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="../../三维/lib/cuon-matrix.js"></script>
<script>
const gl = canvas.getContext('webgl');
const VSHADER_SOURCE =
'attribute vec4 a_Position;\n' + // 顶点坐标 ok
'attribute vec4 a_Color;\n' + // 顶点颜色 ok
'varying vec4 c_Color;\n' + // 传递给片源着色器的变量
'uniform mat4 u_NormalMatrix;\n' + // 变化之后的顶点法向量 ok
'uniform mat4 u_ViewProjMatrix;\n' + // 视图透视投影矩阵 ok
'uniform mat4 u_ModelMatrix;\n' + // 模型矩阵
'uniform vec3 u_LightColor;\n' + // 光线的颜色 ok
'uniform vec3 u_AmbientLight;\n' + // 环境光的颜色 ok
'uniform vec3 u_LightPosition;\n' + // 点光源的位置
'attribute vec4 a_Normal;\n' + // 顶点法向量 ok
' void main(){\n' +
' gl_Position = u_ViewProjMatrix * a_Position;\n' + // 确定经过变化之后的顶点坐标
' vec3 normal = normalize(vec3(u_NormalMatrix * a_Normal));\n' + // 经过变化之后的法向量
' vec4 vertexPosition = u_ModelMatrix * a_Position;\n' + // 每个顶点的坐标
' vec3 lightDirection = normalize(u_LightPosition - vec3(vertexPosition));\n' + // 计算每个顶点的入射光向量
' float nDotl = max(dot(lightDirection, normal), 0.0);\n' + // 计算每个顶点的法向量与入射光向量的夹角余弦值
' vec3 diffuse = a_Color.rgb * u_LightColor * nDotl;\n' + // 计算点光源漫反射的光颜色
' vec3 ambient = u_AmbientLight * a_Color.rgb;\n' + // 环境光反射的颜色
' c_Color = vec4(diffuse + ambient, a_Color);\n' + // 环境光反射的颜色 + 点光源反射的颜色, 物体基础底色
'}\n';
const FSHADER_SOURCE =
'#ifdef GL_ES\n' +
'precision mediump float;\n' +
'#endif\n' +
'varying vec4 c_Color;\n' +
'void main(){\n' +
' gl_FragColor = c_Color;\n' +
'}\n';
const createShader = (type, source) => {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
const compileState = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (!compileState) {
const info = gl.getShaderInfoLog(shader);
console.log(`编译报错信息为:${info}`)
gl.deleteShader(shader);
return null
}
return shader
}
const createProgram = (vshader, fshader) => {
const vertexShader = createShader(gl.VERTEX_SHADER, vshader);
const fragementShader = createShader(gl.FRAGMENT_SHADER, fshader);
if (!fragementShader || !vertexShader) {
console.log('初始着色器失败')
return false
}
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragementShader);
gl.linkProgram(program);
const linkState = gl.getProgramParameter(program, gl.LINK_STATUS);
if (!linkState) {
const err = gl.getProgramInfoLog(program);
console.log(`链接报错信息为:${err}`);
gl.deleteShader(vertexShader);
gl.deleteShader(fragementShader);
gl.deleteProgram(program);
return null
}
return program;
}
const program = createProgram(VSHADER_SOURCE, FSHADER_SOURCE);
gl.program = program;
gl.useProgram(program);
const createBuffers = () => {
var vertices = new Float32Array([ // Coordinates
2.0, 2.0, 2.0, -2.0, 2.0, 2.0, -2.0, -2.0, 2.0, 2.0, -2.0, 2.0, // v0-v1-v2-v3 front
2.0, 2.0, 2.0, 2.0, -2.0, 2.0, 2.0, -2.0, -2.0, 2.0, 2.0, -2.0, // v0-v3-v4-v5 right
2.0, 2.0, 2.0, 2.0, 2.0, -2.0, -2.0, 2.0, -2.0, -2.0, 2.0, 2.0, // v0-v5-v6-v1 up
-2.0, 2.0, 2.0, -2.0, 2.0, -2.0, -2.0, -2.0, -2.0, -2.0, -2.0, 2.0, // v1-v6-v7-v2 left
-2.0, -2.0, -2.0, 2.0, -2.0, -2.0, 2.0, -2.0, 2.0, -2.0, -2.0, 2.0, // v7-v4-v3-v2 down
2.0, -2.0, -2.0, -2.0, -2.0, -2.0, -2.0, 2.0, -2.0, 2.0, 2.0, -2.0 // v4-v7-v6-v5 back
]); // 顶点坐标
// 顶点颜色
var colors = new Float32Array([ // Colors
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v0-v1-v2-v3 front
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v0-v3-v4-v5 right
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v0-v5-v6-v1 up
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v1-v6-v7-v2 left
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v7-v4-v3-v2 down
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0 // v4-v7-v6-v5 back
]); // 顶点颜色
var normals = new Float32Array([ // Normal
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
]); // 顶点法向量
initArrayBuffer('a_Position', vertices, 3, gl.FLOAT);
initArrayBuffer('a_Color', colors, 3, gl.FLOAT);
initArrayBuffer('a_Normal', normals, 3, gl.FLOAT);
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
]); // 顶点索引
const bufferIndex = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, bufferIndex)
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
return indices.length;
}
const initArrayBuffer = (attribute, data, num, type) => {
// console.log(attribute, 'attribute')
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
// const a_attribute = gl.getAttribLocation(gl.program, attribute);
var a_attribute = gl.getAttribLocation(gl.program, attribute);
if (a_attribute < 0) {
console.log('Failed to get the storage location of ' + attribute);
return false;
}
gl.vertexAttribPointer(a_attribute, num, type, false, 0, 0);
gl.enableVertexAttribArray(a_attribute);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
}
const n = createBuffers();
// 设置环境光
const u_AmbientLight = gl.getUniformLocation(gl.program, 'u_AmbientLight'); // 环境光的变量地址
gl.uniform3f(u_AmbientLight, 0.2, 0.2, 0.2); // 设置环境光的颜色
// 设置点光源的位置
const u_LightPosition = gl.getUniformLocation(gl.program, 'u_LightPosition'); // 获取点光源位置的存储地址
gl.uniform3f(u_LightPosition, 0.0, 3.0, 4.0);
// 设置点光源的颜色
const u_LightColor = gl.getUniformLocation(gl.program, 'u_LightColor'); // 获取点光源颜色变量存储地址
// console.log(u_LightColor)
gl.uniform3f(u_LightColor, 1.0, 1.0, 1.0);
// 设置透视视图投影矩阵
const u_ViewProjMatrix = gl.getUniformLocation(gl.program, 'u_ViewProjMatrix'); // 获取视图透视投影矩阵的变量存储地址
// console.log(u_ViewProjMatrix)
const mvpMatrixd = new Matrix4(); // 视图透视投影矩阵
mvpMatrixd.setPerspective(30, canvas.width / canvas.height, 1, 100); // 设置透视投影矩阵
mvpMatrixd.lookAt(6, 6, 14, 0, 0, 0, 0, 1, 0); // 设置视图矩阵
const modemoMatrixt = new Matrix4();
// modemoMatrixt.setTranslate(0, 0, 0); // 设置平移的坐标
modemoMatrixt.setRotate(0, 0, 1, 0) // 设置旋转的角度，旋转轴
// // 透视视图投影矩阵 * 模型矩阵
mvpMatrixd.multiply(modemoMatrixt);
console.log(mvpMatrixd.elements, 'mvpMatrix.elements')
// 设置具体的值
// 模型矩阵
const u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
gl.uniformMatrix4fv(u_ModelMatrix, false, modemoMatrixt.elements);
// 设置变化之后的法向量
const normalMatrix = new Matrix4(); // 变化之后的法线向量
normalMatrix.setInverseOf(modemoMatrixt); // 计算模型矩阵的逆矩阵
normalMatrix.transpose(); // 对矩阵进行转置运输
const normalChange = gl.getUniformLocation(gl.program, 'u_NormalMatrix');
gl.uniformMatrix4fv(normalChange, false, modemoMatrixt.elements); // 设置具体的值
gl.uniformMatrix4fv(u_ViewProjMatrix, false, mvpMatrixd.elements);
gl.clearColor(0, 0, 0, 1);
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
console.log(n)
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
</script>
</body>
</html>
效果图
9908
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
