GLTF教程翻译
GLTF教程翻譯
- 1. 使用WebGL介紹GLTF
- 2. GLTF的基本結構
- 2.1 GLTF核心
- 2.2 對外部數據的引用
- 參考
本教程介紹了GLTF,GL傳輸格式。它總結了GLTF最重要的特征和應用案例,并描述了與GLTF相關的文件的結構。它解釋了如何讀取,處理,并用于有效地顯示GLTF assets中的3D圖形。
另外需要了解JSON的一些基本知識,JavaScript對象表示法。此外,需要對常用圖形API(如OpenGL或WebGL)的基本了解。本教程專注于GLTF 2.0版,其中介紹了對物理上基于渲染的支持,但此處解釋的其他概念類似于它們在GLTF版本1.0中實現的方式。
1. 使用WebGL介紹GLTF
越來越多的應用程序和服務基于3D內容。網上商店提供帶3D預覽的產品配置器。博物館用3D掃描將文物數字化,讓游客探索虛擬畫廊的集合。城市規劃師使用3D城市模型進行規劃和信息可視化。教育工作者創建人體的交互式動畫3D模型。許多這些應用程序直接在Web瀏覽器中運行,這是可能的,因為所有現代瀏覽器都支持使用WebGL的高效渲染。
GLTF是3D場景傳輸格式的定義:
- 使用JSON描述了場景結構,這非常緊湊,可以輕松解析。
- 對象的3D數據以可由公共圖形API直接使用的形式存儲,因此沒有用于解碼或預處理3D數據的開銷。
- GLTF可能有助于彌合內容創建和渲染之間的差距
2. GLTF的基本結構
2.1 GLTF核心
GLTF的核心是JSON文件,此文件描述了3D場景的整個內容。它由場景結構本身的描述組成,其由定義場景圖的節點的層次提供。 場景中出現的3D對象是使用連接到節點的網格定義的。材料定義對象的外觀。動畫描述3D對象如何隨著時間的推移轉換3D對象(例如,旋轉到轉換),并且Skins定義了對物體的幾何形狀的方式基于骨架姿勢變形。攝像機描述了渲染器的視圖配置。
JSON結構
“meshes” :
[
{ … }
{ … }
…
],
場景對象 Mesh 存儲在JSON文件中的數組中??梢允褂脭到M中的相應對象的下標索引訪問它們:
“nodes”:
[
{ “mesh”: 0, … },
{ “mesh”: 5, … },
…
}
這些 Nodes 也用于定義對象之間的關系。上面的示例定義了多個網格,并且節點可以使用網格索引指示這些網格中的一個,以指示網格應該附加到此節點:
以下圖像(從GLTF概念部分調整)概述了GLTF資產的JSON部分的頂級元素:
以上元素概括描述如下:
- scene 是存儲在GLTF中的場景描述的入口點。它指的是定義場景圖的節點。
- node 是scene 圖層次結構中的一個節點。它可以包含變換(例如,旋轉或平移),并且它可以參考進一步(兒童)節點。另外,它可以指的是“連接”到節點的網狀或相機實例camera,或者對描述網格變形的皮膚skin。
- camera 定義了呈現場景的視圖配置。
- mesh 描述了一個出現在場景中的幾何對象。它是指用于訪問實際幾何數據的訪問器對象accessor,以及在渲染時定義對象外觀的材料material。
- skin 定義了頂點皮膚所需的參數,這允許基于虛擬字符的姿勢對網格的變形animation。這些參數的值是從訪問器獲得的。
- animation 描述某些節點的轉換如何隨時間變化的節點(例如,旋轉或平移)。
- accessor 用作任意數據的抽象來源。它由網格mesh,皮膚skin和動畫animation使用,并提供幾何數據,皮膚參數和時間相關的動畫值。它指的是bufferView緩沖器,是包含實際原始二進制數據的緩沖區buffer的一部分。
- materail 包含定義對象外觀的參數。它通常是指將應用于渲染的幾何體的紋理對象。
- texture 紋理由采樣器和圖像定義。采樣器定義了如何將紋理圖像放在對象上。
2.2 對外部數據的引用
二進制數據binary,如幾何和3D對象的紋理texture,通常不包含在JSON文件中。相反,它們存儲在專用文件中,json部分僅包含與這些文件的鏈接。這允許二進制數據以非常緊湊的形式存儲,并且可以在網上有效地傳輸。另外,數據可以以可直接在渲染器中直接使用的格式存儲,而無需解析,解碼或預處理數據。
二進制數據只是從緩沖區的URI讀取的原始內存塊,沒有固有的含義或結構。緩沖區buffer,緩沖器bufferView 和訪問者accessor 部分將顯示如何使用有關數據類型和數據布局的信息來擴展該原始數據。利用該信息,數據的一部分可以被解釋為動畫數據,另一部分可以被解釋為幾何數據。以二進制形式存儲數據允許它比JSON格式更有效地將其傳輸到Web上,并且二進制數據可以直接傳遞給渲染器bufferView,而無需解碼或預處理它。
參考
- https://github.com/KhronosGroup/glTF-Tutorials/blob/master/gltfTutorial/gltfTutorial_001_Introduction.md
總結
- 上一篇: 使用Python,OpenCV进行图像哈
- 下一篇: IDEA配置NodeJS项目遇到问题及解