WebVR在艺术品展示中的应用研究

2018-04-24陈锐浩熊涛涛

现代计算机 2018年8期

陈锐浩，熊涛涛

（1.深圳职业技术学院教育技术与信息中心，深圳 518055；2.深圳职业技术学院艺术设计学院，深圳 518055）

1 在线艺术品展示方法介绍

在线艺术品拍卖平台和在线博物馆系统里面，艺术品的展示模块是系统的核心，随着前端技术的成熟，其展示模式也不断在完善，用户体验越来越成熟，从早期的图片展示慢慢转向VR支持，具体呈现方式历经三个阶段，平面展示、3D展示、VR展示。

第一阶段平面展示，主要是以平面图片的形式进行展示，为了让用户对展品细节看得更清除，采用了小图片和高分辨率图片结合的方式，利用诸如jquery.zoom之类的组件实现放大镜效果，当鼠标在小图片上面停留的时候，对应的部位就会出现放大图片的效果，如图1所示，当鼠标停留在左侧展品的时候，右边就会出现以左侧鼠标为中心的一个方型区域的放大图，在左侧图片上面移动鼠标可以查看不同位置的细节，这种模式在很多艺术品展示网站一直有使用，像国内艺术品互联网拍卖先驱嘉德在线就采用这种展示方案。

第二阶段3D展示，从平面图片开始向3D展示发展，实现方式主要有两种，第一种采用环物摄影方式实现，就是运用摄影技术把一件产品从不同角度拍摄成多个画面，再将多个画面用三维技术制作成一个完整的动画并通过相应的程序进行演示，客户可以随意拖动鼠标，就能从各个角度观看产品的每一个部位和结构，由于采用数码图片，放大都会失真，而且受限拍摄条件，一般只是水平拍摄，导致只能呈现水平方向的360度，垂直方向无法观看。第二种模式采用3D模型结合材质贴图进行呈现，利用WebGL实现基于浏览器的在线渲染，WebGL定义了一套基于OpenGL ES 2.0的3D图形API，这些API通过HTML5的Canvas标签直接将3D图形引入万维网。通过WebGL，前端开发人员可以直接借助GPU在浏览器里更流畅地展示3D场景和模型，实现复杂交互[1]。WebGL技术标准免去了开发网页专用渲染插件的麻烦，简化开发流程，给用户带来炫酷的3D效果体验。基于WebGL开发的在线展品展示系统比传统的图片展示表达信息更丰富，解决了二维图片角度的限制，用户可以对展品进行360度旋转和随意缩放，如图2所示，这是笔者开发的深职院南山匠人团队产品在线展示应用，图中展品为匠人团队开发的羊壶，用户可以在右侧转盘选择不同展品观看，每个展品可以随意缩放，360度观察，没有死角。

第三阶段VR展示，在第二阶段的基础之上，引入WebVR技术，实现基于浏览器的VR应用。WebVR提供了专门访问VR设备的接口，同时能够接收这些设备的位置和动作信息，开发者可以直接采用JavaScript构建基于浏览器的VR应用，体验者能够在支持Web⁃VR API[2]的浏览器里运行VR内容。在手机上运行WebVR应用，利用手机的计算性能和追踪功能，用户只需要再加一个简单的VR盒子就可以进行体验，大大了降低了VR体验的门槛。WebVR也支持主流的VR头盔，如Oculus和HTC Vive，只要在支持VR的PC上运行火狐的Firefox Nightly和设置VR enabled的谷歌Chrome浏览器就可以[3]。VR体验缩短了用户和具体艺术品的距离，让用户足不出户，也能有身临其境的逼真体验。

现在支持WebGL的浏览器越来越多，特别是Three.js框架[4]的不断完善，在线3D呈现已经开始流行，开发难度也逐步降低，但是采用WebVR方式来展示艺术品，目前还是处于比较初级的阶段，相关应用也是凤毛麟角，下面笔者通过自己的实践，介绍具体的实现方式。

图1 嘉德在线拍卖品展示方案

图2 3D展示应用-南山匠人

2 WebVR开发实践

2.1 基于WebVR的艺术品展示的关键技术

基于WebVR的艺术品展示的关键技术主要包括两部分，基于浏览器的3D渲染和VR设备的支持。3D渲染采用Three.js引擎，它封装了WebGL函数，简化了创建场景的代码成本，增加了各种灯光的支持，内置多种着色器模板，降低了WebGL开发难度，是目前最主流的WebGL开发框架。利用Three.js框架可以轻松的创建3D场景，导入各种格式的3D模型文件，如常见的 obj、fbx、stl、md2、collada 等。由于不同浏览器对WebVR API支持程度不同，所以需要引入webvr-poly⁃fill.js来支持WebVR网页，webvr-polyfill.js文件采用ES6标准编写，它提供了大量VR相关的API，可以轻松获取头戴设备（HMD）的信息。例如navigator.getVR⁃Displays（）方法可以获取VR头显设备信息，识别VR设备之后，调用设备对象的getPose（）方法就可以返回VR设备在某一时刻的信息，包括时间戳、位置（x,y,z）、线速度、线加速度、角速度、角加速度、方向信息等。

基于Web的VR互动主要包括头显和手柄两个层面，头显的互动采用WebVR API，手柄的互动须引用Gamepad API，Gamepad API是一个 HTML5 接口，让开发者可以通过js访问游戏手柄。调用navigator.get⁃Gamepads（）方法可以获取一个手柄的实例，它返回一个gamepads数组，一旦有手柄连接上，gamepads数组将产生有效的gamepad对象。本文案例还不支持手柄互动，在这里不再赘述。

2.2 3D 模型导入

目前基于网页的3D应用一般都是采用Three.js框架进行开发。Three.js支持多种格式模型的导入，每种模型都有对应的加载器，以插件形式独立存在，模型加载器插件命名规则为：后缀名+Loader.js，在具体开发的时候，需要加载某种格式的模型，就引入该模型的加载器文件，如要加载obj格式的模型，需要引入obj加载器，具体名称为：OBJLoader.js。obj是一种简单的三位文件格式，使用非常广泛，定义了对象的集合体，并没有包含材质信息，在浏览器渲染的时候，一般和MTL材质文件一起使用，加载MTL文件必须引入MTL⁃Loader.js加载器。如果在3DSMax里面输出obj模式的时候，导出了材质贴图，也可以直接调用THREE.TextureLoader（）对象的 load（）方法加载图片。本文案例模型采用obj格式，下面详细介绍OBJLoader的load方法。

OBJLoader的load方法包含4个参数，具体为load（url,onLoad,onProgress,onError），具体含义如下：

参数url:表示加载的*.obj模型路径。

参数onLoad：回调函数，模型加载完毕之后执行，以加载完毕的3D模型为参数，一般模型加载完毕之后需要设置纹理，所以这个函数主要实现纹理的配置。

参数onProgress：回调函数，加载过程中调用的函数。这个函数接收一个XMLHttpRequest实例，其中包含总加载字节，对于一些比较大的模型，如果需要增加加载进度的提示就需要增加该参数。

参数onError：回调函数，模型加载过程中如果出错就会触发该函数，该函数的参数为出错信息，开发的时候调用该函数可以获取出错信息，便于调试。

除了参数url之外，其他三个参数都是可选项，一般加载模型之后，需要对模型做一系列的处理，所以onLoad参数一般不会省略，而且onLoad参数里面承担主要的计算工作。本案例的代码如下：

上述加载方法省略了onProgress和onError两个回调函数，只实现onLoad函数，当模型加载完毕之后，接收加载完毕的模型数据对象objData，调用该对象的traverse（function）方法，该方法可以遍历调用者objData的所有后代，被调用者和每一个后代都要执行作为参数传入的function函数，函数的参数为调用者本身。上例中遍历objData里面的每一个子对象，如果判断是Three.Mesh对象就对该子对象执行材质设置。所有子对象设置好材质之后，才添加到场景中。

2.3 VR 实现

Three.js提供了WebVR实现的两个核心文件：VR⁃Controls.js和VREffect.js，这两个文件通过调用Web⁃VR API实现特定的目的。

VRControls.js：在3D应用中，我们能看到的内容是由摄像机（camera）决定的，Three.js提供了一些摄像机控件，使用这些控件可以控制场景中的摄像机，通过调整摄像机的位置让输出的场景内容产生变化。VRCon⁃trols.js是Three.js提供的VR控制器，这个控件能够获取HMD的状态信息并应用到camera上，头戴设备的信息具体包括头显自身（HMDVRDevice）和一个跟踪头部位置的位置捕捉传感器（PositionSensorVRDevice）。例如在手机上显示的时候，由于手机有陀螺仪，陀螺仪信息能够通过PositionSensorVRDevice接口访问，所以手机的旋转倾斜等就会直接作用到camera上，我们旋转手机，就会看到不同角度的内容。

VR控制器的使用语法如下：

VREffect.js：实现立体视觉的控件，人眼立体视觉的原理基本是依靠深度知觉加上两眼视差来实现的，根据这个原理，VREffect.js把屏幕切割为左右眼所视的屏幕，实现双屏渲染输出，两个屏幕所显示的内容差异由瞳距的偏移offset和左右眼的视角fov决定。两个屏幕分别对应左右眼，利用深度知觉+两眼视差，让大脑“重建”出立体场景。双屏渲染输出流程如下：

图3 双屏渲染流程

立体视觉控件调用代码如下：

var effect=new THREE.VREffect（renderer）;//定义一个立体渲染对象，传入参数renderer为一个WebGLRender（）类型的渲染器，返回对象effect为立体对象渲染器

effect.setSize（window.innerWidth,window.innerHeight）;

//初始化，传递参数为屏幕参数的宽度和高度，该方法里面调用getEyeParameters（），返回左右眼所视屏幕信息

最后把左右眼相机的所示内容分别渲染到左右屏幕，就形成了立体视觉。

2.4 完整流程及实现效果

基于WebVR的艺术品展示程序由两部分组成，初始化部份init（）和动画部分animate（），init（）运行一遍，animate（）方法里面调用 requestAnimationFrame（ani⁃mate）实现渲染循环，重复执行，整个程序的流程图如图4所示。

展示的时候，天空盒背景可以更换，让用户可以在不同环境下面观察具体的艺术品，充分发挥VR沉浸式的体验效果。图5和图6是本案例实现效果，运行于Android手机上面的Chrome浏览器，加上普通的VR盒子就可以进行沉浸式VR体验。

3 结语

WebVR技术应用在在线艺术品展示或在线博物馆方面，目前还是处于起步阶段，除了技术瓶颈之外，高精度的模型制作也需要花费很大的工作量，随着3D扫描仪扫描质量的提升，建模工作量将会大大较少，难度也降低。当我们在博物馆观看某个展品的时候，我们只能隔着橱窗，无法细致观察，利用本文介绍的技术和方法，我们观察的时候，只要拿出手机，扫描一下展品对应的二维码，马上我们的手机屏幕就出现了该展品，我们可以在手机上随意缩放该展品，每个角度都可以观察，而且可以切换到VR模式，进行沉浸式的体验。