做了很多年的應(yīng)用開發(fā)想要在技術(shù)上有些突破，是時(shí)候?qū)W點(diǎn)真正的技術(shù)了，我選擇了3D技術(shù)，經(jīng)過一番搜索，Orillusion 著實(shí)讓我感動(dòng)，滿足了我所有的要求，并且國(guó)產(chǎn)引擎能提供全面的中文資料支持和更小的交流成本

為什么選擇Orillusion

沒有專業(yè)的對(duì)比，僅憑我個(gè)人的好惡盲目來選擇，簡(jiǎn)單從這兩個(gè)方面來考慮

Native or Web?

如果您是專業(yè)人士建議詳細(xì)對(duì)比兩種類型的發(fā)展歷史和原理再做出判斷，對(duì)于我一個(gè)3D新手來說，有一個(gè)簡(jiǎn)單粗暴的判斷思路，那就是在應(yīng)用系統(tǒng)上，CS架構(gòu)仍在某些特定領(lǐng)域仍然存在，但是能夠遷移到BS的，幾乎都在大規(guī)模的遷移到了BS架構(gòu)上，所以我挺Web渲染架構(gòu)。

足夠新

新人就要有新人的覺悟，老牌的各路引擎已經(jīng)有無數(shù)高手浸淫其中多年了，冒然投入進(jìn)去會(huì)被沉重的歷史信息淹沒，作技術(shù)還是要有點(diǎn)野心的新手終有一天會(huì)成老鳥，所以要選擇最新推出的面向最新技術(shù)架構(gòu)的引擎，那么有多新呢，標(biāo)準(zhǔn)還沒正式應(yīng)用的夠新吧，那就是以面向WebGPU為第一圖形標(biāo)準(zhǔn)實(shí)現(xiàn)功能，至于WebGPU是什么，我的理解是更新、更快、更強(qiáng)，至于具體如何做到，相信以后我們會(huì)知道的。

準(zhǔn)備工作

唯一必須的的準(zhǔn)備工作是做好心理建設(shè)，不要想一口吃成個(gè)胖子，不要過早深究原理，我們的目標(biāo)是借助引擎的能力來實(shí)現(xiàn)3D效果，除此以外還有兩件小事需要留意。

開發(fā)環(huán)境

理論可以不借助任何第三方庫(kù)運(yùn)行Orillusion框架，所以我們先體驗(yàn)一下最簡(jiǎn)化的版本。 但是隨著功能的增多，推薦node+vite+vue這套工具鏈，當(dāng)然可以用其它任何熟悉的開發(fā)工具完全可以，所以建議請(qǐng)安裝好nodejs，并配置好環(huán)境變量，同時(shí)假設(shè)vue3已經(jīng)可以正常使用。這里我使用vite作為項(xiàng)目創(chuàng)建工具，使用vscode做編輯器，沒有其它的前置條件，輕裝上陣。如果這一步有什么疑問，請(qǐng)自行查找資料，相信聰明的你不會(huì)被難住。

運(yùn)行環(huán)境

由于WebGPU標(biāo)準(zhǔn)并未正式推出，需要使用開發(fā)瀏覽器，這里推薦 Chrome Canary ，下載后在在Canary中運(yùn)行效果，由于Canary仍然在變動(dòng)中，需要在地址欄中輸入 chrome://flags/#enable-unsafe-webgpu，然后開啟 Unsafe WebGPU 選項(xiàng)。

如果無法開啟或者沒有效果，需要搜索最新的開啟方法，相信不久的將來在正式版就可以附帶WebGPU支持了，不需要這么繁瑣了。同時(shí)為了做兩手準(zhǔn)備，也可以考慮用?Edge Canary?來應(yīng)個(gè)急，下載后正常安裝，啟動(dòng)后在地址欄中輸入edge://flags/#enable-unsafe-webgpu，開啟WebGPU支持。在瀏覽器正式版本支持WebGPU之前，關(guān)于瀏覽器的支持情況會(huì)經(jīng)常變化，如果不能正確訪問，建議多尋找一下當(dāng)下的信息。

Hello 3D

參照官方文檔，使用CDN直接引用Orullision引擎庫(kù)是最簡(jiǎn)單的方式，為了做最簡(jiǎn)單的體驗(yàn)不引用任何第三方。創(chuàng)建一個(gè)html文件，使用任何一款支持資源加載的服務(wù)軟件都可以直接運(yùn)行。比如nginx、tomcat、live Server等。

運(yùn)行后可以在瀏覽器直接查看效果，如果出現(xiàn)問題請(qǐng)查看控制臺(tái)日志，比較容易出錯(cuò)的是WebGPU支持問題，請(qǐng)注意查看準(zhǔn)備工作部分。

創(chuàng)建項(xiàng)目

以一個(gè)用戶數(shù)比較多的vue3作為示例(當(dāng)然用react或完全不用框架完全可行)，使用從頭開始搭建一個(gè)Orillusion項(xiàng)目。 這里我們先創(chuàng)建一個(gè)普通的vue3項(xiàng)目，再將引擎引入項(xiàng)目，操練起來吧，很快就能看到我們?cè)谧鍪裁戳恕?/p>

1 創(chuàng)建根目錄

a. 選擇一個(gè)文件夾，創(chuàng)建orillusion目錄?

b. 進(jìn)入orillusion，并在該目錄下打開命令提示行

2?創(chuàng)建項(xiàng)目

a. 執(zhí)行命令 npm create vite@latest?

b. Project name 下輸入 hello3d 作為項(xiàng)目名并回車?

c. 使用鍵盤方向鍵選擇 vue 作為框架，并回車?

d. 仍然使用鍵盤方向鍵選擇 vue-ts 作為項(xiàng)目類型，并回車，已經(jīng)創(chuàng)建了 hello3d 項(xiàng)目目錄結(jié)構(gòu)?

e. 輸入 cd hello3d 進(jìn)入項(xiàng)目目錄

f. 輸入 npm install 安裝依賴包，至此，基本的vue3項(xiàng)目已經(jīng)創(chuàng)建完成

3 安裝Orillusion

a. 輸入?npm install @orillusion/core --save?安裝?orillusion?開發(fā)包(如果安裝失敗，請(qǐng)注意分辨網(wǎng)絡(luò)原因或安裝權(quán)限)

b. 輸入?npm run dev?，可以看到在5173端口啟動(dòng)了服務(wù)

c. 打開?canary?瀏覽器，輸入完整地址可以看到顯示了vue3的歡迎頁(yè)，至此項(xiàng)目已經(jīng)安裝完成，后面進(jìn)行開發(fā)。

Orillusion是基于瀏覽器的Web渲染引擎，采用了最新的WebGPU標(biāo)準(zhǔn)來提供底層的圖形能力。引擎的整體框架采用了現(xiàn)代引擎遵循的ECS組件式架構(gòu)，以更為嚴(yán)謹(jǐn)?shù)腡ypeScript作為開發(fā)語(yǔ)言。通過集群前向渲染和動(dòng)態(tài)全局光照，使得整體的3D場(chǎng)景計(jì)算效率和渲染效果得到了質(zhì)的提升。目前，Orillusion引擎還處于快速迭代升級(jí)階段，很多桌面級(jí)的圖形能力，都將因?yàn)閃ebGPU標(biāo)準(zhǔn)的出現(xiàn)而遷移到Web端。同時(shí)，基于瀏覽器的Web環(huán)境，天然地賦予了我們很多應(yīng)用層面的優(yōu)勢(shì)，比如易分享、易協(xié)作、易上手、跨平臺(tái)等等。因此，Web3D領(lǐng)域孕育著巨大的想象空間。

編寫代碼

1.在 vscode 中打開?hello3d?目錄

2.在?src?目錄下新建目錄?demo

3.在 demo 目錄下創(chuàng)建文件?hello.ts

? ? ?

可以看到核心代碼和cdn引入方式基本相同，這里請(qǐng)?jiān)试S有一些冗余的存在，以便對(duì)與我一樣的小白更友好一些。

完成項(xiàng)目

可以看到，創(chuàng)建完一個(gè)項(xiàng)目后，只添加了hello.ts文件和修改了App.vue。這樣一個(gè)真正的3D項(xiàng)目開發(fā)完成了，再在瀏覽器里面看一下運(yùn)行效果(不要忘記在Canary)。

你得到了一個(gè)可以用鼠標(biāo)操作的立方體，按住左鍵拖拽可以任意旋轉(zhuǎn)，滑動(dòng)滾動(dòng)可以調(diào)整距離，按住右鍵拖拽可以快速調(diào)整立方體位置，可以多操作一下熟悉一下這種最常見的操作方式。

回憶我剛運(yùn)行這一步時(shí)還是有點(diǎn)激動(dòng)的，終于邁進(jìn)了3D技術(shù)的大門，盡管是借用了引擎的助力，不過我們程序員就要擅長(zhǎng)找到適合自己的工具。

代碼解析

作為3D小白，我的目標(biāo)是始于Orillusion但不會(huì)止于某一引擎，通過充分熟悉一個(gè)引擎的用法來積累3D知識(shí)。可以看到每一個(gè)類都對(duì)應(yīng)著3D世界的基礎(chǔ)概念，在這里做一個(gè)簡(jiǎn)單的對(duì)應(yīng)，順便看看一個(gè)3D世界由哪些部分組成的，當(dāng)然這里只有一個(gè)基礎(chǔ)印象即可，不必深究。

立方體：我們看到的立方體，是一個(gè)基礎(chǔ)幾何體，由類BoxGeometry來創(chuàng)建，實(shí)例化這個(gè)類在構(gòu)造函數(shù)中指定長(zhǎng) 寬 高，引擎就會(huì)為我們繪制出一個(gè)立方體，就像我們看到的這樣。

相機(jī)：相機(jī)是一個(gè)比較抽象但是在3D中無處不在，可以理解成我們的眼睛，我們是通過相機(jī)來觀察3D內(nèi)景物的，比如前面的立方體要在相機(jī)的可視范圍內(nèi)我們才能看到，在這里用組件Camera3D來定義。

場(chǎng)景：是一個(gè)容器，前面的立方體、相機(jī)等等還有其它的對(duì)象、組件都是要添加到場(chǎng)景內(nèi)才能被引擎組織和使用的，我們創(chuàng)建一個(gè)3D程序必須有一個(gè)場(chǎng)景，我們可以通過Scene3D類創(chuàng)建場(chǎng)景

這里只介紹了三個(gè)最基礎(chǔ)的組成部分，幾何體、相機(jī)、場(chǎng)景，這三個(gè)部分在每一個(gè)3D程序中都是最基礎(chǔ)的不可少的，以后我們會(huì)逐漸深入了解他們，也將會(huì)慢慢知道更多的工具。

小結(jié)

這篇文章是個(gè)開篇，快速上手了一個(gè)入門級(jí)別的3D示例，主要的作用并不是學(xué)習(xí)3D的基本技能，可以說更重要的是消除疑惑，最簡(jiǎn)單的上手3D項(xiàng)目。不得不說Orillusion沒有讓我失望，以我目前這么簡(jiǎn)單的訴求也不會(huì)讓我失望吧。

作為3D新手，后續(xù)會(huì)不斷的記錄學(xué)習(xí)過程，期待與你一起學(xué)習(xí)一起飛！

Orillusion致力于打造全世界第一款完全開源基于WebGPU標(biāo)準(zhǔn)的一種輕量級(jí)渲染引擎,目標(biāo)是在瀏覽器中實(shí)現(xiàn)桌面級(jí)的渲染效果，支持超大復(fù)雜場(chǎng)景的3D呈現(xiàn)。易上手，易分享，易迭代，易協(xié)作、成本低，跨平臺(tái)是我們的核心優(yōu)勢(shì)，我們將為3D場(chǎng)景爆發(fā)時(shí)代提供引擎基礎(chǔ)工具。

未來我們將會(huì)持續(xù)把最干貨最前沿的WebGPU技術(shù)分享給每一位社區(qū)成員，也歡迎大家為Orillusion開源社區(qū)做出自己的貢獻(xiàn)。我們一直堅(jiān)信，開源社區(qū)的技術(shù)留痕是每一位技術(shù)人員最崇高的追求！因此，我們尊重，我們認(rèn)可，我們更期待，加入Orillusion，讓我們共同進(jìn)步！

——Link uncharted, 鏈接未來世界?