2022-04-08 webgl实现镜面反射
2022-04-08 本文已影响0人
MrSwilder
<!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;
text-align: center;
}
#canvas {
margin: 0;
}
</style>
</head>
<body onload="main()">
<canvas id="canvas" height="800" width="1200"></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>
//顶点着色器
var VSHADER_SOURCE = `
attribute vec4 a_Position;
attribute vec4 a_Color;
attribute vec4 a_Normal;
uniform mat4 u_ModelMatrix;
uniform mat4 u_NormalMatrix;
uniform mat4 u_ModelViewMatrix;
varying vec4 v_Color;
varying vec3 v_Normal;
varying vec3 v_Position;
void main(){
gl_Position = u_ModelViewMatrix * a_Position;
v_Position=vec3(u_NormalMatrix*a_Position);
v_Normal = normalize(vec3(u_NormalMatrix *a_Normal));
v_Color=a_Color;
}`;
//片元着色器
var FSHADER_SOURCE = `
#ifdef GL_ES
precision mediump float;
#endif
uniform vec3 u_LightPosition;
uniform vec3 u_LightColor;
uniform vec3 u_AmbitionColor;
uniform vec3 u_eyePosition;
varying vec4 v_Color;
varying vec3 v_Normal;
varying vec3 v_Position;
void main(){
vec3 normal=normalize(v_Normal);
//计算漫反射
vec3 lightDirection=normalize(u_LightPosition-vec3(v_Position));
float nDotL = max(dot(lightDirection,normal),0.0);
vec3 diffuse = u_LightColor * vec3(v_Color) * nDotL;
//计算镜面反射
vec3 viewDir=u_eyePosition-v_Position;
vec3 reflectDir=reflect(-lightDirection,normal);
float spec = pow(max(dot(viewDir, reflectDir), 0.0),0.5);
vec3 specular = 0.5 * spec * u_LightColor;
//计算环境光
vec3 ambitionColor=u_AmbitionColor*v_Color.rgb;
gl_FragColor = vec4(diffuse+specular+ambitionColor,v_Color.a);
}`;
//声明js需要的相关变量
var canvas = document.getElementById("canvas");
var gl = getWebGLContext(canvas);
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.CULL_FACE);
function main() {
if (!gl) {
console.log("你的浏览器不支持WebGL");
return;
}
//初始化着色器
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log("无法初始化着色器");
return;
}
var n = initVertexBuffers(gl);
if (n < 0) {
console.log("无法创建缓冲区");
return;
}
var u_LightColor = gl.getUniformLocation(gl.program, "u_LightColor");
var u_LightPosition = gl.getUniformLocation(gl.program, "u_LightPosition");
var u_AmbitionColor = gl.getUniformLocation(gl.program, "u_AmbitionColor");
var u_viewPosition = gl.getUniformLocation(gl.program, "u_viewPosition");
//设置光线颜色（白色）
gl.uniform3f(u_LightColor, 1.0, 1.0, 1.0);
gl.uniform3f(u_viewPosition, 3.0, 3.0,10.0);
// //设置光线方向（世界坐标系下的）
// var lightDirection = new Vector3([2.0, 3.0, 4.0]);
// lightDirection.normalize(); //归一化
//gl.uniform3fv(u_LightDirection, lightDirection.elements)
//设置光源位置
var lightPosition = new Vector3([0,0,1.5]);
gl.uniform3fv(u_LightPosition, lightPosition.elements)
var ambitionColor = new Vector3([0.2, 0.2, 0.2]);
gl.uniform3fv(u_AmbitionColor, ambitionColor.elements)
//设置底色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
var currentAngle = 0
var tick = function () {
//计算角度
currentAngle += 0.3
draw(gl, currentAngle)
requestAnimationFrame(tick)
}
tick()
//进入场景初始化
//draw(gl, n, u_ModelViewMatrix, u_ModelMatrix, u_NormalMatrix);
}
function draw(gl, currentAngle) {
//设置视角矩阵的相关信息（视点，视线，上方向）
var viewMatrix = new Matrix4();
viewMatrix.setLookAt(3.0, 3.0,10.0, 0, 0, 0, 0, 1, 0);
//设置模型矩阵的相关信息
var modelMatrix = new Matrix4();
modelMatrix.setRotate(currentAngle, 0, 1, 0);
//设置透视投影矩阵
var projMatrix = new Matrix4();
projMatrix.setPerspective(30, canvas.width / canvas.height, 1, 100);
//计算出模型视图矩阵 viewMatrix.multiply(modelMatrix)相当于在着色器里面u_ViewMatrix * u_ModelMatrix
var modeViewMatrix = projMatrix.multiply(viewMatrix.multiply(modelMatrix));
//设置视角矩阵的相关信息
var u_ModelMatrix = gl.getUniformLocation(gl.program, "u_ModelMatrix");
if (u_ModelMatrix < 0) {
console.log("无法获取模型矩阵变量的存储位置");
return;
}
//设置视角矩阵的相关信息
var u_ModelViewMatrix = gl.getUniformLocation(gl.program, "u_ModelViewMatrix");
if (u_ModelViewMatrix < 0) {
console.log("无法获取mvp矩阵变量的存储位置");
return;
}
var u_NormalMatrix = gl.getUniformLocation(gl.program, "u_NormalMatrix");
//将试图矩阵传给u_ViewMatrix变量
gl.uniformMatrix4fv(u_ModelViewMatrix, false, modeViewMatrix.elements);
gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);
var normalMatrix = new Matrix4(); //用来变换法向量的矩阵
//根据模型矩阵计算用来变换法向量的矩阵
normalMatrix.setInverseOf(modelMatrix);
normalMatrix.transpose();
//将用来变换放下了的矩阵传给u_NormalMatrix变量
gl.uniformMatrix4fv(u_NormalMatrix, false, normalMatrix.elements);
//开启隐藏面清除
gl.enable(gl.DEPTH_TEST);
//清空颜色和深度缓冲区
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
//绘制图形
gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_BYTE, 0);
}
function initVertexBuffers(gl) {
// 创建一个立方体
// 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 colors = new Float32Array([ // 顶点的颜色
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, // v0-v1-v2-v3 front
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, // v0-v3-v4-v5 right
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, // v0-v5-v6-v1 up
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, // v1-v6-v7-v2 left
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, // v7-v4-v3-v2 down
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, // 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,
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 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
]);
//创建缓冲区对象
initArrayBuffer(gl, vertices, 3, gl.FLOAT, "a_Position");
initArrayBuffer(gl, colors, 3, gl.FLOAT, "a_Color");
initArrayBuffer(gl, normals, 3, gl.FLOAT, "a_Normal");
//将顶点索引数据写入缓冲区对象
var indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
return indices.length;
}
function initArrayBuffer(gl, data, num, type, attribute) {
//创建缓冲区对象
var buffer = gl.createBuffer();
if (!buffer) {
console.log("无法创建缓冲区对象");
return -1;
}
//绑定缓冲区对象并写入数据
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
//获取顶点位置变量位置
var a_attribue = gl.getAttribLocation(gl.program, attribute);
if (a_attribue < 0) {
console.log("无法获取顶点位置的存储变量" + attribute);
return -1;
}
//对位置的顶点数据进行分配，并开启
gl.vertexAttribPointer(a_attribue, num, type, false, 0, 0);
gl.enableVertexAttribArray(a_attribue);
}
</script>
</html>
效果
image.png
