移动虚拟现实渲染（译文）

原文地址：https://www.codeproject.com/Articles/831126/Mobile-Virtual-Reality-Rendering

原文作者：Robert Welliever

译文由本站 robot-v1.0 翻译

前言

Advanced introduction to rendering browser-driven, parallax 3D environments

渲染浏览器驱动的视差3D环境的高级介绍

• 下载源13.4 KB(Download source - 13.4 KB)

介绍(Introduction)

只需一个代码文件,即可在各种现代设备上渲染虚拟现实(VR)游戏的图形很容易!声音牵强？我提供了一些说明和理由,还有令人兴奋的街机游戏Tetro 2D/3D,其中带有完整注释的源代码作为概念证明.(Rendering graphics for Virtual Reality (VR) games on the spectrum of modern devices with a single code file is easy! Sound far-fetched? I’ve provided a few explanations and justifications, plus the exciting block game Tetro 2D/3D with fully commented source code as proof of concept.)

目的(Purpose)

令您满意的是,您的高级编码技能和好奇的天性使您摆脱了介绍.我们之所以来到这里,是因为我迷上了我长大的"虚拟现实"或虚拟现实. VR与80年代以来的Alf,Max Headroom和其他神秘的事物长期腐烂在一起,VR成为了计算机时代的空前希望.好吧,随着时间的流逝,现在我们生活在未来,强大而廉价的计算促使VR重新站稳脚跟. Oculus裂谷(I’m pleased your advanced coding skills and inquisitive nature have brought you past the introduction. We’re here now because I’ve been enamored with the resurgence of what I grew up knowing as “Virtual Reality” or VR. Long rotting wayside with Alf, Max Headroom and other esoteric blips from the 80s, VR became the unfilled promise of a dawning computer age. Well, time passed and now that we’re living in the future, powerful and cheap computing has prompted VR to regain footing. The Oculus Rift)1个(1)已经为这项技术和Google的Cardboard带来了知名度和吸引力(has brought awareness and appeal to the technology, and Google’s Cardboard)2(2)促进了创新和可及性.本文旨在通过揭示围绕VR图形的一些神秘事物来激发他人,并激发人们对VR持续复兴的兴趣.(has contributed innovation and accessibility. This article is meant to inspire others and drive interest for the continued revival of VR by unraveling some mystery surrounding VR graphics.)

使用代码(Using the Code)

如果您不耐烦或者只是不在乎解释或理由,则源代码以单个HTML文件的形式存在,(If you’re impatient or just don’t care about explanations or justifications, the source code exists as a single HTML file, “)Tetro.htm(Tetro.htm)",并嵌入了CSS和JavaScript.要以2D模式播放,请使用任何当前版本的浏览器(建议使用Chrome)打开文件.要以3D模式播放,您可以另外使用Cardboard或具有Side-By-Side模式的3D监视器.如果您想阅读或编辑代码,请在任何文本编辑器中打开文件.十分简单.(” with CSS and JavaScript embedded. To play in 2D mode, open the file with any currently-versioned browser (Chrome recommended). To play in 3D mode, you may additionally use Cardboard or a 3D capable monitor in Side-By-Side mode. If you’d rather read or edit the code, open the file in any text editor. Easy Peasy.)

为什么选择Tetro？(Why Tetro?)

俄罗斯方块的创造者Alexey Pajitnov无疑被评为编程名人堂.他的游戏简单易用,非常适合作为说明工具使用,但直接复制将构成侵权.本文改为使用语义不同的游戏Tetro.本文并非旨在作为游戏本身的编程教程,因为已经有其他Code Project文章探讨了游戏逻辑.我假设您已经了解tetromino游戏(Tetris creator Alexey Pajitnov undoubtedly ranks as a programming Hall-of-Famer. The simplicity of his game makes it ideal as an illustrative tool, but copying it directly would be infringement. This article instead uses a semantically different game called Tetro. This article is not intended as a programming tutorial for the game itself as there are already other Code Project articles that explore game logic. I’m assuming you already understand tetromino games)3(3)或者可以通过现有教程解开谜团.相反,我选择Tetro是因为它具有苗条的游戏逻辑,可以增加实际渲染的可见性.(or could unravel the mystery with existing tutorials. Instead, I chose Tetro for its slim game logic, allowing for increased visibility of the actual rendering.)

本机与Web(Native vs. Web)

好的,因此您已经知道Windows,Android,Apple等设备执行本机处理的路径各不相同.这意味着您需要多次编写应用程序才能将软件分发到各种设备. Web应用程序旨在通过允许程序员通用且独立于设备的运行时(非常类似于Java和JRE)来解决此问题.尽管历史记录表明浏览器已经实现了一些W3C标准,但兼容性强和/或故意不兼容,但任何单个Web文件在不同浏览器之间均等呈现的整体实力非常出色.因为我在这里演示HTML作为VR游戏可行平台的强大功能,所以我选择仅使用纯HTML,CSS和JavaScript.无需使用JQuery或其他包装器,只需使用自由范围的有机网络即可.(Ok, so you already know that Windows, Android, Apple, etc. devices execute differently with distinct paths to native processing. This means that you need to write an application many times over in order to distribute your software to the spectrum of devices. Web applications aim to fix that by allowing programmers a universal and device-independent runtime (much like Java and the JRE). While the history shows that browsers have implemented some W3C standards with soupy compatibility and/or willful incompatibility, the overall prowess of any single web file to render equally among different browsers is excellent. Because I’m here to demonstrate the power of HTML as a viable platform for VR gaming, I’ve selected to use only pure HTML, CSS, and JavaScript. No JQuery or other wrappers used, just free-range, organic web.)

矢量与栅格(绘画与绘画)(Vector vs. Raster (Drawing vs. Painting))

正如您的经验所教,图形渲染大约有两种样式,即矢量和栅格.栅格(位图)图形利用2D网格的彩色对象依次捣碎以创建游戏的显示.如果游戏的分辨率没有改变,那么光栅图形可能看起来令人赞叹不已.不幸的是,存储,传输和变换彩色网格在计算上是昂贵的,并且需要预先存在的资产(例如背景,物品,字符和其他精灵).此费用乘以可播放分辨率的数量,考虑到市场上设备分辨率的范围,可播放分辨率的数量可能会很大.(As your experience has taught you, there are roughly two styles of graphics rendering, vector and raster. Raster (bitmapped) graphics harness 2D grids of color objects mashed in succession to create the game’s display. If the game’s resolution doesn’t change, then raster graphics may look stunningly photographic. Unfortunately, storing, transmitting, and transforming colored grids is computationally expensive and requires pre-existing assets (e.g. backgrounds, items, characters and other sprites). This expense is multiplied by the number of playable resolutions which may be large considering the range of device resolutions to market.) 重视简单性和可移植的源代码,我选择使用矢量图形专门实现Tetro.矢量图像不是颜色网格,而是很少的渲染配方(请考虑着色书中的"连接点").本质上,一系列导数或点与绘图指令一起存储.向量处理仅用很少的字节来表达这些几何形状和指令,因此发疯的速度非常快,甚至可以支持最有限的硬件(只要设备具有足够的软件).向量处理的几何性质与Tetro的块状渲染非常吻合.(Valuing simplicity and portable source code, I have alternatively chosen to implement Tetro exclusively using vector graphics. Vector images are not color grids, but rather little rendering recipes (think connect-the-dots from coloring books). Essentially, a series of derivatives or points are stored with draw instructions. Taking very few bytes to express these geometries and instructions, vector processing is insanely fast and can champion even the most limited hardware (provided the device has adequate software). The geometric nature of vector processing aligns well with Tetro’s blocky rendering.) 最后要考虑的是,矢量图形可缩放至任何分辨率,而不会在调整位图大小时发生丢失或突变.矢量图形的动态和响应式调整可实现最大的兼容性,而无需增加费用.附带说明一下,学会与矢量和栅格有效协作将有助于在报告系统,现代游戏和其他动态渲染解决方案中进行有意义的GIS/映射,制图和制图.(A final consideration is that vector graphics scale to any resolution without the loss or mutation that occurs when resizing bitmaps. The dynamic and responsive sizing of vector graphics allows maximum compatibility without added expense. On a side note, learning to work effectively with vectors and raster cooperatively facilitates meaningful GIS/Mapping, graphing and charting within reporting systems, modern gaming and other dynamic rendering solutions.)

3D与3D(3D vs. 3D)

近年来引入了新的3D技术,有时很难区分上下文,尤其是图形渲染时.在最初的VR诞生约十年后,3D图形在诸如Nintendo之类的游戏机上受到消费者欢迎(With new 3D technologies introduced in recent years, it’s sometimes difficult to distinguish context, especially true with graphics rendering. About a decade after the initial VR, 3D graphics came to consumer popularity with gaming consoles such as the Nintendo)64(64)和Playstation.除了来自2D游戏领域的重要深度效果(如灯光和阴影)外,我们还看到了使用附加轴建模的对象.代替了传统的侧滚动和上滚动游戏在X和Y轴上的限制运动,而是添加了第三个轴Z. Z轴通过添加"近和远"分量允许新的尺寸.在3D空间中存储和处理游戏对象创造了无与伦比的真实感,但仍然缺乏(and Playstation. In addition to important depth effects as lighting and shadows from the 2D gaming realm, we were seeing objects modeled with an additional axis. Instead of confined movement along the X and Y axes by traditional side and top-scrolling games, a third axis, the Z was added.  The Z axis allowed new dimensionality by adding the “near and far” component. Storing and processing game objects in 3D space had created unparalleled realism, but still lacked the)**其他(other)**3D(3D.)

另一个3D可以是所谓的立体或视差3D.视差是两个眼球在看东西时看到的角度之间的角度差.您的大脑不必将每个眼球的图像分别进行分析,而是将它们流在一起,并将差异合理化为对深度的感知.如果您有更多的眼睛,那么您的深度感知将变得更加坚定,而如果您有更少的眼睛,那么整个概念将对您失去.请记住,至少要减去两个参考点才能得出差值,这就是为什么至少要用两只眼睛对深度进行三角测量的原因.(The other 3D is what may be called stereoscopic or parallax 3D. Parallax is the angular difference between what each of your two eyeballs see when looking at something. Instead of analyzing each eyeball’s image separately, your brain streams them together and rationalizes the difference as a perception of depth. If you had more eyes, then your depth perception would become more resolute, while if you had fewer eyes, then this whole concept would be lost on you. Remember it takes at least two points of reference in order to subtract one and get a difference, which is why it takes at least two eyes to triangulate depth.)

尽管使用了Z轴,但3D控制台游戏类似于一个人的眼睛如何感知3D世界,因为屏幕本身实际上是2D.为了在不存在实际深度时进行真实的3D模拟,我们需要每个眼球一个图像流以及最小两眼球,然后重新输入VR技术.通过VR为每只眼睛创建不同的图像流,该技术可以同时利用游戏3D和视差3D来创建最真实的视觉体验.(Despite use of the Z axis, 3D console gaming is analogous to how a one-eyed person perceives a 3D world because the screen itself is actually 2D. To render a true 3D simulation when actual depth is not present we require one image stream for each eyeball and a two-eyeball minimum, re-enter VR technology. With VR creating a different image stream for each eye, the technology can utilize gaming 3D and parallax 3D concurrently to create the most realistic visual experience.)

VR输出(VR Output)

如果您拥有3D电视,则很可能已经用它来观看3D蓝光光盘. 3D蓝光(和3D影院)通过以全分辨率快速交替左右帧来产生视差效果.这就是为什么3D监视器或投影仪必须以两倍的刷新率运行的原因.它先绘制左眼看到的内容,然后连续绘制右眼看到的内容,但表示单个运动帧.(If you have a 3D television then you likely have used it to watch 3D Blu-ray discs. 3D Blu-rays (and 3D theatres) create their parallax effect by rapidly alternating left and right frames at full resolution. That is why a 3D monitor or projector must operate at a doubled refresh rate. It draws what the left eye sees and then draws what the right sees in succession, but indicating a single frame of motion.) VR采用略有不同的策略,称为并排或SBS 3D. SBS在同一帧中将左右图像绘制在一起. VR设备将两眼之间的物理屏障细化,并汇聚在分割线上.如果您已经使用过View-Master玩具,那么您已经了解了此方法的工作原理.优点是,以正常的刷新率可以实现平滑的3D,从而扩大了可用设备的范围.(VR employs a slightly different strategy called Side-by-Side or SBS 3D. SBS has both the left and right images drawn together in the same frame. A VR device puts a thin physical barrier between your eyes that converges on the split line. If you’ve handled a View-Master toy, then you already understand how this method works. The advantage is that smooth 3D is possible with a normal refresh rate, widening the range of capable devices.)

请注意,3D监视器和电视通常支持SBS渲染.但是,与当前的VR设备不同,电视硬件将图像切成两半,并在交替的帧中渲染每个拉伸的一半.与蓝光一样,此方法也需要两倍的刷新率,因为它可以连续渲染左右图像.这种SBS渲染方法的问题在于,最终图形将以水平分辨率的两倍进行拉伸.除非您预先压缩图形以进行补偿,否则游戏将出现倾斜.(Please note that 3D monitors and televisions commonly support SBS rendering. However, unlike current VR devices, the television hardware cuts the image in half and renders each stretched half in alternating frames. Like Blu-rays, this method also requires a doubled refresh rate because it renders left and right images in succession. An issue with this method of SBS rendering is that the final graphic is stretched at exactly twice the horizontal resolution. Unless you pre-squish the graphics to compensate, the game will appear skewed.)

计算视差(Calculating Parallax)

首先要指出的是,在计算深度时,我们并不关心Y轴值.为了使高度视差分解,我们将需要注意下巴或前额,因此左右视图中的Y值相同.要注意的另一件事是,所有Z轴值都需要转换为X轴偏移量.这是必要的,因为实际上VR设备和监视器只有长度和宽度(记住深度是一种错觉).这意味着虽然我们可以在对象模型中使用Z轴,但最终图形必须将Z值转换为X轴.(The first thing to point out is that when calculating depth, we are not concerned with Y axis values. We would need eyes on our chin or forehead in order for height parallax to factor, so Y values in the left and right views are the same. Another thing to note is that all Z axis values need to be translated to X axis offset. This is necessary because VR devices and monitors in reality only have length and width (remember depth is an illusion). This means that while we can have the Z axis in our object model, the final drawing must translate Z values to the X axis.)

SBS要求您在同一视图中两次渲染图像,每只眼睛一次.如果左右两半使用两个相同的图像,则所有对象的相对位置都将相同,并且看起来与设备屏幕在视觉上处于同一水平.为了说明一个水平物体,下图显示了棕榈树的SBS渲染,该树的X坐标(与左边框的距离)对于左右框架均设置为146像素.由于棕榈树具有相等的X坐标,因此当您的大脑合并图像时,它将与设备齐平.(SBS requires that you render an image twice into the same view, once for each eye. If you use two identical images for the left and right halves, then all the objects will have the same relative positioning and appear to be visually level with the device screen. To illustrate a level object, the below image shows a SBS render of a palm tree having its X coordinate (distance from left border) set to 146 pixels for both the left and right frames. As the palm tree has equal X coordinates, it will be level with the device when your brain combines the images.)

但是,如果沿正X方向渲染右框架的手掌,那么您的大脑将把差异解决为距离较远的树.(However, if you render the right frame’s palm in the positive X direction, then your brain will resolve the difference as a more distant tree.)

相反,如果沿负X方向渲染右框架的手掌,那么您的大脑将把差异解决为更近的棕榈树.(Conversely, if you render the right frame’s palm in the negative X direction, then your brain will resolve the difference as a nearer palm tree.)

这里的所有都是它的.视差的计算只是X轴偏移与所需深度感知之间的合理关联.在现实生活中,其他因素(例如温度,大气,重力等)会影响计算.但是,在编写游戏时,制定深度时更实际的事情是视觉舒适度.最终,可能需要使用艺术镜头而不是数学镜头进行测试以提供无眩晕的环境.(That’s all there is to it. The calculation of parallax is just a reasonable correlation between the X axis offset and desired perception of depth. In real life, additional factors (e.g. temperature, atmosphere, gravity, etc.) affect the calculation. However, when writing for games, a more practical matter in formulating depth is visual comfort. Ultimately, testing with an artistic rather than mathematical lens may be required to render a vertigo-free environment.)

渲染视差(Rendering Parallax)

为了将SBS实际呈现到屏幕上,我们只需要在图形中循环两次,每只眼睛的帧一次.在第一次迭代期间,在不考虑3D的情况下绘制了左框架.当Tetro在2D模式下运行时,它实际上只是以屏幕为中心的左框架的渲染.在3D模式下时,还将渲染右帧并携带所有视差偏移,从而生成深度.为了获得这些偏移量,我们可以通过减去或增加来修改任何X坐标,具体取决于我们希望对象更近或更远.对象模型中的Z坐标应指示实际偏移值.(To actually render SBS to the screen, we just loop through the drawing twice, once for each eye’s frame. During the first iteration, the left frame is drawn without consideration for 3D. When Tetro runs in 2D mode, it is actually just a rendering of the left frame centered to the screen. When in 3D mode, the right frame is also rendered and carries all the parallax offsets, generating depth. To get those offsets, we modify any X coordinate by subtracting or adding, depending on whether we want the object closer or farther. The Z coordinate in the object model should dictate the actual offset value.) Tetro通过渲染近,水平和远物体来演示深度光谱.为了提供远距离渲染的示例,以不同的距离程度绘制背景星.游戏棋子,棋盘,标题和游戏统计数据均已绘制,并且为了展示浅浅的渲染效果,当清除棋盘上的线条时会出现爆炸.(Tetro demonstrates the spectrum of depth by rendering near, level, and far objects. In order to provide an example of far-away rendering, the background stars are drawn at varying degrees of distance. The game pieces, board, title and game statistics are all drawn level, and to demonstrate shallow rendering, a starburst appears when lines are cleared from the board.)

其他注意事项(Additional Considerations)

为了保持代码的简单性,没有采取许多优化措施.例如,绝对没有理由每次都重新绘制星空背景.当没有变化时,无需重新计算和重新绘制每颗星星的位置.为了提高效率,可以使用第二个画布来渲染游戏的静态元素,然后在画布下使用高度动态的元素对其进行分层.此外,您还会在(There were a number of optimizations not taken to keep maintain code simplicity. For example, there is absolutely no reason to redraw the starry background every time. Each star’s position is unnecessarily recalculated and redrawn when no change has occurred. Efficiency would be served to use a second canvas to render the game’s static elements, and then layer it under the canvas with highly dynamic elements. Additionally, you’ll see a large number of calculations inside the) Draw 用于支持动态大小调整和布局的过程.在您自己的模拟中,您可能考虑在更全局的范围内存储支持响应式UI的计算(例如,页面调整大小后),并且在召唤事件之后仅计算一次.(procedure used to support dynamic sizing and layout. In your own simulations, you might consider storing calculations supporting a responsive UI (e.g. after a page resize) in a more global scope and only calculated once after the summoning event.) 虽然本文的重点是渲染,但我想快速解决如何将音频合并到该项目中的问题.虽然浏览器完全能够支持所有听觉和口哨声,以使您的游戏保持嗡嗡作响,但您会发现添加它们可能需要意外的摆弄和咒骂.没有一种音频格式可以转换为所有浏览器,并且任何一种格式在同一浏览器中可能具有多种兼容性,具体取决于编码和编解码器版本控制.为了解决兼容性问题,JavaScript中的Audio对象指定了一个函数,该函数有助于测试音频格式与客户端浏览器的兼容性.要测试mp3功能,您可以通过"(While the article focus is rendering, I wanted to quickly address how audio was incorporated into this project. While browsers are fully capable of supporting all the auditory bells and whistles to keep your game humming along, you’ll discover adding them may require unexpected fiddling and cursing. There is not a single audio format that translates to all browsers, and any one format may have mixed compatibility within the same browser depending on encoding and codec versioning. To help with compatibility issues, the Audio object in JavaScript specifies a function which facilitates compatibility testing of audio formats with the client’s browser. To test for mp3-ability, you would pass “) audio/mpeg “作为类型,并且任何不兼容的浏览器都将返回一个空字符串.但是,如果浏览器不是不能运行,则返回"可能"或"也许”,这两个都不是确定的.无论如何,尽管浏览器中对音频的支持有些松懈,但Tetro演示了如何将嵌入式WAV和MP3类型以及JavaScript应用于声音效果,同时将资源依赖性保持为零.(” as the type and any non-compatible browser will return an empty string. However, if the browser is not-not capable, then either “probably” or “maybe” is returned, neither of which is definitive. Anyways, despite squishy audio support among browsers, Tetro demonstrates use of embedded WAV and MP3 types along with JavaScript to serve sound effects while keeping resource dependencies at zero.) 最后需要考虑的是,用于VR的编程游戏具有本文未探讨的策略.视差下的位置感测和碰撞检测控制就是两个这样的例子.将来的文章中可能还会介绍其他VR编程策略.感谢您的阅读并祝您项目顺利!(A last consideration is that programming games for VR carries tactics not explored in this article. Control by position sensing and collision detection under parallax are two such examples. Perhaps additional VR programming strategies can be addressed in a future article. Thanks for reading and good luck with your projects!)

附加说明(Additional Descriptions)

• 1个(1)Oculus Rift描述-(Oculus Rift description -) http://en.wikipedia.org/wiki/Oculus_Rift(http://en.wikipedia.org/wiki/Oculus_Rift)
• 2(2)Google Cardboard说明-(Google Cardboard description -) http://en.wikipedia.org/wiki/Google_Cardboard(http://en.wikipedia.org/wiki/Google_Cardboard)
• 3(3)Tetromino说明-(Tetromino description -) http://en.wikipedia.org/wiki/Tetromino(http://en.wikipedia.org/wiki/Tetromino)

历史(History)

• 1.0版(Release 1.0)

许可

本文以及所有相关的源代码和文件均已获得The Code Project Open License (CPOL)的许可。

CSS HTML Javascript Dev 新闻 翻译