Cesium集成WebXR_连接VR设备
Cesium集成WebXR
文章目录
- Cesium集成WebXR
- 1. 需求
- 2. 技术基础
- 2.1 WebGL
- 2.2 WebXR
- 2.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 lang="en"><head><!-- Use correct character set. --><meta charset="utf-8" /><!-- Tell IE to use the latest, best version. --><meta http-equiv="X-UA-Compatible" content="IE=edge" /><!-- Make the application on mobile take up the full browser screen and disable user scaling. --><meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /><title>Hello World!</title><script src="../Build/Cesium/Cesium.js"></script><style>@import 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>
</head><body><div id="cesiumContainer"></div><script>// 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 layer's 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></html>
4. 效果图
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]. 旋转变换(一)旋转矩阵
相关文章:

Cesium集成WebXR_连接VR设备
Cesium集成WebXR 文章目录Cesium集成WebXR1. 需求2. 技术基础2.1 WebGL2.2 WebXR2.3 其他3. 示例代码4. 效果图5. 参考链接1. 需求 通过WebXR接口,将浏览器端连接到VR头盔,实现在VR头盔中浏览Cesium场景,并可将头盔旋转的操作同步映射为场景…...

物联网在物流行业中的应用
物流管理需要同时监控供应链、仓储、运输等多项活动,然而许多因素会影响物流流程本身并导致延迟。为了简化流程和提高客户满意度,一些行业领导者和决策者积极创新,不断评估并使用物联网对物流流程的成本效益进行深入优化。在本文中࿰…...
<c++> 类与对象 | 面向对象 | 访问说明符 | 类的声明 | 创建类
文章目录前言面向过程编程面向对象编程什么是类类和结构体有什么区别三个访问说明符如何创建一个类类的声明创建类申明和定义全部放在类中声明和定义分离前言 从这里我们正式开始学习c中的面向对象编程,在学习之前,我们有必要了解一下什么是面向对象编程…...

恭喜!龙蜥社区荣登 2022 科创中国“开源创新榜”
2 月 20 日,中国科协召开以“创新提振发展信心,科技激发产业活力”为主题的2023“科创中国”年度会议。会上,“科创中国”联合体理事长、中国工程院院士周济介绍了 2022 年系列榜单征集遴选情况,并与中国科协副主席、中国工程院院…...
2023双非计算机硕士应战秋招算法岗之机器学习基础知识
目录 特征工程 2 缺失值处理 15 评价指标 33 逻辑回归 37 决策树 40 随机森林 46 SVM 49 Knn 56 Kmeans 59 PCA 66 朴素贝叶斯 68 常见分类算法的优缺点 72 特征工程 1.什么是特征工程 有这么一句话在业界广泛流传,数据和特征决定了机器学习的上限,而模型…...
二、TS的基础类型、类型注解
TS的基础类型、类型注解 TS的基础类型 js的数据类型: 基础数据类型(7个) boolean string number null undefined BigInt Symbol 引用数据类型(1个) Object 变量后面多了一个注解,注解为变量限定数据类型&…...

3年经验,3轮技术面+1轮HR面,拿下字节30k*16薪offer,这些自动化测试面试题值得大家借鉴
面试一般分为技术面和hr面,形式的话很少有群面,少部分企业可能会有一个交叉面,不过总的来说,技术面基本就是考察你的专业技术水平的,hr面的话主要是看这个人的综合素质以及家庭情况符不符合公司要求,一般来…...

分类预测 | MATLAB实现WOA-CNN-LSTM鲸鱼算法优化卷积长短期记忆网络数据分类预测
分类预测 | MATLAB实现WOA-CNN-LSTM鲸鱼算法优化卷积长短期记忆网络数据分类预测 目录分类预测 | MATLAB实现WOA-CNN-LSTM鲸鱼算法优化卷积长短期记忆网络数据分类预测分类效果基本描述模型描述程序设计参考资料分类效果 基本描述 1.Matlab实现WOA-CNN-LSTM多特征分类预测&…...

自然语言处理(NLP)之近似训练法:负采样与层序Softmax
我们在前面介绍的跳字模型与连续词袋模型有个缺陷就是在计算梯度时的开销随着词典增大会变得很大,因为每一步的梯度计算都包含词典大小数目的项的累加。为了降低这种带来的计算复杂度,介绍两种近似的处理方案:负采样和层序softmax负采样(Nega…...
关于上位机,C#
TCP与modbusTCP的区别 (10条消息) C#高级--常用数据结构_李宥小哥的博客-CSDN博客_c# 数据结构 C#中常用的数据结构 TCP/IP协议是网络通讯协议。MODBUS是应用与工业现场(电子控制)的通讯协议。两者的应用范围和应用环境有…...

华为OD机试真题 用 C++ 实现 - 字符串加密 | 多看题,提高通过率
最近更新的博客 华为OD机试 - 入栈出栈(C++) | 附带编码思路 【2023】 华为OD机试 - 箱子之形摆放(C++) | 附带编码思路 【2023】 华为OD机试 - 简易内存池 2(C++) | 附带编码思路 【2023】 华为OD机试 - 第 N 个排列(C++) | 附带编码思路 【2023】 华为OD机试 - 考古…...

达梦8数据守护动态增加实时备库
实时主备环境 类型 业务IP 库名 实例名 PORT_NUM MAL_HOST MAL_INST_DW_PORT MAL_PORT MAL_DW_PORT 主库dm8p 192.168.1.223 DAMENG GRP1_RT_01 5236 10.0.0.223 45101 55101 65101 备库dm8s 192.168.1.224 DAMENG GRP1_RT_02 5236 10.0.0.224 45121…...
《代码整洁之道 - 程序员的职业素养》读书笔记
一 前言 《代码整洁之道 - 程序员的职业素养》的作者是Robert C. Martin,大家喜欢喊他Bob大叔。这本书主要是Bob大叔40年编程生涯的心得体会,主要讲述了一个专业的程序员需要具备什么样的态度,遵循什么样的原则,采取什么样的行动。…...

八、CSS新特性二
文章目录一、CSS3多背景和圆角二、怪异盒子模型三、多列属性四、H5多列布局瀑布流五、CSS3线性渐变5.1 线性渐变5.2 径向渐变六、CSS3过渡动画七、CSS3 2D八、CSS3动画一、CSS3多背景和圆角 css3多背景,表示CSS3中可以添加多个背景。 CSS3圆角 border-radius: 0px;…...
Ubuntu国内镜像源
查看系统版本命令: $ lsb_release -aDistributor ID: UbuntuDescription: Ubuntu 22.04 LTSRelease: 22.04Codename: jammy国内的更新源有多个,几个大互联网公司的源都比较稳定,没什么差别。 下面是比较主流的、常用的几个…...

3.Linux安装es单机版
1.下载 版本 JDK 11ES elasticsearch-7.10.0 jdk安装 下载: wget https://download.java.net/openjdk/jdk11/ri/openjdk-1128_linux-x64_bin.tar.gz配置环境变量:# 编辑配置文件 vim /etc/profile# Java11环境变量配置 export JAVA_HOME/devtools/ja…...
C语言实现通讯录
咱们手机上面还有教务系统上都可以存储信息,这些都是使用编程语言来实现的,那么今天,咱们今天就用C语言来实现通讯录。 一. 实验名称 通讯录 二. 实验目标 1.数据的储存 2.数据的增加 3.数据的删除 4.数据的修改 5.数据的展示 6.数据…...

Python-生成列表
1.生成列表使用列表前必须先生成列表。1.1使用运算符[ ]生成列表在运算符[ ]中以逗号隔开各个元素会生成包含这些元素的新列表。另外,如果[ ]中没有元素就会生成空列表示例>>> list01 [] >>> list01 [] >>> list02 [1, 2, 3] >>…...

如何写好controller层
前言本篇主要要介绍的就是controller层的处理,一个完整的后端请求由4部分组成:1. 接口地址(也就是URL地址)、2. 请求方式(一般就是get、set,当然还有put、delete)、3. 请求数据(request,有head跟body)、4. 响应数据(response)本篇…...
MySQL---视图的概念与操作
MySQL—视图的概念与操作 常见的数据库对象 对象描述表(TABLE)表是存储数据的逻辑单元,以行和列的形式存在,列就是字段,行就是记录数据字典就是系统表,存放数据库相关信息的表。系统表的数据通常由数据库系统维护, 程…...

网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞!!! 抽象 现代智能交通系统 (ITS) 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 (…...

7.4.分块查找
一.分块查找的算法思想: 1.实例: 以上述图片的顺序表为例, 该顺序表的数据元素从整体来看是乱序的,但如果把这些数据元素分成一块一块的小区间, 第一个区间[0,1]索引上的数据元素都是小于等于10的, 第二…...

CentOS下的分布式内存计算Spark环境部署
一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架,相比 MapReduce 具有以下核心优势: 内存计算:数据可常驻内存,迭代计算性能提升 10-100 倍(文档段落:3-79…...
c++ 面试题(1)-----深度优先搜索(DFS)实现
操作系统:ubuntu22.04 IDE:Visual Studio Code 编程语言:C11 题目描述 地上有一个 m 行 n 列的方格,从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子,但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
.Net Framework 4/C# 关键字(非常用,持续更新...)
一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

【网络安全】开源系统getshell漏洞挖掘
审计过程: 在入口文件admin/index.php中: 用户可以通过m,c,a等参数控制加载的文件和方法,在app/system/entrance.php中存在重点代码: 当M_TYPE system并且M_MODULE include时,会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

系统掌握PyTorch:图解张量、Autograd、DataLoader、nn.Module与实战模型
本文较长,建议点赞收藏,以免遗失。更多AI大模型应用开发学习视频及资料,尽在聚客AI学院。 本文通过代码驱动的方式,系统讲解PyTorch核心概念和实战技巧,涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...
【Kafka】Kafka从入门到实战:构建高吞吐量分布式消息系统
Kafka从入门到实战:构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台,最初由LinkedIn开发,后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理,能够处理来自多个生产者的海量数据,并将这些数据实时传递给消费者。 Kafka核心特…...

聚六亚甲基单胍盐酸盐市场深度解析:现状、挑战与机遇
根据 QYResearch 发布的市场报告显示,全球市场规模预计在 2031 年达到 9848 万美元,2025 - 2031 年期间年复合增长率(CAGR)为 3.7%。在竞争格局上,市场集中度较高,2024 年全球前十强厂商占据约 74.0% 的市场…...
深度解析:etcd 在 Milvus 向量数据库中的关键作用
目录 🚀 深度解析:etcd 在 Milvus 向量数据库中的关键作用 💡 什么是 etcd? 🧠 Milvus 架构简介 📦 etcd 在 Milvus 中的核心作用 🔧 实际工作流程示意 ⚠️ 如果 etcd 出现问题会怎样&am…...