IT瘾3d推荐

无开发经验如何借助GPT-4开发一个 3D 太空赛跑游戏

Tue, 21 Mar 2023 07:35:05 CST

有人借助GPT-4，在没有JavaScript二胡3D游戏编程经验的情况下，一点点做除了一个 3D 太空赛跑游戏。最终效果看视频

他首先问GPT-4该如何制作游戏，它建议使用BabylonJS，以及HTML和CSS。

然后作者描述了他的具体要求：

———

1.游戏将采用与原版天空之城相同的摄像头，玩家从飞船后面看到轨道，而飞船则出现在他们面前

2. 我们只有一个关卡，它将是一条无止境生成的轨道，直到飞船掉进缝隙或撞上障碍物，所以这个版本不是关于达成目标，而是关于你能活多久。

3.游戏的控制方法是：空格键跳跃，左右箭头在轨道上左右移动，向上加速，向下减速。

4.做这个游戏时，请记住原来的SkyRoads机制。

5.将原版游戏中的一些颜色带入其中!

提供所有的代码。

———

从ChatGPT获得代码后，将其粘贴到Replit（一个在线运行代码的平台） GPT 告诉具体的运行方法，并且成功了！

当然有些Bug，比如无法左转或右转，无法躲避那些讨厌的障碍物。接着按照错误信息咨询GPT，GPT帮助修复了。

就这样一点完善后，接着游戏需要背景、纹理和宇宙飞船模型。

作者在 Sketchfab 网站上找到了宇宙飞船模型，并要求 GPT 提供代码，用 3D 模型文件替换原始游戏中的绿色立方体。

再去 MidJourney 寻找背景和纹理，并使用Pixelmator 提供的工具对图片进行放大，使纹理可以无缝融入到模型中。

然后再让 GPT 将所有的文件整合在一起。让游戏更具挑战性，障碍物需要有不同的宽度，轨道需要向左和向右分开，保存玩家的最好成绩等等

最后，去 Epidemic Sound 给游戏找音效，让 GPT-4 添加音乐播放器的代码，可以在有爆炸和游戏结束的声音。

注意事项：

1. 代码太长以至于 ChatGPT 无法作为问题接受，所以得借助 API playground，可以输入更多内容。

告诉 GPT 它是“世界级的 BabylonS 开发人员”时，GPT 生成的结果会更有针对性。

最后在 3 天的时间里，在 3D 游戏编程知识为零的情况下，作者能够使用 Al 和现有工具的组合重新制作他儿时最喜欢的游戏之一的改编版！

🧵 http://t.cn/A6CukJsO

🐦 twitter.com/ammaar/status/1637592014446551040 http://t.cn/A6Cukivs

的卢深视CEO户磊：我们为什么用3D人脸技术做安防？

Sat, 18 May 2019 19:01:00 CST

2017年，苹果将3D结构光带到了手机领域，从此三维人脸识别便逐渐成为消费级市场颇为主流的识别方案。

不过，在行业的目光多停留在3D结构光的消费级应用时，却有一家AI创企的卢深视，开始着眼于安防领域。

安防领域的三维人脸识别，与消费领域面临的问题并不相同。

消费终端中的三维人脸识别，在使用期间往往只针对一个用户的人脸进行反复检测与识别，因此是高频的1:1比对，而每次比对过程中，算法也可对真人的面部特征进行多次提取，实现真实场景数据闭环回馈，利用生产环节的大数据进行半监督自主学习，提升性能。

而在安防这类公共场景中，单个用户在区域摄像头面前出现的频次相对有限，且多数用户的人脸底库数据为二维照片，致使公共摄像头难以对单个人脸的特征进行更全面地提取和二次训练，性能提升受限。

与此同时，从使用者层面讲，消费级市场对人脸识别的容错率相对较高，而安防客户对静态比对的准确度要求，几乎不允许出任何差错，这也让许多专注视觉的企业望而却步。

即便面临着行业的种种挑战，的卢深视仍决定专攻这些难点，打开公共安全三维人脸的市场。

苹果选择了手机，的卢深视选择了安防

3D结构光，产品化的鼻祖可追溯到微软。

2010年，微软将PrimeSense技术最先应用在体感游戏设备Kinec上，从而催生出一批消费级三维深度相机，也引发了一系列学术上的研究热潮。

但事实上，体感游戏这一市场并不成熟，体验差，内容不足等问题，导致在体感游戏后，3D结构光的应用陷入一个僵局。

而正当3D结构光折戟体感游戏市场时，苹果开始布局，于2013年收购了PrimeSense，以及多家产业链上下游企业。

苹果的这一举动，也让业内人士看到了3D结构光应用的更多可能性。

师从高文院士，计算机视觉出身的户磊，以及与被苹果收购的动态捕捉技术公司faceshift创始人来自同一实验室、后来成为的卢深视技术顾问的张举勇，都敏感的观察到了这一信号，他们开始思考着3D结构光在其他场景落地的前景。

在对市场有足够的了解后，户磊认为体感游戏等并不成熟，而应用到手机上则存在模型压缩等小型化的困难。

当时，户磊和大多数厂家都没有预料到，苹果在收购PrimeSense 4年后的2017年，迅速的就将结构光带到了手机上。但此时的户磊，也敏锐的将目光投放到了安防领域。

此时的安防领域，所采用的基本是二维人脸识别技术和方案，易受到光照、遮挡等因素影响，且二维人脸识别的防作伪能力较弱，因此在对安全性要求较高的领域，对三维人脸的需要呼之欲出。

但想在B端安防领域的落地，也并不容易。

相对于消费领域，安防领域需要在一个镜头内识别多张人脸，逐一进行辨别，算法的难度以及三维数据的采集、训练难度都相对加大。

另外，安防领域对准确率的要求更高，要求误识率更低，不容有失，这也对技术提出了更高的要求。

有契机，又有挑战，户磊决定最终在行业还比较空白时，专攻安防这一领域。于是在2015年，户磊和他的团队成立了的卢深视，开始正式探索三维人脸的市场。

“为什么苹果选择了在手机上做3D结构光，而我们关注安防边检领域呢？”

“其实市场的孕育和市场窗口的出现，是跟实际相关的。我们觉得当时除了安防也没有更合适的场景。在PrimeSense之后，国内厂商也有跟随去做体感游戏以及电影动画特效的，但现在能看到这个市场并不成熟。而安防领域则有着强需求。”户磊说道。

在三维人脸识别最初应用的时候，两家企业选择了两个不同的方向，最终都成功打开了市场。

3D结构光技术，切入安防高端市场

但当新技术在初初落地之时，总会有关于技术路线之争。

而对于技术路线的选择，计算机视觉出身的户磊，显然更有自己的见解。

目前较为流行的说法是TOF在识别精度和远距离识别上都更有优势。而实际上，户磊认为，这些说法并不准确。

“这种说法太偏实验室了”，户磊说道。

从纯理论的角度来说，TOF确实在精度、远距离识别、抗干扰性具有更大潜能，但目前的测试和实际的应用中，TOF还远远达不到，实际来说，结构光在应用上相对更优。

就精度来说，目前结构光是现在唯一能够在近距离达到毫米级的，毫米级的分辨率是人脸识别的一个重要因素，否则脸上的特征就会被抹掉。

TOF另外一个常被提及的点，就是远距离下识别深度和精度比较稳定。虽然理论上如此，但实际上还不能达到。并且，运动物体，也会造成TOF的识别深度图质量严重下降。

另外，对于市场上一些已经宣称实现了三维人脸识别的产品，户磊表示，这还并不是真正的三维人脸技术。

“目前，市面上很多都是假三维，即用二维人脸进行识别，然后再进行活体检测。实际来说，这并不是真正的三维技术，它更像是一个二维人脸到三维的过渡产品。在平衡成本和检测效率的情况下，它确实具有可用性，不过，这不是真正的三维人脸，也不同于我们所做的三维人脸。”户磊说道。

对于技术有较为成熟的理解，的卢深视也在很多项目的实施中，确实展示出三维人脸的应用前景。

的卢深视在成立之初，就接到了某边疆省份三维人像卡口项目。

对于这一项目，户磊认为，是市场对于人脸识别的高要求找到了的卢深视。

在某边疆省份公安厅的反恐项目中，的卢深视作为三维核心技术及平台产品提供商，共建了全国首个“三维人像数据库”。

“维稳很难有一个比较明确的名单，需要进行人群甚至全人口库的比对，因此，对识别精度要求也很高。”

户磊介绍道，项目自2016年在上线至今，总通行人数超过百亿。采集、存储、布控的三维人脸库在千万级规模，产生百万级别次有效报警，并且在空间上布及南北、各边境关卡，全天候信息获取，经受了各种复杂现场状况和极端恶劣天气的考验。

更典型的是国内某大桥的通关项目。

该大桥是国家重点经济区城市群的重要连接桥梁。城市之间的通行，如何让人、车实现高效流通，成为一个关键问题。

由于地理位置所限，光环境非常复杂。尤其正午阳光直射，对识别提出了更高的要求，这就带来了一个天然门槛。

被问及如何处理复杂光线，户磊不无兴奋的介绍道：

“这个其实还蛮有趣的，因为本身我们会做相机，就有涉及到光学的部分。有专门负责光学设计的同事，就把当时一些有趣的想法，应用到这个项目上。

举个例子，针对逆光或者是侧光的情况，对识别影响比较大。很多通行关口，会采用中午的时候关闭一些通行闸机来解决这个问题。但这对通行效率造成影响，无法保证实际使用体验，那么当时我们就采用了像偏振原理‘直接过滤直射光线’，这样来避免强光。”

这些细节的打磨，是的卢成功赢得项目的关键。

行业分工尚未形成，主打“开放的合作”

当描述一个新兴行业的时候，常常会提到竞争和挑战。

对此，户磊认为，三维人脸识别技术和应用还并不算很成熟，行业分工也还未形成。

和二维人脸在落地过程中遇到的一个问题一样，人脸识别的产业链并不完善。

户磊也提到，如摄像机中需要用到的3D传感器，的卢深视找了很多厂家，都不满意，最终还是决定自己来做。

“你可以去类比一下，三维人脸的传感器，可能相当于比如说二、三十年前2D相机的状态，就是非常的初级的一个状态。我们其实最早的时候没有打算一定要去做相机，但后面发现你不去做就无法满足业务场景应用的需求，实际上也等不来。”

另一个问题，在三维人脸数据的处理上。

与二维人脸不同，三维人脸需要处理的是点云数据。而目前主要应用的深度学习神经网络主要针对的是较为规整的平面图像类数据。但点云数据，是分散在一个三维空间中的不规整数据，如何能够用深度学习的方法处理这些点云数据，也是目前的一个难点。

第三个问题，则是三维人脸的研究数据严重不足。

大规模的深度神经网络训练，离不开充足的数据进行训练。相对于社交网络上传播的很多二维人脸数据，三维人脸数据的获取存在天然门槛。如果没有实战的场景不断积累足够的数据，产品化就会很难。“没有充足的数据，其实是根本没法去做的。”

因而，对于这个方兴未艾的领域而言，产业格局尚未形成，刚刚呈现出清晰的曙光。各方所做的尝试和努力，远大于竞争。

户磊的也认为，在这样的行业背景下，的卢深视需要进行“开放的合作”。

“3D人脸识别的产业链，可大致分为器件、模组、系统和方案设计厂商、算法厂商，及产品和应用厂商等环节。其实现在还没有形成一个非常固定的行业，或者说产业上的分工其实还模糊。举个例子，做相机方案的厂商，也有涉及深度计算的算法，所以也可能会进一步做上层算法。做算法厂商会觉得，我也可以往上，做整个相机系统的设计。这也就是，为什么我认为要有一个开放合作关系。”

目前，二维人脸识别正逐步落地、可用性不断提高，但复杂光线、遮挡等问题，依然有待更有效的解决。与此同时，行人再识别、三维人脸等技术也在慢慢兴起，共同解决人脸识别的问题。

而作为专注三维人脸的厂商，户磊认为，短期内，二维人脸识别还要进行更多技术打磨。这其中，3D人脸，还拥有很大的机会。

“我们也很开心的是看到这两年的学术的论文上，3D图像正在越来越被大家所重视。我们也在做一些人体测量与动作分析的研究，希望这些东西结合起来，一起解决人的身份识别这个问题。

对于我们来说，我们坚持认为的是3D未来将来会普遍应用，会在广泛的场景中取代二维的人脸识别，更好的解决准确识别人身份的问题。”雷锋网雷锋网雷锋网

手机人脸识别被 3D 打印人头破解了，你还敢用吗？

Mon, 17 Dec 2018 19:51:00 CST

随着 AI 对智能手机的加持，人脸识别也已经成为当下智能手机的标配；与指纹识别、字符密码等传统的智能手机解锁模式相比，人脸识别功能显得更加方便。但是，从隐私保护的层面，它未必会更加安全。

尤其是在 Android 设备上。

3D 打印头型与人脸识别的较量

12 月 13 日，福布斯记者 Thomas Brewster 发布了一篇文章，介绍了自己的 3D 打印头型如何成功骗过智能手机人脸识别的过程。

雷锋网了解到，Thomas Brewster 是在英国伯明翰的一家名为 Backface 的公司完成这个过程的。他现在这家公司的装配有 50 台相机的影棚里拍摄了自己的头像，并由此合成了一张完整的 3D 图像，然后将该图像导入到 3D 打印设备中，最终打印出了 3D 打印头型。

当然，这个头型并不是完美的，随后 Backface 公司又在未来几天里对该头型进行了修饰——但前后的价格仅仅为 300 多欧元。

随后，关于人脸识别安全性的测试正式开始。

Thomas Brewster 先用自己的真实人脸，在五台智能手机上进行了人脸识别注册，这五台智能手机包括 iPhone X、LG G7 ThinQ、三星 Galaxy S9、三星 Note 8 和一加 6。然后又用已经打印出来的 3D 打印头型对这五款手机的人脸识别功能进行解锁测试。

最终的结果是，所有参与测试的 Android 设备都被成功骗过（虽然有难度方面的差异），而 iPhone X 的表现无懈可击。

人脸识别并不是第一解锁选项

在 LG G7、一加 6、三星 S9 和 Note 8 上，人脸识别功能被成功骗过，这表明了它们在人脸识别方面的安全性还不够；但从技术层面来说，它们本来和 iPhone X 的 3D 人脸识别系统就不是一个层面的东西。

对于前者来说，人脸识别是辅助型的生物识别解锁工具，而对 iPhone X 而言，人脸识别是唯一的生物识别选项。

Thomas Brewster 表示，在初次使用 LG G7 进行人脸录入时，用户会得到提醒，并被告知人脸识别是不太安全的备用项。不过，LG 方面额表示，在后续的使用过程中，人脸识别会得到更新，来提升稳定性和安全性——但 PIN 码和指纹识别是首选项。

三星 S9 也有类似的提醒。然而，在用户初次设置这款手机时，就会被建议采用人脸识别和虹膜识别。当然，在 3D 打印状态下，虹膜识别显然是不能通行的，但人脸识别就成功了，虽然也需要一些不同的角度和光线。

而在三星 Note 8 中，三星提供了一个“快速识别”选项，但这个选项比正常的人脸识别更不安全。三星在回应称表示，人脸识别是一个打开手机的便捷方式，有点像“滑动解锁”，但是该公司提供了最高级别的生物验证系统——指纹或者虹膜——来解锁手机、完成 Samsung Pay 支付或者打开安全文件夹。

一加 6 没有上述关于安全性的提醒，而且在利用 3D 打印头型解锁的过程中，很快就成功了。一加对此回应称，面部解锁是基于便利性打造的，建议用户利用密码、数字、指纹来保证安全性，同时人脸解锁功能不会被应用于银行账户、支付等应用中。

iPhone X 毫无悬念通过了测试，这是它在人脸识别相关的软硬件方面的投入决定的；为了测试安全性，苹果甚至与好莱坞影棚联合打造了一个仿真面具来测试其安全性。基于这样的安全级别，苹果已经在 iPhone X 及其后续产品中放弃了指纹识别，而采用面部识别作为支付安全工具。

另外，微软的 Windows Hello 的人脸识别表现也不错，它也成功地通过了测试；尽管 Thomas Brewster 并没有表明它测试的是哪台 Windows 设备。

雷锋网总结

显然，除了苹果之外，众多 Android 厂商在人脸识别方面的安全性方面，还有着很大的提升空间——迄今为止，大多数 Android 手机厂商还不敢彻底拿掉指纹识别功能（虽然不少厂商已经把指纹识别模块放在了屏幕下方），但也有 Android 厂商（比如说绿厂的某 X）已经采用前置的 3D 深度摄像头模块并支持支付功能，只不过不在本次的测试范围中。

来自 NCC Group 的安全研究员 Matt Lewis 认为，如果用户担心自己的设备被一个“假头”破解，那么最好不要使用人脸识别，而选用 PIN 码或者密码，因为基于生物特征的解锁容易被以各种方式破解——只要破解者拥有足够多的时间、资源和特定的攻击对象。

不过，在雷锋网看来，就算 300 多欧元不是一笔巨款，破解过程中所必须的 3D 打印技术也并非是随随便便就能够用上的——换句话说，进行这样的一场人脸破解攻击毕竟是一件成本不低的事情。Thomas Brewster 的这个测试足以证明 Android 人脸识别不够安全，但并没有证明破解它们有多么容易，尤其是对普通人而言。

所以，最后的问题来了，读了这篇文章之后，你还会使用手机上的人脸识别来解锁吗？

3D感测供应商大盘点：华为/小米/OPPO谁将抢下国内首发？

Sat, 12 May 2018 12:23:15 CST

去年9月13日，苹果推出了拥有多项重大升级的iPhone X，除了异形切割的“刘海屏“之外，最为引人关注的还是其首次搭载了基于结构光技术的3D sensing模组，实现了3D人脸识别，并以Face ID彻底取代了Touch ID指纹识别。由此也彻底引爆了3D感测市场。

国产手机厂商也纷纷对于iPhone X掀起了一股“学习”热潮。虽然现在包括华为在内的众多国产手机厂商都纷纷推出了与iPhone X类似的刘海屏，而且也有非常多的手机厂商推出了支持人脸识别的手机，但是基本都是基于2D/2.5D感测技术的，而到目前为止还没有任何一家国产手机厂商有推出真正支持3D感测的智能手机。不过，华为、小米、OPPO等厂商都在积极的推动。

此前凯基证券分析师郭明池也曾表示，苹果的3D感测技术已经领先安卓阵营至少一年。另外，今年年初，郭明池还透露安卓阵营中，华为将第一个用上类似苹果的3D结构光模组，时间点要等到2019年。

不过，令人意外的是，OPPO似乎是要抢先在华为、小米之前推出基于3D感测技术的智能手机。

OPPO公布3D感测进展

2018年5月10日，OPPO在深圳举行“5G&3D结构光技术媒体沟通会”，正式公布了其基于结构光的3D感测技术的进展。

在本次媒体沟通会上，OPPO介绍了其在3D结构光+5G的应用方面的探索。

相比传统的2D面部识别，OPPO的3D结构光技术可更好的应用于安全支付、三围重建、AR、游戏等众多场景。

OPPO表示，特别是在对于安全性要求较高的支付领域，其3D结构光技术可基于深度学习的人脸智能识别算法能快速从输入的人脸红外特征信息与深度信息中提取个人的安全识别特征。安全特征具有10000+维度信息，可以保证达到百万分之一的精度，算法将此安全信息与录入时安全信息进行匹配决定是否安全认证通过。

在用户比较关注的美颜方面，通过3D结构光技术还可实现3D美颜。通过结构光深度相机将3D人像还原出来，然后基于高精度的3D人脸信息进行更细致的磨皮、美白、大眼、瘦脸，使得人像更加立体自然。

此外，利用3D结构光技术还可以对人脸进行更精确的3D重建，并模拟影棚灯光进行3D补光渲染，可以拍出更出色的照片，后期处理也有更多的空间。

在3D结构光+5G的应用方面，OPPO认为3D视频通话是一个比较好的场景，由于3D视频流数据量较高，所以与5G网络是非常好的搭配。

另外，在3D结构光技术还可以带来3D AR、3D游戏等更丰富的体验。

在沟通会现场，OPPO 也演示了3款DEMO，分别包括5G下载速率，3D生物识别，以及3D视频建模。

现场展示的3D人脸识别的DEMO，识别解锁速度非常快。

据OPPO介绍，其3D人脸识别已经具备量产条件，预计在未来6个月内推出相应终端产品。

为什么都选择3D结构光技术？

目前，可以应用在智能手机端的3D感测技术主要有有“飞行时间”（Time of Flight）和“结构光”（Structured Light）两大类。

飞行时间与结构光技术原理

所谓飞行时间技术，就是传感器发出经调制的近红外光，遇物体后反射，随后传感器通过计算光线发射和反射时间差或相位差来换算被拍摄景物的距离，以产生深度信息；此外再结合传统的相机拍摄，从而将物体的三维轮廓以不同颜色代表不同距离的地形图方式呈现出来。此前被联想和谷歌极为重视的Project Tango手机使用的就是 ToF 技术。

“结构光”（Structured Light），就是将近红外激光器发出的光栅或线光源等投射到被测物上，再由近红外摄像头采集返回的信号，根据物体产生的光信号的变化来计算出被测物的三维信息。这其中近红外激光发射器和近红外摄像头之间的距离则为三角测距的基线。

由于两种技术都是采用的红外光，所以即使在夜间也能够使用。

从上面这张对比图上我们可以看到，TOF技术具有响应时间更快，低光下表现良好，强光下表现尚可，深度信息精确度高、识别距离远等优势，但是其也有着分辨率底、成本高、功耗高的劣势。

而结构光优势则在于低光下表现良好，分辨率更高，成本、功耗适中，主要缺点是易受阳光影响，识别距离短，相应时间稍慢的缺点。

但是如果只是用于智能手机的前置3D感测系统，进行人脸识别/解锁和人脸建模等，结构光技术应该是要比TOF技术更有优势。

因为通过智能手机的前置3D系统来进行面部识别这种应用场景本身识别的距离就很近，所以不存在需要支持更远的识别距离的问题。另外结构光相比TOF技术，短距离的精度更高，也更适合用在手机前置摄像头上。而且其分辨率、相应时间已经足以应对手机端面部识别的需求（采用TOF技术的Project Tango手机是后置3D系统，其作用也不是主要用于面部识别/解锁）。

另外，就两种技术所产生的深度图来看，TOF深度图会存在多重反射产生的噪音、边缘精细度过低、时域滤波导致滞后等问题。而结构光的深度图则只有边界线清晰度略低的问题。

最后，由于是用在智能手机这样的消费类移动设备上，所以成本、功耗也都是需要考虑的因素。

所以总的来说，如果是手机前置3D面部识别系统，结构光技术相比TOF技术更具优势。这也是为何苹果、OPPO、华为、小米等厂商都选择3D结构光技术的主要原因。

3D结构光模组的关键器件

3D结构光模组当中的结构光发射器（即iPhone X上的Dot projector）是整个模组当中最为核心的关键器件。

而结构光发射器当中又包含了光学衍射元件（DOE）、准直镜头（WLO）和VCSEL（Vertical Cavity Surface Emitting Laser，垂直共振腔表面放射激光）等关键元器件。

准直镜头（WLO）是利用光的折射原理，将波瓣较宽的衍射图案校准汇聚为窄波瓣的近似平行光。光学衍射元件（DOE）是利用光的衍射原理，将点光源转换为散斑图案。

结构光发射器原理就是VCSEL发出940nm点激光之后，通过WLO准直镜头校准为线性激光，然后线性激光照射在DOE上发生衍射，形成近千个具备调制信息的光斑。这其中VCSEL可以说是最为核心的关键器件。iPhoneX中就使用了三颗VCSEL芯片。

目前，具有VCSEL芯片设计能力的公司，全球只有少数几家，例如Lumentum、Finisar、Princeton Optronics（已被ams艾迈斯半导体收购）、Heptagon、ⅡⅥ等公司，并且大都是从光通信芯片领域，转型到消费电子市场的。

根据资料显示，目前Lumentum是iPhone X的VCSEL芯片的主要供应商，而Finisar是第二大供应商，艾迈斯半导体则是第三家供应商。

虽然国内厂商在VCSEL这块起步相对较晚，目前光通信芯片企业光讯科技和华芯半导体都已具备了VCSEL芯片量产能力，华工科技的子公司华工正源也很有潜力，但目前这几家公司的主要精力还是放在光通信领域。另外，三安光电在2016年也切入了VCSEL产业。国内初创企业纵慧光电也正在开发并批量试产VCSEL。但是，到目前为止，国内尚无一家拥有针对移动端3D感测市场的VCSEL芯片量产能力的企业。

在VCSEL设计和芯片代工方面，台湾厂商也具有一定的优势。比如在上游方面，全新、联亚与光环科技都积淀了十五年的外延与芯片技术，LED大厂晶电也早做了布局。芯片制造方面，Lumentum的代工订单是交给了稳懋，宏捷科技则拿下了Princeton Optronics的代工订单。封装方面，台湾也累积了长久的精密封装实力，目前联钧、华信、华星、光环、矽品与同欣都是有实力可以达到世界大厂要求的封装技术。此外，长期专注VCSEL技术与产品的公司华立捷，更是具有上中下游垂直整合的实力，也是目前在VCSEL模组上可以跟国际大厂竞争的公司。

最后需要补充的是，ams近年来通过自主研发以及一些列的收购，目前已经拥有了包括VCSEL、WLO、DOE等关键器件在内的全套的光学传感器解决方案（而且还有TOF的方案）。ams也是苹果iPhone X的WLO 镜头主要供应商。

3D感测模组供应商

介绍完了核心器件，我们再来介绍一下3D感测模组的主要供应商，由于厂商较多，所以下面我们就主要介绍几家能够提供手机端/移动端3D感测模组的厂商。

1、LG Innotek

众所周知，苹果iPhone X的3D感测模组主要是由LG旗下的电子零部件制造商LG Innotek供应的。根据LG Innotek的审计报告显示，其2017年的销售额中的37.6亿美元是来自向苹果公司供应提供基板材料和光学解决方案，占其2017年销售总额71.9亿美元的一半以上(52.5%)，而2016年苹果的销售额的占比仅36.9%。

2、高通+Himax：小米7或将首发采用

去年下半年，高通宣布其下一代骁龙处理器（预计今年12月公布）将支持红外3D感知技术，并且联合Himax（奇景光电）推出了三款基于Qualcomm Spectra ISP技术的摄像头模块项目，其中就一款是就是基于结构光3D感测技术的摄像头模组。由高通提供算法技术，奇景提供模组。

高通与奇景的这款3D感测模组则采用的是与iPhone X类似的结构光技术，由红外发光器、红外摄像头以及一个RGB 摄像头（据说有1600万像素、2000万像素两个版本）组成。通过红外发光器发射出一束光，形成光斑，再通过IR 摄像头读取该图案，并对点状图在物体上发生的扭曲、以及点与点之间的距离进行计算，再加上RGB图像，结合起来就构成了一个3D模型。

根据最新的消息显示，高通与奇景的这款3D感测模组有望将在今年上半年量产。此外，高通似乎还与信利也进行了合作。而传闻中的小米7或将首发搭载。但是有消息称，因高通的软件调适进度落后，脸部识别成功率偏低，小米搭载3D脸部识别功能的机型可能将延至第三季推出。这个进度要比OPPO更快。

所以，从时间上来看，如果一切顺利的话，小米将会在第三季度推出搭载3D感测的手机，成为首家商用3D感测技术的国产智能手机厂商。

另外需要指出的是，虽然高通+奇景的3D感测方案是目前安卓阵营当中相对更为成熟的方案（其内部的DOE/WLO等多个核心器件都是基于奇景的自有技术），但是受限于需要采用高通的骁龙845芯片或者更新一代的芯片，所以三星、华为等厂商的旗舰手机可能不会直接采用，而是更为倾向于开发自己的3D算法。去年年底，华为荣耀还推出了一款外接式3D感测模组——点云深度摄像头，该模组由舜宇供应。

3、奥比中光：OPPO或将首发采用

奥比中光是国内比较知名的一家3D感测模组厂商，他们从从2015年便开始研发3D结构光的手机方案，去年就推出了针对智能手机的前置3D人脸识别结构光摄像头模组方案——Astra P。

奥比中光Astra P模组芯智讯拍摄于2017年高交会现场

资料显示，奥比中光的Astra P的IR尺寸为7.4*7.4*4.8mm，LDM尺寸为5.1*5.1*4.55mm，深度范围:0.2—1.5m，深度图像分辨率可达1280×800@30fps、640×400@90fps、320×200@120fps，精度可达0.7m：±1-3mm，深度FOV D78°，支持Android和Win10系统，模组功耗小于0.5w。

从奥比中光近期公布的与苹果iPhone X的3D感测对比结果来看，奥比中光的3D感测模组已经达到了接近iPhone X的水平。

据芯智讯的了解，此次OPPO发布的3D结构光技术就是采用的奥比中光的方案。也就是说，OPPO即将推出的搭载3D结构光技术的智能手机采用的就是奥比中光的Astra P模组。另外需要补充的是，奥比中光主要是提供模组，算法则是来自于第三方。

4、舜宇

作为国内手机镜头的最大供应商，舜宇在光学领域拥有非常强的技术实力。根据韩国媒体《etnews》的报导，韩国三星Galaxy S9的前置摄像头就采用了舜宇所生产的光学镜头，这也是中国的光学厂商首次打入三星高端智能手机的供应链。

去年11月，舜宇就与苹果iPhone X的3D传感器供应商之一的ams（艾迈斯半导体）公司达成合作，双方将结合各自在光学传感和成像领域的技术优势，为移动设备和汽车应用联合开发并市场化3D结构光传感摄像头解决方案。正如我们前面所介绍的，ams拥有全套的光学传感器解决方案。

另外，今年年初，舜宇子公司宁波舜宇光电信息有限公司还宣布与3D感测技术厂商pmd technologies（以下简称pmd）达成合作，将联合为中国及全球的移动设备OEM厂商，开发并市场化3D传感摄像头解决方案。

需要指出的是，pmd是全球唯一将深度传感器成功植入手机的ToF技术提供商（全球首款配备3D摄像头的联想Phab 2 Pro采用的就是pmd的技术）。在今年的CES2018展会上，首次展示了其最新的3D图像传感器IRS238XC，同时展示了基于此传感器的全球最小3D摄像头模组，尺寸仅为12 mm x 8 mm，它将使TOF深度传感3D摄像头变得更加易于集成。

对于双方的合作，pmd将提供3D图像传感器（主要是IRS238XC），以及专有技术实现成本优化、坚实且高性能的3D摄像头设计，包括校准和软件专有技术，舜宇则将提供在3D摄像头模组规模量产方面的专有技术，实现更经济、更快速、更稳定的产品制造。

显然通过与ams和pmd的合作，舜宇将拥有TOF及结构光两种技术的3D摄像头模组的供应能力。

去年11月底，华为荣耀推出了一款外挂式3D结构光配件——点云深度摄像头就是基于舜宇的3D结构光模组。舜宇提供了包括光学设计、结构设计、ID设计、图像处理等嵌入式软件系统开发在内的一整套解决方案，其内部代号为Jupiter X。

虽然华为荣耀和舜宇都并未详细介绍这款点云深度摄像头的结构，不过根据现有的资料可以看出，其采用了与苹果iPhone X的3D感测模组类似的结构。其点阵发射器可以发射出30万的散板点阵，可以支持3D人脸建模和3D人脸识别。在400ms内即可完成3D人脸识别，3D建模只需10秒，建模精度可以达到亚毫米级。

不过需要强调的是，从目前公开的消息来看，舜宇似乎还无法提可以集成在智能手机内部3D结构光模组。

5、华捷艾米

华捷艾米也是比较知名的3D感测技术厂商。公司的主要产品有：3D结构光，包括双目结构光硬件方案；AR/AI算法； AR/AI芯片。

资料显示，华捷艾米的1180 3D感应芯片可以实时处理 3D 测量和图像深度，并已经开始量产。同时，华捷艾米的RGB-D光学模组已经开始量产，能够与机顶盒、机器人和游戏机等设备实现模组型开发。近期海尔推出的一款机器人就采用了华捷艾米的3D感测模组。

华捷艾米还针对智能手机推出了小型化的模组，目前正在进行批量化生产技术研发。

据说在与iPhone X的对比测试中，华捷艾米也做到了与之相近的效果。

另外，华捷艾米的SDK 支持安卓、Linux、Windows 和 Unity3D 平台。它可以识别手势、重组物体和进行 3D 建模。运动感应设备采用先进和骨架技术，适用于大众市场的商业设备。

小结：

除了以上介绍的厂商之外，还有很多的3D感测方案供应商，比如英特尔也有3D感测模组realsense 3D，国内的还有未动科技、图漾科技等，但是目前这些厂商的产品都无法应用于智能手机平台。

终端厂商方面，从目前的情况来看，华为、小米、OPPO都在积极的推动3D感测在自家智能手机当中的应用，从时间进度上来看，选择采用高通和奇景方案的小米，以及采用奥比中光方案的OPPO可能会更快一些。相比之下，另一家手机大厂vivo则更多的下注于屏下指纹，并且旗下已经有两款手机成功商用。而其他的手机厂商目前可能还是处于观望状态，到底是选择跟进屏下指纹还是3D感测还有待市场进一步反馈。

作者：芯智讯-浪客剑

_____________________________

更多干货、爆料、独家观点，欢迎订阅芯智讯
行业交流、合作请加微信：xintiyan001
投稿请发至：yj@padnews.cn
芯智讯官方交流：221807116

本话题在雪球有0条讨论，点击查看。
雪球是一个投资者的社交网络，聪明的投资者都在这里。
点击下载雪球手机客户端 http://xueqiu.com/xz

3D 打印在医疗领域有那些进展？看完你就知道了

Fri, 23 Dec 2016 19:34:00 CST

仅仅一年前，修复学的一些从业人士还在担心，3D 打印的进步会让他们失业。

3D 打印将会对许多行业产生革命性影响，医疗领域是其中之一。与之相对的，是修复科医生和其他医疗从业者，对原本“平静”的传统行业被新技术入侵的忧虑。根据调研公司 IndustryArc 的估计，全球 3D 打印市场的总产值，将在 2020 年达到 12 亿美元。

我们常说的 3D 打印，在技术上的术语是增材制造（Additive manufacturing）。它是一个把软件里创造的数字物体，用融化的塑料或者金属粉，在三维尺度上层层叠加打印出来的技术。其实，早在1980 年代 3D 打印技术就已存在。只不过，价格在 2000 至 8000 美元之间、体积小到能放在桌子上的 3D 打印机在最近十年才开始出现。

3D 打印的最新医疗应用

2016 年，3D 打印在医疗行业的应用继续蓬勃发展。世界上第一个 3D 打印的处方药 Spritam（治疗癫痫），在去年获得了美国食品药物管理局（FDA）的许可。今年三月份，它上市销售。雷锋网获知，利用 3D 打印的医疗设备，现在已涵盖手术器械和人体植入装置，比如已获 FDA 认证的 MedShape 钛骨连接板（bone tether plate）。

3D 打印的 MedShape 钛骨连接板

像波士顿儿童医院（Boston Children’s Hospital ）这样的机构，也越来越多地使用 3D 打印的器官和骨骼模型，来计划和演练复杂手术。

今年早些时候，圣路易斯大学神经外科部门与圣路易斯工程学院联合设计了高度仿真的、 3D 打印脑动脉瘤。全世界最大桌面及工业 3D 打印机生厂商之一的 Stratasys，制作了最终模型。

所有动脉瘤的大小、轮廓、位置都是不同的。圣路易斯大学医院的神经外科主任 Saleem Abdulrauf 说

“有几百个不同大小和种类的手术夹，我们一般是在手术过程中做出决定（选择哪个）。如果能事前通过在模型上练习，选择好手术夹型号，这真的能改善手术过程。”在 3D 打印的动脉瘤模型上进行了模拟手术后，他如此表示。

用于手术模拟的 Stratasys 脑模型

分析师预测，在 2020 年前，3D 打印会成为医疗行业的一股颠覆性力量。 根据 Gartner study 去年底发布的报告，至 2019 年，发达国家十分之一的人口会在身体上或者体内有 3D 打印设备。而且，在修复学和植入装置手术中，约三分之一会把 3D 打印作为核心工具。

Stratasys Direct Manufacturing 的 COO Kent Firestone 说道：

“假肢是一个很好的例子——它展示了 3D 打印确实能改善人们的生活。” 通常，制造假肢的过程包含测量肢体剩余部分的尺寸，制造出塑料复制品，然后手工把规格改良得分毫不差。

Standard Cyborg 一家位于旧金山的初创公司。它销售 3D 扫描仪和附属软件，使客户能用软件制作假肢，修改形状，并打印出来。最终结果是一会儿就能制作出具备完全功能的假肢。相比之下，传统方法制作假肢需要四个小时。

雷锋网消息，一开始，从业者把 3D 打印看做威胁。现在，Standard Cyborg 联合创始人 Jeff Huber 表示，他的客户和与他交流过的修复医生更倾向于把 3D 打印和设计引入临床应用。 而转变的主要原因是，3D 打印使专家们能制造出复杂的几何形状来保证精确合体。

“机器不在乎（设计）复杂性，对于患者，更精细的设计能带来卓越的舒适性。”

3D 打印还能使外科大夫借助人体解剖的复制品救治病人。例如密歇根大学研究人员与 C.S. Mott 儿童医院的外科大夫合作，开发出 3D 打印的气管夹板，并植入到有先天气管支气管软化症的五名儿童体内。开发者们正在申请 FDA 特别许可，以再治疗 10 名病人。

3D 打印的挑战

但是，3DHeals 的 CEO，神经系放射学家 Jenny Chenvia 表示，3D 打印技术仍然有许多重大挑战。 2017 年的一个重要测试领域是，制作和打印 3D 物件能否用更简单的工作流程。

“你希望人们能与科技进行交互，你还希望该过程变得顺畅。如果使用壁垒太大，人们无法施展创造性，这无法推动创新。”

换句话说，用软件创造 3D 物件再把它打印出来，并不是按个按钮那么简单。这需要一些技巧和努力，才能搞出像大脑 3D 模型这样复杂精密的东西。但如果经过优化的软件，能让理疗师和外科大夫与数字模型互动变得更简单，3D 打印在医院、大学医疗系统和私营医疗活动得到应用就会更快。

接下来有个问题： 3D 打印产品能否量产？虽然这方面已经有了些进展，但一切仍很难说。

棘手的监管问题，是又一个推广 3D 打印的障碍。去年，FDA 批准了 85 个医疗 3D 打印设备。去年五月，一个代理商发布了 3D 打印医疗设备的申请指南。

即便有这些难题，3D 打印的潜力是毋庸置疑的。Stratasys Direct Manufacturing 的 Firestone 表示，更多的终端用户零件，比如手术工具和植入装置，会在 2017 年变得更普遍。这是由于对 3D 打印金属材料的优化，尤其是人体可接触性的提升。其中一个 Stratasys Direct Manufacturing 开发的手术工具是 Pathfinder，它能在 ACL 重建中协助外科大夫。雷锋网获知，Pathfinder 在 FDA 注册为一类医疗设备，已广泛应用于美国整形手术。

Firestone 说：“随着 3D 打印被更多人所知，我们会看到 10 年前根本想象不到的应用。”

via medcitynews

HTML5数据可视化第二弹：打造最美3D机房

Mon, 01 Jun 2015 14:25:33 CST

最近项目开发任务告一段落，刚好有时间整理这大半年的一些成果。使用html5时间还不久，对js的认识还不够深入。没办法，以前一直搞java，对js的一些语言特性和概念一时还转换不过来。

上一篇第一弹介绍了项目中做的一个彩虹爆炸图，主要用了 html5的canvas的2d绘制技术。这一回我想介绍一下项目中的一个亮点技术：html5的3D，以及如何用它打造精美的3D机房监控系统。

目标效果图

下图是领导给找的一张的效果参考图，客户希望机房至少能达到下面的3D效果。懂的人都知道，这可是一张设计公司出的装修效果图啊，就算是用max建模，也需要大量的工作，何况咱可是程序员在做数据中心的可视化项目啊。。。强忍心中奔腾的万千头**马，静下心来思考，那就先从搭建一个webGL的场景开始把。

WebGL基本场景搭建

在html5里面使用3D已经不是什么高深技术，它的基础是WebGL，一个openGL的浏览器子集，支持大部分主要3D功能接口。目前最新的浏览器都有比较好的支持，IE需要到11（是的，你没有看错）。

要检测你的浏览器是否支持webGL，直接访问网页 http://get.webgl.org/ 看是否能看到一个旋转的立方体。如果能看到，说明你的浏览器支持webgGL，否则，可以下一个最新的chrome试试吧。相对来说chrome对webGL的支持最好，效率也很优秀。

要在浏览器里面使用webGL，就要研究webGL相关的技术和用法。做3D应用并不是一件轻松的事。就算最简单的搭建一下webGL场景，也需要下面这些代码：

<script>    
    var width = window.innerWidth;  
    var height= window.innerHeight;  
    var container = document.createElement( 'div' );  
    document.body.appendChild( container );  
    var webglcanvas = document.createElement('canvas');               
    container.appendChild(webglcanvas);   
    var gl = webglcanvas.getContext("experimental-webgl");                
    
    function updateFrame () {             
      gl.viewport ( 0, 0, width, height );  
            gl.clearColor(0.4, 0.4, 0.7, 1);  
            gl.clear ( gl.COLOR_BUFFER_BIT );       
             setTimeout(   
        function(){updateFrame()},  
                20);  
         }  

    setTimeout(   
      function(){
        updateFrame();
      },  
    20);  
</script>

和html一样，需要先创建一个canvas元素，并获得其webgl上下文：

var gl = webglcanvas.getContext("experimental-webgl");

然后在一个updateFrame的函数中，像html5的2d context一样，去绘制3D的内容。另外，要再起一个死循环，每隔**毫秒调用一次这个updateFrame函数来重绘场景。和2D不同，3D场景里面的变化是随时随地的，所以需要不停刷新，就像播放电影或视频，静止不动的画面基本没有，所以死循环刷新基本是必要的。不过实际项目使用中会有很多优化，尽量做到“按需刷新”，节省cpu和移动设备电量。这一点也是很重要的，有感兴趣的同学，可以单独写文章介绍。这段程序基本上什么也没做，就画了一个静止不动的区域，如下图：

虽然看不见任何3D的内容，不过它已经是一个最简单的webgl程序了。我们的精美的3D机房，也是要在这上面不断丰富而已。

对象封装

要做项目，搭建下去工作量太大了，时间周期也不允许。使用第三方辅助工具是不可避免的，像Three.js、twaver.js都是选择。这些工具都可以提供3D的基本对象和各种特效。当然这都不是最主要的，主要是如何利用它做出我想要的效果：好看。为了避免大量修改代码，在项目里做了一些封装，把原始3D的立方体等对象进行进一步封装，让一个json数据就可以提供这些对象的定义。这样使用起来就比较方便了。Json大致结构如下：

var json={	
	objects: [{
		name: '地板',
		…
	},{
	…
	}],
}

下面我们逐一来看这些3D对象是怎么进行美化的，过程可能稍显啰嗦，但实际工作就是这么繁琐的有木有？

地板和斜坡

第一个要做，也是应该比较简单的，就是地板。这个地板应该是一个有点厚度、有格子贴图的薄薄立方体平面。还好经过封装，就写一段json对象就能定义了：

{
		name: '地板',
		type: 'cube',
		width: 1600,
		height: 10,
		depth: 1300,
			
		style: {
			'm.color': '#BEC9BE',
			'm.ambient': '#BEC9BE',
		}
}

通过定义，创建一个13米*16米的地板块：

只有颜色还不够，找一个地板砖纹理图。需要注意的是，纹理图的尺寸都需要是宽和高都是2的幂，例如128x128、256*256等，这样出来效果才会好。这也是3D软件一般所要求的。另外纹理要能连续拼接不露破绽，这样才好。例如下面我google出来的图：

在style里面添加：

   'top.m.texture.image': 'images/floor.png',
   'top.m.texture.repeat': new mono.Vec2(10,10),

效果如下：

有图片材质纹理，效果果然好多了。不过客户说他们这里底面有一个方便运送设备的斜坡，要画出来。这……

后来想到twaver里面的对象可以支持运算。可以定义一个斜的立方体，让地板剪掉立方体，应该可以做到。于是继续定义json：

{
		name: '地板切坡',
		type: 'cube',
		width: 200,
		height: 20,
		depth: 260,
		translate: [-348,0,530],
		rotate: [Math.PI/180*3, 0, 0],
		op: '-',
		style: {
			…,
		}
	}

这里定义的一个倾斜的立方体，通过translate定义位置，通过rotate定义旋转角度，然后再通过op定义运算符，这里是“减去”，就用“-”。被剪掉的立方体也可以设置材质、纹理、贴图、颜色….等等。看看效果：

走廊桌

按要求走廊要放一个接待桌。为了简单就偷懒做一个立方体表示吧！这个简单，继续使用上述办法：

{
		name: '走廊板凳',
		type: 'cube',
		width: 300,
		height: 50,
		depth: 100,
		translate: [350, 0, -500],
	}

效果如下：

再增加一点配色并启动阴影效果后，看着就好多了。尽管只是个简单的立方体，但只要和整体风格一致，并不显得简陋。很3D里面最重视的就是效率，千万不要放一些很复杂的模型，尤其是这些非业务对象。

墙体

墙体是机房里很重要的一个部分，有好的光照、阴影的效果才能看起来更加逼真。由于墙体是不规则的路径，一段一段去生成还真挺麻烦的，还好引擎支持这种物体，甚至曲线路径都可以。这里只要在json里面定义一组数字的坐标，让这些数字依次连接，组成一个墙体，最后生成3D对象放入场景中就行啦。

json定义如下：

{
		name: '主墙体',
		type: 'path',
		width: 20,
		height: 200,
		translate: [-500, 0, -500],
		data:[
			[0, 0],
			[1000, 0],
			[1000, 500],
			[500, 500],
			[500, 1000],
			[0, 1000],
			[0,0],
		],
}

注意这里的类型变成了path，data中定义了一个二维坐标数组来描述墙体。由于墙都是从底面开始的，所以只定义它的平面的x、y坐标就行了。看看效果：

不如前文所说，还是需要上色、上阴影，才能有更好的效果。这里我们启用阴影并咨询设计师美眉几个颜色值，加上去，再看下效果：

还有细节：

门

看着雪白的墙，是不是觉得少了点什么？对，就是门。在3D机房的监控系统里，门禁是很重要的一块，客户要求门应该与实际位置相对应，并且要有开门关门的动画效果。这样，实际的门禁信息采集上来后，就能在界面实时看到门的状态了。

这里，考虑到门如果直接放上去，会被墙盖住；如果比墙厚，又难看不符合实际。还是应该先定义一个门洞立方体，把门所在的位置挖掉：

{
		name: '门洞',
		type: 'cube',
		width: 195,
		height: 170,
		depth: 30,
		op: '-',
		translate:[-350,2,500],
}

刚好挖在斜坡的位置，这样设备进屋就方便了：

不过这门没有一个门框，感觉不太生动。多一个门框会感觉立体感强一些。门框可以是一个比门洞略大的立方体，在挖门洞之前添加：

{
		name: '门框',
		type: 'cube',
		width: 205,
		height: 180,
		depth: 26,
		translate: [-350, 0, 500],
		op: '+',
	}

加上阴影和光线等综合效果，还不错，挺有档次的。

来张全景图看看：

接着，只要把门安上去就行了。门的定义比较简单，就是一个薄的立方体。不过为了做到玻璃效果，需要设置透明度，让它看上去更像一个玻璃，再让设计师美眉弄一张好看一点的门的图，贴上去。尽管有了webGL，复杂的建模工作可以省略了，不过设计师美眉的配合仍然很重要。

先做左边的门：

{
		name: '左门',
		type: 'cube',
		width: 93,
		height: 165,
		depth: 2,
		translate:[-397,4,500],
		style:{
			'm.transparent': true,
			'm.texture.image': 'images/door_left.png',					
		}

上面增加的style主要透明和贴图两项。看看效果：

同样的方法，再把右侧门贴上就搞定了。为了增加体验，也是用户的要求，门上面设置了动画：双击可以自动打开，再双击可以直接关闭。动画功能引擎做好了封装，在json中直接指定动画类型就行了。不过要注意左右门的动画旋转方向要相反，要不然一个向里开一个向外开感觉比较怪异。

窗

项目中，窗本身不需要有任何业务属性，但是美观度的要求可一点都不能少。方法和门类似，先放窗框后挖窗体。不过为了有点变化，这里不做窗框了，做一个窗台，方法和道理与门相同。

{
		name: '主窗户洞',
		type: 'cube',
		width: 420,
		height: 150,
		depth: 50, 
		translate: [200, 30, 500],
		op: '-',
	},{
		name: '主窗户台',
		type: 'cube',
		width: 420,
		height: 10,
		depth: 40, 
		translate: [200, 30, 510],
		op: '+',
	}

定义了一个窗洞（挖掉）、一个窗台（添加）。一个大窗户就做好了：

再添加一个略带颜色的透明玻璃。玻璃设置点高光和反射，增加“玻璃”感觉：

{
		name: '主窗户玻璃',
		type: 'cube',
		width: 420,
		height: 150,
		depth: 2,
		translate: [200, 30, 500],
		op: '+',
		style: {
			'm.transparent': true,
			'm.opacity':0.4,
			'm.color':'#58ACFA',
		},			
	}

Json中玻璃设置了透明度和颜色。这样一个半透明的茶色玻璃就好了：

到这里突然在想：盖房子如果像写程序一样简单就好了，所有的程序猿就不会是无房一族单身狗了。当然写程序和盖房子一样：该封装好的要封装好，最后就是搭积木组装就行了。如果盖房子都是从挖土活泥巴开始，那就杯具了。写程序也是一样，如果从webGL的main开始写……这3D机房的系统要几个月甚至几年才能做出来呢？

外侧墙

按照项目实际要求，继续增加更多建筑物墙体。主要是房间外侧有两道走廊隔墙。这是一个中间有大片透明玻璃的走廊隔墙，需要做的好看一点。由于是直线墙，没有复杂走向，直接用立方体定义得了：

{
		name: '左外墙',
		type: 'cube',
		width: 20,
		height: 200,
		depth: 1300,
		translate: [-790, 0, 0],
		op: '+',
}

效果如下：

再继续挖掉中间的窗户部分：

{
		name: '左外墙洞',
		type: 'cube',
		width: 30,
		height: 110,
		depth: 1300,
		translate: [-790, 60, 0],
		op: '-',
}

空白显得很奇怪，加上玻璃试试：

{
		name: '左外墙玻璃',
		type: 'cube',
		width: 4,
		height: 110,
		depth: 1300,
		translate: [-790, 60, 0],
		op: '+',
		style: {
			'm.transparent': true,
			'm.opacity':0.6,
		},
}

有了半透明和高光的效果，看起来就有质感了，右边也如法炮制：

这样，整个建筑的外观就基本完成了。最后，放一些绿植，增加些生气吧。

植物

做一盆植物，需要有一个空的花盆，花盆里面有泥土，上面有一株植物。这些东西用3D做起来都有点啰嗦。不过也不难。花盆用一个大圆柱剪掉中间的小圆柱，做成空心花盆；植物用贴图+透明模拟一下就行，不用真的去做植物的3D模型，否则要累死了。

根据上面的思路，在项目中通过仔细调整，把创建花盆的代码封装好，然后在json中定义花盆位置就行了。下面定义一个：

{
		name: '花1',
		type: 'plant',
		translate: [560, 0, 400],
}

程序中解析如果type是plant则创建植物对象并添加场景。

在房间、走廊、甚至窗台上都可以放几盆，窗台上的可以通过设置scale缩小一些，并提升其高度到窗台位置即可。

看看下整体效果，还不赖吧。

写了那么一大篇，才终于把3D机房的外观装修完成，咱也算是个设计师程序员的混合型人才了呢。其实机房最核心的资源——机柜，还没找落呢，没办法，形象工程也是项目建设的一大亮点。

机柜

机柜，以及其中的服务器设备。这才是3D机房里面最终要管理的内容。在我们的实际项目中，这些资产都是在数据库中存储，并通过json接口加载到浏览器中显示。这里为了演示方便，直接写几个机柜的片段，看一下显示效果。

机柜对象在项目中是这样封装的：用一个立方体来表示机柜，并加上贴图。项目中，为了提高显示速度，机柜一开始并不加载内部服务器内容，而是只显示自身一个立方体。当用户双击后，会触发一个延迟加载器，从服务器端加载机柜内部服务器，并加载到对应的位置上。此时，机柜会被挖空成一个空心的立方体，以便视觉上更像一个机柜。

定义机柜的json如下：

{
		name: '机柜',
		type: 'rack',
		lazy: true,
		width: 70,
		depth: 100,
		height: 220,
		translate: [-370, 0, -250],
		severity: CRITICAL,
	}

上面的机柜定义中，有一个lazy标记，标记它是否延迟加载其内容。如果延迟加载，则双击触发，否则程序显示时直接加载其内容。Severity是定义了机柜的告警信息，它是否有业务告警。如果有告警，会用一个气泡显示在机柜的上方，同时机柜也会被染色成告警对应的颜色。

加入更多的机柜看看效果：

设备

简单起见，这里管理的设备假设都是机架设备，尺寸规格比较规整，因此比较容易在机柜中组织。一个设备的外观确定后，在数据库中定义好模板，加载时根据其所在机柜的位置放置即可。

这里只是随机生成了几个服务器设备，并按位置摆放。在实际应用中，可以通过手工录入或者智能机架报送的信息来确定服务器的类型和位置。

如果需要监控到端口级别，还可以在服务器弹出后，再进一步延迟加载设备商的板卡、端口对象，并点击后进一步进行配置、监控等操作。当然加载的数据越细，对3D引擎和浏览器的压力会越大。可以通过动态延迟加载/卸载策略，获取一些平衡折中。

电视机

纯属无聊，再做一个电视机挂在墙上。依旧，定义一个立方体、挖空屏幕，放上透明玻璃，再贴上我们喜欢的电视节目画面，就ok了。

{
		name: '电视机体',
		type: 'cube',
		width: 150,
		height: 80,
		depth: 5,
		translate: [80, 100, 13],
		op: '+',		
	},{
		name: '电视机挖空',
		type: 'cube',
		width: 130,
		height: 75,
		depth: 5,
		translate: [80, 102.5, 17],
		op: '-',
	},{
		name: '电视机屏幕',
		type: 'cube',
		width: 130,
		height: 75,
		depth: 1,
		translate: [80, 102.5, 14.6],
		op: '+',
		style: {
			'front.m.texture.image': 'images/screen.jpg',
		},
	}

当然，实际项目中，也可以换上监控大屏幕的效果：

总结

整个场景写到最后，我也已经脑洞大开游刃有余了。3D场景，尤其是这类业务系统，并不一定要死抠模型的仿真度，才能做到“好看”的效果。先来一张全景看一下：

怎么样，还算精美吧？基本不输前面看到的广告公司的效果图。但和效果图一张死图片不一样，我们这是一个能操作、能漫游、能缩放、有动画、显示流畅、浏览器无需插件就能直接打开的3D机房小程序，就一个json文件和一百多行代码和一天的时间就搞定了，还是让人有点惊讶的。

不用插件、不用3Dmax，不用模型库，干干净净纯粹的小程序，手机和平板也能用哦，而且还很流畅！上一张我的Nexus5截图瞅瞅：

经过优化，场景加载已经控制在600毫秒以内，缩放漫游也很流畅。当然技术和美化永无止境，用户的需求也千变万化精益求精。但只要我们选择好了技术和工具，就能事半功倍。Html5就是极佳的一个选择。

Html5，也许它还不是银弹，但它确实是很好的一个炮弹。本文这一弹，你还喜欢吗？欢迎来信留言索取代码、技术交流： tw-service@servasoftware.com

已有 0 人发表留言，猛击->> 这里<<-参与讨论

ITeye推荐

—软件人才免语言低担保赴美带薪读研！—

【译文】Top 10：HTML5、JavaScript 3D游戏引擎和框架

Wed, 24 Jun 2015 12:13:19 CST

由于很多人都在用JavaScript、HTML5和WebGL技术创建基于浏览器的3D游戏，所有JavaScript 3D游戏引擎是一个人们主题。基于浏览器的游戏最棒的地方是平台独立，它们能在iOS、Android、Windows或其他任何平台上运行。

有很多的JavaScript能够用于创建基于浏览器、使用HTML5和WebGL的3D游戏。然后，选择一个合适的游戏引擎是一个不小的挑战，它有时能帮你完成项目或突破项目瓶颈。

为了让你的选择变的容易，我们已经通过分析大多数JavaScript 3D游戏引擎在今天的市场并列出了十大游戏引擎来帮助您用JavaScript创建非常棒的HTML5,WebGL游戏。

1. Babylon.js

毫无疑问，Babylon.JS是最好的JavaScript3D游戏引擎，它能创建可以出售的专业级游戏。
Babylon.JS是David Catuhe对3D游戏引擎热爱的结果，他在用DirectX, OpenGL, 和Silverlight创建3D游戏引擎方面是经验丰富，并最终自己完成了一个游戏引擎。
Babylon.js的一些核心功能包含了场景图与灯光、摄像机、材料和网格、碰撞引擎、物理引擎、音频引擎和优化引擎。
这是一个 Babylon.js试验场，你可以拿你手边的游戏来试试这个游戏引擎。

2.Three.js

Three.js是另一个广泛应用并且功能强大的JavaScript 3D库，从创建简单的3D动画到创建交互的3D游戏，它都能实现。
Threejs带来的不仅是支持WebGL渲染，也支持SVG、Canvas和CSS3D渲染。然而，从游戏的角度来看，你可以只关注Threejs的WebGL渲染。
获取Three.js 3D引擎的源代码— github

3. Turbulenz

Turbulenz是最好的游戏引擎之一，在2009年，当HTML5和WebGL还在酝酿时，它已经被推出。直到2013年，Turbulenz才基于MIT协议拥抱开源。
Turbulenz包含了很多功能，例如2d物理、3d物理、声音、视频和其他服务,如排行榜、multichat,支付和用户数据。
了解更多： biz.turbulenz.com
获取源代码： turbulenz_engine

4. Famo.us

在HTML5 3D发展的市场中，Famo.us占据了非常重要的地位，并且它是最好的JavaScript 3D开源框架之一。对于famo.us，最好的事情就是包装了3D布局引擎，其完全继承了3D物理驱动的动画引擎。
了解更多— famo.us/docs
获取源代码— famous

5. PlayCanvas.js

PlayCanvas是一个基于 WebGL游戏引擎的企业级开源JavaScript框架，它有许多的开发工具能帮你快速创建3D游戏。PlayCanvas.js由一个专业社区创建，最初并不是开源的，但现在你可以在github上fork PlayCanvas.js，然后在你的下一个3D游戏项目中免费使用。
它还提供了能在浏览器中云心的云编辑器，开始使用PalyCanvas和导航到编辑器的URL一样容易。
了解更多— playcanvas.com
获取源代码— playcanvas/engine

6. Goo Engine

来自于GOO技术家族，Goo引擎有一组功能强大的JavaScript API，可通过使用HTML5和WebGL创建任何3D事物。有一个在线的编辑器goocreate，可以运行在Goo引擎上，并封装了一些功能，例如视觉三维编辑器,材质编辑器、脚本和容易发布选项等。
你可以通过支付一些相关的许可费用，在浏览器中使用在线编辑器。
尽管编辑器需要一些费用，但是Goo引擎是绝对免费的，你可以下载它并在你的3D项目中使用。
了解更多—- labs.gooengine.com
获取源代码— code.gooengine.com

7. CooperLicht

对于创建基于浏览器的游戏，CopperLIcht是最出色的3D引擎之一，也是CopperCube 3D游戏编辑器的后端引擎。
CopperCube是一个支持创建3D游戏和动画所需要的所有功能的编辑器，但是，它并不开源，需要一些相关的许可费用。
了解更多— ambiera.com/copperlicht

8. Voxel.JS

Voxel.Js是开源的，基于JavaScript的一个3D游戏引擎，自从它发布以来，社区成长非常快。如果你喜欢模块化方法，Voxel是一个不错的选择。
Voxel-engine是创建3D游戏的核心模块，其它模块可以根据需要插入。到目前为止，已经有超过200个扩展在npm上发布。
了解更多— maxogden/voxel-engine

9. Blend4Web

在2014年，Blend4Web作为开源的3D框架而发布，它高度集成了Triumph的3D内容创建工具“Blender”，并且本地支持Blender的节点材料、粒子系统、bullet物理引擎和其他功能。
获取源代码— blend4web.com/en/downloads

10. Enchant.js

Enchant.js是一个模块化的、面向对象的JavaScript框架，可用HTML5创建简单的APP和游戏。它是基于MIT协议开源的，因此开源免费使用。3D动画和游戏开源使用额外的插件（基于WebGL）创建。
获取源代码– wise9/enchant.js

本文根据@Nicolas Bevacqua的《best-3d-javascript-game-engines-frameworks-webgl-html5》所译，整个译文带有我自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处： http://noeticforce.com/best-3d-javascript-game-engines-frameworks-webgl-html5

淡忘~浅思猜你喜欢
怎么对HTML 5的特性做检测？	HTML 5：绘制旋转的太极图	【译】利用HTML 5中的Menu和Menuitem元素快速创建菜单	初识HTML 5：关于它的三个三	HTML 5 API的”前生今世”
无觅

转载请注明：淡忘~浅思 » 【译文】Top 10：HTML5、JavaScript 3D游戏引擎和框架

HT for Web自定义3D模型的WebGL应用

Thu, 08 Jan 2015 17:33:13 CST

有不少朋友询问《 HTML5 Web 客户端五种离线存储方式汇总》文章例子的3D表计模型是如何生成的，这个例子是通过导入3dmax设计好的表计模型，然后通过obj格式导入到 HT for Web系统中进行控制，这种方式特别适合复杂模型的应用场景，但对于监控系统的很多应用其实并不需要专业的美工使用专业的3D编辑工具，完全通过 HT for Web预定义的和内置自定义3D模型API就能满足很多应用，这里介绍几种场景的自定义3D模型应用。

上图是采用 HT提供的 createRingModel函数，通过编辑2D的多边形生成对应的环状的3D模型，对于花瓶碗杯等环形对称的物体很适合采用该函数构建。除了 createRingModel外，HT的建模手册中的custommodel自定义模型例子，还采用了createExtrusionModel等更多的自定义模型API构建了一个餐桌椅和墙面的场景，其效果如下：

HT内置的基础模型也有很多参数可调节设置出多种模型效果，参见 HT建模手册的如下例子：

自定义模型还可用于构建如机房、机框、板卡和端口的常见电信网管监控模型：

该EMS设备管理系统例子3D模型和Tree组件通过HT强大灵活的模型与图形的数据绑定功能，从而实现树上自定义图标和3D自定义模型的数据共享，实时一致刷新效果，以下为该EMS例子的全部JavaScript代码：

function init(){                                 
	dm = new ht.DataModel();                
	treeView = new ht.widget.TreeView(dm);                                                                                                 
	g3d = new ht.graph3d.Graph3dView(dm);                          
	mainSplit = new ht.widget.SplitView(treeView, g3d, 'h', 0.2);   

	view = mainSplit.getView();  
	view.className = 'main';
	document.body.appendChild(view);    
	window.addEventListener('resize', function (e) {
		mainSplit.invalidate();
	}, false);                         

	register2DImage();
	register3DModel();
	addModel(); 

	g3d.setGridVisible(true); 
	g3d.setGridSize(30);
	g3d.setGridGap(50);
	g3d.setEye([200, 200, 600]);
	g3d.setCenter([0, 200, 0]);
	g3d.getView().style.background = '#F9F9F9';                 
	g3d.getLabel = function(data){
		return data.s('label');
	};
	dm.sm().setFilterFunc(function(data){
		return data !== wall;
	});
	treeView.setVisibleFunc(function(data){
		return data !== wall;
	});                
	treeView.expandAll();
}

function register2DImage(){
	ht.Default.setImage('ems-frame', {
		width: 18,
		height: 18,
		comps: [
			{
				type: 'rect',
				rect: [5, 4, 8, 11],
				borderWidth: 2,
				borderColor: '#34495E'
			}                         
	]});        

	ht.Default.setImage('ems-pane', {
		width: 18,
		height: 18,
		comps: [
			{
				type: 'rect',
				rect: [0, 4, 18, 10],
				background: {func: 'style@shape3d.color'}
			}                         
	]});     

	ht.Default.setImage('ems-block', {
		width: 18,
		height: 18,
		comps: [
			{
				type: 'circle',
				rect: [0, 2, 18, 10],
				background: {
					func: 'attr@circleColor',
					value: '#3498DB'                               
				}
			}, 
			{
				type: 'rect',
				rect: [4, 14, 10, 3],
				background: {
					func: 'attr@rectColor',
					value: '#3498DB'                               
				}
			}                           
	]});                 
}

function register3DModel(){
	ht.Default.setShape3dModel('ems-frame', ht.Default.createFrameModel(0.1, 0, 0.1, {top: true, bottom: true, back: true}));       

	ht.Default.setShape3dModel('ems-block', [
		{
			shape3d: ht.Default.createCylinderModel(32, 0, 32, false, false, true, true),   
			r3: [Math.PI/2, 0, 0],   
			color: {
				func: 'attr@circleColor',
				value: '#3498DB'
			}     
		},
		{
			shape3d: 'box',
			s3: [1, 0.2, 1], 
			t3: [0, -0.7, 0],
			color: {
				func: 'attr@rectColor',
				value: '#3498DB'
			}
		}
	]);                  
}

function addModel(){
	wall = new ht.Shape();
	wall.setName('Wall');
	wall.setPoints(new ht.List([
		{x: -750, y: 750},
		{x: -750, y: -750},
		{x: 750, y: -750},
		{x: 750, y: 750}
	]));
	wall.setTall(400);
	wall.setElevation(200);
	wall.s({
		'shape.border.width': 5,
		'shape.border.color': 'rgba(20, 20, 20, 0.8)',
		'shape.background': null,    
		'all.color': 'rgba(102, 192, 218, 0.95)',
		'all.transparent': true,
		'all.reverse.cull': true
	});
	dm.add(wall);                                               

	var frame = new ht.Node();
	frame.setName('Main Frame');
	frame.setIcon('ems-frame');
	frame.s3(120, 300, 120);
	frame.p3(0, 152, 0);
	frame.s({
		'shape3d': 'ems-frame',
		'shape3d.color': '#34495E',
		'label': 'www.hightopo.com',
		'label.color': 'white',
		'label.background': '#3498DB',
		'label.position': 6,
		'label.t3': [-6, -54, 6],
		'label.r3': [0, Math.PI/4, Math.PI/2]
	});
	dm.add(frame);                                

	var colors = ['#9C8CE7', '#00C59D', '#A741B6', '#F5C700', '#31485F', '#F81F25', '#00B862', '#3B7DA7'];
	for(var i=0; i<6; i++){
		var pane = new ht.Node();
		pane.setIcon('ems-pane');
		pane.setName('Pane' + (i+1));
		pane.s3(108, 16, 8);                    
		pane.s({
			'shape3d': 'box',
			'shape3d.color': '#ECF0F1'
		});
		pane.setHost(frame);
		pane.setParent(frame);                     
		dm.add(pane);

		if(i < 2){
			for(var j=0; j<8; j++){
				var block = new ht.Node();
				block.setName('block ' + i + '*' + j);
				block.s3(8, 8, 12);                
				block.p3(-39+j*11, 1, 0);
				block.setHost(pane);
				block.setParent(pane); 
				block.setIcon('ems-block');
				block.s({
					'shape3d': 'ems-block'
				});                       
				if(i === 1){
					block.a({
						'circleColor': colors[j],
						'rectColor': '#00F2CF'
					});

				}
				dm.add(block);                                        
			}                     
		}else{
			pane.setName('Pane' + (i+1) + ' [ Empty ]');
			pane.s({
				'shape3d.color': '#BDC3C7'
			});
		}                   
		pane.p3(0, 265-i*27, 54);
	}                
}

作者：u013161495 发表于2015-1-8 9:33:13 原文链接

阅读：78 评论：0 查看评论

亚马逊 Fire Phone 到来：内容新入口，3D 很出色

Thu, 19 Jun 2014 03:07:49 CST

亚马逊在 2 年前就被传出正在开发自有品牌手机，《商业周刊》资深作者布拉德·斯通（Brad Stone）在今天带来更多消息。他说，亚马逊在 2009 年就开始着手开发智能手机，早期同时开发了两款手机，最后低端设备被渐渐忽略，团队将精力集中在一款支持 3D 显示的高端手机上。

发布会前夕科技博客们“抽丝剥茧”式的爆料，亚马逊含糊暧昧的预热视频，情报、谍图，系统、参数……所有信息汇聚到一起，将人们对亚马逊手机的期待持续提高。现在，它终于到来了。

Fire Phone

似乎是对 Kindle Fire 平板电脑的延续，亚马逊将首款智能手机命名为 Fire Phone。它的配置与传言有些出入，Fire Phone 采用：

高通 2.2GHz 四核处理器
2G 内存
4.7 英寸 720p 显示屏，最高亮度为 590 尼特，室外下也可以看清屏幕内容
1300 万像素后置镜头，采用 5 枚镜片组成的镜组，光圈大小为 f2.0，支持 OIS 光学防抖。拥有独立拍照键
其它：双声道杜比音效扬声器，Cloud Drive 提供无限量的照片云存储空间

软件端，贝索斯特别介绍了一项名为 Firefly 的新功能。Firefly 是一项识别功能，按住手机上的 Firefly 按钮，你可以通过摄像头扫描书籍、CD 的编码。Firefly 还能识别唱片和电影的封面，你甚至可以用它扫描一段 URL 链接。

很明显，Firefly 是一项目的性很强的产品——扫描完书籍、唱片，系统下面会给出该商品在亚马逊商店中的链接，点击后就可以购买。

演示过程中，Firefly 的识别速度很快。贝索斯在展示前打趣说，“我得快点演示这项功能。因为我得让你们看看它到底有多快。”

速度上的优势之外，Firefly 的精准度看起来也还不错。当然，具体效果还需要实际上手来验证。

除了图像识别，Firefly 还能识别歌曲，并且给出歌曲名称。苹果在 iOS 8 中同样为 Siri 加入了“听歌辨曲”功能，这会是未来的一个趋势吗？

贝索斯承诺，亚马逊会将 Firefly 开发工具提供给开发者，方便他们在自己的软件中加入文字、音乐和图片的识别功能。

3D 显示

在冗长的硬件配置和 Firefly 的功能描述后，贝索斯终于开始介绍 Fire Phone 的 3D 显示特性——“动态视角”（Dynamic perspective）。

实现动态视角的硬件基础是位于手机四角的 4 枚摄像头。镜头可以捕捉周围环境的位置，配合软件算法，呈现出 3D 效果。

贝索斯说，动态视角每分钟要刷新 60 次，以此来维持 UI 的 3D 效果。从演示来看，动态视角的 3D 效果非常明显，锁屏壁纸可以看到明显的景深，地图应用也可以渲染出非常出色的立体效果。

BGR 和 TechCrunch 的信源同时表示，亚马逊在去年秋天开始开发拥有 3D 效果的动态视角。专利文件同样显示，亚马逊在很早之前就筹划类似的产品，与之相关的专利文件最早要追溯到 2008 年。

如此前《华尔街日报》的消息所述，亚马逊和 AT&T 签订了合作协议，Fire Phone 将由后者独家销售。2007 年苹果发布初代 iPhone 时，AT&T 就曾与苹果签订了 iPhone 的独家销售权，合作协议持续 3 年多，AT&T 赚到钵满盆溢。亚马逊 Fire Phone 有可能成为 AT&T 下一个金矿。

根据 AT&T 的规定，购买 16G Fire Phone 需要签订 2 年合约，合约价为 199.99 美元；购买 64G Fire Phone 同样需要绑定 AT&T 的服务，它的合约价为 299 美元。

题图来自 WSJD/Twitter

杜会堂 (Duhuitang)

阅读、思考、自我反省，相信坚持可以改变人生。

邮箱新浪微博

#欢迎关注爱范儿认证微信公众号：AppSolution（微信号：appsolution），发现新酷精华应用。

爱范儿 · Beats of Bits | 原文链接 · 查看评论 · 新浪微博 · 微信订阅 · 加入爱范社区！

基于HTML5的电信网管3D机房监控应用

Sat, 22 Feb 2014 22:29:56 CST

先上段视频，不是在玩游戏哦，是规规矩矩的电信网管企业应用，嗯，全键盘的漫游3D机房:

随着PC端支持HTML5浏览器的普及，加上主流移动终端Android和iOS都已支持HTML5技术，新一代的电信网管应用几乎一致性的首选HTML5，当然Flex和Silverlight的遗留系统依然存活着，如果不考虑移动终端，不考虑将来维护人员难找，不考虑需要承载成千上万的网元数量，不考虑公司员工的职业生涯前途，哪怕其各自父母adobe和ms都已弃之，其实Flex和Silverlight作为企业应用方案技术上还是可以的，还是能存活很多很多年。

但我作为程序员可是要考虑自己的职业生涯的，可能有人喜欢成为能维护CORBA或IBM大机那样的稀有物种得到高薪，我还是喜欢朝气蓬勃的技术氛围，我喜欢每天上 Hacker News都能见到讨论我从事的技术的新鲜事，我喜欢有搞通用组件有 Sencha和 Kendoui可选择，搞图表有 Highcharts可选择，搞2D拓扑和3D机房有 Hightopo可选择，搞移动应用有 JQuery Mobile可选择，每周末到徐家汇公园那个照的到太阳看得见湖色几乎成为我私人定制的木凳，打开平板好好通读这一周Web前端发送的一切新鲜事，是的我有 JavaScript Weekly、 HTML5 Weekly和 Modern Web Observer可选择，我很庆幸自己活在这个HTML5时代，可以用一门javascript语言技术玩通用组件，玩Chart，玩拓扑，完3D，是的还可以玩后台 NodeWeekly，再说了不成为稀缺动物，就玩HTML5不也照样拿高薪，有选择的条件下何苦让自己成为恐龙古董。

回到今天正题，随着去年后半年来IE11和Android浏览器支持WebGL之后，WebGL技术在我接触的行业领域已成燎原之势。什么？还得考虑支持OA老系统的IE678，Chrome Frame插件早就可以让IE678910跑WebGL了，更不用说HTML5的2D的Canvas。什么？性能问题，可看看 HT for Web 跑数万网元的操作体验视频。

什么？兼容性问题，这些问题就交给各种框架来解决，HTML5的3D引擎非常多 threejs是知名度较高的，但较臃肿大好几百k的包，什么功能都触及但都做不深入，动画引擎像玩具，做游戏引擎又缺碰撞检测，这点上不及后起之秀 babylonjs，最早吸引我的是注意的是介绍 babylonjs的这段话 I am a real fan of 3D development. Since I was 16, I spent all my spare time creating 3d engines with various technologies (DirectX, OpenGL, Silverlight 5, pure software, etc.). 这段话老让我郁闷的回忆自己16岁在干吗？

我喜欢 babylonjs主要因为他专注游戏引擎的定位，同样企业应用我选择 Hightopo的HT for Web 3D引擎，毕竟企业应用和游戏功能、性能、渲染效果等方面考虑的是不一样的，没有一个引擎能解决所有行业的所有问题，干活还得找最对口的工具， Hightopo的3D引擎包很小，核心3D引擎只有几十k，融合通用组件和2D的整体包也才200多k，另外HT的整体开发模式用同一个数据模型驱动了通用组件、2D拓扑组件包括3D引擎的组件，对于我做企业应用的Tree、Table这些和图形的联动是很重要的事情，这点做游戏的同学可能体会不到我们这些还得面对一大堆业务表格整体CURD同学的痛苦，另外 Hightopo也具备必要的游戏引擎功能，例如全键盘导航操作功能，支持Mobile的Touch交互功能，基本的Collisions Detection碰撞检测。最后 Hightopo毕竟专注电信行业，知道电信网管需要什么模块库，他能知道我等每天面对ODF/DDF/MDF/Shelf/Card/Port这些电信业务模型的痛苦点，见此视频

使用 Hightopo还有很重要的一点就是HT提供了基于HTML5的可视化设计器，无需借助3ds max和maya这样的专业3D设计工具，直接 HT 3D Designer通过页面就能进行3D建模，而动态的数据部分通过API的方式驱动生成模型和实时更新即可，最近的这些项目我们团队不需要美工都能完全由我们程序员自己搞定，当然要做漂亮贴图部分还是需要美工ps的帮助。

就像电信OSS和BSS越来越难清晰定界一样，2D和3D的应用也会如此，越来越模糊，一个系统将2D和3D融合是必然趋势，你中有我我中有你，也许将来我这个文章标题会让人觉得搞笑，机房监控当然要有3D功能了，何必强调3D，没有3D还算是机房监控吗，好比今天的手机，不能上网还算手机吗？

当然Flex、Silverlight还有很多采用Activex的C++引擎也都可以在Web上跑3D的引擎可以支持，但谁能忽视mobile呢，这些年大家受够了Web开发千奇百怪的大杂烩解决方案，每次到运营商客户运维终端看到古老的IE里面跑着各种插件糅合的脆弱系统，各种OA厂家还自鸣得意的支持IE678，还有不少人拿着facebook从html5迁移到native说事，其一那都是过去式了，其二那不是企业应用，Mark Zuckerberg需要的东西和做企业应用的你我是不一样的东西，下一个时代的企业应用技术必将是清清爽爽的HTML5！

当然3D不是电信网管的专注，以下是我们另一个部门做的太阳能发电、燃气和智能家居行业的3D监控系统应用供参考：

已有 0 人发表留言，猛击->> 这里<<-参与讨论

ITeye推荐

—软件人才免语言低担保赴美带薪读研！—

2D和3D游戏引擎 Godot 宣布开源

Thu, 13 Feb 2014 17:56:59 CST

近日， 一款名为Godot的全新开发的，功能非常全面的游戏引擎在MIT许可下开源，其代码业已托管到GitHub上。据其开发工作室OkamStudio介绍，Godot是由Juan Linietsky和Ariel Manzur开发的一款in-house引擎，可用于PC、移动、主机及Web游戏开发，其功能集类似Unity，拥有着功能非常丰富的编辑器、语言及API，却也简单易用。

主要特性：

可视化：功能丰富而又非常灵活的编辑器界面
2D/3D游戏开发
脚本：自定义行为、内置编辑器语法高亮、代码自动补缺
设计：用户界面可简单可复杂，开发者可使用自己的工具来编辑游戏内容
一键部署到Windows、Linux、Mac、Android、iOS、BB10及HTML5等多个平台

作为自己开发的首款引擎，Linietsky对Godot的期望与评价都非常高，尽管与Unity非常类似，但在2D及动画支持方面，却要强于Unity。并且，该引擎不依赖于任何外封装库，除了PC及主流移动平台之外，Godot还支持Xbox及PS。

此外，Godot还内置了类似Unity的编辑器、GUI工具包、2D/3D物理支持、支持OpenGL ES 2.1功能集的3D渲染器、易于学习的语言（用于创建着色器和快速处理效果），支持用ASM.js或Google Native Client输出HTML5代码，支持Mac OS X、Windows及Linux开发平台。

GitHub地址： https://github.com/okamstudio/godot/

感谢 WnouM 投递这篇资讯

资讯来源： CSDN

已有 1 人发表留言，猛击->> 这里<<-参与讨论

ITeye推荐

—软件人才免语言低担保赴美带薪读研！—

第一个基于asm.js的3D商业Web游戏宣布

Fri, 13 Dec 2013 12:15:37 CST

今年早些时候，Mozilla和Epic Games利用asm.js、Emscripten和WebGL，在浏览器上演示了虚幻引擎3的一个DEMO，展示了Web成为一个3D游戏平台的潜力。这一演示吸引了游戏工作室NomNom Games的注意，他们因此开始探索将其开发的虚幻引擎3游戏移植到浏览器的可能性。12月12日，Mozilla和NomNom宣布了第一个基于asm.js技术的3D商业Web游戏——Monster Madness。用户可以在支持WebGL的Firefox、Chrome或Opera上测试游戏的Alpha版本，和之前的演示一样，进入游戏前需要花比较长时间载入纹理素材。

基于HTML5技术的电力3D监控应用（一）

Mon, 16 Dec 2013 10:57:15 CST

最近参与了国网计量中心的四线一库自动化检定系统的项目开发，团队封闭开发了大半年终于快到尾声了，整个项目过程实在非常累，我的mentor杨杨老师是这样描述的：累的不想说话了。我估计是我太渴望新知识，整天不断问他问题把他搞烦了。

对我这种新人来说还是相当充实的，整个系统需要和硬件厂家对接采集硬件数据，需要和实时数据库厂家对接实时数据，需要和视频厂家对接视屏界面组件，还要和国家电网的业务专家请教业务知识，我从只会写代码的程序员慢慢变得也喜欢和人打交道了。

对于我最有意义的是我终于可以真正从事基于HTML5技术的开发了，以前呆过几家互联网公司总要痛苦的去做兼容IE6、7、8的无趣事情，每天看到HTML5技术的日新月异而我却只能望梅止渴，现在做回企业应用开发，虽然老同事笑我从toC降级做toB，但我自己倒觉得能用上HTML5技术是升级，并且在项目界面呈现上我们采用了 HT的基于WebGL的3D引擎框架，让我们整天面对CRUD的企业应用，增加了很大的3D应用亮点，搞得很多其他部分同事因为能参与3D的开发很想加入我们项目组，先展示几张项目的现场抓图：

HT的3D引擎设计很独特，完全用面对对象的模式来开发三维场景，将常规2D图形组件的 Model-View-Presenter (MVP)
设计模式与3D引擎融合一体，这种完全可以控制模型所有属性事件变化的模式还是很独创的，基于这样的设计就没有什么FPS(Frames Per Second)的概念，因为基于MVP的设计模型可监控所有属性变化，因此如果模型没有变化时，无需进行传统3D引擎那样无谓的刷新。基于事件模式的刷新对于桌面应用可能无所谓，但我们项目选择基于HMTL5很重要的一点是我们需要利用HTML5的跨平台技术，让我们的项目也能跑在Android等移动终端，而对于移动应用来说如果不断进行无谓的刷新对于移动终端耗电可是个大问题，下面为几张移动平板的项目抓图：

已有 2 人发表留言，猛击->> 这里<<-参与讨论

ITeye推荐

—软件人才免语言低担保赴美带薪读研！—

基于HTML5技术的电力3D监控应用（二）

Mon, 16 Dec 2013 11:00:56 CST

我们选用HTML5技术还是顶着很大压力，毕竟HTML5技术性能行不行，浏览器兼容性会不会有问题，这些在项目选型阶段还是充满疑惑，项目做到现在终于快收尾了我们才敢松口气，压力基本顶住了，我个人总结的经验是：HTML5性能肯定不是最高，但对企业应用足够高效，HTML5标准不可能所有浏览器都一致实现，但对于企业应用已经足够工作。选择正确的引擎框架，进行合理的设计才是关键，HTML5真的已经Ready！

选择HTML5除了看中JavaScript动态语言的灵活性，能够很好的和其他异构系统融合到页面外，HTML5的跨平台性也是我们看中的重要原因，以前PC桌面应用上采用Flex和Silverlight到是可以跨平台，但如今的系统还不能上移动终端实在就说不过去了，而Flex和SL在跨移动终端方面就卡壳了，虽然有AIR可以导成native app应用，但还是远不如HTML5纯页面来的高效，每次修改任何东西PC上都可以模拟测试，看看 Chrome DevTools for Mobile越来越屌爆的Screencast and Emulation功能：

我现在测试移动终端大部分情况都不需要用真机，当PC上模拟测试得差不多后再进行真机测试基本都能一次性通过，回想以前用Flex的AIR进行转换Native App真是浪费生命，每次测试我都要刷几条微博消磨难熬的等待时间，上一次项目我们团队也分为Android和iOS两个完全采用独立Native开发方式，但也存在版本发布不一致，应用体验不一样，包括很多业务逻辑代码本可以复用的但由于Java和ObjectiveC的差异，搞得我们非得写两套一样逻辑的代码，其中加密的部分还得费劲的用C++实现了一个统一的实现，然后再有Java和OC分别去调用C++的代码，总之系统越搞越复杂，团队需要的人越来越多，当然我们经验不足也是一个原因，但我们毕竟是做企业应用搞项目的，不过可能有资源像BAT那些移动互联网巨头去慢慢融合摸索经验，我们除了这些基础技术外，还有学习很多电力业务，还得和硬件打交道，学习各种电力规约协议，扯淡了这么多你应该明白我们现在成功的使用了HTML5一个js语言就能跨所有平台之爽。

项目初期我们团队在选型初期对3D建模进行了一定的研究，传统的3D引擎一般只提供后期三维模型的渲染呈现，并不提供3D建模的解决方案，本以为还需要招聘专业的3DMax或Maya三维建模设计师，因为我们目前的美工设计师只会ps，但 HT提供了一套完全基于HTML5的3D设计编辑工具，别说只会ps的美工设计师，其实后续项目的大部分3D场景我们程序员都参与了设计。

完全基于HTML5的设计器这点还是挺让我佩服的，虽然大家都在转型到HTML5但还很少有做得彻底的，如 Google Web Designer和 Adobe Edge Tools这些巨头的产物，包括 Sencha Architect折腾了很长时间又走回Qt的路线，我实在不看好这些还不采用HTML5做设计器的路线，这时代HTML5已经足够强大，JS虚拟机的性能如V8也足够高效，数据直接云存储就可以，如果需要本地功能采用 Node-Webkit也是很不错的方案。以前我们团队常用Qt或Java Swing来写些小工具，我发现这个项目历练之后 Node-Webkit的技术方案成了大家些写工具应用的首选。

以下为几张运行系统抓图，以及这些系统图在编辑器内编辑的过程抓图

已有 0 人发表留言，猛击->> 这里<<-参与讨论

ITeye推荐

—软件人才免语言低担保赴美带薪读研！—

基于HTML5技术的电力3D监控应用（四）

Sat, 21 Dec 2013 00:18:00 CST

回答了知乎问题较长，就作为新的一篇：

正好逛到这个问题，正好是2013年底，正好最近基于的 HT for Web 3D做的电力项目收尾，正好用到的就是WebGL技术，因此说说自己的感觉供参考：

1、2013年应该感谢Google和MS，前者提供了Android Chrome浏览器的WebGL支持，后者终于让IE11支持了WebGL并且减低到win7也能运行。

2、还得感谢Firefox和Opera这些厂家推动了移动终端浏览器对WebGL的支持，并且性能还都不差，早期Chrome的Android版还不支持WebGL时测试只能考他们。

3、感谢UCWeb浏览器提供了唯一（如果不是唯一还请高人指点）官方iPad的浏览器的WebGL支持，虽然有很多bug我们提交了问题也没人理，还好找到了workaround规避了些坑。

4、IE11很给力，我在mac下的VirtualBox虚拟机里面IE11是唯一能跑WebGL的（其他浏览器不知道是否有开关设置可以在虚拟器可以跑的，如果有还请高人指点），但还得努力啊，一堆基础的API都不支持，例如TRIANGLE_FAN类型都不支持，例如lineWidth都不让设置，例如Shading Language都不支持return语句，还有好多坑，但还好我们都找到方法绕开了（如果你也遇到了IE11的吭可以帮我继续列举）。

5、Nexus 7二代很给力，作为WebGL的移动测试机，很轻且性能不错，终于找到了让我满意的愿意随身带着用的Android板。

6、打包android的WebView控件方式还很难搞，默认的WebView核与Android Chrome不一样，搞了个独立的Chrome 28的核还开启不了WebGL（要是有高人搞定了，还请指点）。

7、上点代表性的项目抓图，一个是IE11下的，一个是Android下的，总体说我感觉2013年经过各个厂家的努力，对于大多数的企业应用应该可以说：WebGL is Ready!
修改

已有 0 人发表留言，猛击->> 这里<<-参与讨论

ITeye推荐

—软件人才免语言低担保赴美带薪读研！—

JavaScript 3D图表

Sat, 24 Aug 2013 19:27:18 CST

文章系本人原创，转载请保持完整性并注明出自《四火的唠叨》

在说3D图表以前，首先要明确两个概念，一个是数据的维度，一个是呈现数据载体的维度。对于数据的维度，一维的数据呈现，但是呈现的载体是二维的平面图，比如饼图：

已经能够很清晰地观察到数据的分布情况。数据如果增加一个维度，变成二维，呈现载体依然是二维的平面图：

数据表达依然是清晰的。但是，倘若再增加一维，这个时候就面临了两个问题：

数据的维度增加，复杂性也增大了；
计算机发展到现在，绝大多数情况下数据载体依然是二维的平面图，如何展示三维的数据呢？

这两个问题中，第一个问题从本质上说，无法解决。数据的维度越大，理解起来理所当然地，也越来越困难。

但是第二个问题，我们至少有两种解决办法。一种，在当前二维图表的基础上，通过颜色、图形、数值的不同等等，来表示第三个维度的数据。例如，利用颜色不同来表示第三个维度的热图：

在两个维度经度和维度的情况下，第三个维度温度通过颜色的不同来展示了。

另一种，就是绘制3D的图形，把第三个维度展示出来。需要注意的是，绘制3D的图形仅仅是技术上的一种呈现形式，并不意味着它的易懂性要好于上面一种方式。实际上，我们还是需要看看具体的问题是什么。

明确了这些概念以后，我再来介绍两则JavaScript的3D图表，它们都是为了呈现三维的数据，而不仅仅是看起来3D而已，大部分JavaScript的3D图表库都是基于Canvas的，如果你对Canvas不了解请移步参阅这篇文章；其中一些则是支持WebGL的。WebGL是一种3D的绘图标准，有了它，JavaScript就可以实现OpenGL标准能做的事情了，在HTML5 Canvas基础上，WebGL允许硬件3D加速。

webgl-surface-plot

主页点此。特性列表：

纯JavaScript实现，不需要Flash；
鼠标左键拖拽可以翻转图像；
按住Shift键可以缩放；
Web GL不可用的时候，可以直接使用Canvas绘制；
自定义坐标轴名称；
自定义颜色梯度和渐变；
包装为Google Visualization API的一部分。

在IE下，借助 excanvas可以在VML下得到一样的效果。

对于这个例子，简单过一下重点代码，首先这部分是着色器的代码（片段着色器和顶点着色器），包括坐标轴和纹理：

        <script id="shader-fs" type="x-shader/x-fragment">
            #ifdef GL_ES
            precision highp float;
            #endif
            varying vec4 vColor;
            varying vec3 vLightWeighting;
            void main(void)
            {
            gl_FragColor = vec4(vColor.rgb * vLightWeighting, vColor.a);
            }
        </script>
        <script id="shader-vs" type="x-shader/x-vertex">
            attribute vec3 aVertexPosition;
            attribute vec3 aVertexNormal;
            attribute vec4 aVertexColor;
            uniform mat4 uMVMatrix;
            uniform mat4 uPMatrix;
            uniform mat3 uNMatrix;
            varying vec4 vColor;
            uniform vec3 uAmbientColor;
            uniform vec3 uLightingDirection;
            uniform vec3 uDirectionalColor;
            varying vec3 vLightWeighting;
            void main(void)
            {
            gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
            vec3 transformedNormal = uNMatrix * aVertexNormal;
            float directionalLightWeighting = max(dot(transformedNormal, uLightingDirection), 0.0);
            vLightWeighting = uAmbientColor + uDirectionalColor * directionalLightWeighting;
            vColor = aVertexColor;
            }
        </script>
        <script id="axes-shader-fs" type="x-shader/x-fragment">
            precision mediump float;
            varying vec4 vColor;
            void main(void)
            {
            gl_FragColor = vColor;
            }
        </script>
        <script id="axes-shader-vs" type="x-shader/x-vertex">
            attribute vec3 aVertexPosition;
            attribute vec4 aVertexColor;
            uniform mat4 uMVMatrix;
            uniform mat4 uPMatrix;
            varying vec4 vColor;
            uniform vec3 uAxesColour;
            void main(void)
            {
            gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
            vColor =  vec4(uAxesColour, 1.0);
            }
        </script>
        <script id="texture-shader-fs" type="x-shader/x-fragment">
            #ifdef GL_ES
            precision highp float;
            #endif
            varying vec2 vTextureCoord;
            uniform sampler2D uSampler;
            void main(void)
            {
            gl_FragColor = texture2D(uSampler, vTextureCoord);
            }
        </script>
        <script id="texture-shader-vs" type="x-shader/x-vertex">
            attribute vec3 aVertexPosition;
            attribute vec2 aTextureCoord;
            varying vec2 vTextureCoord;
            uniform mat4 uMVMatrix;
            uniform mat4 uPMatrix;
            void main(void)
            {
            gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
            vTextureCoord = aTextureCoord;
            }
        </script>

这个方法用于保持两图步调一致：

            function coordinateCharts(){
                // Link the two charts for rotation.
                
                plot1 = surfacePlot.getChart();
                plot2 = surfacePlot2.getChart();
                
                if (!plot1 || !plot2) 
                    return;
                
                plot1.otherPlots = [plot2];
                plot2.otherPlots = [plot1];
            }

每发生变化需要重绘的时候，调用：

surfacePlot.draw(data, options, basicPlotOptions, glOptions);
surfacePlot2.draw(data2, options, basicPlotOptions2, glOptions2);

Demoparse主要用来根据用户输入的公式f(x,y)计算z的值：

            function Demoparse(ID_result, ID_code, valueArray, toolTips){
                var el, expr;
                el = document.getElementById(ID_result)
                expr = document.getElementById(ID_code).value;
                expr = Parser.parse(expr);
                var result;
                var idx = 0;
                var d = 360 / numRows;
                
                for (var x = 0; x < numRows; x++) {
                
                    valueArray[x] = new Array();
                    
                    for (var y = 0; y < numCols; y++) {
                    
                        result = expr.simplify({
                            x: x * d,
                            y: y * d
                        });
                        
                        result = result.evaluate();
                        
                        valueArray[x][y] = result / 4.0 + 0.25;
                        
                        toolTips[idx] = "x:" + x + ", y:" + y + " = " + result;
                        idx++;
                        
                    }
                    
                }
                
            }

Canvas 3D Graph

相比前者， Canvas 3D Graph真是太简单了，如果你需要这种风格的柱状图：

demo的代码非常简单：

        //Initialise Graph  
        var g = new canvasGraph('graph');  
                  
        //define some data  
        gData=new Array();  
                  
        gData[0]={x:500,y:500,z:500};  
        gData[1]={x:500,y:400,z:600};  
        gData[2]={x:500,y:300,z:700};  
        gData[3]={x:500,y:200,z:800};  
        gData[4]={x:500,y:100,z:900};  
  
        // sort data - draw farest elements first         
        gData.sort(sortNumByZ);  
                  
        //draw graph   
        g.drawGraph(gData);

PS：如果你遇到无法显示WebGL图形的问题——它不仅对浏览器，还对硬件有要求。如果你使用Opera浏览器，在地址栏输入about:gpu，以查看你的显卡是否被支持。如果是FireFox，地址栏输入about:config，寻找webgl.force-enabled，双击，将该值改为true即可。

文章系本人原创，转载请保持完整性并注明出自《四火的唠叨》

分享到：

你可能也喜欢：

Famo.us，利用 HTML5 做出 3D 手势操作界面

Mon, 04 Mar 2013 20:12:54 CST

根据 TechCrunch 的报道，Famo.us 团可以让开发者利用 HTML5 创造 2D 和 3D 的手势操作界面，并且可适配在各种移动或者桌面设备。今天，他们宣布获得了 400 万美元的 A 轮融资。

使用 Famo.us 服务的来建立网站，就会绕过浏览器内的渲染工具，使用 Famo.us 自己的框架，从而大大的增进渲染效果。至于他们实际做出来的效果，可以直接在 Famo.us 的网站看到：一个 3D 版本的的元素周期表，可以随心所欲地旋转，选取里面的元素放大查看等等，这个网页并没有使用任何的插件，WebGL，或者 Canvas。而该网页能够支持智能手机，平板，PC，甚至电视屏幕。

团队由 Steve Newcomb 牵头。他之前创立的搜索工具 Powerset，被微软以 1 亿美元的价格收购。目前，Famo.us 已经有 1.6 万个开发者注册使用测试版本。

爱范儿 · Beats of Bits | 原文链接 · 查看评论 · 新浪微博 · 微信订阅 · 加入爱范社区！

基于HT的CSG功能构建HTML5的3D书架

Thu, 25 Dec 2014 01:45:57 CST

构造实体几何 CSG全称 Constructive solid geometry，是3D计算机图形学中构建模型的常用技术，可通过合并Union、相减Subtraction和相交Intersction的三种取集的逻辑运算，将立方体、圆柱体和棱柱等简单的基础模型，嵌套组合成更复杂三维模型。

CSG的算法这些年来已有各种语言平台版本实现，C++版主流的是 http://opencsg.org/ 已有众多基于该开源类库的应用案例，JavaScript语言较早版实现 http://evanw.github.io/csg.js/ 影响较广，很多其他js衍生版都是基于该版本进行改进完善，包括Java版的实现 https://github.com/miho/JCSG ，可参考基于JavaFX的3D打印IDE https://github.com/miho/JFXScad ，提起JavaFX视乎这些年完全消失在程序员视野毫无声息，但还是有一群拥护者持续在使用着如今地位有点尴尬的JavaFX。

回到我们今天要搞的3D书架例子，我们将基于 HT for Web的3D引擎来实现， HT已经内置了CSG功能的模型封装，我们通过构建CSGNode图元对象，该类型图元可对Host吸附的图元进行CSG技术的合集、并集和补集的三种操作，一般运用中裁剪的方式较为常用，因此CSGNode默认对Host图元的操作就是裁剪。

上图的例子效果可看出我们构建了一个 DataModel数据模型，该模型绑定了一个 TreeView树组件和两个 Graph3dView的三维组件，上部分的Graph3dView组件添加了VisibleFunc的可见过滤器，隐藏了如下部分的Graph3dView中蓝色立方体图元，这些蓝色立方体图元就是CSGNode，其作用就是用来裁剪其吸附的书架Shelf对象，因此一般在3D编辑器状态下才需要出现，运行时科如上部分Graph3dView组件那样，通过添加可见过滤器将其隐藏，这样就实现了有凹槽可摆放书籍内容的3D书架效果，本例我们作为示例仅放了一本《CSS3 The Missing Manual》，这本书其实是由一个六面体，front面显示了书籍贴图，然后旋转一定角度进行摆放，btw《CSS3 The Missing Manual》第三版是本很不错的CSS书籍，强烈推荐！

书架两边分别摆放了两个不同风格的小书台，通过上图我拖拽改变了蓝色CSGNode图元的位置，大家通过两张图的对比能更直观的体会到CSG的操作效果，玻璃门开关以及相册效果都是直接利用 HT for Web的3D引擎提供的模型，通过设置透明度、相片贴图和旋转动画等呢只功能参数即可。

以下是该 HT for Web的3D例子的所有JavaScript代码供参考： http://v.youku.com/v_show/id_XODU2MTQ4NjI4.html

ht.Default.setImage('ben12', {
	width: 100,
	height: 50,
	comps: [
		{
			type: 'image',
			name: 'ben1',
			rect: [0, 0, 50, 50]
		},
		{
			type: 'image',
			name: 'ben2',
			rect: [50, 0, 50, 50]
		}
	]                
});            
			
function init(){                                 
	dm = new ht.DataModel();                
	treeView = new ht.widget.TreeView(dm);                                                                                                 
	gv1 = new ht.graph3d.Graph3dView(dm);   
	gv2 = new ht.graph3d.Graph3dView(dm);   
	splitView = new ht.widget.SplitView(gv1, gv2, 'v', 0.6);   
	mainSplit = new ht.widget.SplitView(treeView, splitView, 'h', 0.27);   
	
	view = mainSplit.getView();  
	view.className = 'main';
	document.body.appendChild(view);    
	window.addEventListener('resize', function (e) {
		mainSplit.invalidate();
	}, false);                         
  
	gv1.setMoveStep(30);
	gv1.setGridVisible(true); 
	gv1.setEye(0, 100, 1000);
	gv1.setCenter(0, 200, 0);
	gv1.pan(0, 100, true);
	gv1.getLabel = function(){
		return null;
	};
	gv1.getBrightness = function(data){
		return null;
	};
	gv1.setVisibleFunc(function(data){
		if(data.showMe){
			return true;
		}
		if(data instanceof ht.CSGNode && data.getHost()){
			return false;
		}
		return true;
	});
	
	gv2.setMoveStep(30);
	gv2.setEditable(true);
	gv2.setGridVisible(true); 
	gv2.setEditable(true);
	gv2.pan(0, 200, true);
	gv2.getLabel = function(){
		return null;
	};                
	
	initShelf1();                       
	initShelf2();                       
	initShelf3();                       
	
	treeView.expandAll();
	
	var angle = 0;
	setInterval(function(){
		angle += Math.PI/40;
		earth.r3(0, angle, 0);
		photos.s('dw.angle', angle);
	}, 50);                 
}            

function initShelf1(){
	var shelf = new ht.CSGNode();
	shelf.s3(500, 400, 120);
	shelf.p3(0, 200, 0);
	shelf.setName('shelf1');
	shelf.s({
		'all.color': '#E5BB77'
	});
	dm.add(shelf);
	
	for(var i=0; i<2; i++){
		for(var j=0; j<5; j++){
			var clipNode = new ht.CSGNode();
			clipNode.setHost(shelf);
			clipNode.s3(80, 100, 120);
			clipNode.p3(-200+j*100, 340-i*120, 20);
			clipNode.setName('substract-'+i+'-'+j);
			clipNode.s('batch', 'tt');
			clipNode.setParent(shelf);
			dm.add(clipNode);
		}
	}
	
	var leftNode = new ht.CSGNode();
	leftNode.setHost(shelf);
	leftNode.s3(23, 380, 100);
	leftNode.p3(-255, 200, 0);
	leftNode.setName('substract left');
	leftNode.setParent(shelf);
	dm.add(leftNode);
	
	var rightNode = new ht.CSGNode();
	rightNode.setHost(shelf);
	rightNode.s3(23, 380, 100);
	rightNode.p3(255, 200, 0);
	rightNode.setName('substract right');
	rightNode.setParent(shelf);
	dm.add(rightNode);
	
	var bottomNode = new ht.CSGNode();
	bottomNode.setHost(shelf);
	bottomNode.s3(480, 140, 140);
	bottomNode.p3(0, 80, 0);
	bottomNode.setName('substract bottom');
	bottomNode.setParent(shelf);
	dm.add(bottomNode);  
	
	var topNode = new ht.CSGNode();
	topNode.setHost(shelf);
	topNode.s3(480, 10, 100);
	topNode.p3(0, 400, 0);
	topNode.setName('union top');
	topNode.s('attach.operation', 'union');
	topNode.setParent(shelf);
	dm.add(topNode);  
	
	var book = new ht.Node();
	book.setName('CSS3: The Missing Manual');
	book.s3(60, 80, 8);
	book.p3(-100, 210, 20);
	book.r3(-Math.PI/6, Math.PI/5, 0);
	book.setIcon('book');
	book.s({
		'front.image': 'book',
		'back.color': 'white',
		'left.color': 'white',
		'all.color': 'gray'
	});
	book.setHost(shelf);
	book.setParent(shelf);
	dm.add(book);                                
	
}

function initShelf2(){                
	var shelf = new ht.CSGNode();
	shelf.s3(120, 240, 120);
	shelf.p3(0, 120, 0);
	shelf.setName('shelf2');
	shelf.s({
		'all.color': '#805642',
		'csg.color': 'yellow',
		'csg.reverse.flip': true
	});
	dm.add(shelf);
	
	var clipNode = new ht.CSGNode();
	clipNode.setName('shelf2-substract-up');
	clipNode.s3(100, 100, 130);
	clipNode.p3(0, 180, 0);
	clipNode.setHost(shelf);
	clipNode.s('attach.cull', true);
	clipNode.setParent(shelf);
	dm.add(clipNode);
	
	clipNode = new ht.CSGBox();
	clipNode.setName('CSGBox-Expand-Left');
	clipNode.s3(100, 100, 120);
	clipNode.p3(0, 65, 0.1);
	clipNode.setHost(shelf);
	clipNode.showMe = true;
	clipNode.s({
		'all.visible': false,
		'front.visible': true,
		'front.toggleable': true,                    
		'front.reverse.flip': true,
		'front.transparent': true,
		'front.end': Math.PI * 0.7,
		'front.color': 'rgba(0, 50, 50, 0.7)'
	});
	clipNode.setParent(shelf);
	clipNode.setFaceExpanded('front', true, true);
	dm.add(clipNode);                
	
	earth = new ht.Node();
	earth.setName('earth');
	earth.setIcon('earth');
	earth.s3(70, 70, 70);
	earth.p3(0, 50, 0);
	earth.s({
		'shape3d': 'sphere',
		'shape3d.image': 'earth'
	});
	earth.setHost(shelf);  
	earth.setParent(shelf);
	dm.add(earth);
	
	shelf.t3(-360, 0, 50);
	shelf.r3(0, Math.PI/7, 0);                               
}            

function initShelf3(){                
	var shelf = new ht.CSGNode();
	shelf.s3(120, 240, 120);
	shelf.p3(0, 120, 0);
	shelf.setName('shelf3');
	shelf.setIcon('ben');
	shelf.s({
		'all.image': 'brick',
		'all.uv.scale': [2, 4],
		'top.uv.scale': [2, 2],
		'bottom.uv.scale': [2, 2],                                                             
		'csg.image': 'ben',
		'csg.blend': 'yellow'
	});
	dm.add(shelf);
	
	photos = new ht.DoorWindow();
	photos.setName('DoorWindow-Photos');
	photos.setIcon('ben12');
	photos.s3(110, 100, 130);
	photos.p3(5, 180, 0);                
	photos.setHost(shelf);  
	photos.showMe = true;
	photos.s({                    
		'bottom.uv': [1,1, 1,0, 0,0, 0,1],
		'bottom.uv.scale': [1, 1],
		'left.uv.scale': [3, 3],
		'top.uv.scale': [2, 2],
		'dw.s3': [0.8, 0.9, 0.05],
		'dw.t3': [0, -5, 0],
		'dw.axis': 'v',
		'dw.toggleable': false,
		'front.image': 'ben1',
		'back.image': 'ben2',
		'all.color': '#F8CE8B'
	});
	photos.setParent(shelf);
	dm.add(photos);
	
	var clipNode = new ht.CSGBox();
	clipNode.setName('CSGBox-Expand-Top');
	clipNode.s3(100, 100, 120);
	clipNode.p3(0, 65, 0.1);
	clipNode.setHost(shelf);
	clipNode.showMe = true;
	clipNode.s({                    
		'all.visible': false,
		'front.visible': true,
		'front.color': 'red',
		'front.transparent': true,
		'front.opacity': 0.7,                    
		'front.reverse.flip': true,
		'front.toggleable': true,                                        
		'front.axis': 'top',
		'front.end': Math.PI * 0.4
	});
	clipNode.setParent(shelf);
	clipNode.setFaceExpanded('front', true, true);
	dm.add(clipNode);                
					
	shelf.t3(360, 0, 50);
	shelf.r3(0, -Math.PI/7, 0);
				  
}

已有 0 人发表留言，猛击->> 这里<<-参与讨论

ITeye推荐

—软件人才免语言低担保赴美带薪读研！—

主流的裸眼3D技术有哪些

Mon, 12 Nov 2012 22:09:33 CST

曾创下票房记录的《阿凡达》给到了观众前所未有的真实感，但想要享受这种3D技术必须佩戴专门的3D眼镜，这多少都让观众有些不适。如果只是为了看电影偶尔戴戴3D眼镜那倒也还好。但像手机这种常用的手持设备还要戴3D眼镜的话，那将是非常麻烦的事。想不戴眼睛又能体验3D的乐趣，这就需要采用裸眼3D技术了。

目前裸眼式3D主要有光屏障式、柱状透镜技术、指向光源和MLD技术四种。

光屏障式

这些条纹宽几十微米，通过它们的光就形成了垂直的细条栅模式，称之为“视差障壁”。而该技术正是利用了安置在背光模块及LCD面板间的视差障壁，在立体显示模式下，应该由左眼看到的图像显示在液晶屏上时，不透明的条纹会遮挡右眼；同理，应该由右眼看到的图像显示在液晶屏上时，不透明的条纹会遮挡左眼，通过将左眼和右眼的可视画面分开，使观者看到3D影像。

这种技术的优点是在成本上比较有优势，目前像夏普的3D手机和任天堂的3DS游戏机都是采用这种技术。不过采用这种技术的屏幕亮度偏低。

柱状透镜技术

柱状透镜技术也被称为双凸透镜或微柱透镜3D技术，其最大的优势便是其亮度不会受到影响。柱状透镜3D技术的原理是在液晶显示屏的前面加上一层柱状透镜，使液晶屏的像平面位于透镜的焦平面上，这样在每个柱透镜下面的图像的像素被分成几个子像素，这样透镜就能以不同的方向投影每个子像素。于是双眼从不同的角度观看显示屏，就看到不同的子像素。

柱状透镜技术并不会像光屏障式那样影响屏幕亮度，所以其比后者的显示效果要好。采用该技术的代表厂商有欧洲的飞利浦、中国的朗辰电子科技、沃飞裸眼3D。

指向光源

指向光源3D技术搭配两组LED，配合快速反应的LCD面板和驱动方法，让3D内容以排序式进入观看者的左右眼互换影像产生视差，进而让人眼感受到3D三维效果。

MLD技术

美国PureDepth公司的MLD（multi-layer display多层显示）技术能够通过一定间隔重叠的两块液晶面板，实现在不使用专用眼镜的情况下，让文字及图画呈现3D影像的效果。这种技术的有优点是用户不会产生眩晕、头疼等的副作用，同时对于观看者的观看角度也没有太大的限制。

虽然目前3D技术仍未成熟，尤其是在分辨率，可视角度和可视距离等方面还存在许多不足，但随着技术的发展，相信不久的将来，我们都可以不戴眼镜，在自己的手机上体验到逼真的3D效果。

了解更多新酷炫设备，敬请关注 @爱搞机

Pioneer BDP-140：可以上網、超值入門的 3D 藍光播放機

Wed, 02 Nov 2011 14:30:00 CST

Pioneer BDP-140 除了能放映 3D 藍光影片光碟，也支援 USB、HDMI、光纖數位音訊、A/V 端子等多種來源播放，並可連結網路連線，讀取區域網路或網際網路的影音檔。在播放品質上，影像清晰，音質清淨，再加上超薄機體設計，對於尚未擁有藍光放影機者，BDP-140 值得你納入考慮名單。

時代演進的速度飛快，這是筆者第一眼看到Pioneer BDP-140時浮現的念頭，因為它除了是一部具備放映3D藍光影片光碟，且支援網路連線以及家用區域網路，至於所對應的數位多媒體影音檔案也已經含括高畫質影片以及無壓縮音效格式，大幅擴增使用者能夠置入播放的影音軟體數量。

而就進階影音玩家來說，BDP-140也能播放SACD高規格音訊格式的光碟，則讓聆賞音樂的樂趣獲得滿足。BDP-140還有一項優點，就是機體相當輕薄，機體高度僅58mm，所需使用的擺放空間也相對減省不少。

廠商資訊

廠商：Pioneer
電話：02-2657-7366
建議售價：請洽廠商

硬體小檔案

對應光碟：BD、DVD、VCD、SACD、CD等
支援檔案：DivX HD、JPEG、MP3等
支援網路：Wi-Fi（需選購專屬配件）、LAN有線
支援：BD Live、3D
支援：DLNA
外觀尺寸：435×58×241.3mm
重量：2.10kg

細部特寫

▲ USB介面：目前家用影音器材搭載USB介面現象相當普及，BDP-140將其中一組USB端子設於前面板，使得連結儲存裝置能夠更為快速，而支援NTFS與FAT32雙規格，則是特點之一。

▲ 傳輸端子群：機背的傳輸端子群，結構相當簡單，包含HDMI、光纖數位音訊、A/V端子，以及LAN網路介面，所以進行周邊器材接駁時，能有效提升速度，簡化尋找端子的程序。

▲ 搖控功能齊備：BDP-140的遙控器可說是功能齊備，所以導致遙控器上密密麻麻都是按鍵，但也讓使用者可以透過這支遙控器，將BDP-140的多種功能發揮淋漓盡致。

▲ 支援JAVA：看到JAVA字樣時，雖然筆者稍稍訝異了一下，但由於BDP-140支援網路服務，所以對應JAVA也是必要的，能夠讓BDP-140連結網路放映影音節目時更加流暢。

數位媒體總彙集影音樂趣無窮盡

一如前文所述，BDP-140支援多樣化的影音媒體，從光碟跨足到電腦應用層面的數位檔案，且USB所能對應的儲存媒體格式含括FAT32與NTFS，所以無論新舊外接裝置都可順利接駁BDP-140。

且由於BDP-140符合DLNA機制，只要與家中電腦在同一區域網路架構中，就能輕鬆讀取到電腦內的影音檔案進行播放，因此在筆者評測過程中，其實已無需反覆連結外部儲存裝置，也因此減少評測程序的難度，當然，就算透過網路讀取影音節目，BDP-140仍能將影像品質提升到Full HD 1080p，解析度表現相當優秀。

▲ 支援DLNA：多數新世代影音玩家的習慣，都會將多媒體檔案儲存於電腦或是外接硬碟，而BDP-140支援透過區域網路讀取電腦檔案，也能對應不同硬碟格式，帶來最大便利度。

▲ 畫質調整功能：雖然顯示器材都提供完整且豐富的調整機制，但是若能從訊源端就進行初步調控，再結合電視本身的參數控管，其實更能將影片畫質大幅提升。

影像清晰演色優音質清淨層次多

評測過程筆者共採用音樂CD、藍光電影以及數位影音檔案三大類進行交叉播放，總結來說，BDP-140最大的特色在於影像表現的細緻度，以及色彩層次豐富性，至於音效特質則是平穩忠實，沒有過度的渲染，能夠讓使用者聽到輕鬆音色的設計。

所以從筆者的角度來說，BDP-140絕對符合多數入門者所期待之高品質影音機種水準，對於尚未擁有藍光放影機者，BDP-140值得你納入考慮名單。

▲ 色彩精準層次多：人臉的膚色以及光影所形成的層次，是這張擷圖所需表達的重點，BDP-140雖屬平價入門機種，但是畫質卻相當優秀，特別是暗部細節再生表現，讓筆者十分欣賞。

▲ 音色均衡有力道：變形金剛中多場大型戰鬥場面，其中包含人聲對話以及爆破效果，BDP-140能夠清晰地將不同聲音分離，讓使用者聽見細節，並感受到完整的環場音效包圍感。

總評

對應市面上目前所有可見影音光碟是BDP-140特性，再融合數位多媒體影音後，加上Pioneer在影像音效方面的精心設計，使得BDP-140真正成為最超值機種，特別是對應數位家庭DLNA機制，透過選購的無線套件，就能經由家用區域無線網路和電腦溝通，讓觀賞數位多媒體影音的程序大幅簡化，就使用者來說，這就是期待已久，讓不同使用介面的3C器材可以相互串聯應用的夢想成真。

結語

超薄機體設計，大幅減少所佔用的空間，而前置USB介面則便利使用者可以隨時插入外接儲存裝置，放映其中的數位多媒體影音檔案。
支援有線、無線（需選購專屬配件）網路，並能夠透過區域網路使用電腦內的影音檔案；也支援SACD、3D藍光電影播放。
遙控器按鍵尺寸較小，對於手較大的人來說，操作時誤觸其他按鍵的機率較高；此外音色若能更豐厚些，音場深度表現會提升。

延伸閱讀：

可以上網的《藍光奇機 II Air TV 進化版》數位播放盒實測

燒錄器新訊：新 BDXL 藍光燒錄器陸續登場

本文同步刊載於PC home雜誌

歡迎加入PC home雜誌粉絲團！

加入T客邦Facebook粉絲團

构建 3D 网页新世界

Tue, 22 Nov 2011 09:10:51 CST

今年下半年， HTML5 和 WebGL 变成极热门词语，3D 网页来势汹汹。主流的浏览器 Google Chrome 以及 Mozilla Firefox 均致力于 HTML5+WebGL 的 3D 网页技术方案的发展，各种实验性项目层出不穷。这是一个转折时期——互联网最重要的门户浏览器正在从主流支持 2D 平面网页内容到原生的支持 3D 物体形象的展示。

何谓 WebGL ？

WebGL 是网页开发语言 JAVA Script 形式的绘图 API 接口，提供设备硬件图形能力的直接调用。HTML5 则是网页开发语言新标准，提供了网页上的 Canvas “画布”供网页上的 3D 对象展现。

简单的说，在此之前，3D 物体形象在网页上不能直接展示，必须使用非标准的特殊网页语言语法或者通过安装额外的浏览器插件。HTML5 和 WebGL 提供了一种技术方案，使程序员可以直接在网页上展示物体的 3D 形象，并且这种展现直接使用设备的图形处理器的处理能力,其绘图性能能够得到保证。3D 网页技术应用很广，体验 3D 网页也非常简单，我们只需要桌面电脑支持现代的图形显示设备，同时，必须安装足够高版本的新型浏览器，诸如 firefox 和 Chrome 即可。

3D 网页游戏

先说说 3D 网页游戏，在这场技术浪潮中，先知先觉的游戏厂商真正积极研发 WebGL 游戏引擎，为 3D 网页游戏潮流的到来提前进行技术储备。
Mozilla 社区的 Paladin 项目组正在开发名为“Gladius”WebGL 3D 游戏引擎，CopperLicht 则是一个快速 JAVAScript 的 WebGL 游戏引擎，在其网站上提供了一批 WebGL 游戏场景范例，其中不少的 3D 场景甚至可以媲美传统的 PC 桌面游戏。它们的效果可以在 ResureFox 和 ambiera 网站看到。

3D 地图

而 3D 地图是另外一个关键应用。和目前的枯燥平面地图相比，3D 地图可以以旋转的视角查看街景、建筑物的立体形状，用户有身临其境的感觉，体验非华丽、无以形容。在 MapsGL 项目中，3D 地图的先行者 Google 正利用 WebGL 技术提供 3D 街景地图。按照 Google 的说法，他们在“重新打造了 Google 地图……提供更强大的性能、更丰富的 3D 图形、更流畅的图像过渡效果和 45° 视图旋转效果，以及能更方便地访问街景视图。”

要查看其效果，你可以直接访问 Google Maps 网页，并选择打开 MapsGL 功能。当地图的比例放大到一个街道路口大小的时候，平面的地图就会展示成 3D 的街景。下面是使用 MapsGL 功能访问美国曼哈顿周围的地图看到景观截图，转动图上的罗盘或者移动鼠标，查看的视角随之转动，其效果仿佛本人在曼哈顿的街道上闲逛。

可以想象，当每个城市都完成了 3D 的建模，并通过网页提供服务，3D 地图之上能够叠加各种有趣的服务，例如：3D 寻路导航，虚拟旅游，美食查找、网络社交、网络游戏等等。这些应用有目前的 2D 的版本，安装插件可以实现不怎么流畅的 3D 效果，但在未来的 3D 网页中，逼真的 3D 城市街景呈现了流畅的视角转换后，它将带来迥异的用户体验。

3D 社交网络

3D 技术能演变出有趣应用，其中，最有趣的当属基于 3D 地图的网络社交。目前现在的社交 SNS 网站是都是基于文字、图片、视频的内容，所使用的地图是平面的地图。试想一下，未来的网络社交的背景是逼真的 3D 街景，您在“街上”行走的时候，可以真实的推开其中的一扇店门，“真实”的去某个咖啡店买一杯咖啡，还能看到朋友的 3D 形象，坐在靠窗的桌子上看书，您可以走过去和“他/她”说话。

这并非痴人说梦，Google正在做这方面的尝试：在 YoubeQ 项目中构建 Google Earth 里的 3D 社交网络。用户化身为一个 3D 小人，在Google Earth展示的街景中闲逛，碰到朋友能聊聊天。这个项目在Google Earth能够支持网页模式之后，访问势必更加简单直接。

移动设备中的 3D

和我们日常相关的，还有平板电脑上的 3D 网页应用。相比其他设备，平板电脑更适合运行 3D 网页应用。在平板电脑中，三维的立体形象与手指的操作能够很好的结合在一起。比如，Google 的 3D 圆筒书架是在 PC 电脑实现的 3D 网页应用，书架实现为巨大的柱状多层转筒，鼠标拖曳可以模拟手转动书架找书。想象一下，如果该应用用在平版电脑上，用手指转动书架，然后使用一个手指向上的手势来取书，是不是更爽一些？

3D 我们的世界

可以想象，3D 网页技术普及之后，我们的世界将被充分的 3D 模型化，大到地球、宇宙天体、小到汽车、房子、电子产品、微生物、细菌，都可以有详尽的细节的 3D 形象，我们可以以此趣味的展示和探索周围精彩的世界。去年年底，Google 推出的人体浏览器 3D 网页应用，把人体进行 3D 建模，能够以各种视角 360 度查看人体每个器官，包括骨骼、肌肉、内脏器官、神经系统等。（此应用为 Google 实验室的成果，目前该应用的 Google 网页已经关闭，相关的人体 3D 医学影像由 Zygote 网站继续提供运营。有兴趣的朋友可以看看人体浏览器的运行视频）

瓶颈

然而，先进技术的发展需要一个漫长的过程。其中，复杂物体的 3D 建模是 3D 网页主要的应用瓶颈之一，举例来说，程序员需要展示一个 3D 的轮船，把这个轮船表示为计算机能理解的多边形平面的组合是一个复杂的事情，对网页开发程序员来说，最好有现成的轮船的 3D 模型可以使用，不需要关注建模的细节。3D 网页的世界也许需要一个价格低廉的巨大 3D 模型库，囊括周围世界的各种物体。对此，Google 的做法是发动全球的爱好者创建和共享 3D 模型，这种做法是否会造成资源垄断，和未来的中小 3D 应用开发者能否得益，那是今后值得思考的问题。

shallon

“阅读、记录、总结和分享”是我尝试理解现时世界如何演变成未来的一种方式。

邮箱新浪微博知乎 Google+

Happy Feet Two DVDscr XVID AC3-BHRG 快乐的大脚2/欢乐大脚2/3D踢哒小企鹅2(港)/快乐脚2(台)

Sat, 21 Jan 2012 01:12:26 CST

◎译　　名　快乐的大脚2/欢乐大脚2/3D踢哒小企鹅2(港)/快乐脚2(台)
◎片　　名　Happy Feet Two
◎年　　代　2011
◎国　　家　澳大利亚
◎类　　别　动画/喜剧/家庭/音乐
◎语　　言　英语
◎字　　幕　N/A
◎IMDB评分 5.9/10 from 3,831 users
◎IMDB链接 http://www.imdb.com/title/tt1402488
◎文件格式　XviD + AC3
◎视频尺寸　720 x 304
◎文件大小　1CD 1.36GB
◎片　　长　100 Min
◎导　　演　乔治·米勒 George Miller
◎主　　演　伊利亚·伍德 Elijah Wood ….Mumble (voice)
　　　　　　罗宾·威廉斯 Robin Williams ….Ramon / Lovelace (voice)
　　　　　　粉红佳人 Pink ….Gloria (voice)
　　　　　　Carlos Alazraqui ….Nestor (voice)
　　　　　　Lombardo Boyar ….Raul (voice)
　　　　　　Jeffrey Garcia ….Rinaldo (voice)
　　　　　　索菲娅·维加拉 Sofia Vergara ….Carmen (voice)
　　　　　　Ava Acres ….Erik (voice)

◎简　　介　

　　　　在这一集中增加不少新的角色，更重要的是企鹅马布尔（Mumble）和葛洛丽娅（Gloria）有了一个儿子。小儿子Erik在企鹅的王国里希望能够寻找到属于自己的特殊天分

。而此时此刻又有新的危机威胁着这个国度……

[Happy Feet Two DVDscr XVID AC3-BHRG 快乐的大脚2] 下载地址

点击进入下载列表 | Tip:点击链接会弹出下载列表页面,请在网页加载完成之后点击！

下载地址列表： （ 115网盘 | 迅雷快传）

1.本站所有资源均收集于网络，如不慎侵犯你的版权请联系我，我将及时处理！
2.如无法下载，请跟帖回复，资源存储都有一定期限，请及时下载！

3D book – 炫酷 TXT 电子书阅读器 | 小众软件 > 桌面工具

Wed, 07 Dec 2011 09:04:44 CST

羡慕 iBook 看书时的效果吗？不用羡慕，其实你也可以拥有。 3D Book 可以将你的 TXT 电子书变立体，阅读时具有翻页、旋转等效果，看起来就像在看一本真实的书。@Appinn

3D Book 在第一次打开文件时会生成索引，之后的打开速度会非常快，另外还有一个类似收藏夹的书架功能，可以保存常看的书籍，也很实用。

根据软件说明，软件采用了 OpenGL ，因此请更新下显卡驱动，另外，软件官网关闭了（确实是关闭，不是和谐），请到网盘下载

下载(17.6 MB): 115网盘 | 官方网站 | 来自小众软件

[来自异次元] Autodesk 123D 神般强大的软件？轻松将照片变成3D模型并制作成实物 (傻瓜式三维建模工具)

Wed, 04 Jan 2012 19:29:51 CST

说到3D建模，很多人都会立即想到 3DMax，不过那是一款很专业的软件，普通用户没经过学习基本上不可能用它创建一个像样的三维模型，更别说一些拟真度较高的脸型、玩具等复杂的模型了。

欧特克公司 (推出过知名的 AutoCAD) 最近发布了一套相当神奇的建模软件 Autodesk 123D，有了它，你只需要简单地为物体拍摄几张照片，它就能轻松自动地为其生成3D模型！不需复杂的专业知识，任何人都能从身边的环境迅速、轻松地捕捉三维模型，制作成影片上传，甚至，你还能将自己的3D模型制作成实物艺术品……

[ 我要围观.... ]

异次元还有这些文章哟：

Sunglass 让人们在浏览器上设计 3D 模型

Wed, 23 May 2012 18:36:20 CST

CAD，对于职业建筑师或工业设计师来说，这个词一定不会陌生。它是计算机辅助设计（Computer Aided Design）的简称，不过一般3维模型的设计都要购买价格在几千到几万块钱的 CAD 软件。

但现在不需要了！ Sunglass，一家成立不久的创业公司，不仅将 CAD 软件搬到了浏览器上，同时还让用户免费使用基础的 CAD 功能（更多功能需要付费）。它就像3D模型版的 Google Docs 一样，不仅可以在上面创建、设计CAD模型，同时还可以和他人通过语音或文字交流来协作完成3D建模设计。

Sunglass 使用 HTML5 和 WebGL 技术，设计者可以在网站上对 3D 模型进行拖拽、旋转、缩放等操作，开发团队来自 MIT。Sunglass 支持 40 多种不同的文件格式，而且操作并不复杂，从小学生到专业设计公司都可以使用 Sunglass 来进行三维绘图设计。

另外，Sunglass 还支持 Dropbox 存储并可以分享到 Tumblr 等社交网络上。更重要的是，Sunglass 向开发人员公布了网站 API，任何人都可以开发各种工具来接入 Sunglass 设计平台。

目前该公司已获得 180 万美元种子资金。根据联合创始人 Nitin Rao 的说法，公司在降低成本和解决交互操作问题之后，未来将计划创建一个可以出手 3D 建模工具和 3D 作品的在线商店。

via TC

文章来自 36氪

一款基于Webgl实现的3D类网页游戏

Mon, 02 Jul 2012 20:46:32 CST

摘要：本文主要介绍运用webgl的第三方框架three.js实现的一款简单的3D类网页游戏。主要内容包括介绍three.js,如何运用three.js摆放相机，设置相机角度，相机视觉角度转移，场景中物体的位置摆放和贴皮，在3d世界中的直线运动，碰撞检测等。

关键词：3d数学, webgl, three.js,

技术领域：前端开发，游戏开发，3d，webgl

一. 背景

作为 HTML5 大家庭中的一员，相比 CSS3 和 WebSocket 等大家早已熟知的新技术，WebGL 可以说是其中最神秘的一员。长久以来很多人——包括这个圈子里的技术人，对 WebGL 都不是很了解，甚至有很多的误解，但实际上去年一年到现在 WebGL 正在以爆炸般的速度发展着，很多情况都发生了变化。WebGL 就像一只丑小鸭，正在慢慢从土肥圆成长为白富美的公主。实际上，相对于国外，国内这方面的探索还是比较少，因为万恶的喝了三鹿奶粉长大的ie系列占据浏览器半壁江山，决定不可能在短期内大范围运用该技术，即使你做了一个很炫很酷的3D网站，做到逛网站好像第一人称逛商店那样具有3d真是的立体感，上线后pm肯定跟你拼了，因为过半的国内用户无法访问。弹出类似以下的对话框

这样，再好再炫的技术也是没用，因为用户关心的不是背后的技术，而是直接的用户体验。就好像实现同样的页面效果，有人用纯CSS3实现（包括所有图片），也有人直接切图。这显得用CSS3的人很geek，但是上线后根本看不到原有效果，圆形变方形，方形还是畸形，畸形的什么都看不到。说这些无非是想说明webgl其实并不是一个新鲜的概念，而是一门技术而已。没有webgl的，unity3D，flash的stage3D一样可以做到，甚至有过之而无不及，兼容所有浏览器，直接可以商用，给用户就一个字，酷。

那不就是说webgl没用，拼不过flash吗？那还花那么多时间精力去写博客，做demo干嘛。实际上，WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。这样用户就可以不用安装各种各样的插件就可以访问3D型网页了。

PS，上面那段话是摘自百度百科的webgl词条，不相信可以去查一下，一模一样的。不过话说回来，个人鄙见，webgl在pc端是赢不了flash的，起码在未来十年。因为现在98.919%的浏览器都支持flash，用户情愿去装一个flash player，也不愿意改用浏览器（尤其是我们很有爱的ie6 ^_^）。所以pc端的话webgl有点尴尬。不过在移动端方面还是值得期待的，尽管刚刚发布的ios6没有说支持webgl，但是随着HTML5的web app在移动端的普及和硬件的升级，相信webgl还是可以打下移动端的半壁江山的。现在玩webgl相当于玩玩具，实属是各位技术发烧友和Geek打发周末无聊时间的必备良药。

吐槽了大半天，无非是介绍一下背景而已，下面正式开始我们的webgl之旅。

二.Three.js 简介

国外有一位叫mrdoob的哥们，写了一个three.js的框架，对底层的webgl进行封装，极大方便了我们写webgl程序。关于这个框架，详情（ https://github.com/mrdoob/three.js/）。

更多精彩的Demo，详见（ http://mrdoob.github.com/three.js/），更多的基于three.js的第三方游戏框架可参见chandlerprall大牛写的一个插件，详情可见

（ http://chandler.prallfamily.com/2012/04/physijs-a-physics-plugin-for-three-js/）。

说了这么多，还是有不少人不清楚three.js有什么便利，举个例子，要在场景中画一个立方体，以下代码足够了

如果是用原生的GLSL语言（可以理解为一种对底层图形硬件编程的语言），需要手工定义定点着色器，片元着色器，然后定义所有顶点数组，需要比较恐怖的代码量。

最核心的代码也需要以下这些。

以上的代码，其实我也看不明白，大意就是定义一个顶点数组，然后通过顶点着色器把顶点信息传给底层GLSL处理，光是大路货代码就要敲老半天，试问用这种方式还有心情去写具体的业务逻辑吗？

其实物体可以用其各个顶点坐标表示，顶点通过模型视图矩阵转换为视觉坐标，然后通过投影矩阵转换为裁剪坐标，接着通过透视除法规范化设备坐标，最后通过视口变换转变为窗口坐标。这就是一般的顶点变换过程。

所以一般要写webgl程序，都是用现成的封装好的框架，站在巨人的肩膀上。Three.js算是当前一个最流行最好的框架。

三. 游戏的具体实现原理

1. 游戏简介

说了这么多，还没有见到真正的游戏demo，很多童鞋估计要吐槽了。不用急，其实demo是次要，本文最重要的是通过demo去介绍如何使用一些基本的webgl的api和一些思想算法。

Demo的地址页 http://www.bimcad.org/bomber3d/ 源码也在里面，不另外附带。

游戏截图如下

相信不少80后都会记得那个红白机的炸弹人，没错，其实这个demo就是那个游戏的3D版。

2. 摆放相机

为了简化，游戏主要是用第一人称视觉，而不是生化危机那种介于第一和第三人称之间的视觉角度。下面是用Three.js设置相机的代码

其实相机就是相当于人的眼睛，人的眼睛看到的世界相当于一个视景体，如下图。

在计算机中，人能看到的东西其实就只有上图的近平面和远平面之间的东西。

PerspectiveCamera的第一个参数就是上图的视觉，第二第三个参数就是上图的W和H,第四第五个参数分别是近平面距离和远平面距离。至于camera.position.x,y,z这个就是相机在3D世界中的摆放位置。游戏中要移动人物是，只需要改变这三个值就可以了。

3.设置观看点

光是有当前的相机点还是不能确定要观看的东西的，还要设置观看点，例如你在(0,0,0)看(1,1,1)和(-1,-1,-1)是截然不同的两个世界。可以通过下面的代码实现观看点的设置。

大家如果在大一时有过被高数折磨的历史的话，那么恭喜你，下面的内容你应该很快能接受。

有人可能会问，为什么上面的公式中每一个后面都“+camera.position”？很明显，这个是因为相对于原点的平移。把当前点作为平移后球面的球心。

4. 如何运动

先看下面的公式

怎样，是不是很熟悉，再次勾起各位的青葱岁月的回忆？其实大学里学的理论知识是有用的。只不过很多人不知道怎样用而已（当然包括我自己，还不能充分运用各种理论知识）。FE们如果不想一辈子做页面，不想成为二八原则中的那80%，不想整天写点高中生就能懂的业务逻辑的话，就马上拾起高数，线代，概率课本复习吧。啊，说错了，上面这个是高中知识点。

如上图，以二维为例，三维一样的道理。假设有当前点是P1(x1,y1),观看点是P2(x2,y2)，那么，λ表示的是起点P1到P与P到末点P2的比值。这样通过确定λ,我们就可以得到单位时间移动后的到达的点。程序的核心代码是如下

因为本demo是只在x,z平面，所以不涉及y的运算。当然y的运算一样的道理。

5. 如何确定当前相机所在的区块

见上图，相信有过acm经历的童鞋肯定会对线段树的大路货代码情有独钟。没错线段树的确可以把O(n)效率化成O(logn)效率。由于本demo的特殊性，把整个地图划分为一个一个的正方形区域，有些区域放置木箱，有些区域是道路。所以可以通过二维线段树快速寻找出移动后相机点是否处于木箱区域，从而能够检测碰撞。具体做法如上图把一个正方形划分为四个区域块，如果当前点落在左上方，就递归到左上方继续寻找，需要注意的是“线段”边界的确定，如果中点处不是单位长度的两个端点，那么需要取到线段的两端，然后再继续划分。最后截止划分的结束条件是，划分的区域是“单位长度”。核心代码如下。

关于材质纹理贴图

一个游戏，给玩家的第一感受是美术设计，而不是程序的geek程度。所以即使程序很牛，很复杂，美术UE不过关，也是一个失败品。从这个意义上来说，本demo绝对可以称得上是失败品中的战斗机。

其实运用three.js贴图就好像打字一样简单，如下代码就可以给地面贴图了。

同样，给木箱贴图

本人在3D方面的功力有限，因为没有系统地学习过3D计算机图形学，所以上面的贴图方式在商业中是绝对不能直接采用的，否则效果是巨卡，这里只不过是给大家一个认识而已。

7. 关于键盘按键

相信做过canvas游戏的童鞋都知道，按键的处理方式了吧。这里就顺便啰嗦一下。按键的处理方式有两种。一种是立即做出反应。比如发射激光枪！按键后，按某种固定速率自动重复，比如每秒发射两次。另一种是根据按键时间长短期发生作用。例如，按方向键向前走，直到松手之后，才会停下。本demo按照第二种方式处理按键。设置一个按键数组，按下某个按键后改变数组中相对应的布尔值为1，表示正在按下该键，这样就可以同时允许按下多个按键，当放开按键，就把对应的数组的布尔值改为0。这样只需要在requestAnimationFrame（）中轮询检测键盘数组的各个布尔值做出相应的动作。

四. 结束语

本文简单地介绍了运用Three.js基本的api做出自己的3D游戏。当然Three.js博大精深，很多其他的api都没有用到，例如光照等。只用到了最基本的几个。其实现在有很多很好的three.js物理引擎，例如ammo.js，相机的移动更是应该有现成的框架和方法，本demo都没有用上，而是自己写原生程序，所以疏忽之处在所难免。欢迎各位大神吐槽指教。另外，如果做得深入点的话还可以用nodejs + websocket+ socket.io搭建起在线对抗，类似于泡泡堂。还有添加AI功能等。

by Wuyaoquan

iOS 6 實測：3D 地圖導航、中文語音輸入很強，8大新功能看這裡

Wed, 13 Jun 2012 00:36:00 CST

iOS 6 會採用 3D 地圖早在上月就已經有消息出現，WWDC 發表會上也正式公開了新的地圖功能，展示著內建地圖能支援 3D，同時也追加了不少新的功能，像是強化了電話勿擾、支援 Facebook、超實用的中文語音輸入等等。在新的 Siri 實測之前，我們先來看看新的地圖功能和其他 iOS 6 的新功能，看看這些功能你是否喜歡。

3D 地圖 iPhone 就能看

雖然這次地圖加入了 3D 的功能，不過因為還在 Beta 之中，並不是每個地方都可以看到 3D 的畫面，像是美國的大城市自然可以看到很清晰的 3D 大樓，但到了台灣之後，別說是 3D 了，就連一般地型都非常模糊。而且新的地圖目前對台灣的支援度還不是這麼高，如果你比較常使用地圖功能的話，建議先不要玩 iOS 6 Beta。

在完整度比較高的城市，像是舊金山就可以看到非常漂亮的 3D 效果，看起來就像是實景一樣逼真。不過目前在 iPhone 上使用 3D 功能還是會有點吃力，不管是運行還是下載速度都有點慢，程式也常常跳掉，看起來還是要等到正式版本才會比較堪用。

3D 也不是特別的功能，是切換到衛星模式就能看到，如果你在一般地圖模式按下 3D 鍵，也只會傾斜角度，不會有什麼效果。不過理論上應該也是會有立體模型，只是目前還是空空的平面。

▲3D 按鈕其實只是改變視角，只要不是90度鳥瞰就會亮燈。另外，要看到實體 3D 還是要切換到衛星模式。

新的地圖其實和 Google Maps 並沒有非常明顯地不同，使用起來的感覺都一樣，只不過地圖的介面設計稍微不同，一眼就能分辨出是兩種不同的地圖。在左下角可以看到增加了一個 3D 的按鈕，但其實那個按鈕只是快速把你的視角切換到45度，而不是開啟 3D 的功能鍵。你也可以使用雙指，同時上下移動來切換你的視覺角度，只要稍微傾斜之後，就會發現 3D 按鈕的燈亮了起來。而建築只要你不是90度平面鳥瞰，就會是立體 3D 的模型。

▲混合模式也一樣可以看到 3D 效果，看看那精美的金門大橋。

▲台灣目前地圖的支援度還不高，除了沒有中文路名之外，就連衛星照片也非常模糊，更不用說 3D 了。

導航的部分其實用起來也和過去 Google Maps 差不多，只不過多了 Turn-by turn 的功能，這個名稱台灣還沒有翻譯出來。這功能主要是在每個轉角的地方會多了非常大的提示，告訴你什麼時候要轉彎，這在大部分導航機算是都會有的功能。

▲導航模式其實和過去差不多，但多了轉角的溫馨提示。

▲雖然台灣的支援度不高，不過導航還是可以用的，只是沒有 3D，所以什麼也看不到。

▲另外也加入了路況的功能，開啟後就可以看到地圖上哪有施工，或是路線的塞車狀態。

<後面還有電話勿擾新功能>

延伸閱讀：

WWDC 2012：OS X Mountain Lion 7月上市，睡覺也能備份

WWDC 2012：MacBook Pro Retina，15.4吋 2880 x 1800 驚人解析度

WWDC 2012：AirPort Express 迷你基地台全新上市、Smart Case 連 iPad 機背也保護

WWDC 2012 重點總整理

我現在沒空接電話，請等下再打來

電話的部分增加了幾個不錯的功能，一個是勿擾模式，不過這個功能其實是獨立的，不在電話的設定下面，當你開啟之後，可以在通知中心找到相關設定。你可以使用排程的方式來設定哪個時段不要被打擾，像是上課或是睡覺的時段。如果你不想設定時間的話，只要把排程關起來，就可以單獨控制開關。

同時你也可以設定哪些人即使是在勿擾模式也一樣可以打電話給你，不讓你的電話漏接。最下面還有一個可以設定三分鐘內打第二通就不會被靜音，這個設定是讓真的有急事的人還是能讓你知道。

不過勿擾模式其實不是讓人電話打不進來，按照說明來看，而是把電話變成靜音，除了電話之外，通知也可以支援勿擾模式，應該就是不會跳出通知。只是目前勿擾模式其實還沒有作用，不管怎麼設定，電話還是會響起來，實際的效果還是要等後面的版本才會知道。

▲在設定中可以找到勿擾模式的開關，而詳細設定內容在通知裡可以找到。

▲可以設定排程時間來開啟，也可以允許你自行設定的聯絡人在勿擾模式下也能打電話給你。

不方便接電話，用訊息快速回覆

另外也是非常實用的功能，在接電話的時候，只要把電話往上滑動，就可以看到「用訊息回覆」和「稍後提醒」兩個按鈕。「用訊息回覆」可以自動用訊息的功能傳訊息給對方，同時掛掉電話，內容也可以自行輸入。「稍後提醒」則是會掛掉電話，再把這個電話號碼自動加到你的提醒功能裡，可以選一小時後提醒，或是你離開地點再提醒。

▲當你不能接電話的時候，可以快速用訊息自動回覆，內容可以自行設定三組。

▲訊息自動回覆功能可以後讓對方直接收到你的訊息。使用提醒的話，會掛掉電話並加入回撥提醒。

▲另外一提的是，電話的按鈕也做了改版，變白色的設計。

在通知中心就可以發訊息

如果眼尖的人，應該早就發現通知中心多了「點一下來推文」的按鈕。這個是新增加在通知中心的功能，只要你有綁定 Twitter 或是 Facebook 帳號就會多出這個功能。按一下就會自動開啟 Twitter 或是 Facebook 的發訊息視窗，讓你不用開程式就可以快速發訊息。不過還有更快的方式就是使用 Siri 直接發訊息，這個我們後面會再介紹。

▲通知中心多了 Twitter、Facebook 快速發文的功能鍵。

▲只要點開就會開啟 Twitter 或是 Facebook 的發文視窗。

<後面還有優化鍵盤、語音輸入>

全新的鍵盤設計，也能用說的

你應該也發現了，iOS 6 又還沒有 JB 為什麼會有優化鍵盤？其實不是，而是 iOS 6 又做了大幅度的注音改變，不小心抄了第三方的注音鍵盤（皮樂表示......），讓以前兩段式鍵盤消失。新的鍵盤再也不會跳來跳去，不過對於已經習慣之前的鍵盤來說，這個改變又是另一個痛苦的開始。

不過也不用太灰心，新的中文輸入也已經支援了語音辨識的功能，和 Siri 一樣，也開始聽的懂台灣的中文，而且辨識率非常高，直接用來打字也沒有什麼問題，也不用特別的語調，用一般說話的方式即可。但有些特定的選字或是中英組合的詞還是要練習後才能使用的出來。

語音輸入的功能也和 Siri 一樣，要透過網路才能使用，沒有網路的話無法使用這個功能。辨識的速度也會依照你的網路環境而不同，使用的時候要注意一下網路狀態。

▲iOS 6 的注音鍵盤已經不會跳來跳去，同時也支援了中文語音輸入。

▲明明說T客邦，為什麼就是跳痞客邦？另外，如果字不是你要的，可以在藍線上按一下，也許就會是正確的辨識字。

Facebook 住進 iPhone 裡

不只是 Twitter，現在連 Facebook 和新浪微博都直接內建到了 iOS 之中，只要設定一次帳號，就可以在各種分享功能上直接用到該服務發訊息。像在通知可以快速發訊息，圖片也能直接分享到 Facebook 上，也能利用 Siri 直接發 Facebook 訊息。

Facebook 和 Twitter 不同的地方是有很多聯絡人資訊和行事曆，而這些也都可以在你綁定帳號之後，一舉匯入到 iPhone 之內。當然，你也可以選擇不匯入，就不會打亂你原本的通訊錄或是行事曆，不過通訊錄也是可以把 Facebook 聯絡人關掉。

▲在設定之後，Facebook 和新浪微博也都可以進行帳號綁定，只要登入一次就可以使用各種分享功能。

▲像是在 Siri 中，直接說臉書加上你要打的內容，就可以直接把狀態分享到 Facebook 上去，一個字都不用打。

▲行事曆或是通訊錄都可以同步進來，也可以利用群組的功能把 Facebook 上的人隱藏。

▲在分享的介面上，也多了 Facebook，使用的是大圖示的功能鍵，看起來非常清楚。

<後面還有照片串流分享功能>

照片串流能分享，也在給照片留言、按讚

在照片串流之中，iOS 6 也增加了分享的功能。只要選取照片，按下分享之後就可以在右上角看到「照片串流」，你可以利用 Email 來寄給你的朋友，如果對方是 Apple ID 的話，就會自動跑到他的照片串流之中。如果對方沒有照片串流也沒關係，可以利用網頁來開啟瀏覽。

不只是分享而已，在照片串流中分享的照片還多了社交的功能，你可以直接在照片上按下喜歡，或是直接留言在照片上面，用起來就像是在看 Facebook 的照片一樣。

▲在照片中利用分享的功能，就可以把照片傳到別人的照片串流或是公開的 iCloud 網頁。

▲照片還可以下註解給別人，當有照片分享的時候，你就可以在照片串流看到多了一個分享的照片區。

▲照片不但能瀏覽，還可以在上面加入你自己的評論，也可以按下喜歡。

看的到用不到的 Passbook

對了，iOS 6 還有一個超實用的功能，只要利用 Passbook 這個內建的 app，就可以把登機證、各種票、商店卡、優待券放到你的 iPhone 裡，不用再記得帶實體票券，感覺非常實用。只不過如果 iPhone 沒電的話，票可能也就叫不出來。不過還不知道票是否會綁住 Apple ID，如果是的話，借別人的 iPhone 也許也是可以使用。只是這個功能目前也還無法使用，就只有開啟後的這個畫面。

▲未來的票都會在 iPhone 上，iPhone 在，票就在，iPhone 亡，那就......

延伸閱讀：

WWDC 2012：iOS 6 亮相，3D 地圖導航、讓你的 Siri 也會說中文

WWDC 2012：OS X Mountain Lion 7月上市，睡覺也能備份

加入T客邦Facebook粉絲團

Google地图发布新特性迎接苹果挑战，将推3D模型、离线地图和街景拓展

Thu, 07 Jun 2012 07:22:40 CST

Google刚刚在旧金山召开专场发布会，宣布对Google地图做出一系列升级，同时将增强移动功能放在了首位。此次发布的新特性包括在移动设备上提供3D模型功能、推出移动离线地图以及街景拓展等。

该公司表示一直在致力于新的图像渲染技术和计算机视觉研究，让计算机能自动创建3D城市风光。我们可以在3D地图中以45度的空中视角看到包括建筑、地形和绿化在内的完整三维世界。Google计划能让3D地图覆盖3亿人的大城市区域。PC版仍在开发之中，因为需要时间解决新算法与图形之间的兼容性问题。

他们同时还宣布，将在接下来的几周内发布移动版的离线地图，将为100多个国家的Android用户提供支持。离线文件最大约为50M，许多可能都会比这个小，但足以覆盖大城市区域。

此外，Google技术人员将在不能使用交通工具的地方步行拍摄更多的街景细节，工具则是一个经过特殊设计的背包。在此之前他们使用过的交通方式包括汽车、雪地车甚至手推车。

此外也有消息称，苹果将在下周发布自己的3D地图，Google地图选择这个时机升级自己的移动版，让我们提前看到了移动导航市场燃起的硝烟。

除非注明，本站文章均为原创或编译，转载请注明：文章来自 36氪

苹果将 C3 地图公司纳入麾下，iOS 地图将会有 3D 效果？

Mon, 31 Oct 2011 11:53:00 CST

分类: 智能手机, 交通相关

我们早前曾经见过 C3 Technologies 技术公司的 3D 地图演示，在索爱的 X10 上看起来很不错。9to5Mac 网站证实苹果已经收购了 C3 技术公司（最早从 Saab 公司分离出来），如果消息属实，在未来的 iOS 设备中苹果应该会融入这个地图技术。

纵观苹果几次的收购历程，可以知道苹果已经致力于推出自己的地图服务。在今年的早些时候，苹果就发布了职位需求，寻找工程师提升基于地图和位置服务的用户互动体验。同时，苹果在这之前还收购了另一家地图的公司 Poly9，其致力于基于 Web 页面的 3D 地图技术。多方努力理应开花结果，只是这个果实什么时候成熟还需要时间等待。但可以预见，谷歌的地图服务迟早要被代替。

引用来源 | 引用来源 | 此文章网址 | 转寄此文章 | 回应

您可能也喜欢：
MIT研发新型裸眼3D技术 3D眼镜将成浮云	BumpyPhoto新推3D打印技术，变普通照片为3D浮雕(图)	工业革命2.0：3D打印	真正的3D显示器，Aerial 3D可在空气中投影3D影像【视频】	3D技术的未来将由电视决定
无觅

IT瘾3d推荐

无开发经验如何借助GPT-4开发一个 3D 太空赛跑游戏

的卢深视CEO户磊：我们为什么用3D人脸技术做安防？

苹果选择了手机，的卢深视选择了安防

3D结构光技术，切入安防高端市场

行业分工尚未形成，主打“开放的合作”

手机人脸识别被 3D 打印人头破解了，你还敢用吗？

3D 打印头型与人脸识别的较量

人脸识别并不是第一解锁选项

雷锋网总结

3D感测供应商大盘点：华为/小米/OPPO谁将抢下国内首发？

3D 打印在医疗领域有那些进展？看完你就知道了

3D 打印的最新医疗应用

3D 打印的挑战

HTML5数据可视化第二弹：打造最美3D机房

目标效果图

WebGL基本场景搭建

对象封装

地板和斜坡

走廊桌

墙体

门

窗

外侧墙

植物

机柜

设备

电视机

总结

【译文】Top 10：HTML5、JavaScript 3D游戏引擎和框架

HT for Web自定义3D模型的WebGL应用

亚马逊 Fire Phone 到来：内容新入口，3D 很出色

Fire Phone

3D 显示

基于HTML5的电信网管3D机房监控应用

2D和3D游戏引擎 Godot 宣布开源

第一个基于asm.js的3D商业Web游戏宣布

基于HTML5技术的电力3D监控应用（一）

基于HTML5技术的电力3D监控应用（二）

基于HTML5技术的电力3D监控应用（四）

JavaScript 3D图表

Famo.us，利用 HTML5 做出 3D 手势操作界面

基于HT的CSG功能构建HTML5的3D书架

主流的裸眼3D技术有哪些

光屏障式

柱状透镜技术

指向光源

MLD技术

了解更多新酷炫设备，敬请关注 @爱搞机

Pioneer BDP-140：可以上網、 超值入門的 3D 藍光播放機

廠商資訊

硬體小檔案

細部特寫

數位媒體總彙集 影音樂趣無窮盡

影像清晰演色優 音質清淨層次多

總評

結語

延伸閱讀：

构建 3D 网页新世界

何谓 WebGL ？

3D 网页游戏

3D 地图

3D 社交网络

移动设备中的 3D

3D 我们的世界

瓶颈

Happy Feet Two DVDscr XVID AC3-BHRG 快乐的大脚2/欢乐大脚2/3D踢哒小企鹅2(港)/快乐脚2(台)

3D book – 炫酷 TXT 电子书阅读器 | 小众软件 > 桌面工具

相关文章

[来自异次元] Autodesk 123D 神般强大的软件？轻松将照片变成3D模型并制作成实物 (傻瓜式三维建模工具)

Sunglass 让人们在浏览器上设计 3D 模型

一款基于Webgl实现的3D类网页游戏

iOS 6 實測：3D 地圖導航、中文語音輸入很強，8大新功能看這裡

3D 地圖 iPhone 就能看

延伸閱讀：

我現在沒空接電話，請等下再打來

不方便接電話，用訊息快速回覆

在通知中心就可以發訊息

全新的鍵盤設計，也能用說的

Facebook 住進 iPhone 裡

Pioneer BDP-140：可以上網、超值入門的 3D 藍光播放機

數位媒體總彙集影音樂趣無窮盡

影像清晰演色優音質清淨層次多