背景
最近小組在探索研發一個 3D 的沙盒小遊戲 demo。對於沙盒遊戲來說,地面是必不可少的元素。為了降低難度,在這個 demo 中,地面將不涉及 y 軸座標的變化,也就是使用一個與 xOz 平面平行的平面,對應到現實世界中,就是一塊不帶任何起伏的平地。本篇文章以 babylon.js 作為框架進行說明。期望的效果類似下圖(截圖來自於手遊部落衝突):
目標
首先我們需要在 xOz 平面上建立一塊矩形作為地面。為了不讓地面看起來過於單調,需要給地面貼上一些紋理,比如草地、鵝卵石路等等;在此基礎上,紋理還需要可以區域性替換,比如可以實現一條在草地中央的鵝卵石小路。同時,在地面上,需要放置其他模型(比如人物、建築等),為了避免模型在移動或者新增的時候,出現重疊的情況,還得知道當前地面上對應的位置的狀態(是否已被模型佔用),因此在新增或移動模型的時候,需要獲取當前模型在地面上的具體位置資訊。基於以上需求,可以梳理為以下兩個大目標:
- 完成地面初始化,且可以改變特定位置的紋理
- 獲取模型在地面上的位置資訊
圍繞這兩個目標,下面通過兩個實現篇,給大家展示下如何一步步實現~
實現之地面建立篇
首先要把思路捋一下:先是需要建立一個地面,其實地面的本質也是一個模型。其次要修改地面的部分紋理。有一個比較簡單的方法,就是把地面給細分為一個個網格,每個網格可以單獨的進行紋理貼圖,每次更換紋理的時候,也不會影響其他格子。
定義好一些常量,以便後面的講解。這些常量只需要先看一下,有個基本的印象即可,後面用到的時候,會具體解釋。
//地面的長度(x方向)
const GROUND_WIDTH = 64
//地面的寬度(z方向
const GROUND_HEIGHT = 64
//地面紋理的寬度
const TEXTURE_WIDTH = 1024
//地面紋理的高度
const TEXTURE_HEIGHT = 1024
//一個方向上(s和t座標方向),把地面分為多少個小塊
const GROUND_SUBDIVISION = 32
下面是具體的步驟。
1. 建立一塊平地
查閱 babylon.js 的相關文件,直接呼叫api即可建立,程式碼比較簡單,直接貼到下面:
const ground = MeshBuilder.CreateGround(
name,
{ width: GROUND_WIDTH, height: GROUND_HEIGHT, subdivisions: GROUND_SUBDIVISION },
scene,
)
上面程式碼中,用到了三個在這一篇剛開始就已經定義好的常量 GROUND_WIDTH、GROUND_HEIGHT 和 GROUND_SUBDIVISION。前兩個常量分別代表的是要建立的地面的寬高,都是 64。它們所屬的座標系是裁剪座標系。由於 WebGL 中應用了很多座標系,可能有些同學還不是很瞭解,推薦去看看這篇文章WebGL座標系基礎。 至於 GROUND_SUBDIVISION 這個常量,指的是要把矩形的一條邊,分為多少段,這一篇是把地面的 x、z 方向都分成了 32 段。
簡單的一行程式碼,就可以建立出一塊平地了,看看效果:
2. 給“大地”貼上紋理
複雜的功能總是由一個個簡單的功能演變來的。首先先做最簡單的一步,先給我們剛剛建立好的這塊大地,貼上紋理,隨便找一張草地的圖片,檢視babylon.js材質與紋理這一部分文件,先給地面一個材質,然後在材質上進行貼圖,程式碼如下:
//建立一個標準材質
const groundMaterial = new StandardMaterial('groundMaterial', scene);
//建立一個紋理
const groundTexture = new Texture('//storage.360buyimg.com/model-rendering-tool/files/jdLife/grass.jpg', scene)
//把紋理賦值給材質的漫反射紋理(這裡也可以是其他型別的紋理)
groundMaterial.diffuseTexture = groundTexture
//把材質賦值給地面的材質屬性
ground.material = groundMaterial
現在地面已經有了紋理貼圖了:
3. 分割地面為一個個格子
在上一步,雖然已經實現了給地面貼紋理,但是效果肯定是不能滿足預定的需求的。如果對WebGL有相關了解的同學,應該會知道,如果要給材質的特定位置,貼上特定的紋理,就需要獲取材質上頂點資料,然後打上圖釘,再在紋理貼圖中,根據頂點對應的圖釘點,來獲取需要的圖片的位置。這應該是一步比較複雜的操作,而且 babylon.js 封裝的比較深,如果直接暴力的去實現起來,會是比較大的工程。
於是,本著 babylon.js 應該有封裝好的類,可以實現(或者經過簡單的改動後可以實現)這個需求的猜測,再次翻閱它的文件,終於找到一個類似的例子。為了方便閱讀,直接擷取效果圖展示出來:
看了一下這個例子的程式碼,可以總結為:
- 使用了 babylon.js 的
AdvancedDynamicTexture.CreateForMesh
高階動態紋理為地面建立紋理。 - 高階動態紋理提供了 addControl 方法,可以往紋理上新增各種“容器”。
- “容器”是 Babylon.js 的一個類 Container。
- “容器”也有 addControl 方法,可以在“容器”裡面繼續新增“容器”,即可以“套娃”。
babylon.js 的 AdvancedDynamicTexture 的實現原理,在這裡先不討論,但是現在有了上面這些知識點,結合 demo,就能對地面進行分格了。直接上程式碼,把步驟寫在了註釋裡:
//首先呼叫AdvancedDynamicTexture的api,建立紋理
const groundTexture = GUI.AdvancedDynamicTexture.CreateForMesh(ground, TEXTURE_WIDTH, TEXTURE_HEIGHT, false)
//建立最外層的Container -- panel,它的寬高和紋理的一致
const panel = new GUI.StackPanel()
panel.height = TEXTURE_HEIGHT + 'px'
panel.width = TEXTURE_WIDTH + 'px'
//把panel新增到紋理上
groundTexture.addControl(panel)
//迴圈的建立一列列Row,並且加到panel上面
for (let i = 0; i < GROUND_SUBDIVISION; i++) {
const row = new GUI.StackPanel()
row.height = TEXTURE_HEIGHT / GROUND_SUBDIVISION + 'px'
//把row新增到panel上
panel.addControl(row)
row.isVertical = false
//在迴圈的,在每一行裡面建立一個個格子
for (let j = 0; j < GROUND_SUBDIVISION; j++) {
const block = new GUI.Rectangle()
block.width = TEXTURE_WIDTH / GROUND_SUBDIVISION + 'px'
row.addControl(block)
}
}
程式碼裡用到了 TEXTURE_WIDTH 和 TEXTURE_HEIGHT 兩個常量,它們分別代表的是紋理的寬高。相對紋理的尺寸有更多瞭解的同學,可以參考下 WebGL紋理詳解之三:紋理尺寸與Mipmapping 這篇文章的解釋,這裡不展開細談。
看看這時候的效果:
4. 給每個格子單獨貼圖,並且儲存紋理 Image 物件
這裡的 Image 指的是 Babylon.js 裡面的一個類,為了方便下文直接稱它 Image。
為什麼要給每個格子單獨貼圖,這個無需解釋了。至於為什麼要儲存每個格子的紋理Image物件,是為了方便後面去修改貼圖。由於在建立這些格子的時候,是通過迴圈建立的,所以它們本身已經具備一定的順序了,因此只要把它們在建立的時候,都push到一個陣列裡面(blockImageArray),讀的時候按照建立的順序傳入索引就可以了。
實現的時候,還是先實現最簡單的,讓每個格子的紋理都一樣就好了。在上一步的程式碼基礎上新增,程式碼如下:
...
//在迴圈的,在每一行裡面建立一個個格子
for (let j = 0; j < GROUND_SUBDIVISION; j++) {
const block = new GUI.Rectangle()
block.width = TEXTURE_WIDTH / GROUND_SUBDIVISION + 'px'
row.addControl(block)
//隱藏格子的邊框
block.thickness = 0
//建立Image物件
const blockImage = new GUI.Image('blockTexture','//storage.360buyimg.com/model-rendering-tool/files/jdLife/grass.jpg')
//把圖片新增到block上
block.addControl(blockImage)
//在外面的定義域裡面先建立好blockImageArray
blockImageArray.push(blockImage)
}
值得注意的是,上述程式碼在建立 Image 物件的時候,是直接通過url進行動態匯入的,這會造成,每次建立一個Image,就去發一個請求,顯然是存在效能問題的。
於是,再一次翻查babylon.js的文件,尋求優化方案。Image 有一個 domImage 屬性,值的型別為 HTMLImageElement,可以通過修改這個屬性,來修改圖片內容。所以只要事先載入圖片生成 HTMLImageElement 並且儲存在 imageSource ,在建立Image的時候,對它的 domImage 屬性進行賦值即可。優化後的程式碼:
//把需要的圖片匯入好,放到imageSource裡面
const imageSource : { [key: string]: HTMLImageElement } = { grass: img, stone: img }
...
//建立image的時候不再傳遞url引數了
const blockImage = new GUI.Image()
//對domImage屬性賦值
blockImage.domImage = imageSource.grass
現在來看一下效果:
5. 更改紋理
經過了上一步的操作,已經建立出來了一塊有模有樣的綠地了,接下來需要做的是紋理更換的功能。先實現個最簡單的:在最外層的 panel 監聽點選事件,通過點選的位置,判斷當前點選的是地面的第幾行第幾列,然後找到 blockImageArray 對應的元素,對它的 domImage 進行再賦值就好了。程式碼如下:
panel.onPointerClickObservable.add(e => {
const { y, x } = e
const perBlockWidth = TEXTURE_WIDTH / GROUND_SUBDIVISION
const perBlockHeight = TEXTURE_HEIGHT / GROUND_SUBDIVISION
const row = Math.floor(y / perBlockHeight)
const col = Math.floor(x / perBlockWidth)
const index = row * GROUND_SUBDIVISION + col
blockObjArr[index].domImage = imageSource.stone
})
看看現在的效果:
到此為止,就已經實現了建立地面並且可以改變紋理這個目標了。
實現之模型佔位計算篇
名詞:
- 地面:案例中的平面
- 模型:案例中需要計算佔位的物體
- 索引編號:二維陣列的下標
- 網格座標系:將地面分割為均等網格而形成的座標系
- WebGL 座標系:原始 WebGL 座標系
- 模型基點:模型原點
- 轉換:從一個值換算到另一個值
- 糾偏:把原有的座標數值加上偏正值(這裡是半個格子的長度或寬度)
- 包圍盒:能把模型整個包起來的最小長方體 bounding
流程圖:https://www.processon.com/vie...
經過上一篇的實現,現在已經建立了一塊地面,並將地面等分成了若干個網格。這時要獲取模型在地面上的佔位情況,就需要轉換為獲取模型在地面上所佔格子的資料。下圖展示了,一個模型(房子)在地面上所佔的格子的情況(被佔的格子邊框顯示為紅色):
為了看起來直觀一些,我們將在下面的說明中把地面分割成 8*8 的網格體系。
以下是涉及到的常量:
//重新定義一下,讓地面分為 8 * 8 的網格
const GROUND_SUBDIVISION = 8
//每一個格子在相機裁剪座標系中的寬度
const PER_BLOCK_VEC_X = GROUND_WIDTH / GROUND_SUBDIVISION
//每一個格子在相機裁剪座標系中的高度
const PER_BLOCK_VEC_Z = GROUND_HEIGHT / GROUND_SUBDIVISION
//模型位置向量在x軸方向的偏移量
const CENTER_OFF_X = PER_BLOCK_VEC_X / 2
//模型位置向量在z軸方向的偏移量
const CENTER_OFF_Z = PER_BLOCK_VEC_Z / 2
//半個格子在相機裁剪座標系中的寬度
const HALF_BLOCK_VEC_X = PER_BLOCK_VEC_X / 2
//半一個格子在相機裁剪座標系中的高度
const HALF_BLOCK_VEC_Z = PER_BLOCK_VEC_Z / 2
要確切地知道地面上的模型佔用了哪幾個格子,首先得建立地面網格座標系。還記得在上一篇中,生成這些格子的時候,是通過兩個 for 迴圈生成的嗎,其實在生成這些格子的時候,同時也產生了索引。為了閱讀方便,我再貼一下生成網格的程式碼:
for (let i = 0; i < GROUND_SUBDIVISION; i++) {
const row = new GUI.StackPanel()
row.height = TEXTURE_HEIGHT / GROUND_SUBDIVISION + 'px'
//把row新增到panel上
panel.addControl(row)
row.isVertical = false
//在迴圈的,在每一行裡面建立一個個格子
for (let j = 0; j < GROUND_SUBDIVISION; j++) {
const block = new GUI.Rectangle()
block.width = TEXTURE_WIDTH / GROUND_SUBDIVISION + 'px'
row.addControl(block)
//建立貼圖
const blockImage = new GUI.Image()
//對domImage屬性賦值
blockImage.domImage = imageSource.grass
block.addControl(blockImage)
blockImageArray.push(blockImage)
}
}
可以理解為,每個網格的 i 和 j 就對應著它們在 z 方向和 x 方向的座標。
根據每個網格在網格座標系的 x 和 z 座標,設定索引編號(每個網格對應一個座標),索引編號的資料結構為:
interface Coord {
x: number,
z: number
}
放到 8*8 網格座標系中即為:
上面這張圖是不是比較好理解了呢,看起來就像我們初中學習的平面直角座標系,原點在左上角,x 軸為水平方向從左向右,z 軸是垂直方向從上到下。
對應到程式碼中,我們可以通過建立一個二維陣列,來儲存這個網格座標系。這樣就可以用地面網格的座標作為索引,在二維陣列中尋找對應的值,以判斷該網格上是否有模型佔位。
1. 建立網格座標系座標集合陣列:groundStatus
網格座標系座標集合陣列 groundStatus
,我們把它定義為一個 number
二維陣列。
groundStatus
資料結構如下:
type GroundStatus = number[][]
二維陣列中的每個元素與網格座標系中的座標一一對應。每個座標對應的初始值為 0
,代表當前座標沒有被佔位,當有模型放置在上面時,值 +1;當模型移開或刪除時,值 -1。不使用 boolean 作為儲存型別的原因,是因為 boolean 只有 true 和 false 兩種狀態,不能滿足更為複雜的需求,比如在移動模型的時候,出現模型重疊的情況的時候,groundStatus
對應的格子上,就會有兩個模型。如果用 boolean 來表示的話,是沒辦法表示出來的,因為它只有 true 和 false 兩種值。但是如果使用 number 的話,就可以在該格子對應的元素,把值修改為 2,標識單前格子上有兩個模型佔位了。
在設計 groundStatus 索引時,以 x 還是 z 座標為一維索引,在效能影響上區別不大。出於除錯方面的考慮,建議以 z 座標為一維索引,便於瀏覽器的控制檯二維陣列的展示與網格座標系一一對應。
2. 模型基點向量與網格座標系座標的換算
模型基點向量指的是模型資料中的 position 屬性,定義了模型在 WebGL 座標系中的位置。position 是一個三維向量,遵守的是 WebGL 座標系,比如當 position 值為 (0, 0, 0) 的時候,出現在地面的位置就是地面的中心點。為了方便,下文我都會把它叫做,模型的基點。
圖片來源:在InfraWorks中編輯3D模型的基點或插入點
WebGL 座標系的 (0, 0, 0) 換算成地面座標系,就是網格座標 (3, 3)、(3, 4)、(4, 3)、(4, 4) 這四個格子的交點。如下圖所示:
黃色的方塊,代表圓點在地面上所佔的格子。實際佔位只有1格的模型,在這個位置向上取整的時候,最小的佔位也是4個格子,一旦涉及到碰撞檢測等功能,會出現模型佔位過大的問題。所以我們需要對中心點進行偏移,使模型在網格座標系中的佔位儘量接近模型真實佔位,往右下角——x、z 各偏移半個網格的單位即可,這時候 (0, 0, 0) 對應的基點座標就是 (4, 4) 格子的中心點了。偏移的原則是保證模型的基點能落在網格座標系的某個格子的中點,以便更為準確地進行模型佔位的計算。如下圖:
這裡值得注意的是,當我們傳入模型的位置向量為 (x, y, z) 的時候,我們會手動的把模型的位置改為 (x + CENTER_OFF_X, 0, z - CENTER_OFF_Z)(Y 軸向量本次不涉及計算,因此可以省略)。z 向量的計算為減法,因為 WebGL 座標系的 z 軸向上為正的,而網格座標系 z 軸向上為負。
這裡我們封裝一個傳入模型的位置向量、返回該點的地面座標的函式:
function getGroundCoordByModelPos(buildPosition: Vector3): Coord {
const { _x, _z } = buildPosition
const coordX = Math.floor(GROUND_WIDTH / 2 / PER_BLOCK_VEC_X + (_x + CENTER_OFF_X) / PER_BLOCK_VEC_X)
const coordZ = Math.floor((GROUND_HEIGHT / 2 - (_z - CENTER_OFF_Z)) / PER_BLOCK_VEC_Z)
return { x: coordX, y: coordZ }
}
3. 獲取模型佔位區在 WebGL 座標系的關鍵資料
這一步是為了獲取模型的實際佔位相關資料,為後續的網格座標系佔位轉換做準備。
模型存在最小包圍盒的概念,也叫最小邊界框,用於界定模型的幾何圖元。包圍盒/邊界框可以是矩形,也可以是更為複雜的形狀,為方便描述,我們這裡採用矩形包圍盒/邊界框的方式進行說明。下文中簡稱包圍盒。
圖片來源:3D 碰撞檢測
當我們將 WebGL 座標系的模型投射到網格座標系上時,可以得到一片區域:
黃色區域代表的是模型佔位區域,黑色點則是模型的基點。babylon.js 提供了相關的 api,可以計算出模型包圍盒的邊界與基點的距離,這裡的值均基於 WebGL 座標系。
我們將這些距離儲存到 rawOffsetMap 的物件中,資料結構如下:
interface RawOffsetMap {
rawOffsetTop: number
rawOffsetBottom: number
rawOffsetLeft: number
rawOffsetRight: number
}
計算程式碼如下:
/*
@param { AbstractMesh[] } meshes 模型匯入後返回的結果
@param { Vector3 } scale 模型的縮放倍數
*/
function getRawOffsetMap(meshes: AbstractMesh[], scale: Vector3 = new Vector3(1, 1, 1)): RawOffsetMap {
//宣告最小的向量
let min = null
//宣告最大的向量
let max = null
//對模型的meshes陣列進行遍歷
meshes.forEach(function (mesh) {
//babylon.js 提供的api,可以遍歷該mesh的和mesh的所有子mesh,找到它們的邊界
const boundingBox = mesh.getHierarchyBoundingVectors()
//如果當前的最小向量不存在,那麼把當前的mesh的boundingBox的min屬性賦值給它
if (min === null) {
min = new Vector3()
min.copyFrom(boundingBox.min)
}
//如果當前的最大向量不存在,那麼把當前的mesh的boundingBox的max屬性賦值給它
if (max === null) {
max = new Vector3()
max.copyFrom(boundingBox.max)
}
//對最小向量和當前的boundingBox的min屬性,從x,y,z這三個分量進行比較與再賦值
min.x = boundingBox.min.x < min.x ? boundingBox.min.x : min.x
min.y = boundingBox.min.y < min.y ? boundingBox.min.y : min.y
min.z = boundingBox.min.z < min.z ? boundingBox.min.z : min.z
//對最大向量和當前的boundingBox的max屬性,從x,y,z這三個分量進行比較與再賦值
max.x = boundingBox.max.x > max.x ? boundingBox.max.x : max.x
max.y = boundingBox.max.y > max.y ? boundingBox.max.y : max.y
max.z = boundingBox.max.z > max.z ? boundingBox.max.z : max.z
})
return {
rawOffsetRight: max.x * scale.x,
rawOffsetLeft: Math.abs(min.x * scale.x),
rawOffsetBottom: max.z * scale.z,
rawOffsetTop: Math.abs(min.z * scale.z)
}
}
4. 獲取模型佔位區在網格座標系上的關鍵資料:offsetMap
這一步是將模型 WebGL 座標系的佔位關鍵資料轉換為網格座標系中的資料。
如上圖所示,黃色的格子,代表的是模型基點所在的格子。紅色是模型在網格座標系轉化之後的佔位——當模型邊界佔位不滿一格的時候(比如只佔了格子的一半),按佔滿一格來算。這四個資料,我們使用 offsetMap 物件來儲存:
interface OffsetMap {
offsetLeft: number,
offsetRight: number,
offsetTop: number,
offsetBottom: number
}
在上一節中,已經計算出模型的 rawOffsetTop,rawOffsetBottom,rawOffsetLeft,rawOffsetRight。現在只要把這幾個關鍵值一一轉化為 offsetMap 對應的關鍵值即可。
上圖中黃色區域是模型在 WebGL 座標系中的佔位,紅色區域是將模型佔位向上取整後,在網格座標系中所佔網格的集合。rawOffsetMap 與 offsetMap 中欄位的轉化關係為:rawOffsetLeft 對應 offsetLeft;rawOffsetRight 對應 offsetRight;rawOffsetTop 對應 offsetTop;rawOffsetBottom 對應 offsetBottom。以 rawOffsetLeft 轉化為 offsetLeft 為例,將 rawOffsetLeft 減去半個格子的寬度(HALF_BLOCK_VEC_X),然後除以一個格子的寬度(PER_BLOCK_VEC_X),再向上取整。下面為具體程式碼:
function getModelOffsetMap(rawOffsetMap: RawOffsetMap): OffsetMap {
const { rawOffsetMapLeft, rawOffsetRight, rawOffsetBottom, rawOffsetTop } = rawOffsetMap
const offsetLeft = Math.ceil((rawOffsetLeft - HALF_BLOCK_VEC_X) / PER_BLOCK_VEC_X)
const offsetRight = Math.ceil((rawOffsetRight - HALF_BLOCK_VEC_X) / PER_BLOCK_VEC_X)
const offsetTop = Math.ceil((rawOffsetTop - HALF_BLOCK_VEC_Z) / PER_BLOCK_VEC_Z)
const offsetBottom = Math.ceil((rawOffsetBottom - HALF_BLOCK_VEC_Z) / PER_BLOCK_VEC_Z)
return {
offsetBottom,
offsetLeft,
offsetRight,
offsetTop
}
}
5. 計算出模型在網格座標系的包圍盒索引:bounding
這一步我們將計算出模型包圍盒在 groundStatus 中的索引下標,以便通過 groundStatus 來判斷對應網格是否已被佔位。bounding 即為佔位模型在 groundStatus 資料中的幾個邊界索引值。
bounding 的資料結構如下:
interface Bounding {
minX: number,
maxX: number,
minZ: number,
maxZ: number
}
還是先通過一張圖,解釋一下 bounding 物件中的四個值指的什麼:
上圖中,紅色區域是模型在網格座標系中所佔網格。bounding 資料中的四個值,代表了模型包圍盒邊界網格在 groundStatus 中的索引陣列下標,作為更新 groundStatus 中的佔位數值的依據。
基於第4步中得到的 offsetMap 資料,結合第2步中的基點座標,即可算出最終的 bounding:
function getModelBounding(buildPosition: Vector3, offsetMap: OffsetMap): IBounding {
const modelGroundPosCoord = getGroundCoordByModelPos(buildPosition)
const { x, y } = modelGroundPosCoord
const { offsetBottom, offsetLeft, offsetRight, offsetTop } = offsetMap
const minX = x - offLeft
const maxX = x + offRight
const minZ = y - offTop
const maxZ = y + offBottom
return {
minX,
maxX,
minZ,
maxZ
}
}
至此,關於模型的 bounding 的計算就完成了。
6. 更新佔位資料
在上一步,已經獲取到了模型在地面座標系的 bounding,這時候只需利用bounding的值,對 groundstatus 進行賦值就好了,程式碼如下:
//索引邊界判斷
function isValidIndex(x: number, z: number): boolean {
if (x >= 0 && x < GROUND_SUBDIVISION && z >= 0 && z < GROUND_SUBDIVISION) return true
return false
}
function setModlePosition(groundStatus: GroundStatus, bounding: Bounding) {
const { minX, maxX, minZ, maxZ } = bounding
for (let i = minZ; i <= maxZ; i++) {
for (let j = minX; j <= maxX; j++) {
if (isValidIndex(j, i))
groundStatus[i][j]++
}
}
}
後續的待優化項
該專案的地面時一塊平地,沒有考慮深度方面的資訊。如果是在地面有起伏的場景下,現在的資料結構是不足以應付的。如果是那種階梯式高度的場景(地面由n片高度不同的平地構成),那麼至要把 groundStatus 陣列的元素的資料結構進行改造,加入地面高度標識的屬性即可以滿足需求。但是如果是那種高低起伏並且帶有坡度的地形,那麼很難進行改造。
成品展示
參考連結
- WebGL紋理詳解之三:紋理尺寸與Mipmapping -- http://www.jiazhengblog.com/b...
- WebGL座標系基礎 -- https://juejin.cn/post/689079...
babylon.js 官網 -- https://www.babylonjs.com/
歡迎關注凹凸實驗室部落格:aotu.io
或者關注凹凸實驗室公眾號(AOTULabs),不定時推送文章。