在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:webvr-demo开源软件地址:https://gitee.com/YorkChan/webvr-demo开源软件介绍:最近WebVR API 1.1已经发布,2.0草案也在拟定中,在我看来,WebVR走向大众浏览器是早晚的事情了,今天本人将对WebVR开发环境和开发流程进行深入介绍。 WebVR与WebVR API首先,WebVR指的是使用浏览器体验VR的方式,如今已经成为了一种开放标准。它提供了JavaScript API,使开发者可以获取vr设备的输入信息,来改变用户在虚拟空间里的位置、视觉、行为等。以下是目前主流VR及浏览器对WebVR的支持情况。
遗憾的是,WebVR的体验方式目前只能运行在Android和Windows系统上。不过这并不影响我们在mac和linux上开发与调试。 WebVR的开发环境配置由于WebVR App需要运行VR设备上,而目前购买一台VR设备的成本不低,所以这里我总结了一套开发环境下WebVR调试方案。首先我们需要给WebVR静态页面起一个web server,这里我安装 Web Server for Chrome,你也可以使用node或者上传至github托管。 PC端调试1. 安装chrome扩展程序 WebVR API Emulation使用WebVR API Emulation扩展程序可以模拟VR设备用户的视角、位置等。 移动端调试适用于cardboard级别的WebVR App调试。 1. 安装chrome beta目前需要webvr还属于早期实验阶段,需要下载chrome beta最新版,安装完需要手动开启webvr支持,在浏览器地址栏输入 2. 安装Google VR 服务这是google给cardboard、daydream用户提供VR服务配置,可以提供VR模式窗口,如下图。最后你可以在chrome上打开WebVR示例页面验证是否配置成功 3. chrome inspector调试通过手机chrome访问我们开发的WebVR页面,在PC端chrome输入 完成WebVR开发环境配置之后,我们将正式进入WebVR开发之旅。 使用WebGL开发WebVRWebVR App实现依赖于WebGL技术开发,WebGL是在浏览器上创建和运行3D图像,它遵循OpenGL ES的规范,通过GLSL语言操作GPU进行顶点片元渲染。在WebGL场景中,3d物体都是通过矩阵变换最终形成屏幕上的2d图像,[投影矩阵
相比一般WebGL场景,WebVR App不同之处在于:
根据以上不同之处,我梳理了一个WebVR App的简单开发流程,如下图。 开发流程总结为: VR数据初始化 → WebGL初始化 → 动画渲染。 一、VR数据初始化使用 let vrDisplay;navigator.getVRDisplays().then(displays => { if (displays.length > 0) { vrDisplay = displays[0]; console.log('Display found',vrDisplay); drawVRScene(); } else { console.log('Display not found'); // 非VR模式下渲染 // drawScene(); }}); 二、WebGL初始化WebGL程序初始化一般分为这几个步骤:编译顶点、片元着色器程序→创建顶点、纹理缓冲区→ 设置画布被清空时颜色→启动深度测试 function drawVRScene() { const canvas = document.getElementById('glcanvas'); // 获取WebGL上下文 const gl = canvas.getContext('webgl'); // WebGL初始化 init(gl); // WebGL渲染 render(gl);}function init(gl) { // 预编译着色器程序 if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { console.log('Failed to intialize shaders.'); return; } // 创建顶点缓冲 initVertexBuffers(gl); // 创建纹理缓冲 initTextures(gl,'../assets/texture.jpg'); gl.clearColor(0.4, 0.4, 0.4, 1.0); // 启动深度测试 gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL);} GLSL着色器程序顶点着色器要做的工作是将Js输入的顶点坐标、模型-视图-投影矩阵进行逐顶点运算。 const VSHADER_SOURCE = `attribute vec4 a_Position;uniform mat4 u_MvpMatrix;attribute vec2 a_TexCoord;varying highp vec2 v_TexCoord;void main() { gl_Position = u_MvpMatrix * a_Position; v_TexCoord = a_TexCoord;}`; 片元着色器主要处理片元颜色,在这里只是将纹理坐标和纹理对象传给片元着色器。 const FSHADER_SOURCE = `uniform sampler2D u_Sampler;varying highp vec2 v_TexCoord;void main() { gl_FragColor = texture2D(u_Sampler,v_TexCoord);}`; WebVR前期初始化之后,我们需要创建动画来渲染VR场景。 三、动画渲染1. requestAnimationFrame创建动画通过使用vrDisplay实例的 function render(gl,vrDisplay) { // 创建VR帧数据对象 const frameData = new VRFrameData(); const u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix'); function animate() { // TODO draw(frameData,u_MvpMatrix); // 通过递归的方式,执行绘图函数,产生动画 vrDisplay.requestAnimationFrame(animate); } animate();} 我们在启动动画递归之前使用 2. VR渲染2.1 使用viewport设置双视口WebGL上下文提供了 function draw(frameData,u_MvpMatrix) { gl.viewport(0, 0, canvas.width * 0.5, canvas.height); // 设置左侧视口 // TODO gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height); // 设置右侧视口 // TODO} 左、右侧视口的渲染宽度为 2.2 使用VRFrameData动态渲染前面介绍了WebVR渲染需要根据用户行为动态绘制每一帧场景,具体做法是:1)通过WebVR API提供的 function draw(gl,frameData,u_MvpMatrix) { const { leftProjectionMatrix, leftViewMatrix, rightProjectionMatrix, rightViewMatrix } = frameData; // 初始化模型矩阵,模型-视图-投影矩阵 let modelMatrix = mat4.create(), vpMatrix = mat4.create(), mvpMatrix = mat4.create(); // 将左眼视图渲染到画布的左侧 gl.viewport(0, 0, canvas.width * 0.5, canvas.height); // mvpMatrix = ProjectionMatrix × ViewMatrix × modelMatrix // 这里使用gl-matrix.js的mat4对象对float32Array进行矩阵操作 mat4.multiply(vpMatrix,leftProjectionMatrix,leftViewMatrix); mat4.multiply(mvpMatrix,vpMatrix,modelMatrix); // 将模型-视图-投影矩阵mvpMatrix传入着色器 gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix); // 左侧绘图 gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_SHORT, 0); // 将右眼视图渲染到画布的右侧 gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height); mat4.multiply(vpMatrix,rightProjectionMatrix,rightViewMatrix); mat4.multiply(mvpMatrix,vpMatrix,modelMatrix); gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix); gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_SHORT, 0); // 生成下一帧数据并覆盖原来的frameData vrDisplay.getFrameData(frameData); vrDisplay.submitFrame();} 首先,在动画渲染前通过
最后,在每一帧动画回调结束前,我们调用 至此,WebVR的开发流程已基本走完,具体代码可以参考下方demo项目代码:https://github.com/YoneChen/webvr-demo 结语:使用原生WebGL开发WebVR应用相比three.js或者aframe代码要复杂很多,不过通过这种方式却能更深入的了解WebVR的工作原理。 想了解three.js开发webvr,可参考《VR大潮来袭---前端开发能做些什么》也欢迎各位关注我的专栏 WebVR技术庄园,不定期更新~ 相关资料:计算机图形知识:矩阵变换WebGL快速入门:WebGL 技术储备指南谷歌开发者 | WebVR:WebVR基本原理MDN | WebVR API:使用WebVR API |
请发表评论