首页 >> HTML5+CSS3 >> HTML5中基于浏览器的虚拟现实的现状

HTML5中基于浏览器的虚拟现实的现状

287865 2021-03-01 0
浏览次数999

该SFHTML5组最近有一个讨论会上HTML5技术创造的虚拟现实体验- WebGL的,WebVR,three.js所,GLAM - ,以及实现在Firefox和Chrome对他们的支持目前的发展现状。这个想法是将整个网络带入VR体验。

VRML和X3D ISO标准的共同创建者Tony Parisi对WebVR(虚拟现实和Web技术的融合)进行了介绍。目前,VR软件大多类似于游戏,在创建和操纵图形方面需要大量工作。现有的大多数VR应用程序都是由少数人掌握的Unity引擎构建的。Parisi的想法是平衡领域,让所有开发人员都可以使用基本的Web技术(即JavaScript + WebGL)创建VR应用程序。 Three.js,一个用于在WebGL中渲染2D / 3D图形的JavaScript库,使渲染VR场景更加容易,其代码比相应的WebGL代码短3至10倍。Parisi还致力于另一种名为GLAM的解决方案这是用于创建3D Web内容的说明性语言。这将使渲染VR变得更加简单。 使用GLAM渲染旋转的3D立方体需要glam.js脚本和如下标记:

photocube {

image:url(../images/flowers.jpg);
rx:30deg;

}

Parisi提到Chrome(实验性构建, Blink源代码分支)和Firefox(每晚)已开始实施头部跟踪WebVR API,该API可用于跟踪VR设备的运动(目前为Oculus Rift,需要支持其他设备)更高版本),并支持WebGL / CSS3内容的立体声3D渲染。一个已经可以使用的更简单的替代方法是使用Google Cardboard,智能手机和VR应用程序(例如Cardboard)。该应用程序使用智能手机的摄像头和运动传感器,通过WebGL在手机的浏览器中生成动态的立体图像。

在他的会议期间,WebVR的UI / UX设计,Mozilla的Firefox OS UX首席设计师Josh Carpenter演示了如何将Oculus Rift与Firefox结合使用,并概述了他希望看到的开放式“ Webby”虚拟现实体验的一些特征。发生:

通过链接无缝安全地从一个地方导航到另一个地方的能力。这包括用于导航链接,缩放,滚动,返回,在字段中输入信息等的控件。简而言之,可以在戴上VR头盔时获得类似浏览器的体验。
易于发展。为此,需要创建新工具。JavaScript-Three.js-WebVR-WebGL-浏览器工具链尚处于起步阶段。
适用于任何设备的VR体验
自动将全球网站转换为VR的能力。这意味着人们应该能够导航到旧的时尚网站,并且仍然可以获得3D VR体验。
VR的商品化:更多设备,可嵌入性和更好的性能。
Carpenter还展示了将常规网站转换为VR而不要求他们更新内容的初期工作。他还创建了许多从一个VR站点转到另一个VR站点时要使用的过渡。Carpenter看到了设计VR浏览器的巨大潜力,因为可以使用带有空间动画的360°画布。

Google的WebGL和WebVR开发人员Brandon Jones提供了一个VR应用程序的代码示例,解释了在Web Browser VR Internals会话期间渲染VR场景所需要的内容。虽然在第一个站点上进行VR渲染似乎令人生畏,但使用Three.js,它变得更加简单,如以下代码片段所示:

// Normal scene setup, then…

var vrControls = new THREE.VRControls(camera);
var vrEffect = new THREE.VREffect(renderer);

function onEnterVRFullscreen() {
vrEffect.setFullScreen(true);
}
function onWindowResize() {
vrEffect.setSize(window.innerWidth, window.innerHeight);
}
function onRequestAnimationFrame() {
vrControls.update();
vrEffect.render(scene, camera);
}

琼斯承认,Three.js并未将VR视为头等公民,并且尚未针对VR渲染进行优化,它可能需要进行一些优化,但确实可以做到。他向VR应用程序开发人员提供了一些建议:

支持轻量级的顶点着色器。

出现性能问题时,请降低画布分辨率而不是帧速率。

完全避免渲染两次与视图无关的事物(阴影或环境贴图)。

完全按顺序绘制每只眼睛的场景会影响状态的变化。根据场景,为每个对象绘制左眼,交换视口然后绘制右眼可能会更有效。

琼斯还演示了如何在Chrome中渲染Quake 3 VR场景。

全部评论:0