西安博网站建设,网站建设捌金手指下拉四,成都兼职建设网站,深圳网站建设 培训Cesium集成WebXR 文章目录Cesium集成WebXR1. 需求2. 技术基础2.1 WebGL2.2 WebXR2.3 其他3. 示例代码4. 效果图5. 参考链接1. 需求
通过WebXR接口#xff0c;将浏览器端连接到VR头盔#xff0c;实现在VR头盔中浏览Cesium场景#xff0c;并可将头盔旋转的操作同步映射为场景…Cesium集成WebXR 文章目录Cesium集成WebXR1. 需求2. 技术基础2.1 WebGL2.2 WebXR2.3 其他3. 示例代码4. 效果图5. 参考链接1. 需求
通过WebXR接口将浏览器端连接到VR头盔实现在VR头盔中浏览Cesium场景并可将头盔旋转的操作同步映射为场景视角的变换实现沉浸式体验。
2. 技术基础
2.1 WebGL
需要了解一些关于WebGL的基础知识通过以下几个链接可快速了解
WebGL 入门WebGL 着色器获取js数据【零基础学WebGL】绘制矩形【零基础学WebGL】绘制图片
2.2 WebXR
关于WebXR可参见MDN上有关介绍Fundamentals of WebXR。 WebXR, with the WebXR Device API at its core, provides the functionality needed to bring both augmented and virtual reality (AR and VR) to the web. WebXR is an API for web content and apps to use to interface with mixed reality hardware such as VR headsets and glasses with integrated augmented reality features. This includes both managing the process of rendering the views needed to simulate the 3D experience and the ability to sense the movement of the headset (or other motion-sensing gear) and provide the needed data to update the imagery shown to the user. 另外MDN提供了一个例子可以帮助快速上手该示例未依赖其他三维框架如three.js使用纯原生WebGL接口相关介绍见Movement, orientation, and motion: A WebXR example在线运行示例见WebXR: Example with rotating object and user movement可浏览源代码并下载到本地运行调试。
2.3 其他
另外需要了解一些矩阵变换平移、缩放、旋转知识可参考以下链接
Matrix math for the web - MDN旋转变换一旋转矩阵
3. 示例代码
注未接入实体VR设备使用浏览器插件 WebXR API Emulator 模拟。
!DOCTYPE html
html langenhead!-- Use correct character set. --meta charsetutf-8 /!-- Tell IE to use the latest, best version. --meta http-equivX-UA-Compatible contentIEedge /!-- Make the application on mobile take up the full browser screen and disable user scaling. --meta nameviewportcontentwidthdevice-width, initial-scale1, maximum-scale1, minimum-scale1, user-scalableno /titleHello World!/titlescript src../Build/Cesium/Cesium.js/scriptstyleimport url(../Build/Cesium/Widgets/widgets.css);html,body,#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}.cesium-viewer-vrContainer {z-index: 10000;}/style
/headbodydiv idcesiumContainer/divscript// Cesium.Ion.defaultAccessToken your_token;var viewer new Cesium.Viewer(cesiumContainer, {vrButton: true});let gl, refSpace, xrSession, animationFrameRequestID;let originalDirection; // 进入VR模式前的场景相机信息// vrButton设置监听事件进入vr模式后检测vr设备viewer.vrButton.viewModel.command.afterExecute.addEventListener(() {// 刚进入VR模式if (viewer.vrButton.viewModel.isVRMode) {setTimeout(() {// 检查当前环境if (navigator.xr) {// 检查是否支持 immersive-vr 模式navigator.xr.isSessionSupported(immersive-vr).then((supported) {if (supported) {// 请求VR会话navigator.xr.requestSession(immersive-vr).then(sessionStarted);originalDirection viewer.camera.direction;} else {console.error(未检测到VR设备);}}).catch(() {console.error(检测失败);});} else {console.error(当前浏览器不支持 WebXR);}}, 200);} else {// 刚退出VR模式if (xrSession) xrSession.end();}});/*** VR会话开始* param {*} session */function sessionStarted(session) {xrSession session;// 监听会话结束事件xrSession.addEventListener(end, sessionEnded);// 与普通 WebGL 不同这里需要设置 xrCompatible 参数gl viewer.scene.canvas.getContext(webgl, { xrCompatible: true });// gl.makeXRCompatible();// 更新会话的渲染层后续渲染会渲染在该层上session.updateRenderState({ baseLayer: new XRWebGLLayer(session, gl) });// 请求 local 空间跟踪用户头部旋转session.requestReferenceSpace(local).then(s {refSpace ssession.requestAnimationFrame(onXRFrame); // 开始渲染})}/*** VR会话结束*/function sessionEnded() {// If we have a pending animation request, cancel it; this// will stop processing the animation of the scene.if (animationFrameRequestID) {xrSession.cancelAnimationFrame(animationFrameRequestID);animationFrameRequestID 0;}xrSession null;}let lastTransMatrix [1, 0, 0, 0,0, 1, 0, 0,0, 0, 1, 0,0, 0, 0, 1];/*** 设备渲染帧* param {*} time * param {*} frame */function onXRFrame(time, frame) {const session frame.session;animationFrameRequestID session.requestAnimationFrame(onXRFrame);// viewer.scene.render()const pose frame.getViewerPose(refSpace)// 获取旋转和视图信息if (pose) {let glLayer frame.session.renderState.baseLayer;// Bind the WebGL layers framebuffer to the renderergl.bindFramebuffer(gl.FRAMEBUFFER, glLayer.framebuffer);// Clear the GL context in preparation to render the new framegl.clearColor(0, 0, 0, 1.0);gl.clearDepth(1.0); // Clear everythinggl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);pose.views.forEach(view {let viewport glLayer.getViewport(view);gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);gl.canvas.width viewport.width * pose.views.length;gl.canvas.height viewport.height;// 视角映射if (view.eye left) {// let matrix Cesium.Matrix4.fromRowMajorArray(view.transform.inverse.matrix, new Cesium.Matrix4());// let result Cesium.Matrix4.multiplyByPoint(matrix, originalDirection, new Cesium.Cartesian3());// 矩阵应该使用上次变换的矩阵而不是从刚进入VR模式后整个过程中的总矩阵let mergedTransMatrix Cesium.Matrix4.fromRowMajorArray(view.transform.inverse.matrix, new Cesium.Matrix4());let realTransMatrix Cesium.Matrix4.multiply(Cesium.Matrix4.fromRowMajorArray(lastTransMatrix, new Cesium.Matrix4()),mergedTransMatrix, new Cesium.Matrix4());let result Cesium.Matrix4.multiplyByPoint(realTransMatrix, viewer.camera.direction, new Cesium.Cartesian3());viewer.camera.direction result;viewer.scene.render();lastTransMatrix view.transform.matrix; // 矩阵的逆作为下次计算基础}})}}// XXX: // 1. 【view.transform.inverse.matrix】矩阵中既包括了头盔旋转变换也包含了位置平移变换针对有距离传感器的VR设备// 最终将整个矩阵应用到了Cesium场景的【camera.direction】逻辑是不合理的【camera.direction】应该只对应头盔旋转变换。// The transform property describes the position and orientation of the eye or camera represented by the XRView, // given in that reference space.// 2. 根据[WebXR基础介绍](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API/Fundamentals#field_of_view)// 左右两只眼看到的应该是有细微差别的。在官方示例中[如https://webxr-experiment.glitch.me/]可以看出都是将一个canvas分成了// 左右两块区域然后根据XRView中的左右眼信息分别在两块区域绘制但是Cesium未暴露出类似【gl.drawElements】的接口只有// 【scene.render】调用后只会在整个canvas区域上进行绘制没有左右分区的效果所以借助了Cesium自带的VRButton在进入Cesium// 的VrMode后再调用WebXR接口连接设备同时XRView也只处理左眼利用Cesium自身的左右同步。隐患未知。/script
/body/html4. 效果图 5. 参考链接
[1]. WebXR 技术调研 - 在浏览器中构建扩展现实XR应用 [2]. 【WebAR】虚拟现实来到网页——WebXR Device API第二部分 [3]. Fundamentals of WebXR [4]. WebXR: Example with rotating object and user movement [5]. WebGL 入门 [6]. 【零基础学WebGL】绘制矩形 [7]. Matrix math for the web - MDN [8]. 旋转变换一旋转矩阵
