为什么JavaScript也将征服VR世界征服者3中国将领

在运动的时候,有无数个瞬间我们可能想要把自己看到的美景记录下来,但取相机也是个麻烦的事情,有些极客亮出了自己的 GoPro。想要把 GoPro 的视频实时回放又免不了一番折腾,我们不禁疑惑,科技这么发达的今天,难道我们要自己动手做一台心仪的设备吗?...
如果你幸运地拿到HTC Vive,这里有些使用小提示和技巧,可助你获得最顺畅的体验。
1. 防止电线打结如果你习惯了移动端虚拟现实,PC端如HTC Vive的缺点之一就是在你四处走动时,身后会拖着一根长长的电线。如果电线不小心打结了,就像是公园的...
这篇文章本应该在2个月前就出现了,但是一直都没有足够的动力去写。直到,我最近在玩知乎,也看到了一个类似的问题。加上这是一个无聊的小长假,就把这篇文章写出来。
这篇文章分成四部分:
· 基础知识:3D世界与四元数
· 一个Hello, World
德意志银行(以下简称“德银”)发布最新VR报告,以Oculus、HTC Vive、PS VR等主流VR产品为例,解读VR产品面对的机遇和挑战。以下为报告摘要:虚拟现实时代到来
面对历史上最大规模的VR产品来袭之际,德银观察到一些核心趋势:
Facebook展示VR社交:在虚拟现实世界里和朋友玩自拍
4月14日消息,在Facebook F8开发者大会上,Facebook CTO Mike Schroepfer向观众展示了VR社交,还在虚拟现实世界里和朋友用自拍杆合影了。
Schroep...
世界上最有有资历、最成功的软件公司之一对虚拟现实敞开了怀抱。Adobe将“Photoshop”做成了图像处理软件,PS被全世界的人使用,甚至“PS”这个词语已经被用作动词。Adobe还负责Flash,可以说这个软件帮助提供了最早的网络视频,不过现...
随着两大高端VR设备,Oculus Rift和HTC Vive消费者版本的相继推出,人们对于虚拟现实的热情以好奇心也在不断的上升。互联网上的搜索热度就是好奇心增长最好的表现。据外媒报道,谷歌 趋势 (Google Trends)的统计显示今年的VR热...
闷声憋大招,华为从来是这个风格。而它的每一次手起刀落,无不是成为眼球的流量池。
在昨天下午的P9发布会上,华为正式推出其首款VR眼镜。
该产品被简单地命名为“Huawei VR”,可支持华为Mate等系列智能手机,典型的头戴式设计,延迟...
4月16日由极果和智工具主办的2016 GTIC VR/AR财产峰会在北京召开,主办方除了聘请众位行业嘉宾参加分享,还向公家展示了最新的Oculus CV1头显以及微软的全息眼镜Hololens,这在国内算的上是初度展示。公家体验CV1,耳机和头...
随着Oculus Rift和HTC Vive的上市,虚拟现实(VR)成了当下最为火爆的话题,但缺货问题却让两家厂商心虚,不过却养肥了黄牛党。
由于发货推迟,原价分别为600美元和800美元的两款产品现在在eBay上已经炒到了2000美元(约合人民币1...1您目前的活力值不够下载该资源哦~~
怎么样快速获得活力值?
下载此资源将扣除活力值-20
(只在首次下载扣除活力值,之后可以免费下载)
DevStore用户登录
还没有DevStore帐号?
快捷登录:
满足所有需求,助您轻松工作
为什么JavaScript也将征服VR世界
说不定你们公司下个项目就是VR,赶紧多学学。
DevStore编辑 陈儿
?这篇文章分成四部分:
基础知识:3D世界与四元数
一个Hello, World
应用篇——高级示例
因为我只玩过公司的Oculus DK2,所以这里是以DK2为内容而展开的。
实际上,要用JavaScript来用VR程序是很简单的一件事:
使用Node.js来读取Oculus上的传感器的数据,将这些数据用WebSocket协议来提供一个服务。
寻找一个3D游戏引擎,如Three.js来创建一个3D世界。
读取传感器的值将其表示在3D世界中。
这点也可以用在混合应用上,你只需要有一个CardBoard即可。使用Cordova读取手机传感器的数据,再通过这些数据来改变WebView的状态——除了发热会比较严重,应该没有别的影响。
1、基础知识:3D世界与四元数
在我们所熟知的3D游戏里,点的位置由三个坐标决定的(x,y,z),如下图所示:
这三个坐标只能表示我们在这个世界的位置,而不能上下的看这个世界。
Oculus DK2用的是MPU(Motion Processing Unit)芯片是MPU6500,是第二个整合性6轴运动处理组件(第一个是MPU6050)。它可以数字输出6轴或9轴的旋转矩阵、四元数(quaternion)、欧拉角格式(Euler Angle forma)的融合演算数据。
这时候,我们就需要欧拉角以及四元数来表示物体在虚拟世界的状态。(PS:原谅我只能简单地提一下)
欧拉角是一组用于描述刚体姿态的角度,欧拉提出,刚体在三维欧氏空间中的任意朝向可以由绕三个轴的转动复合生成。通常情况下,三个轴是相互正交的。
其对应的三个角度又分别成为roll(横滚角),pitch(俯仰角)和yaw(偏航角)。
而四元数则是:
四元数可以用于表示三维空间里的旋转。它常用的另外两种表示方式(三维正交矩阵和欧拉角)是等价的。人们用四元数来表示旋转要解决两个问题,一是如何用四元数表示三维空间里的点,二是如何用四元数表示三维空间的旋转。
之前玩过的6050出来大概就是这样子的,如果你玩四轴飞行器的话,你也应该这样玩过:
Copy/Paste完上面的内容后,你可能没有啥概念,还是举个hello,world的例子。
2、例子:一个hello,world &
让我们在回到一开始说的那三步,我们将需要做三件事:
寻找一个Node的Oculus拓展——不过,这件事现在可以交给WebVR。
寻找一个Web的3D库,及其对应的Oculus展示插件。
读取传感器数据,显示到虚拟世界中。
如下图所示:
于是找至了对应的Node库有:Node-HMD,它可以读取传感器的数据。
还有Three.js和 Oculus Effect插件,可以显示出下面的视图:
这样,我们DK2 Control读取传感器的数据,就可以到这个虚拟世界玩了~~。
更详细的介绍可以见: /phodal/oculus-nodejs-threejs-example&
3、高级应用:火星漫游者 &
上面的应用示例还是太简单了,让我们来看一个高级应用——这是我们在两个月前做的另外一个Hackday Idea,这是另外一个“火星漫游者”:
想象一下你想去看看火星,但是你又没有钱去。而你可以租用这样的一个机器人,然后你就可以在火星漫游了。
因此,首先我们需要一个实时视频通讯,这里我们就用到了WebRTC:
通过WebRTC我们就可以在计算机浏览器上实现实时通讯,再通过Three.js就可以将这个视频转为一个近似3D的视角。而捕获这个视频即可以通过手机上的浏览器,也可以在手机上编写相应的Web应用。
这里有一个在线的Demo:/WebGL/DK2Demo.html
架构大致如下图所示:
这样我们就解决了实时视频这个问题,然后我们还需要去控制硬件:
用WebSocket协议来提供Oculus的上、下、左、右运动的数据
在手机上读取这个传感器数据,并将这个数据通过BLE传送到小车上。
小车以通过指令来做相应的运动。
关于这部分内容的可以看我之前的那篇文章《我是如何Hack一个机器人的?》,链接: /blog/how-to-hack-a-robot/
4、总结:All in JavaScript。 &
标题自然只是用来吸引读者来看的~~。与C坑坑(C++)相比,JavaScript更适合搭建原型——快速、直接、有效,毕竟C++编译需要时间的。运行起来的效果也如预期的一样,电脑风扇各种转,不知道是不是Mac专有的。不过,我想这个性能问题是一直都有的。
【来源,微信公众号 】
已收藏 取消
陈儿 DevStore编辑
简介:天涯草一棵
可能喜欢的文章
开发者交流群:
DevStore技术交流群2:
运营交流群:
产品交流群:
深圳尺子科技有限公司
深圳市南山区蛇口网谷万海大厦C栋504
Copyright (C) 2015 DevStore. All Rights Reserved这篇文章本应该在2个月前就出现了,但是一直都没有足够的动力去写。直到,我最近在玩知乎,也看到了一个类似的问题。加上这是一个无聊的小长假,就把这篇文章写出来。这篇文章分成四部分:基础知识:3D世界与四元数一个Hello, World应用篇——高级示例因为我只玩过公司的Oculus DK2,所以这里是以DK2为内容而展开的。实际上,要用JavaScript来用VR程序是很简单的一件事:使用Node.js来读取Oculus上的传感器的数据,将这些数据用WebSocket协议来提供一个服务。寻找一个3D游戏引擎,如Three.js来创建一个3D世界。读取传感器的值将其表示在3D世界中。这点也可以用在混合应用上,你只需要有一个CardBoard即可。使用Cordova读取手机传感器的数据,再通过这些数据来改变WebView的状态——除了发热会比较严重,应该没有别的影响。一、基础知识:3D世界与四元数在我们所熟知的3D游戏里,点的位置由三个坐标决定的(x,y,z),如下图所示:这三个坐标只能表示我们在这个世界的位置,而不能上下的看这个世界。
Ctrl+D&将本页面保存为书签,全面了解最新资讯,方便快捷。一切可以用 JavaScript 编写的程序,最终都会使用 JavaScript 编写
——Atwood 2007
就在前几天“JavaScript是世界上最好的语言”这句话火了,PHP的地位遭受了前所未有的挑战。JavaScript到底有何神通,能登上世界上最好的语言的宝座?
JavaScript是诞生于1995年的一种直译式脚本语言,原名Mocha。JavaScript是一种动态类型、弱类型、基于原型的语言,内置支持类型。JavaScript具备简单灵活和跨平台的优势,会成为解决大部分IT问题的优选方案。著名程序员 Jeff Atwood 在2007年发布了著名的 Atwood's Law:“Any application that can be written in JavaScript, will eventually be written in JavaScript.
(一切可以用 JavaScript 编写的程序,最终都会使用 JavaScript 编写)”。就像世界上大多数人都是白种人一样,GitHub上用JavaScript写的代码也占据了大多数,JavaScript的开放性和简洁性功不可没。
2016年被誉为“中国VR元年”。所谓VR,就是一种多源信息融合的、交互式的三维动态视景和实体行为的系统仿真,能使用户沉浸到虚拟的环境中。
WebVR是一项结合了VR和Web的技术,让人们可以直接利用JavaScript与WebGL构建VR应用。而Chrome与设备位置(转身)和动作信息(眼球跟踪)等传感器的结合就是WebVR迈出的一大步。目前国外常见的用JavaScript编写的3D游戏引擎有Three.js,而FaceBook今年新推出的React VR更是大大降低了JavaScript程序员进军VR的门槛。
尽管目前VR领域仍然是Unity-3d的时代,VR程序员都是写C#的,但JavaScript征服VR世界只是一个时间问题。
什么是Egret Engine 3D
上文介绍的几个用JavaScript编写的VR游戏引擎都是舶来品,其实国内也有优秀的游戏引擎支持JavaScript开发者进军VR领域——最著名的当属白鹭时代研发的Egret Engine 3D。
Egret Engine 3D包含了白鹭时代研发的遵循HTML5标准的2D引擎及全新打造的3D引擎,不仅妥善解决了HTML5性能问题及碎片化问题,还灵活地满足开发者开发2D、3D乃至VR游戏的需求,更有着极强的跨平台运行能力。目前已经占据了国内70%以上的市场份额。
如何用Egret Engine 3D开发WebVR
用Egret Engine 3D开发WebVR的官方教程很详尽,而用户自发的教程和demo更丰富多彩,我只谈几条注意事项:
一、前期准备工作:
1、一部装有Chrome浏览器的Android手机
2、Google CardBroad,这个不一定要花一顿午餐的钱去买,擅长DIY的技术宅剪碎一个纸箱折一个就好
3、Egret Wing,理论上WebStorm和Sublime等一切JavaScript IDE都可以,不过我建议用官方推荐的
4、WebVR标准库和Egret3D VRController
二、3D模型和贴图
1、Egret Engine 3D支持一切3D Max支持的模型
2、目前Egret暂停了3D Max插件导入,模型需要用Unity插件导入
3、官方工具暂时不支持3D骨骼,是个小小的遗憾
三、常见bug
1、Egret Engine 3D引擎造VR软件太容易,3D画面的代码把View3D改成VRView3D就成了VR画面,然后加上设备位置和眼球跟踪就是VR游戏。我要在这里支出一个可能出现的bug,View3D改成VRView3D有时会报错,只要把_super.call()方法放在构造函数最下边就可以解决。
2、用PC上的浏览器看VRView3D效果帧频刷新明显比View3D要快许多是正常现象,只有在PC上的浏览器上显得刷新快,才能在VR设备正常刷新。
Egret还能为你的VR游戏做什么
Egret Open Platform就像UMeng和Bugly一样,提供云服务、Crash分析、数据统计和一站式接入等服务,打通了JavaScript开发者与渠道商之间的桥梁。
HTML5开发者服务联盟(以下简称“HDSA”)是由白鹭时代联合小米MIUI等各领域顶尖企业共同创建的服务平台。HDSA致力于为JavaScript开发者提供办公场地、培训教育、媒体、广告等技术之外的生态系统,为JavaScript开发者从开发到上线盈利提供一站式解决方案。
Erget布道师徐聪,不但能帮开发者解决技术问题,也能协助开发者把VR游戏投放到公众号和小程序等微信产品上,还经常向有创意的开发者送礼物,他一个人就是整个Egret生态系统的一个重要组成部分。
本文已收录于以下专栏:
相关文章推荐
作用域作用域初级解读作用域是一套规则,用以规定变量的存储和查找方式。
在实际应用的时候,经常会发生作用域的嵌套,当JS引擎在当前作用域无法找到需要的变量时,就会顺着作用域链继续查找,直到找到变量或者...
this关于this的错误观点:
1、this指向函数自身。
但其实,this并不指向函数自身。有一种传统的但是现在已经被弃用和批判的用法,是使用 arguments. callee 来引用当前...
HTML中我们一般把head部分称为网页的头部。头部部分的内容虽然不会在页面中显示,但它能影响到搜索引擎对网页的收录和排序,以及网页的各种全局设置,可以说是至关重要。
HTML中我们一般把head部分称为网页的头部。头部部分的内容虽然不会在页面中显示,但它能影响到搜索引擎对网页的收录和排序,以及网页的各种全局设置,可以说是至关重要。
接下来我们来看看“VR/AR/AI”到底是个啥?或许有些人对这些概念一知半解,但是如果你真的从来没听说过这些词,那真的是SO OUT 了。
在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活、强大,不像是Java等强类型高级语言数组只...
他的最新文章
讲师:王哲涵
讲师:韦玮
您举报文章:
举报原因:
原文地址:
原因补充:
(最多只允许输入30个字)Copyright &
(/) 办公资源交流中心
免责声明: 本网资源来源于互联网,本网转载出于传递更多信息和学习之目的,并不意味着赞同其观点或证实其内容的真实性
如转载稿涉及版权等问题,请联系我们及时删除以保证您的权利。对使用本网站信息和服务所引起的后果,本网不做任何承诺。

我要回帖

更多关于 世界征服者3 不买将 的文章

 

随机推荐