现代Web开发与应用课件 第三章-从Web3D到WebXR

从Web3D到WebXR现代Web开发与应用数字化生存元宇宙的提出

科幻小说比如NealStephense的《雪崩》表现了对数字虚幻世界长期以来的渴望：有一天，人类可以进入一个模拟世界的电子网络世界，在那里人们都有自己的电子替身——个化身，通过它们人们可以见面、探险、娱乐、工作“元宇宙”一词由本书中提出。数字化生存

比特世界原子世界

数字化生存数字化与编码模拟（analog）：用按比例平滑变化的物理性质表示信息的通用术语，如温度计中的液面高度。数字的:（digital）：信息表示方式，仅采用离散数值;与模拟形成对比。数字化：将声音、图形、视频等信息转换成计算机中的二进制数。编码：信息从一种形式按照某种规则或格式转换为另一种形式的过程。解码：编码的逆过程。

XR概述XR分类

XR概述虚拟现实设备

XR概述IBM第2人生培训中心XR的广泛应用

数字化生存数字孪生

数字孪生是现有或将有的物理实体对象的数字模型，通过实测、仿真和数据分析来实时感知、诊断、预测物理实体对象的状态，通过优化和指令来调控物理实体对象的行为，通过相关数字模型间的相互学习来进化自身，同时改进利益相关方在物理实体对象生命周期内的决策。

——《数字孪生体技术白皮书（2019）》

元宇宙元宇宙的要素

传统元宇宙实例Roblox(罗布乐思)

传统元宇宙实例SecondLife(第2人生)

传统元宇宙实例Minecraft（我的世界）

传统元宇宙实例师生们在“我的世界”中进行协同学习。Minecraft（我的世界）

Web3D相关技术Unity3DViewPointShockWave3Dcult3DWebGLjava3DVirtoolsWeb3D技术可以看作是Web技术和虚拟现实技术的结合，是虚拟现实技术向互联网上的扩展，其本质是：直观的虚拟现实表示、网络性和互动性。VRML&X3D、GoogleO3DFlashStage3DColladaWeb3D相关技术Web3D相关技术VRML(theVirtualRealityModelingLanguage)VRML的首次提出是在1994年春第一届国际互联网络年会上。1996年8月,发布了VRML2.0；1997年成为ISO标准2001年8月，Web3D协会发布了新一代国际标准——X3D(可扩展3D),采用XML封装VRML

VRMLVRML的特性它的出现主要是为了在Internet范围内建立一个全球统一的基于网络的三维标准.V1.0(1994)-->V2.0(1996)->VRML97(ISO)-V3.0(X3D)

VRML是一种简单的基于文本的语言，用来描述三维场景以及交互环境

完整的三维建模语言:完整描述三维场景的物体、光、材料、环境特性和真实感效果

分布处理方式:支持多个分布式文件的多种对象和机制,包括内联式嵌入其他VRML文件,通过超链接指向其它文件

三维交互功能:能够检测用户和虚拟环境中几何造型交互动作(如按动开关，碰撞检测),用户在虚拟环境中的行为以及时间推移。检测器提供的这些信息通过由VRML定义的整个事件体系产生视觉或听觉效果,给用户造成和境界互动的交互式体验

VRMLVRML特性平台无关性：在各种操作系统下都可以渲染多媒体集成（背景音乐,空间立体声支持，电影贴图）

原型节点(PROTO)便于用户利用已有节点定义面向对象的新的节点。

使用脚本节点(Script)用户可以定义更加复杂的执行逻辑，支持VrmlScript以及Java等语言。

VRMLVRML简单介绍基本术语节点（Node）:指场景中实体，具有描绘改部分场景的所有绘图指令域

（Field）:存储在一个结点中的一个或者多个数据,或者通过一个路由发送给结点的值事件

(Events):

引发场景中状态改变的触发器eventIn:AninputeventOut:AnoutputAnexposedFieldisashort-handforafield,eventIn,andeventOut

路由

(Routes):一个确定结点的值经过的路径Thesender'snodenameandeventOutnameThereceiver'snodenameandeventInname

ROUTEMySender.rotation_changedTOMyReceiver.set_rotation

VRML一个简单的VRML例子ThefileheaderCommentsNodesFieldsandValues

VRMLShape{appearanceNULL#SFNodegeometryNULL#SFNode}

VRMLVRML中基本节点几何以及支持几何描述节点

PrimitiveShapes:Box,Cone,Cylinder,Sphere,TextElevationGrid,Extrusion,IndexFaceSet,IndexLineSet,PointSet,Shape,Coordinate

Geometry造型节点{

造型节点的域值}Box{size2.02.02.0#SFVec3f}

VRMLVRML中基本节点外观节点

Appearance,Material,Color,Normal,ImageTexture,MoiveTexture,PixelTexture,TextureTransform,TextureCCoordinate,FontStyle

Appearance{materialNULL#SFNodetextureNULL#SFNodetextureTransformNULL#SFNode}

VRMLVRML中基本节点外观节点

material包含一个Material节点；texture包含一个ImageTextrue、MovieTexture或者PixelTexture节点；textureTransform包含一个TextureTransform节点ShowcasemovieTextureusinginstantplayer

VRMLVRML中基本节点外观节点

Material{diffuseColor0.80.80.8#SFColor,mainshadingcolorambientlntensity0.2#SFFloat,ambientlightingeffectsspecularColor000#SFColor,highlightcoloremissiveColor000#SFColor,glowingcolorshininess0.2#SFFloat,highlightsizetransparency0#SFFloat,opaqueornot}

Showcaseslabs.wrlshiny.wrl

VRMLVRML中基本节点动画以及行为节点:提供支持动画,声音以及其他基于时间的活动和编程的行为

TimeSensors,ColorInterpolator,CoordinateInterpolator,NormalInterpolator,PostionInterpolator,ScalarInterpolator,

OrientationInterpolator,Script

VRMLVRML中基本节点TimeSensorThesensorgeneratestimeeventswhileitisrunningToanimate,routetimeeventsintoothernodesATimeSensornodegeneratesabsoluteandfractionaltimeeventsabsolutetimeUsefulfortriggeringeventsatspecificdatesandtimesFractionaltimeeventsgiveanumberfrom0.0to1.0

TimeSensor{cyclelnterval1#SFTimeenabledTURE#SFBoolloopFALSE#SFBoolstartTime0#SFTimestopTime0#SFTImetime#Outputstheabsolutetimefraction_changed#outputevent}ShowcasesimpleTimeSensor.wrl

VRMLVRML中基本节点位置插补器Whenatimeisinbetweentwokeypositions,theinterpolatorcomputesanintermediateposition

TypicallyrouteintoaTransformnode'sset_translationinputPositionInterpolator{key[]#MFFloatkeyValue[]#MFVec3f}

VRMLVRML中基本节点环境结点BackgroundGroundandskycolorgradientsongroundhemisphereandskyspherePanoramaimagesonapanoramaboxBackground{groundColor[]#MFColorgroundAngle[]#MFFloatskyColor[000]#MFColorskyAngle[]#MFFloatfrontUrl“”#MFStringrightUrl““#MFStringbackUrl““#MFStringleftUrl““#MFStringtopUrl““#MFStringbottomUrl““#MFString}分别指定将被映射到空间立方体各个面上的图像

VRMLVRML中基本节点环境结点Fogcolor-fogcolorfogType-LINEARorEXPONENTIALvisibilityRange-maximumvisibilitylimitfog

VRMLEAI(ExternalAuthoringInterface)

EAI允许一个JavaApplet主要以三种方式访问VRML的场景：

可以发送一个事件到VRML场景中节点的事件入口

可以收到VRML场景中节点的事件出口发出的最新值当VRML场景中节点的事件入口发出一个事件时，能得到一个通知，激活callback方法

VRML本身不具备网络通讯能力，Java提供了该功能。Java弥补VRML计算，程序设计方面的不足，可以加入复杂的逻辑BSContactJforBS_CONTACTsample1sample2

VRMLEAI(ExternalAuthoringInterface)构建NVE的机制浏览器VRML插件Java

AppletEAI网络渲染场景改变场景计算数据共享

X3D从VRML到X3DX3D™(Extensible3D)X3D是下一代的开放式的网络三维的标准整合XML:整合进下一代网络标准的关键分布性:轻量级的可发布的3D引擎内核扩展性:允许增加组件扩展功能组件是一个个独立的基本功能的模块组件设置不同的层概括性:适应指定应用需要的标准化的扩展概貌是组件的集合VRML的兼容性:保留了VRML97元素和内容，并与MPEG-4等相关标准兼容传播/镶入应用的能力:在PC以外的设备上使用3D

X3DX3DscenefileshaveacommonfilestructureFileheader(XML,ClassicVRML,CompressedBinary)X3DheaderstatementProfilestatementComponentstatements(optional)Metastatements(optional)X3DrootnodeX3Dscenegraphchildnodes

X3DWebGLWebGL以及Three.js框架

WebGLWebGLWebGL规范（/webgl无插件Web3D技术，实现OpenGLES的JavaScript绑定，可以为HTML5Canvas提供硬件3D加速渲染。

WebGLWebGL用于在任何兼容的Web浏览器中呈现交互式3D和2D图形，而无需使用插件。

WebGLWebGL编写

WebGLWebGL编写

webgl.htmlWebGLWebGL框架：Three.js封装底层的WebGL，兼顾灵活性和易用性遵循CSS-3D规范的新渲染器，兼容性更好Three.js官网地址：/Three.js库：/mrdoob/three.js/

WebGLThree.js编写

Three.js程序基本框架

基本流程：创建渲染器（renderer）创建场景（scene）添加相机（camera）添加网格模型（mesh）添加灯光（light）渲染（render）Three.js程序基本框架

Three.js相机正交投影:对于制图、建模软件通常使用正交投影

Three.js相机透视投影：更接近人眼的观察效果，大多数应用通常采用

Aspect=width/height:5500/examples/index.html#webgl_cameraThree.js几何形状储存了一个物体的顶点信息。WebGL需要程序员指定每个顶点的位置，而在Three.js中，可以通过指定一些特征来创建几何形状，

CircleGeometryConvexGeometryCubeGeometryCylinderGeometryExtrudeGeometryIcosahedronGeometryLatheGeometryOctahedronGeometryParametricGeometryPlaneGeometryPolyhedronGeometryShapeGeometrySphereGeometryTetrahedronGeometryTextGeometryTorusGeometryTorusKnotGeometryTubeGeometry使用文字形状需要下载和引用额外的字体库，可以在/下载。Three.js材质是独立于物体顶点信息之外的与渲染效果相关的属性。通过设置材质可以改变物体的颜色、纹理贴图、光照模式等。基本材质渲染后物体的颜色始终为该材质的颜色，而不会由于光照产生明暗、阴影效果。

visible：是否可见，默认为trueopacity：透明度side：渲染面片正面或是反面，默认为正面THREE.FrontSide，可设置为反面THREE.BackSide，或双面THREE.DoubleSidewireframe：是否渲染线而非面，默认为falsecolor：十六进制RGB颜色map：使用纹理贴图Three.jsLambert材质符合Lambert光照模型的材质。只考虑漫反射而不考虑镜面反射的效果，因而对于金属、镜子等需要镜面反射效果的物体就不适应。

newTHREE.MeshLambertMaterial(opt)color：是用来表现材质对散射光的反射能力，也是最常用来设置材质颜色的属性。Ambient：表示对环境光的反射能力，只有当设置了AmbientLight后，该值才是有效的。Emissive：材质的自发光颜色。Three.jsPhong材质Phong模型考虑了镜面反射的效果，因此适合对于金属、镜面的表现。漫反射部分和Lambert光照模型是相同的。

newTHREE.MeshPhongMaterial(opt)specular：镜面反射系数shininess;高光指数，越大则高光光斑越小。Three.js纹理贴图材质导入纹理将材质的map属性设置为texture，并在完成导入纹理的步骤后，重新绘制画面

Three.js纹理贴图材质重复贴图纹理，指定重复方式为两个方向（wrapS和wrapT）都重复。设置两个方向上的重复次数

Three.js网格网格是由顶点、边、面等组成的物体。创建物体需要指定几何形状和材质。其构造函数是:

Three.jsObject3D：各种3D物体的基类3D物体、光源等都是它的子类重要属性：position、rotation、scale通过改变它们来实现各种交互效果

官方文档：/docs/index.html#api/core/Object3DThree.js网格的位置、缩放、旋转THREE.Mesh继承自THREE.Object3D，因此包含scale、rotation、position三个属性。修改属性示例：

Three.js动画每秒帧数FPS（FramesPerSecond）NTSC标准的电视FPS是30，PAL标准的电视FPS是25，电影的FPS标准为24。对于Three.js动画，建议FPS在30到60之间。使用setInterval方法：

Three.js动画使用requestAnimationFrame方法requestAnimationFrame只请求一帧画面，因此在被其调用的函数中需要再次调用:有对应的cancelAnimationFrame取消动画：

Three.js动画示例

Three.js动画使用stat.js给出实时的FPS信息一个JavaScript库:/mrdoob/stats.js/blob/master/build/stats.min.js

Three.js加载外部模型：Three.js有一系列导入外部文件的辅助函数/mrdoob/three.js/tree/master/examples/js/loaders参考/examples/下loader相关例子的源代码。

Three.js加载外部模型：无材质的模型

Three.js加载外部模型：有材质的模型代码中设置材质

Three.js加载外部模型：有材质的模型建模软件中设置材质：导出.obj模型文件以及.mtl材质文件使用MTLLoader.js与OBJMTLLoader.js，并且要按改顺序引用：

Three.js加载外部模型：UV映射贴图一个物体的模型可能很复杂，对其贴图的一个简单有效的方法就是UV映射，将每个面片贴的图统一映射到一张纹理上，记录每个面片贴图在纹理上对应的位置。uv变量的类型是vec2，一个二维的向量，可以使用uv.x和uv.y分别访问到uv两个维度的值。

Three.js加载外部模型：外部模型动画

/Blender构建动画和导出模型Three.js光照：LightAmbientLight:环境光，基础光源，它的颜色会被加载到整个场景和所有对象的当前颜色上。PointLight：点光源，朝着所有方向都发射光线SpotLight：聚光灯光源：类型台灯，天花板上的吊灯，手电筒等DirectionalLight：方向光，又称无限光，从这个发出的光源可以看做是平行光.

Three.js阴影在Three.js中，能形成阴影的光源只有THREE.DirectionalLight与THREE.SpotLight；能表现阴影效果的材质只有THREE.LambertMaterial与THREE.PhongMaterial在初始化时，告诉渲染器渲染阴影：对于光源以及所有要产生阴影的物体调用：对于接收阴影的物体调用：

Three.js阴影类比透视投影照相机，对于聚光灯，需要设置shadowCameraNear、shadowCameraFar、shadowCameraFov三个值。类比正交投影照相机，对于平行光，需要设置shadowCameraNear、shadowCameraFar、shadowCameraLeft、shadowCameraRight以及shadowCameraBottom六个值。为了看到阴影照相机的位置，通常可以在调试时开启light.shadowCameraVisible=true。

Three.js光照与阴影光线追踪

Three.js后期处理编程处理流程创建THREE.EffectComposer（效果组合器）对象，在该对象上可以添加后期处理通道。配置THREE.EffectComposer对象，使它可以渲染场景，并应用后期处理。

Three.js后期处理编程处理流程在渲染循环中，使用THREE.EffectComposer来渲染场景、应用通道和输出结果。

Three.js后期处理通道以及功能概述

Three.js后期处理通道以及功能概述

Three.js使用THREE.ShaderPass自定义效果着色器着色器可以对先前渲染的结果做修改，包括对颜色、位置等等信息，甚至可以实现高级的渲染效果。Three.js自带了一些着色器程序。

Three.js使用THREE.ShaderPass自定义效果着色器WebGL的着色器程序大致与GLSL（GLShadingLanguage）相同，是一种接近C语言的代码。WebGL基于OpenGLES，因此WebGL支持的着色器有顶点着色器与片元着色器。顶点着色器：对于每个顶点调用一次。可以修改顶点的位置或者颜色等信息，然后传入片元着色器。片元着色器：片元是栅格化之后，在形成像素之前的数据。片元着色器是每个片元会调用一次的程序，因此，片元着色器特别适合用来做图像后处理。

Three.js着色器顶点着色器用于改变每个顶点的位置，对于后期处理着色器位置基本不变。4种WebGL限定符const：常量attribute：从JavaScript代码传递到顶点着色器中，每个顶点对应不同的值uniform：每个顶点/片元对应相同的值varying：从顶点着色器传递到片元着色器中片元着色器本身不能访问到uv信息，需要从顶点着色器中传递过去，将其命名为vUv。按默认的方式计算顶点位置。

Three.js着色器片元着色器顶点着色器可以用于改变每个顶点的位置，片段着色器可以用于定义每个像素的颜色。将vUv的两个维度分别对应到红绿通道

Three.js着色器着色器代码的位置：可以写在单独的文件中：顶点着色器的文件名后缀为.vs，片元着色器的文件名后缀为.fs。采用JQuery实现从服务器得到着色器，并构建材质

Three.js着色器HTML中的着色器代码定义顶点着色器定义片元着色定义材质

Three.js着色器自定义灰度图着色器示例编写自定义着色器

Three.js着色器自定义灰度图着色器示例使用自定义着色器设置THREE.EffectComposer在渲染循环中调用composer.render(delta)方法Three.js雾：FoxExp2:随着距离的增加，密度指数增加，参数是颜色和密度指数。THREE.Fog：密度线性变大；参数是颜色，雾开始出现的最小距离，以及物体被雾遮挡的最大距离。

Three.js粒子系统三维计算机图形学中模拟一些特定的模糊现象的技术使用粒子系统模拟的现象有火、爆炸、烟、水流、火花、落叶、云、雾、雪等效果。Webglcloud

Three.js粒子系统使用THREE.SpriteMaterial创建和样式化粒子。使用THREE.Points创建一个粒子集合。Three.js加载音频参考/docs/index.html#api/audio/Audio

Three.js天空盒Skybox实际上是一个立方体对象。用户视角只在盒子内部活动，所以只需要渲染盒子内部表面。天空盒子应当足够大，使得摄像机在移动时看天空仍然觉得足够远。但是，天空盒子不能超出摄像机最远可视范围。

Three.js物理引擎Physi.js，Cannon.js，ammo.js碰撞检测Raycaster：检测射线与物体相交可用于鼠标选择物体、简单的两物体间碰撞检测等/docs/index.html#api/core/Raycaster

Three.js物理引擎Physijsammo.js的包装器。ammo.js是一个实现了物理引擎的库。引入并设置属性创建了一个应用了物理效果的新场景，并设置重力

Three.js物理引擎Physijs使用Physijs的特定对象将几何对象包装起来在创建的场景上调用simulate方法Three.js辅助功能：网格线THREE.GridHelper坐标轴THREE.AxisHelper

Three.js交互与输入控制参考：/examples/下misc/controls模拟飞行：controls/fly第一人称控制器：controls/pointerlock

Three.js交互与输入控制TrackballControls

控制器包含相应的控制器js库文件：创建和设置控制器的属性在动画渲染中更新控制器

Three.js交互与输入控制第一人称控制器FirstPersonControls包含相应的控制器js库文件：设置定时器和控制器的属性在动画渲染中更新控制器

Three.js交互与输入控制Raycaster射线拾取把canvas坐标系的位置转化为webgl坐标系中的屏幕坐标位置，且做了归一化处理。调用raycaster的方法setFromCamera,可以获得一条和相机朝向一致，从鼠标点出发的射线；调用射线与物体相交的检测函数intersectObjects。第二个参数为true，检测子物体。演示，nginx服务器下：http://localhost:9090/city.htmlWebGLWebGL可视化编辑网站学习站点：/blog/

/editor/WebGLWebGL框架

/webgl/wiki/User_Contributions#FrameworksWebGLWebGL框架示例：Thingjs/

基于WebGL的NVE网络虚拟环境（NetworkedVirtualEnvironment)利用计算机图形学、计算机网络、人工智能、人机接口等计算机技术构造的一个真实世界的模拟，地理上分布的用户可以通过网络共享该环境，并多通道地与周围的环境以及在相互之间进行交互。

基于WebGL的NVE分布式虚拟环境必须具有以下功能：可视模拟真实世界：三维模拟构造真实世界；支持多媒体内容；通过硬件给用户触觉等真实感受。数据共享：该环境中的数据可以在一定规则下被进入的用户共享。用户应该看到的是一个统一的视图。交互性：用户能以替身(Avatar)形式出现，并通过一定的输入设备与环境和其他用户进行交互。虚拟现实的3I特征浸没感（Immersion）交互性（Interactivity）构想性（Imagination）

基于WebGL的NVE基于WebGL的多人环境示例：一个开源多人环境DEMO源码地址：/PMLS3/3D-multi-player演示地址：04:3000/

基于WebGL的NVE场景与用户的交互更新典型的游戏循环：JavaScript的游戏循环使用requestAnimationFrame代替whilefunctionloop(){

processInput();update();

render();requestAnimationFrame(loop);}

基于WebGL的NVE网络同步帧同步在客户端执行，服务器转发每个玩家的输入进行同步。保证各个客户端在每个逻辑帧输入一致，并得到相同的结果的强同步方案。

基于WebGL的NVE网络同步状态同步在服务器执行同步，服务器下发游戏中每个实体当前的状态进行同步。允许各个客户端的外在表现不同，只确保它们内部的逻辑状态统一的弱同步方案。

基于WebGL的NVE网络同步帧同步vs状态同步有大量用户的场景下更适合采用状态同步，比如MMORPG。帧同步基于“同样的输入+同样的代码=同样的输出”原则，进行客户端本地计算，不需要设计复杂的网络协议去同步数据，适合角色状态极为复杂的场景，比如MOBA。帧同步容易受不同平台计算差别的影响，比如实现浮点数计算的不同方式。并且容易在客户端作弊。帧同步更适合采用UDP实现，主要是在网络波动情况下，TCP的准确重传机制会导致阻塞；但是需要克服UDP的时序和丢包问题。

基于WebGL的NVE网络功能所有玩家相互可见：ClientServerOtherClient“我加入游戏啦”“我把xxx在本地画出来”“广播：xxx加入游戏啦”

基于WebGL的NVE网络功能行为分享：ClientServerOtherClient“我移动到(x,y,z)啦”“我把xxx在本地的化身移动到(x,y,z)”“广播：xxx移动到(x,y,z)啦”

基于WebGL的NVE网络功能行为分享：客户端定时上报自身的位置信息functionloop(){

processInput();update();

render();requestAnimationFrame(loop);}reportToServer(){//判断上次上报时间//大于一定的时间才上报移动}

基于WebGL的NVE网络功能行为分享：同步游戏的状态ClientServerOtherClient“我把OtherClient干掉啦”“我把xxx反杀啦”“？？？”

基于WebGL的NVE网络功能行为分享：权威服务器服务器上也跑一个游戏循环客户端只上报输入，服务端计算结果并广播ClientServerOtherClient“我打了OtherClient一下”“我打了xxx一下”“广播：经过计算，是xxx赢了”“是在下输了”“耶”

基于WebGL的NVE网络功能行为分享：权威服务器定时向所有客户端发送场景的状态functionloop(){

processInput(); //从客户端读到的输入update();

render();

setImmediate(loop);}reportToClient(){//判断上次同步时间//大于一定的时间同步所有客户端}

基于WebGL的NVE采用Three.js和Socket.io的NVE工程实例

基于WebGL的NVE采用Three.js和Socket.io的NVE工程实例资源加载、场景初始化：

基于WebGL的NVE采用Three.js和Socket.io的NVE工程实例场景更新：functionloop(){

processInput();update();

render();requestAnimationFrame(loop);}

基于WebGL的NVE采用Three.js和Socket.io的NVE工程实例客户端同步：场景渲染renderer.render(scene,camera);参考资料ECMAScript6标准介绍：/游戏编程模式：/（en）http://gpp.tkchu.me/（cn）多人Web3D开源实现：src：/PMLS3/3D-multi-playerUdemycourse:

/course/create-a-3d-multi-player-game-using-threejs-and-socketioUdacity图形学课程（webgl和threejs）/course/interactive-3d-graphics--cs291

WebXRWebXR简介WebXR

是一组W3C官方组织制定的、用于支持VR和AR的标准。

WebXRDevice

API

实现了WebXR功能集的核心查找兼容的VR或AR输出设备以适当的帧率将3D场景渲染到设备（可选）将输出镜像到2D显示器创建代表输入控件运动的向量

WebGL

用于将3D世界渲染到WebXR会话中通常采用WebGL框架目前最流行的是Three.js。参考资料WebXR浏览器支持支持WebXR标准的浏览器Pollyfill使用WebXR模拟器插件

WebXRWebXR简介官方示例https://immersive-web.github.io/webxr-samples/input-tracking.html/en-US/docs/Web/API/WebXR_Device_API/FundamentalsWebXRWebXR应用的生命周期WebXR应用的优势Web的即时性Web标准的稳定性大量Web开发人员WebXRWebXR应用的开发方式使用封装好的第三方库WebGL+WebXRapi使用WebAssembly，传统3d引擎+emscripten，参考资料W3C工作组/immersive-web/W3CWebXR标准：/TR/webxr/支持WebVR的浏览器情况：webvr.rocks/MozillaWebXR设备接口参考/zh-CN/docs/Web/API/WebXR_Device_API官方示例：https://immersive-web.github.io/webxr-samples/对应的openxr/openxr/A-Frame框架简介

MozillaVR

团队构建的一个基于HTML，用来构建VR和AR应用框架。基于Three.js

来提供一个声明式、可扩