本书从AR/VR理论知识点到专题技术知识点(场景、灯光、材质等)都做了非常详细的讲解,将晦涩的专题技术知识点以通俗易懂的语言进行描述,并且引入相应的小规模案例,便于读者在动手实操的过程中更加轻松地理解它们。对于之前没有接触过HTML CSS开发的读者,本书还提供了在线图形化开发WebXR应用的详细步骤(详见第5章),通过一些简单的操作步骤就能够制作出效果不俗的应用进行发布和预览,因此对于初学者非常友好。
本书内容
全书分为6章,其中第1章为概述部分,第2章和第3章为WebXR技术的框架部署、代码规范和开发组件的讲解,第4~6章为WebXR开发综合案例。各章主要内容介绍如下。
第1章主要介绍了虚拟现实、增强现实以及混合现实这3种技术的概念、技术特征、实现的相关原理以及实现所需的相关硬件设备环境,让读者从感性认识方面出发了解这3种技术的相关知识。
第2章介绍了WebXR技术的发展以及目前主流WebXR技术开发使用的框架。本章讲解了Three.js、AFrame以及Babylon.js这3种框架的使用方法、代码编写风格以及小型案例实现的效果。
第3章是正式步入WebXR开发的前置章节,重点讲解了在Babylon.js框架下WebXR开发中所必须掌握的模块创建方法,包括场景、灯光、相机、动画、音频、材质等的创建,并且针对其中的代码以及API的使用做了详细的说明。
第4章以中国典型传统建筑三维展示项目为例,详细介绍了WebXR开发环境搭建、案例介绍与工程创建以及场景创建、场景交互的开发步骤和方法,使读者能够深入理解并掌握商用WebXR案例的开发流程。
第5章介绍了在线图形化开发WebXR应用的具体步骤,对于编程基础较弱的初学者非常友好,读者可以根据书中的内容在图形化界面中完成WebXR开发的每一步操作,并最终完成测试与预览。
第6章以目前国内WebXR商业项目开发主流使用的Cocos Creator引擎作为开发工具,以第十四届全运会为背景,通过Cocos Creator引擎开发一款带有皮影戏风格的全运会比赛项目的WebXR游戏,让使用者在体验WebXR游戏的同时,还能够了解全运会各比赛项目的比赛规则,可以说本章案例非常具有代表性,也非常接近真实商业项目的规模。
开发环境
本书每个章节所使用的开发工具可能都不一样,但是,只要开发人员所使用的开发主机硬件环境满足如下相关配置要求即可。
序号
配置项
配 置 要 求
1
CPU
2核4线程 1.8GHz及以上
2
内存
4GB及以上
3
操作系统
Windows 7/10/11
4
硬盘
500GB及以上(系统盘预留至少15GB剩余空间)
5
网络
有线或者无线网络(仅限于需要在官方下载资源包的情景)
6
显卡
入门级的独立显卡及以上
配套资源
教学课件、程序代码和素材资源包(约1GB)等,扫描下方二维码或者到清华大学出版社官方网站本书页面获取。
配套资源
本书还提供一些网络上的辅助学习视频,需关注微信公众号观看,具体获取方式见配套资源中的说明。
致谢
作者要特别感谢对本书写作有帮助的所有人,正是他们的帮助以及悉心指导才让作者有了完成本书的信心。
首先,感谢陕西加速想象力教育科技有限公司,该公司建立的AR/VR训练营为广大AR/VR开发爱好者提供了非常丰富的学习资源,并对本书的一些实现思想、素材等提供了适当的参考。同时,张克发经理以及公司技术人员在作者写书的过程中积极参与,并且提供了非常多的指导和帮助。
其次,感谢各WebXR技术官方网站提供的开源WebXR开发框架(Three.js/AFrame/Babylon.js/AR.js/Cocos Creator等)以及相关的开发手册,使作者在本书的每个章节论述相关的理论知识点或者是重点操作说明时能够有章可循。官方开发手册不仅是编写本书的重要参考依据,同时也是WebXR开发初学者必须关注的资源。
期望本书的问世能够激发更多WebXR开发爱好者和初学者的学习兴趣,降低WebXR开发学习的入门门槛。
在本书的编写过程中,得到了省部共建藏语智能信息处理及应用国家重点实验室、青海省物联网重点实验室、高原科学与可持续发展研究院、青海师范大学计算机学院领导和师生的热心支持,书中使用了课题组的大量资料,在此致以诚挚的谢意。
另外,书中各部分教学内容得到第二批新工科项目面向区域的多学科交叉融合新工科人才培养探索与实践(编号: EDXKJC20200527)、青海省科技厅重点研发与转化计划项目(编号: 2022SF165)、国家重点研发计划公共文化服务装备研发及应用示范(编号: 2020YFC1523300)和青海师范大学校级教学研究项目(编号: qhnujy2021102)创新基金的资助。
由于作者水平有限,书中难免存在不足之处,敬请读者批评指正。
谢平2023年3月于西宁
第1章虚拟现实基础
1.1增强现实介绍
1.1.1增强现实概念
1.1.2增强现实技术特点
1.1.3增强现实技术发展
1.1.4增强现实技术分类
1.1.5增强现实的技术原理
1.2虚拟现实介绍
1.2.1虚拟现实概念
1.2.2虚拟现实的特性
1.2.3虚拟现实技术发展
1.2.4虚拟现实技术分类
1.2.5虚拟现实技术原理
1.3混合现实介绍
1.3.1混合现实概念
1.3.2混合现实内容设计
1.3.3混合现实中的交互设计
1.3.4混合现实体验舒适度
1.3.5混合现实内容设计的视觉表现
1.4虚拟现实硬件设备介绍
1.4.1PC端头显设备
1.4.2一体式头显设备
1.4.3移动端头显设备
1.5增强现实硬件设备介绍
1.5.1微软HoloLens智能眼镜
1.5.2Magic Leap
1.5.30glass AR
1.5.4HoloMax全息交互系统
1.5.5XMAN智能眼镜
第2章WebXR介绍
2.1WebGL介绍
2.1.1基本概念
2.1.2发展历史
2.1.3应用场景
2.2WebXR技术发展与现状
2.2.1W3C标准化组织
2.2.2昙花一现的WebVR API
2.2.3WebXR API介绍
2.3Three.js框架介绍
2.3.1基于Python的Web服务器搭建
2.3.2基于NPM的Web服务器搭建
2.4AFrame框架介绍
2.5Babylon.js引擎介绍
2.5.1初始化网页
2.5.2初始化3D场景
2.5.3创建三维物体
2.5.4修改物体的材质
第3章WebXR开发基础
3.1一行代码让网站支持3D和VR
3.2场景创建
3.2.1快速创建场景
3.2.2场景创建API说明
3.3场景灯光
3.3.1灯光的类型
3.3.2灯光颜色的设置
3.3.3灯光开关和调光器
3.4场景阴影
3.4.1阴影生成
3.4.2透明物体和阴影
3.4.3灯光与阴影的关系
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设计动画
3.7.2序列动画
3.8音频
3.8.1创建音频文件
3.8.2通过事件触发音频播放
3.8.3音乐属性
3.8.4通过ArrayBuffer来加载音频文件
3.8.5通过资源管理器加载音频文件
3.9相机和网格
3.9.1相机的行为
3.9.2网格的行为
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材质
3.11.1材质的创建
3.11.2漫反射
3.11.3环境光颜色
3.11.4透明颜色
3.11.5纹理
3.11.6透明纹理
3.11.7显示模型线框
第4章中国传统建筑三维展示案例开发
4.1基于VSCode开发环境配置
4.1.1安装VSCode开发工具
4.1.2Live Server插件安装
4.1.3在VSCode中调试代码
4.2PBR材质的使用
4.2.1PBR材质简介
4.2.2PBR基础理论
4.2.3PBR材质的制作
4.2.4使用Blender导出glTF模型
4.2.5在Sandbox中查看模型效果
4.3模型导出
4.3.1常见的3D模型格式
4.3.2从3ds Max软件导出glTF模型
4.3.3从Blender导出glTF模型
4.3.4在Sandbox中查看glTF模型
4.4加载页面
4.4.1基础页面创建
4.4.2创建加载页面
4.5场景加载
4.5.1设置Canvas
4.5.2初始化引擎
4.5.3创建场景Scene
4.5.4游戏循环
4.5.5相机的创建
4.5.6创建天空盒
4.5.7创建环境灯光
4.5.8模型加载
4.6场景交互
4.6.1UI的创建
4.6.2音乐的创建和控制
4.6.3场景中物体的交互
第5章WebAR解决方案介绍
5.1基于Kivicube的WebAR应用开发
5.1.1项目创建
5.1.2场景创建
5.1.3创建场景内容
5.1.4创建场景交互
5.1.5场景保存与分享
5.2基于EasyAR的WebAR应用开发
5.2.1EasyAR WebAR简介
5.2.2EasyAR WebAR快速入门
5.2.3EasyAR Web3D模型动画要求
5.3基于开源的AR.js应用开发
5.3.1图像跟踪案例
5.3.2基于位置的AR案例
5.3.3基于标记的AR案例
第6章Web游戏非遗庆全运开发案例
6.1案例介绍
6.2Cocos Creator引擎
6.2.1Cocos Creator引擎简介
6.2.2引擎安装
6.2.3使用Dashboard
6.2.4Hello World
6.3场景创建
6.3.1场景资源
6.3.2节点和组件
6.3.3坐标系和节点变换属性
6.3.4使用场景编辑器搭建场景图像
6.4游戏动画
6.4.1动画帧
6.4.2Sprite
6.4.3动画片段
6.4.4SpriteAnimation类的实现
6.4.5编辑SpriteAnimation
6.5游戏UI交互
6.5.1UI入门
6.5.2Canvas组件
6.5.3UI变换组件
6.5.4Widget组件
6.5.5Button组件
6.6游戏发布
6.6.1熟悉构建发布面板
6.6.2构建选项介绍
参考文献