1.环境光
环境光(间接光)是指那些光源发出后,被墙壁等物体多次反射,然后照到物体表面上的光。环境光从各个角度照射物体,其强度是一致的。比如说,在夜间打开冰箱的门,整个房间都会有些微微亮,这就是环境光的作用。环境光不用指定位置和方向。只需要指定颜色就可以了。
2.环境光的反射
特点:
- 方向,环境光的反射方向是,和入射光的方向刚好相反。
- 照射物体的方式都是各方向均匀,强度相等的。
公式:
环境光反射光的颜色 = 物体表面基底色 * 环境光的颜色
3.漫反射,环境光反射同时存在时
公式:
表面的反射光颜色 = 漫反射光的颜色 + 环境光反射光的颜色
详细代码
1.在顶点着色器中,声明接受环境光的变量
'uniform vec3 u_AmbientLight;\n' + // 环境光
2.在js代码中,获取变量地址,而且设置传递的值
var u_AmbientLight = gl.getUniformLocation(gl.program, 'u_AmbientLight');
gl.uniform3f(u_AmbientLight, 0.2, 0.2, 0.2);
3.计算环境光的放射光的颜色
' vec3 ambient = u_AmbientLight * a_Color.rgb;\n'+
4.然后进行赋值操作
' c_Color = vec4(diffuse + ambient, a_Color);\n' +
就ok了
具体代码
<!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> -->
<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' + // 顶点坐标
'attribute vec4 a_Color;\n' + // 颜色值
'varying vec4 c_Color;\n' +
'uniform mat4 u_ViewProjMatrix;\n' + // 视图透视投影矩阵
'uniform vec3 u_LightColor;\n' + // 光线的颜色
'uniform vec3 u_LightDirection;\n' + // 光线的向量
'uniform vec3 u_AmbientLight;\n' + // 环境光
'attribute vec4 a_Normal;\n' + // 顶点法向量
' void main(){\n' +
' gl_Position = u_ViewProjMatrix * a_Position;\n' +
' vec3 normal = normalize(a_Normal.xyz);\n' +
' float nDotl = max(dot(u_LightDirection, normal), 0.0);\n' +
' vec3 diffuse = u_LightColor * a_Color.rgb* 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
}
// createShader(gl.FRAGMENT_SHADER,FSHADER_SOURCE)
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.useProgram(program);
gl.program = program;
// console.log(program, 'programprogram')
gl.useProgram(program);
const createBuffers = () => {
// const 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 前面
// 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 右边
// 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 上
// -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 左边
// 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 下面
// 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 后面
// ])
var vertices = new Float32Array([ // Coordinates
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
]); // 顶点坐标
// 顶点颜色
// const colors = new Float32Array([
// 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,
// 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,
// 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,
// 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,
// 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,
// 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,
// ])
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
]); // 顶点颜色
// const 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,
// 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0,
// 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0,
// -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0,
// 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0,
// 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0
// ])
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);
// const 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 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);
}
var u_AmbientLight = gl.getUniformLocation(gl.program, 'u_AmbientLight');
gl.uniform3f(u_AmbientLight, 0.2, 0.2, 0.2);
const n = createBuffers();
var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_ViewProjMatrix');
console.log(u_MvpMatrix, 'u_MvpMatrix')
var u_LightColor = gl.getUniformLocation(gl.program, 'u_LightColor');
var u_LightDirection = gl.getUniformLocation(gl.program, 'u_LightDirection');
gl.uniform3f(u_LightColor, 5.0, 5.0, 5.0);
// console.log(Matrix4, 'Matrix4')
const mvpMatrix = new Matrix4();
// mvpMatrix.setPerspective(30, canvas.with / canvas.height, 0.0, 100);
mvpMatrix.setPerspective(30, canvas.width / canvas.height, 1, 100);
mvpMatrix.lookAt(3, 3, 7, 0, 0, 0, 0, 1, 0);
// gl.uniform3f(u_MvpMatrix, false, mvpMatrix.elements);
gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
var lightDirection = new Vector3([0.5, 3.0, 4.0]);
lightDirection.normalize();
gl.uniform3fv(u_LightDirection, lightDirection.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, 'n')
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
</script>
</body>
</html>
效果图