Google的3D魔方涂鸦是怎么做出来的?

原文出处: 煎蛋

5月19日Google在首页发布了有史以来最酷的涂鸦:一个3D互动魔方。

5737a564gw1egkk4v4cm3j21kw0vzwgj

3D魔方也是Google公司处理过的最有难度的涂鸦,魔方的成功要归功于CSS技术的进步和Google工程师们的聪明点子。制作这个拥有5.19X10^20种组合的魔方互动程序共耗去Google公司2个月的时间。

5737a564gw1egkkco4q1fg20ic070dsu

点击图片可进入魔方页面(耐心等待加载)

Google公司在重要的节日或纪念日发布涂鸦已经有14个年头,2年前Google发布了Moog合成器电子琴涂鸦,让全世界音乐爱好者为之疯狂,2010年的时候Google推出吃豆人涂鸦纪念吃豆人游戏推出30周年。我们可以看出最棒的涂鸦都是艺术和技术的累积——魔方也是如此。但在此之前,因为技术原因, Google无法将可互动魔方web化。Google魔方涂鸦团队的负责人莱恩·吉米克说:“魔方涂鸦这个点子一次次被提出,但是我们觉得技术还不足以将魔方推向web。”

这种情况在最近几个月内有了变化,Google创新实验室的理查德称赞魔方涂鸦是“目前Google在技术上最宏大的项目之一”。CSS3D转换在越来越多的浏览器上的普及,意味着web魔方的可行性。

“CSS3D转换让魔方在3D空间显示成为可能,这与栅格化2D显示不同。”团队领队工程师克里斯托弗·霍姆说,“3D显示会让魔方看起来更生动,随着你移动鼠标,你可以亲眼看到魔方在3D空间中旋转。”

吉米克说,制作3D魔方最大的困难在于捕捉魔方的简洁设计。“从设计方面看,我们希望设计的尽量简单简洁,最大程度简化了魔方的UI。”

Google还向外界放出了魔方的源代码,还在Chrome Experiment发布了几个数字互动魔方程序,同时还与美国著名的自由科学中心合作了一个实时互动展示项目,以纪念魔方诞生40周年。

以前较早的Google魔方涂鸦:

5737a564gw1egkk4sp9opj21kw16nq66

5737a564gw1egkk4pf8mhj21hc0u0jtx

5737a564gw1egkk4m2b7uj21hc0u00v3

5737a564gw1egkk4kq9ukj21hc0u076d

5737a564gw1egkk4iz37fj21hc0u0q52

视频:



手机、软件、移动互联网。新浪微博:@尘岳0_o

2 评论

  1. mahalo  /  2014 年 5 月 23 日, 上午 10:51 回复

    请问怎么找到源码啊

    Thumb up 0 Thumb down 0

    • 尘岳  /  2014 年 5 月 23 日, 下午 8:47 回复

      不知道这个是不是你想要的http://codepen.io/anon/pen/vtJzu

      Thumb up 0 Thumb down 0

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">