現(xiàn)代Web開發(fā)與應(yīng)用課件 第三章-從Web3D到WebXR

從Web3D到WebXR現(xiàn)代Web開發(fā)與應(yīng)用數(shù)字化生存元宇宙的提出

科幻小說比如NealStephense的《雪崩》表現(xiàn)了對數(shù)字虛幻世界長期以來的渴望：有一天，人類可以進(jìn)入一個模擬世界的電子網(wǎng)絡(luò)世界，在那里人們都有自己的電子替身——個化身，通過它們?nèi)藗兛梢砸娒?、探險(xiǎn)、娛樂、工作“元宇宙”一詞由本書中提出。數(shù)字化生存

比特世界原子世界

數(shù)字化生存數(shù)字化與編碼模擬（analog）：用按比例平滑變化的物理性質(zhì)表示信息的通用術(shù)語，如溫度計(jì)中的液面高度。數(shù)字的:（digital）：信息表示方式，僅采用離散數(shù)值;與模擬形成對比。數(shù)字化：將聲音、圖形、視頻等信息轉(zhuǎn)換成計(jì)算機(jī)中的二進(jìn)制數(shù)。編碼：信息從一種形式按照某種規(guī)則或格式轉(zhuǎn)換為另一種形式的過程。解碼：編碼的逆過程。

XR概述XR分類

XR概述虛擬現(xiàn)實(shí)設(shè)備

XR概述IBM第2人生培訓(xùn)中心XR的廣泛應(yīng)用

數(shù)字化生存數(shù)字孿生

數(shù)字孿生是現(xiàn)有或?qū)⒂械奈锢韺?shí)體對象的數(shù)字模型，通過實(shí)測、仿真和數(shù)據(jù)分析來實(shí)時感知、診斷、預(yù)測物理實(shí)體對象的狀態(tài)，通過優(yōu)化和指令來調(diào)控物理實(shí)體對象的行為，通過相關(guān)數(shù)字模型間的相互學(xué)習(xí)來進(jìn)化自身，同時改進(jìn)利益相關(guān)方在物理實(shí)體對象生命周期內(nèi)的決策。

——《數(shù)字孿生體技術(shù)白皮書（2019）》

元宇宙元宇宙的要素

傳統(tǒng)元宇宙實(shí)例Roblox(羅布樂思)

傳統(tǒng)元宇宙實(shí)例SecondLife(第2人生)

傳統(tǒng)元宇宙實(shí)例Minecraft（我的世界）

傳統(tǒng)元宇宙實(shí)例師生們在“我的世界”中進(jìn)行協(xié)同學(xué)習(xí)。Minecraft（我的世界）

Web3D相關(guān)技術(shù)Unity3DViewPointShockWave3Dcult3DWebGLjava3DVirtoolsWeb3D技術(shù)可以看作是Web技術(shù)和虛擬現(xiàn)實(shí)技術(shù)的結(jié)合，是虛擬現(xiàn)實(shí)技術(shù)向互聯(lián)網(wǎng)上的擴(kuò)展，其本質(zhì)是：直觀的虛擬現(xiàn)實(shí)表示、網(wǎng)絡(luò)性和互動性。VRML&X3D、GoogleO3DFlashStage3DColladaWeb3D相關(guān)技術(shù)Web3D相關(guān)技術(shù)VRML(theVirtualRealityModelingLanguage)VRML的首次提出是在1994年春第一屆國際互聯(lián)網(wǎng)絡(luò)年會上。1996年8月,發(fā)布了VRML2.0；1997年成為ISO標(biāo)準(zhǔn)2001年8月，Web3D協(xié)會發(fā)布了新一代國際標(biāo)準(zhǔn)——X3D(可擴(kuò)展3D),采用XML封裝VRML

VRMLVRML的特性它的出現(xiàn)主要是為了在Internet范圍內(nèi)建立一個全球統(tǒng)一的基于網(wǎng)絡(luò)的三維標(biāo)準(zhǔn).V1.0(1994)-->V2.0(1996)->VRML97(ISO)-V3.0(X3D)

VRML是一種簡單的基于文本的語言，用來描述三維場景以及交互環(huán)境

完整的三維建模語言:完整描述三維場景的物體、光、材料、環(huán)境特性和真實(shí)感效果

分布處理方式:支持多個分布式文件的多種對象和機(jī)制,包括內(nèi)聯(lián)式嵌入其他VRML文件,通過超鏈接指向其它文件

三維交互功能:能夠檢測用戶和虛擬環(huán)境中幾何造型交互動作(如按動開關(guān)，碰撞檢測),用戶在虛擬環(huán)境中的行為以及時間推移。檢測器提供的這些信息通過由VRML定義的整個事件體系產(chǎn)生視覺或聽覺效果,給用戶造成和境界互動的交互式體驗(yàn)

VRMLVRML特性平臺無關(guān)性：在各種操作系統(tǒng)下都可以渲染多媒體集成（背景音樂,空間立體聲支持，電影貼圖）

原型節(jié)點(diǎn)(PROTO)便于用戶利用已有節(jié)點(diǎn)定義面向?qū)ο蟮男碌墓?jié)點(diǎn)。

使用腳本節(jié)點(diǎn)(Script)用戶可以定義更加復(fù)雜的執(zhí)行邏輯，支持VrmlScript以及Java等語言。

VRMLVRML簡單介紹基本術(shù)語節(jié)點(diǎn)（Node）:指場景中實(shí)體，具有描繪改部分場景的所有繪圖指令域

（Field）:存儲在一個結(jié)點(diǎn)中的一個或者多個數(shù)據(jù),或者通過一個路由發(fā)送給結(jié)點(diǎn)的值事件

(Events):

引發(fā)場景中狀態(tài)改變的觸發(fā)器eventIn:AninputeventOut:AnoutputAnexposedFieldisashort-handforafield,eventIn,andeventOut

路由

(Routes):一個確定結(jié)點(diǎn)的值經(jīng)過的路徑Thesender'snodenameandeventOutnameThereceiver'snodenameandeventInname

ROUTEMySender.rotation_changedTOMyReceiver.set_rotation

VRML一個簡單的VRML例子ThefileheaderCommentsNodesFieldsandValues

VRMLShape{appearanceNULL#SFNodegeometryNULL#SFNode}

VRMLVRML中基本節(jié)點(diǎn)幾何以及支持幾何描述節(jié)點(diǎn)

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

Geometry造型節(jié)點(diǎn){

造型節(jié)點(diǎn)的域值}Box{size2.02.02.0#SFVec3f}

VRMLVRML中基本節(jié)點(diǎn)外觀節(jié)點(diǎn)

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

Appearance{materialNULL#SFNodetextureNULL#SFNodetextureTransformNULL#SFNode}

VRMLVRML中基本節(jié)點(diǎn)外觀節(jié)點(diǎn)

material包含一個Material節(jié)點(diǎn)；texture包含一個ImageTextrue、MovieTexture或者PixelTexture節(jié)點(diǎn)；textureTransform包含一個TextureTransform節(jié)點(diǎn)ShowcasemovieTextureusinginstantplayer

VRMLVRML中基本節(jié)點(diǎn)外觀節(jié)點(diǎn)

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

Showcaseslabs.wrlshiny.wrl

VRMLVRML中基本節(jié)點(diǎn)動畫以及行為節(jié)點(diǎn):提供支持動畫,聲音以及其他基于時間的活動和編程的行為

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

OrientationInterpolator,Script

VRMLVRML中基本節(jié)點(diǎn)TimeSensorThesensorgeneratestimeeventswhileitisrunningToanimate,routetimeeventsintoothernodesATimeSensornodegeneratesabsoluteandfractionaltimeeventsabsolutetimeUsefulfortriggeringeventsatspecificdatesandtimesFractionaltimeeventsgiveanumberfrom0.0to1.0

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

VRMLVRML中基本節(jié)點(diǎn)位置插補(bǔ)器Whenatimeisinbetweentwokeypositions,theinterpolatorcomputesanintermediateposition

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

VRMLVRML中基本節(jié)點(diǎn)環(huán)境結(jié)點(diǎn)BackgroundGroundandskycolorgradientsongroundhemisphereandskyspherePanoramaimagesonapanoramaboxBackground{groundColor[]#MFColorgroundAngle[]#MFFloatskyColor[000]#MFColorskyAngle[]#MFFloatfrontUrl“”#MFStringrightUrl““#MFStringbackUrl““#MFStringleftUrl““#MFStringtopUrl““#MFStringbottomUrl““#MFString}分別指定將被映射到空間立方體各個面上的圖像

VRMLVRML中基本節(jié)點(diǎn)環(huán)境結(jié)點(diǎn)Fogcolor-fogcolorfogType-LINEARorEXPONENTIALvisibilityRange-maximumvisibilitylimitfog

VRMLEAI(ExternalAuthoringInterface)

EAI允許一個JavaApplet主要以三種方式訪問VRML的場景：

可以發(fā)送一個事件到VRML場景中節(jié)點(diǎn)的事件入口

可以收到VRML場景中節(jié)點(diǎn)的事件出口發(fā)出的最新值當(dāng)VRML場景中節(jié)點(diǎn)的事件入口發(fā)出一個事件時，能得到一個通知，激活callback方法

VRML本身不具備網(wǎng)絡(luò)通訊能力，Java提供了該功能。Java彌補(bǔ)VRML計(jì)算，程序設(shè)計(jì)方面的不足，可以加入復(fù)雜的邏輯BSContactJforBS_CONTACTsample1sample2

VRMLEAI(ExternalAuthoringInterface)構(gòu)建NVE的機(jī)制瀏覽器VRML插件Java

AppletEAI網(wǎng)絡(luò)渲染場景改變場景計(jì)算數(shù)據(jù)共享

X3D從VRML到X3DX3D?(Extensible3D)X3D是下一代的開放式的網(wǎng)絡(luò)三維的標(biāo)準(zhǔn)整合XML:整合進(jìn)下一代網(wǎng)絡(luò)標(biāo)準(zhǔn)的關(guān)鍵分布性:輕量級的可發(fā)布的3D引擎內(nèi)核擴(kuò)展性:允許增加組件擴(kuò)展功能組件是一個個獨(dú)立的基本功能的模塊組件設(shè)置不同的層概括性:適應(yīng)指定應(yīng)用需要的標(biāo)準(zhǔn)化的擴(kuò)展概貌是組件的集合VRML的兼容性:保留了VRML97元素和內(nèi)容，并與MPEG-4等相關(guān)標(biāo)準(zhǔn)兼容傳播/鑲?cè)霊?yīng)用的能力:在PC以外的設(shè)備上使用3D

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

X3DWebGLWebGL以及Three.js框架

WebGLWebGLWebGL規(guī)范（/webgl無插件Web3D技術(shù)，實(shí)現(xiàn)OpenGLES的JavaScript綁定，可以為HTML5Canvas提供硬件3D加速渲染。

WebGLWebGL用于在任何兼容的Web瀏覽器中呈現(xiàn)交互式3D和2D圖形，而無需使用插件。

WebGLWebGL編寫

WebGLWebGL編寫

webgl.htmlWebGLWebGL框架：Three.js封裝底層的WebGL，兼顧靈活性和易用性遵循CSS-3D規(guī)范的新渲染器，兼容性更好Three.js官網(wǎng)地址：/Three.js庫：/mrdoob/three.js/

WebGLThree.js編寫

Three.js程序基本框架

基本流程：創(chuàng)建渲染器（renderer）創(chuàng)建場景（scene）添加相機(jī)（camera）添加網(wǎng)格模型（mesh）添加燈光（light）渲染（render）Three.js程序基本框架

Three.js相機(jī)正交投影:對于制圖、建模軟件通常使用正交投影

Three.js相機(jī)透視投影：更接近人眼的觀察效果，大多數(shù)應(yīng)用通常采用

Aspect=width/height:5500/examples/index.html#webgl_cameraThree.js幾何形狀儲存了一個物體的頂點(diǎn)信息。WebGL需要程序員指定每個頂點(diǎn)的位置，而在Three.js中，可以通過指定一些特征來創(chuàng)建幾何形狀，

CircleGeometryConvexGeometryCubeGeometryCylinderGeometryExtrudeGeometryIcosahedronGeometryLatheGeometryOctahedronGeometryParametricGeometryPlaneGeometryPolyhedronGeometryShapeGeometrySphereGeometryTetrahedronGeometryTextGeometryTorusGeometryTorusKnotGeometryTubeGeometry使用文字形狀需要下載和引用額外的字體庫，可以在/下載。Three.js材質(zhì)是獨(dú)立于物體頂點(diǎn)信息之外的與渲染效果相關(guān)的屬性。通過設(shè)置材質(zhì)可以改變物體的顏色、紋理貼圖、光照模式等。基本材質(zhì)渲染后物體的顏色始終為該材質(zhì)的顏色，而不會由于光照產(chǎn)生明暗、陰影效果。

visible：是否可見，默認(rèn)為trueopacity：透明度side：渲染面片正面或是反面，默認(rèn)為正面THREE.FrontSide，可設(shè)置為反面THREE.BackSide，或雙面THREE.DoubleSidewireframe：是否渲染線而非面，默認(rèn)為falsecolor：十六進(jìn)制RGB顏色map：使用紋理貼圖Three.jsLambert材質(zhì)符合Lambert光照模型的材質(zhì)。只考慮漫反射而不考慮鏡面反射的效果，因而對于金屬、鏡子等需要鏡面反射效果的物體就不適應(yīng)。

newTHREE.MeshLambertMaterial(opt)color：是用來表現(xiàn)材質(zhì)對散射光的反射能力，也是最常用來設(shè)置材質(zhì)顏色的屬性。Ambient：表示對環(huán)境光的反射能力，只有當(dāng)設(shè)置了AmbientLight后，該值才是有效的。Emissive：材質(zhì)的自發(fā)光顏色。Three.jsPhong材質(zhì)Phong模型考慮了鏡面反射的效果，因此適合對于金屬、鏡面的表現(xiàn)。漫反射部分和Lambert光照模型是相同的。

newTHREE.MeshPhongMaterial(opt)specular：鏡面反射系數(shù)shininess;高光指數(shù)，越大則高光光斑越小。Three.js紋理貼圖材質(zhì)導(dǎo)入紋理將材質(zhì)的map屬性設(shè)置為texture，并在完成導(dǎo)入紋理的步驟后，重新繪制畫面

Three.js紋理貼圖材質(zhì)重復(fù)貼圖紋理，指定重復(fù)方式為兩個方向（wrapS和wrapT）都重復(fù)。設(shè)置兩個方向上的重復(fù)次數(shù)

Three.js網(wǎng)格網(wǎng)格是由頂點(diǎn)、邊、面等組成的物體。創(chuàng)建物體需要指定幾何形狀和材質(zhì)。其構(gòu)造函數(shù)是:

Three.jsObject3D：各種3D物體的基類3D物體、光源等都是它的子類重要屬性：position、rotation、scale通過改變它們來實(shí)現(xiàn)各種交互效果

官方文檔：/docs/index.html#api/core/Object3DThree.js網(wǎng)格的位置、縮放、旋轉(zhuǎn)THREE.Mesh繼承自THREE.Object3D，因此包含scale、rotation、position三個屬性。修改屬性示例：

Three.js動畫每秒幀數(shù)FPS（FramesPerSecond）NTSC標(biāo)準(zhǔn)的電視FPS是30，PAL標(biāo)準(zhǔn)的電視FPS是25，電影的FPS標(biāo)準(zhǔn)為24。對于Three.js動畫，建議FPS在30到60之間。使用setInterval方法：

Three.js動畫使用requestAnimationFrame方法requestAnimationFrame只請求一幀畫面，因此在被其調(diào)用的函數(shù)中需要再次調(diào)用:有對應(yīng)的cancelAnimationFrame取消動畫：

Three.js動畫示例

Three.js動畫使用stat.js給出實(shí)時的FPS信息一個JavaScript庫:/mrdoob/stats.js/blob/master/build/stats.min.js

Three.js加載外部模型：Three.js有一系列導(dǎo)入外部文件的輔助函數(shù)/mrdoob/three.js/tree/master/examples/js/loaders參考/examples/下loader相關(guān)例子的源代碼。

Three.js加載外部模型：無材質(zhì)的模型

Three.js加載外部模型：有材質(zhì)的模型代碼中設(shè)置材質(zhì)

Three.js加載外部模型：有材質(zhì)的模型建模軟件中設(shè)置材質(zhì)：導(dǎo)出.obj模型文件以及.mtl材質(zhì)文件使用MTLLoader.js與OBJMTLLoader.js，并且要按改順序引用：

Three.js加載外部模型：UV映射貼圖一個物體的模型可能很復(fù)雜，對其貼圖的一個簡單有效的方法就是UV映射，將每個面片貼的圖統(tǒng)一映射到一張紋理上，記錄每個面片貼圖在紋理上對應(yīng)的位置。uv變量的類型是vec2，一個二維的向量，可以使用uv.x和uv.y分別訪問到uv兩個維度的值。

Three.js加載外部模型：外部模型動畫

/Blender構(gòu)建動畫和導(dǎo)出模型Three.js光照：LightAmbientLight:環(huán)境光，基礎(chǔ)光源，它的顏色會被加載到整個場景和所有對象的當(dāng)前顏色上。PointLight：點(diǎn)光源，朝著所有方向都發(fā)射光線SpotLight：聚光燈光源：類型臺燈，天花板上的吊燈，手電筒等DirectionalLight：方向光，又稱無限光，從這個發(fā)出的光源可以看做是平行光.

Three.js陰影在Three.js中，能形成陰影的光源只有THREE.DirectionalLight與THREE.SpotLight；能表現(xiàn)陰影效果的材質(zhì)只有THREE.LambertMaterial與THREE.PhongMaterial在初始化時，告訴渲染器渲染陰影：對于光源以及所有要產(chǎn)生陰影的物體調(diào)用：對于接收陰影的物體調(diào)用：

Three.js陰影類比透視投影照相機(jī)，對于聚光燈，需要設(shè)置shadowCameraNear、shadowCameraFar、shadowCameraFov三個值。類比正交投影照相機(jī)，對于平行光，需要設(shè)置shadowCameraNear、shadowCameraFar、shadowCameraLeft、shadowCameraRight以及shadowCameraBottom六個值。為了看到陰影照相機(jī)的位置，通?？梢栽谡{(diào)試時開啟light.shadowCameraVisible=true。

Three.js光照與陰影光線追蹤

Three.js后期處理編程處理流程創(chuàng)建THREE.EffectComposer（效果組合器）對象，在該對象上可以添加后期處理通道。配置THREE.EffectComposer對象，使它可以渲染場景，并應(yīng)用后期處理。

Three.js后期處理編程處理流程在渲染循環(huán)中，使用THREE.EffectComposer來渲染場景、應(yīng)用通道和輸出結(jié)果。

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

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

Three.js使用THREE.ShaderPass自定義效果著色器著色器可以對先前渲染的結(jié)果做修改，包括對顏色、位置等等信息，甚至可以實(shí)現(xiàn)高級的渲染效果。Three.js自帶了一些著色器程序。

Three.js使用THREE.ShaderPass自定義效果著色器WebGL的著色器程序大致與GLSL（GLShadingLanguage）相同，是一種接近C語言的代碼。WebGL基于OpenGLES，因此WebGL支持的著色器有頂點(diǎn)著色器與片元著色器。頂點(diǎn)著色器：對于每個頂點(diǎn)調(diào)用一次。可以修改頂點(diǎn)的位置或者顏色等信息，然后傳入片元著色器。片元著色器：片元是柵格化之后，在形成像素之前的數(shù)據(jù)。片元著色器是每個片元會調(diào)用一次的程序，因此，片元著色器特別適合用來做圖像后處理。

Three.js著色器頂點(diǎn)著色器用于改變每個頂點(diǎn)的位置，對于后期處理著色器位置基本不變。4種WebGL限定符const：常量attribute：從JavaScript代碼傳遞到頂點(diǎn)著色器中，每個頂點(diǎn)對應(yīng)不同的值uniform：每個頂點(diǎn)/片元對應(yīng)相同的值varying：從頂點(diǎn)著色器傳遞到片元著色器中片元著色器本身不能訪問到uv信息，需要從頂點(diǎn)著色器中傳遞過去，將其命名為vUv。按默認(rèn)的方式計(jì)算頂點(diǎn)位置。

Three.js著色器片元著色器頂點(diǎn)著色器可以用于改變每個頂點(diǎn)的位置，片段著色器可以用于定義每個像素的顏色。將vUv的兩個維度分別對應(yīng)到紅綠通道

Three.js著色器著色器代碼的位置：可以寫在單獨(dú)的文件中：頂點(diǎn)著色器的文件名后綴為.vs，片元著色器的文件名后綴為.fs。采用JQuery實(shí)現(xiàn)從服務(wù)器得到著色器，并構(gòu)建材質(zhì)

Three.js著色器HTML中的著色器代碼定義頂點(diǎn)著色器定義片元著色定義材質(zhì)

Three.js著色器自定義灰度圖著色器示例編寫自定義著色器

Three.js著色器自定義灰度圖著色器示例使用自定義著色器設(shè)置THREE.EffectComposer在渲染循環(huán)中調(diào)用composer.render(delta)方法Three.js霧：FoxExp2:隨著距離的增加，密度指數(shù)增加，參數(shù)是顏色和密度指數(shù)。THREE.Fog：密度線性變大；參數(shù)是顏色，霧開始出現(xiàn)的最小距離，以及物體被霧遮擋的最大距離。

Three.js粒子系統(tǒng)三維計(jì)算機(jī)圖形學(xué)中模擬一些特定的模糊現(xiàn)象的技術(shù)使用粒子系統(tǒng)模擬的現(xiàn)象有火、爆炸、煙、水流、火花、落葉、云、霧、雪等效果。Webglcloud

Three.js粒子系統(tǒng)使用THREE.SpriteMaterial創(chuàng)建和樣式化粒子。使用THREE.Points創(chuàng)建一個粒子集合。Three.js加載音頻參考/docs/index.html#api/audio/Audio

Three.js天空盒Skybox實(shí)際上是一個立方體對象。用戶視角只在盒子內(nèi)部活動，所以只需要渲染盒子內(nèi)部表面。天空盒子應(yīng)當(dāng)足夠大，使得攝像機(jī)在移動時看天空仍然覺得足夠遠(yuǎn)。但是，天空盒子不能超出攝像機(jī)最遠(yuǎn)可視范圍。

Three.js物理引擎Physi.js，Cannon.js，ammo.js碰撞檢測Raycaster：檢測射線與物體相交可用于鼠標(biāo)選擇物體、簡單的兩物體間碰撞檢測等/docs/index.html#api/core/Raycaster

Three.js物理引擎Physijsammo.js的包裝器。ammo.js是一個實(shí)現(xiàn)了物理引擎的庫。引入并設(shè)置屬性創(chuàng)建了一個應(yīng)用了物理效果的新場景，并設(shè)置重力

Three.js物理引擎Physijs使用Physijs的特定對象將幾何對象包裝起來在創(chuàng)建的場景上調(diào)用simulate方法Three.js輔助功能：網(wǎng)格線THREE.GridHelper坐標(biāo)軸THREE.AxisHelper

Three.js交互與輸入控制參考：/examples/下misc/controls模擬飛行：controls/fly第一人稱控制器：controls/pointerlock

Three.js交互與輸入控制TrackballControls

控制器包含相應(yīng)的控制器js庫文件：創(chuàng)建和設(shè)置控制器的屬性在動畫渲染中更新控制器

Three.js交互與輸入控制第一人稱控制器FirstPersonControls包含相應(yīng)的控制器js庫文件：設(shè)置定時器和控制器的屬性在動畫渲染中更新控制器

Three.js交互與輸入控制Raycaster射線拾取把canvas坐標(biāo)系的位置轉(zhuǎn)化為webgl坐標(biāo)系中的屏幕坐標(biāo)位置，且做了歸一化處理。調(diào)用raycaster的方法setFromCamera,可以獲得一條和相機(jī)朝向一致，從鼠標(biāo)點(diǎn)出發(fā)的射線；調(diào)用射線與物體相交的檢測函數(shù)intersectObjects。第二個參數(shù)為true，檢測子物體。演示，nginx服務(wù)器下：http://localhost:9090/city.htmlWebGLWebGL可視化編輯網(wǎng)站學(xué)習(xí)站點(diǎn)：/blog/

/editor/WebGLWebGL框架

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

基于WebGL的NVE網(wǎng)絡(luò)虛擬環(huán)境（NetworkedVirtualEnvironment)利用計(jì)算機(jī)圖形學(xué)、計(jì)算機(jī)網(wǎng)絡(luò)、人工智能、人機(jī)接口等計(jì)算機(jī)技術(shù)構(gòu)造的一個真實(shí)世界的模擬，地理上分布的用戶可以通過網(wǎng)絡(luò)共享該環(huán)境，并多通道地與周圍的環(huán)境以及在相互之間進(jìn)行交互。

基于WebGL的NVE分布式虛擬環(huán)境必須具有以下功能：可視模擬真實(shí)世界：三維模擬構(gòu)造真實(shí)世界；支持多媒體內(nèi)容；通過硬件給用戶觸覺等真實(shí)感受。數(shù)據(jù)共享：該環(huán)境中的數(shù)據(jù)可以在一定規(guī)則下被進(jìn)入的用戶共享。用戶應(yīng)該看到的是一個統(tǒng)一的視圖。交互性：用戶能以替身(Avatar)形式出現(xiàn)，并通過一定的輸入設(shè)備與環(huán)境和其他用戶進(jìn)行交互。虛擬現(xiàn)實(shí)的3I特征浸沒感（Immersion）交互性（Interactivity）構(gòu)想性（Imagination）

基于WebGL的NVE基于WebGL的多人環(huán)境示例：一個開源多人環(huán)境DEMO源碼地址：/PMLS3/3D-multi-player演示地址：04:3000/

基于WebGL的NVE場景與用戶的交互更新典型的游戲循環(huán)：JavaScript的游戲循環(huán)使用requestAnimationFrame代替whilefunctionloop(){

processInput();update();

render();requestAnimationFrame(loop);}

基于WebGL的NVE網(wǎng)絡(luò)同步幀同步在客戶端執(zhí)行，服務(wù)器轉(zhuǎn)發(fā)每個玩家的輸入進(jìn)行同步。保證各個客戶端在每個邏輯幀輸入一致，并得到相同的結(jié)果的強(qiáng)同步方案。

基于WebGL的NVE網(wǎng)絡(luò)同步狀態(tài)同步在服務(wù)器執(zhí)行同步，服務(wù)器下發(fā)游戲中每個實(shí)體當(dāng)前的狀態(tài)進(jìn)行同步。允許各個客戶端的外在表現(xiàn)不同，只確保它們內(nèi)部的邏輯狀態(tài)統(tǒng)一的弱同步方案。

基于WebGL的NVE網(wǎng)絡(luò)同步幀同步vs狀態(tài)同步有大量用戶的場景下更適合采用狀態(tài)同步，比如MMORPG。幀同步基于“同樣的輸入+同樣的代碼=同樣的輸出”原則，進(jìn)行客戶端本地計(jì)算，不需要設(shè)計(jì)復(fù)雜的網(wǎng)絡(luò)協(xié)議去同步數(shù)據(jù)，適合角色狀態(tài)極為復(fù)雜的場景，比如MOBA。幀同步容易受不同平臺計(jì)算差別的影響，比如實(shí)現(xiàn)浮點(diǎn)數(shù)計(jì)算的不同方式。并且容易在客戶端作弊。幀同步更適合采用UDP實(shí)現(xiàn)，主要是在網(wǎng)絡(luò)波動情況下，TCP的準(zhǔn)確重傳機(jī)制會導(dǎo)致阻塞；但是需要克服UDP的時序和丟包問題。

基于WebGL的NVE網(wǎng)絡(luò)功能所有玩家相互可見：ClientServerOtherClient“我加入游戲啦”“我把xxx在本地畫出來”“廣播：xxx加入游戲啦”

基于WebGL的NVE網(wǎng)絡(luò)功能行為分享：ClientServerOtherClient“我移動到(x,y,z)啦”“我把xxx在本地的化身移動到(x,y,z)”“廣播：xxx移動到(x,y,z)啦”

基于WebGL的NVE網(wǎng)絡(luò)功能行為分享：客戶端定時上報(bào)自身的位置信息functionloop(){

processInput();update();

render();requestAnimationFrame(loop);}reportToServer(){//判斷上次上報(bào)時間//大于一定的時間才上報(bào)移動}

基于WebGL的NVE網(wǎng)絡(luò)功能行為分享：同步游戲的狀態(tài)ClientServerOtherClient“我把OtherClient干掉啦”“我把xxx反殺啦”“？？？”

基于WebGL的NVE網(wǎng)絡(luò)功能行為分享：權(quán)威服務(wù)器服務(wù)器上也跑一個游戲循環(huán)客戶端只上報(bào)輸入，服務(wù)端計(jì)算結(jié)果并廣播ClientServerOtherClient“我打了OtherClient一下”“我打了xxx一下”“廣播：經(jīng)過計(jì)算，是xxx贏了”“是在下輸了”“耶”

基于WebGL的NVE網(wǎng)絡(luò)功能行為分享：權(quán)威服務(wù)器定時向所有客戶端發(fā)送場景的狀態(tài)functionloop(){

processInput(); //從客戶端讀到的輸入update();

render();

setImmediate(loop);}reportToClient(){//判斷上次同步時間//大于一定的時間同步所有客戶端}

基于WebGL的NVE采用Three.js和Socket.io的NVE工程實(shí)例

基于WebGL的NVE采用Three.js和Socket.io的NVE工程實(shí)例資源加載、場景初始化：

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

processInput();update();

render();requestAnimationFrame(loop);}

基于WebGL的NVE采用Three.js和Socket.io的NVE工程實(shí)例客戶端同步：場景渲染renderer.render(scene,camera);參考資料ECMAScript6標(biāo)準(zhǔn)介紹：/游戲編程模式：/（en）http://gpp.tkchu.me/（cn）多人Web3D開源實(shí)現(xiàn)：src：/PMLS3/3D-multi-playerUdemycourse:

/course/create-a-3d-multi-player-game-using-threejs-and-socketioUdacity圖形學(xué)課程（webgl和threejs）/course/interactive-3d-graphics--cs291

WebXRWebXR簡介WebXR

是一組W3C官方組織制定的、用于支持VR和AR的標(biāo)準(zhǔn)。

WebXRDevice

API

實(shí)現(xiàn)了WebXR功能集的核心查找兼容的VR或AR輸出設(shè)備以適當(dāng)?shù)膸蕦?D場景渲染到設(shè)備（可選）將輸出鏡像到2D顯示器創(chuàng)建代表輸入控件運(yùn)動的向量

WebGL

用于將3D世界渲染到WebXR會話中通常采用WebGL框架目前最流行的是Three.js。參考資料WebXR瀏覽器支持支持WebXR標(biāo)準(zhǔn)的瀏覽器Pollyfill使用WebXR模擬器插件

WebXRWebXR簡介官方示例https://immersive-web.github.io/webxr-samples/input-tracking.html/en-US/docs/Web/API/WebXR_Device_API/FundamentalsWebXRWebXR應(yīng)用的生命周期WebXR應(yīng)用的優(yōu)勢Web的即時性Web標(biāo)準(zhǔn)的穩(wěn)定性大量Web開發(fā)人員WebXRWebXR應(yīng)用的開發(fā)方式使用封裝好的第三方庫WebGL+WebXRapi使用WebAssembly，傳統(tǒng)3d引擎+emscripten，參考資料W3C工作組/immersive-web/W3CWebXR標(biāo)準(zhǔn)：/TR/webxr/支持WebVR的瀏覽器情況：webvr.rocks/MozillaWebXR設(shè)備接口參考/zh-CN/docs/Web/API/WebXR_Device_API官方示例：https://immersive-web.github.io/webxr-samples/對應(yīng)的openxr/openxr/A-Frame框架簡介

MozillaVR

團(tuán)隊(duì)構(gòu)建的一個基于HTML，用來構(gòu)建VR和AR應(yīng)用框架?；赥hree.js

來提供一個聲明式、可擴(kuò)