通過Three.js也許可以很方便的展示出3D模型，但是你知道它是怎么一步一步從構建網格到貼圖到最終渲染出3D模型的嗎？現在我們直接使用底層的webgl加上一點點的數學知識就可以實現它。
本節實現的效果: WebGL三維地球
earth3d
內容大綱
構建網格
編寫著色器
實現3D地球
構建網格
首先我們要建立球體的三維模型，三維網格模型包括如下屬性（不熟悉請復習webgl教程）：
- 頂點(position)
- 法線(normal)
- 貼圖坐標(uv)
- 頂點索引(indices)
最后要構建出如下所示的經緯球模型
經緯球
首先可以從xy平面構建圓形，接著再從xz平面將圓形轉化為圓球，這其中只需使用到三角函數而已，是不是非常簡單。
- 法線使用的是頂點坐標，因為法線與頂點其實方向是一致的
- 頂點索引為6個點，是因為每個面由兩個三角形構成
- 貼圖uv坐標不需要深度信息，它對應上貼圖的xy坐標即可
下面就是構建網格模型的基本邏輯:
const radius = 8;//半徑
const n = 20;//經緯度格數
const position = [];//頂點
const normal = [];//法線
const texcoord = [];//uv坐標
const indices = [];//頂點索引
let x, y, z;
for (let i = 0; i < n; i++) {
const rad = Math.PI / n * i - Math.PI / 2;//從-90度開始計算
const r = radius * Math.cos(rad);
y = radius * Math.sin(rad);
for (let j = 0; j < n; j++) {
x = r * Math.sin(xRadian * j);
z = r * Math.cos(xRadian * j);
position.push(x, y, z);
texcoord.push(j / n, i / n);
normal.push(x, y, z); //頂點作為法線，法線從圓心360度放射
const c = i * (n + 1) + j
indices.push(c, c + 1, c + l + 1, c, c + l + 1, c + l);//平面的索引
}
}
編寫著色器
和普通著色器相比，只是增加了uv坐標，uv直接通過頂點著色器差值透傳到片段著色器即可，在片段著色器使用texture2D函數獲取uv坐標對應的顏色，整體上也是比較基礎。
// 頂點著色器
attribute vec4 aPosition;
attribute vec4 aNormal;
attribute vec2 aTexcoord;
uniform mat4 modelMatrix;
uniform mat4 vpMatrix;
varying vec3 fragPos;
varying vec3 fragNor;
varying vec2 texcoord;
void main() {
gl_Position = vpMatrix * modelMatrix * aPosition;
fragPos= vec3(modelMatrix * aPosition);
fragNor = vec3(modelMatrix * aNormal);
texcoord = aTexcoord;
}
// 片段著色器
precision mediump float;
uniform vec3 viewPos;
uniform vec3 lightPos;
uniform vec3 lightColor;
uniform vec3 ambientColor;
uniform sampler2D diffMap;
varying vec3 fragPos;
varying vec3 fragNor;
varying vec2 texcoord;
void main() {
vec3 normal = normalize(fragNor);
vec3 color = texture2D(diffMap, texcoord).rgb;
// 光線方向
vec3 lightDir = normalize(lightPos - fragPos);
// 光線方向和法向量夾角
float cosTheta = max(dot(lightDir, normal), 0.0);
// 漫反射
vec3 diffuse = lightColor * color * cosTheta;
// 環境光
// ...
// 高光
// ...
gl_FragColor = vec4(ambient + diffuse + specular, 1.0);
}
實現3D地球
最后實現部分就和之前的webgl基本邏輯一致，不過要準備好地球貼圖
地圖
圖片加載完將構建好的貼圖sampler傳入著色器即可，其他都是基礎業務邏輯，不再詳述，這樣我們就將三維地球實現了
//...
const vpMatrix = m4.identity();
const uniforms = {
modelMatrix: m4.identity(),
lightPos: [20, 0, -20],
lightColor: [1, 1, 1],
ambientColor: [0.5, 0.5, 0.5],
};
gl.clearColor(0.1, 0.1, 0.1, 1);
gl.enable(gl.DEPTH_TEST);//深度測試
gl.enable(gl.CULL_FACE);//背面剔除
gl.viewport(0, 0, canvas.width, canvas.height); //設置繪圖區域
gl.useProgram(program.program);
function animate() {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
m4.multiply(projection, m4.inverse(m4.lookAt(eye, [0, 0, 0], [0, 1, 0])), vpMatrix);
setBuffersAndAttributes(gl, vao);
setUniforms(program, { vpMatrix });
drawBufferInfo(gl, vao);
gl.bindVertexArray(null);
requestAnimationFrame(animate);
};
//加載貼圖后執行
createTexture(gl, { src: '/img/earth.jpg', flipY: true }, texture => {
uniforms.diffMap = texture;
setUniforms(program, uniforms );
animate();
});
