WebGL之繪製三維地球

Jeff.Zhong發表於2021-04-26
Web

通過Three.js也許可以很方便的展示出3D模型，但是你知道它是怎麼一步一步從構建網格到貼圖到最終渲染出3D模型的嗎？現在我們直接使用底層的webgl加上一點點的數學知識就可以實現它。

本節實現的效果: WebGL三維地球
WebGL三維地球

內容大綱

  1. 構建網格

  2. 編寫著色器

  3. 實現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();
});

相關文章