《WebXR案例開發(fā)基于Web3D引擎的虛擬現(xiàn)實技術(shù)》詳細講解了 Babylon.js框架的使用方法、代碼編寫風(fēng)格以及詳細的案例實現(xiàn)步驟和效果展示，使讀者逐步對 WebXR 的學(xué)習(xí)產(chǎn)生濃厚的興趣。書中由淺入深地講解了WebXR案例的開發(fā)過程，在講述技術(shù)知識點的基礎(chǔ)上，詳細分析每個案例的具體開發(fā)和實現(xiàn)過程，以便讀者能夠?qū)⒅皩W(xué)習(xí)的WebXR 技術(shù)相關(guān)模塊在綜合案例中融會貫通。本書還提供了WebXR技術(shù)相關(guān)的輔助學(xué)習(xí)視頻資源，助力WebXR開發(fā)愛好者快速入門。開發(fā)后的WebXR應(yīng)用可發(fā)布至云平臺，方便用戶直接通過移動端或PC端的瀏覽器進行訪問和體驗。 《WebXR案例開發(fā)基于Web3D引擎的虛擬現(xiàn)實技術(shù)》適合作為高等院校數(shù)字媒體相關(guān)專業(yè)的教材或指導(dǎo)書，也可作為WebXR 開發(fā)人員或初學(xué)者的參考書。
本書結(jié)合虛擬現(xiàn)實技術(shù)和增強現(xiàn)實技術(shù)的發(fā)展趨勢，在Babylon.js等WebXR引擎框架下，按照理論知識 代碼編寫 效果展示的結(jié)構(gòu)體系進行案例章節(jié)的內(nèi)容講解。
? 自頂向下，循序漸進。綜合案例按照先案例效果展示說明，后單獨模塊開發(fā)講解的自頂向下、循序漸進原則進行編排，先提升讀者的學(xué)習(xí)興趣，再積極投入到案例開發(fā)過程。
? 內(nèi)容豐富，案例新穎。本書編者具有多年的虛擬現(xiàn)實、增強現(xiàn)實和WebXR項目的開發(fā)經(jīng)驗以及教學(xué)經(jīng)驗，提供的綜合案例符合當(dāng)下使用瀏覽器訪問虛擬現(xiàn)實應(yīng)用的便捷性要求，案例的選擇具有中國傳統(tǒng)文化的特色。
? 理論簡潔，易學(xué)易懂。在講解WebXR開發(fā)基礎(chǔ)知識時，理論講解簡潔明了，使WebXR初學(xué)者易學(xué)易懂。
? 資源豐富，便于教學(xué)。為了便于教師教學(xué)，提供全套的教學(xué)資料，獲取方式詳見前言。
本書從AR/VR理論知識點到專題技術(shù)知識點(場景、燈光、材質(zhì)等)都做了非常詳細的講解，將晦澀的專題技術(shù)知識點以通俗易懂的語言進行描述，并且引入相應(yīng)的小規(guī)模案例，便于讀者在動手實操的過程中更加輕松地理解它們。對于之前沒有接觸過HTML CSS開發(fā)的讀者，本書還提供了在線圖形化開發(fā)WebXR應(yīng)用的詳細步驟(詳見第5章)，通過一些簡單的操作步驟就能夠制作出效果不俗的應(yīng)用進行發(fā)布和預(yù)覽，因此對于初學(xué)者非常友好。
本書內(nèi)容
全書分為6章，其中第1章為概述部分，第2章和第3章為WebXR技術(shù)的框架部署、代碼規(guī)范和開發(fā)組件的講解，第4~6章為WebXR開發(fā)綜合案例。各章主要內(nèi)容介紹如下。
第1章主要介紹了虛擬現(xiàn)實、增強現(xiàn)實以及混合現(xiàn)實這3種技術(shù)的概念、技術(shù)特征、實現(xiàn)的相關(guān)原理以及實現(xiàn)所需的相關(guān)硬件設(shè)備環(huán)境，讓讀者從感性認識方面出發(fā)了解這3種技術(shù)的相關(guān)知識。
第2章介紹了WebXR技術(shù)的發(fā)展以及目前主流WebXR技術(shù)開發(fā)使用的框架。本章講解了Three.js、AFrame以及Babylon.js這3種框架的使用方法、代碼編寫風(fēng)格以及小型案例實現(xiàn)的效果。
第3章是正式步入WebXR開發(fā)的前置章節(jié)，重點講解了在Babylon.js框架下WebXR開發(fā)中所必須掌握的模塊創(chuàng)建方法，包括場景、燈光、相機、動畫、音頻、材質(zhì)等的創(chuàng)建，并且針對其中的代碼以及API的使用做了詳細的說明。
第4章以中國典型傳統(tǒng)建筑三維展示項目為例，詳細介紹了WebXR開發(fā)環(huán)境搭建、案例介紹與工程創(chuàng)建以及場景創(chuàng)建、場景交互的開發(fā)步驟和方法，使讀者能夠深入理解并掌握商用WebXR案例的開發(fā)流程。
第5章介紹了在線圖形化開發(fā)WebXR應(yīng)用的具體步驟，對于編程基礎(chǔ)較弱的初學(xué)者非常友好，讀者可以根據(jù)書中的內(nèi)容在圖形化界面中完成WebXR開發(fā)的每一步操作，并最終完成測試與預(yù)覽。
第6章以目前國內(nèi)WebXR商業(yè)項目開發(fā)主流使用的Cocos Creator引擎作為開發(fā)工具，以第十四屆全運會為背景，通過Cocos Creator引擎開發(fā)一款帶有皮影戲風(fēng)格的全運會比賽項目的WebXR游戲，讓使用者在體驗WebXR游戲的同時，還能夠了解全運會各比賽項目的比賽規(guī)則，可以說本章案例非常具有代表性，也非常接近真實商業(yè)項目的規(guī)模。
開發(fā)環(huán)境
本書每個章節(jié)所使用的開發(fā)工具可能都不一樣，但是，只要開發(fā)人員所使用的開發(fā)主機硬件環(huán)境滿足如下相關(guān)配置要求即可。
序號
配置項
配 置 要 求
1
CPU
2核4線程 1.8GHz及以上
2
內(nèi)存
4GB及以上
3
操作系統(tǒng)
Windows 7/10/11
4
硬盤
500GB及以上(系統(tǒng)盤預(yù)留至少15GB剩余空間)
5
網(wǎng)絡(luò)
有線或者無線網(wǎng)絡(luò)(僅限于需要在官方下載資源包的情景)
6
顯卡
入門級的獨立顯卡及以上
配套資源
教學(xué)課件、程序代碼和素材資源包(約1GB)等，掃描下方二維碼或者到清華大學(xué)出版社官方網(wǎng)站本書頁面獲取。
配套資源
本書還提供一些網(wǎng)絡(luò)上的輔助學(xué)習(xí)視頻，需關(guān)注微信公眾號觀看，具體獲取方式見配套資源中的說明。
致謝
作者要特別感謝對本書寫作有幫助的所有人，正是他們的幫助以及悉心指導(dǎo)才讓作者有了完成本書的信心。
首先，感謝陜西加速想象力教育科技有限公司，該公司建立的AR/VR訓(xùn)練營為廣大AR/VR開發(fā)愛好者提供了非常豐富的學(xué)習(xí)資源，并對本書的一些實現(xiàn)思想、素材等提供了適當(dāng)?shù)膮⒖肌Ｍ瑫r，張克發(fā)經(jīng)理以及公司技術(shù)人員在作者寫書的過程中積極參與，并且提供了非常多的指導(dǎo)和幫助。
其次，感謝各WebXR技術(shù)官方網(wǎng)站提供的開源WebXR開發(fā)框架(Three.js/AFrame/Babylon.js/AR.js/Cocos Creator等)以及相關(guān)的開發(fā)手冊，使作者在本書的每個章節(jié)論述相關(guān)的理論知識點或者是重點操作說明時能夠有章可循。官方開發(fā)手冊不僅是編寫本書的重要參考依據(jù)，同時也是WebXR開發(fā)初學(xué)者必須關(guān)注的資源。
期望本書的問世能夠激發(fā)更多WebXR開發(fā)愛好者和初學(xué)者的學(xué)習(xí)興趣，降低WebXR開發(fā)學(xué)習(xí)的入門門檻。
在本書的編寫過程中，得到了省部共建藏語智能信息處理及應(yīng)用國家重點實驗室、青海省物聯(lián)網(wǎng)重點實驗室、高原科學(xué)與可持續(xù)發(fā)展研究院、青海師范大學(xué)計算機學(xué)院領(lǐng)導(dǎo)和師生的熱心支持，書中使用了課題組的大量資料，在此致以誠摯的謝意。
另外，書中各部分教學(xué)內(nèi)容得到第二批新工科項目面向區(qū)域的多學(xué)科交叉融合新工科人才培養(yǎng)探索與實踐(編號： EDXKJC20200527)、青海省科技廳重點研發(fā)與轉(zhuǎn)化計劃項目(編號： 2022SF165)、國家重點研發(fā)計劃公共文化服務(wù)裝備研發(fā)及應(yīng)用示范(編號： 2020YFC1523300)和青海師范大學(xué)校級教學(xué)研究項目(編號： qhnujy2021102)創(chuàng)新基金的資助。
由于作者水平有限，書中難免存在不足之處，敬請讀者批評指正。
謝平2023年3月于西寧
第1章虛擬現(xiàn)實基礎(chǔ)
1.1增強現(xiàn)實介紹
1.1.1增強現(xiàn)實概念
1.1.2增強現(xiàn)實技術(shù)特點
1.1.3增強現(xiàn)實技術(shù)發(fā)展
1.1.4增強現(xiàn)實技術(shù)分類
1.1.5增強現(xiàn)實的技術(shù)原理
1.2虛擬現(xiàn)實介紹
1.2.1虛擬現(xiàn)實概念
1.2.2虛擬現(xiàn)實的特性
1.2.3虛擬現(xiàn)實技術(shù)發(fā)展
1.2.4虛擬現(xiàn)實技術(shù)分類
1.2.5虛擬現(xiàn)實技術(shù)原理
1.3混合現(xiàn)實介紹
1.3.1混合現(xiàn)實概念
1.3.2混合現(xiàn)實內(nèi)容設(shè)計
1.3.3混合現(xiàn)實中的交互設(shè)計
1.3.4混合現(xiàn)實體驗舒適度
1.3.5混合現(xiàn)實內(nèi)容設(shè)計的視覺表現(xiàn)
1.4虛擬現(xiàn)實硬件設(shè)備介紹
1.4.1PC端頭顯設(shè)備
1.4.2一體式頭顯設(shè)備
1.4.3移動端頭顯設(shè)備
1.5增強現(xiàn)實硬件設(shè)備介紹
1.5.1微軟HoloLens智能眼鏡
1.5.2Magic Leap
1.5.30glass AR
1.5.4HoloMax全息交互系統(tǒng)
1.5.5XMAN智能眼鏡
第2章WebXR介紹
2.1WebGL介紹
2.1.1基本概念
2.1.2發(fā)展歷史
2.1.3應(yīng)用場景
2.2WebXR技術(shù)發(fā)展與現(xiàn)狀
2.2.1W3C標準化組織
2.2.2曇花一現(xiàn)的WebVR API
2.2.3WebXR API介紹
2.3Three.js框架介紹
2.3.1基于Python的Web服務(wù)器搭建
2.3.2基于NPM的Web服務(wù)器搭建
2.4AFrame框架介紹
2.5Babylon.js引擎介紹
2.5.1初始化網(wǎng)頁
2.5.2初始化3D場景
2.5.3創(chuàng)建三維物體
2.5.4修改物體的材質(zhì)
第3章WebXR開發(fā)基礎(chǔ)
3.1一行代碼讓網(wǎng)站支持3D和VR
3.2場景創(chuàng)建
3.2.1快速創(chuàng)建場景
3.2.2場景創(chuàng)建API說明
3.3場景燈光
3.3.1燈光的類型
3.3.2燈光顏色的設(shè)置
3.3.3燈光開關(guān)和調(diào)光器
3.4場景陰影
3.4.1陰影生成
3.4.2透明物體和陰影
3.4.3燈光與陰影的關(guān)系
3.4.4體積光散射后處理
3.5場景交互
3.5.1如何在場景中進行交互
3.5.2鍵盤的交互
3.5.3鼠標的交互
3.6相機
3.6.1通用相機
3.6.2軌道相機
3.6.3跟隨相機
3.7動畫
3.7.1設(shè)計動畫
3.7.2序列動畫
3.8音頻
3.8.1創(chuàng)建音頻文件
3.8.2通過事件觸發(fā)音頻播放
3.8.3音樂屬性
3.8.4通過ArrayBuffer來加載音頻文件
3.8.5通過資源管理器加載音頻文件
3.9相機和網(wǎng)格
3.9.1相機的行為
3.9.2網(wǎng)格的行為
3.10資源管理
3.10.1SceneLoader.Append
3.10.2SceneLoader.Load
3.10.3SceneLoader.ImportMesh
3.10.4SceneLoader.ImportMeshAsync
3.10.5SceneLoader.LoadAssetContainer
3.10.6SceneLoader.ImportAnimations
3.10.7SceneLoader.AppendAsync
3.10.8AssetsManager
3.10.9使用加載進度
3.11材質(zhì)
3.11.1材質(zhì)的創(chuàng)建
3.11.2漫反射
3.11.3環(huán)境光顏色
3.11.4透明顏色
3.11.5紋理
3.11.6透明紋理
3.11.7顯示模型線框
第4章中國傳統(tǒng)建筑三維展示案例開發(fā)
4.1基于VSCode開發(fā)環(huán)境配置
4.1.1安裝VSCode開發(fā)工具
4.1.2Live Server插件安裝
4.1.3在VSCode中調(diào)試代碼
4.2PBR材質(zhì)的使用
4.2.1PBR材質(zhì)簡介
4.2.2PBR基礎(chǔ)理論
4.2.3PBR材質(zhì)的制作
4.2.4使用Blender導(dǎo)出glTF模型
4.2.5在Sandbox中查看模型效果
4.3模型導(dǎo)出
4.3.1常見的3D模型格式
4.3.2從3ds Max軟件導(dǎo)出glTF模型
4.3.3從Blender導(dǎo)出glTF模型
4.3.4在Sandbox中查看glTF模型
4.4加載頁面
4.4.1基礎(chǔ)頁面創(chuàng)建
4.4.2創(chuàng)建加載頁面
4.5場景加載
4.5.1設(shè)置Canvas
4.5.2初始化引擎
4.5.3創(chuàng)建場景Scene
4.5.4游戲循環(huán)
4.5.5相機的創(chuàng)建
4.5.6創(chuàng)建天空盒
4.5.7創(chuàng)建環(huán)境燈光
4.5.8模型加載
4.6場景交互
4.6.1UI的創(chuàng)建
4.6.2音樂的創(chuàng)建和控制
4.6.3場景中物體的交互
第5章WebAR解決方案介紹
5.1基于Kivicube的WebAR應(yīng)用開發(fā)
5.1.1項目創(chuàng)建
5.1.2場景創(chuàng)建
5.1.3創(chuàng)建場景內(nèi)容
5.1.4創(chuàng)建場景交互
5.1.5場景保存與分享
5.2基于EasyAR的WebAR應(yīng)用開發(fā)
5.2.1EasyAR WebAR簡介
5.2.2EasyAR WebAR快速入門
5.2.3EasyAR Web3D模型動畫要求
5.3基于開源的AR.js應(yīng)用開發(fā)
5.3.1圖像跟蹤案例
5.3.2基于位置的AR案例
5.3.3基于標記的AR案例
第6章Web游戲非遺慶全運開發(fā)案例
6.1案例介紹
6.2Cocos Creator引擎
6.2.1Cocos Creator引擎簡介
6.2.2引擎安裝
6.2.3使用Dashboard
6.2.4Hello World
6.3場景創(chuàng)建
6.3.1場景資源
6.3.2節(jié)點和組件
6.3.3坐標系和節(jié)點變換屬性
6.3.4使用場景編輯器搭建場景圖像
6.4游戲動畫
6.4.1動畫幀
6.4.2Sprite
6.4.3動畫片段
6.4.4SpriteAnimation類的實現(xiàn)
6.4.5編輯SpriteAnimation
6.5游戲UI交互
6.5.1UI入門
6.5.2Canvas組件
6.5.3UI變換組件
6.5.4Widget組件
6.5.5Button組件
6.6游戲發(fā)布
6.6.1熟悉構(gòu)建發(fā)布面板
6.6.2構(gòu)建選項介紹
參考文獻
書單推薦
