Tag Archive: making of


Sea Orchestra: The Making Of on Vimeo

详尽幕后制作资料,相当值得学习。总结一下其中的执行流程:

  • Ref,有角色的,道具的,场景的,还有整体艺术导向的
  • Concept sketchs,概念设计
  • Style frame,这个出来整体影片的感觉就定了
  • Storyboard,故事板,这个不用多说
  • Animatic,动态故事板
  • Charactor Development,完整的角色设计
  • live action,这个是为合成准备实拍素材
  • Photoshop Compositing,就是做Layout啦,仔细看看如何为后期合成做layout,和平面设计网站设计都不一样的。
  • 3D Development,进入3D阶段,做建模、渲染、动画测试什么的。这条片子主要是做角色,场景是后期合成的。
  • After Effects Compositing,合成动画

然后就是一次两次的测试出片。看看我们的工作中缺少了什么,也就明白我们与精品之间的距离在哪里!

view Barcinski & Jeanjean Website (Part1)

接下来进入 Papervision3D 部分。他们开发了一个 AnaglyphView 类用于绘制立体效果。这个类包含了两个 Viewport3D(Viewport3D 是 Papervision3D 中绘制所有 DisplayObject3D 的对象,可以说是主渲染层,它是一个 Sprite 子类)。这两个对象分别用于渲染左右摄像机中看到的图像。anaglyphview

那是否也应该包含两个摄像机(Camera3D对象)呢?答案是不用,既然在成像原理中描述的摄像机位置是并排的,那么在程序中,只需要一个真正的 Camera3D,然后在每帧更新时,向左偏移渲一下,再向右偏移渲一下。如此得到的两个 Viewport3D 再用 ColorTransform 分别抽出需要的颜色通道,最后用 Screen 模式叠加在一起。

视频背景是分别加到两个 Viewport3D 的显示层级里的,对 Viewport3D 的颜色变换和叠加操作也能对其产生影响。

请注意:渲染的次数实际上增加了一倍,再加上层叠加运算,这种效果其实相当的占资源。所以不能用太复杂的3D对象,他们还将在 Blog 上继续分享优化方面的经验,一起期待吧。

在网站优化上,他们也有非常酷的Tips。注意到这样一个细节:主界面上环绕两人的纸是有前后遮挡关系的。虽然知道人像是抠像出来的,但是如何和 Papervision3D 中的对象产生遮挡呢?这是一个很有技术难度的问题。一般我们肯定会想视频要分两层,前景人像带通道。但是这是高分辨率的视频,带通道的话相当占资源。

点子来了:视频不能分层,那就把前景人像用矢量勾出来做遮罩。其实我们通常在做 media 遇到文件量限制的时候也用这种做法,关键是能减少文件量。在这里还能起到减去视频通道叠加造成的CPU运算增加的好处。方法是有了,可是144张图像要挖出来也是要吐口小血的。聪明人自然有聪明的做法:Flash 不是有 Trace Bitmap 自动转矢量的功能吗,只是勾个黑白图还是相当胜任的。他们还开发一个jsfl命令自动操作。点两下鼠标,喝两口咖啡的时间就可以搞定了,轻松惬意。遮罩问题解决,还有个遮挡问题。方法是把遮罩mc加入 Papervision3D 层级,设置它的z属性。前后关系就算出来了。接下来注意设置层叠加方式为 Erase,意思就是擦除,很明显了吧,遮挡就出来了。Erase 和 Alpha 叠加模式很有用,大家可以到 Flash 里面去试一下。

下一篇我将和大家分享一下该网站在文件量优化上的神来之笔。

Barcinski & Jeanjean Website (Part3)

SNAG-000

Barcinsk & Jeanjean 是第一个应用3D立体技术的网站,结合实拍和 Papervision3D 打造的互动体验,技术含量颇高。在他们的 Blog 上分享了制作过程,我们一起来看看。

首先当然是最大的亮点:3D眼镜浏览模式。此前在 Mr.doobNeave.com 有看到过类似的例子。当然,在全站应用上,特别是应用于视频背景上,Barcinsk & Jeanjean 还是第一家。

Stereoscopy(Stereo Photography)最近好像流行起来,连 Maya 2009 也新增了立体摄影机选择(其实就是两台并列的摄像机)。实现立体的影像有很多种技术。Anaglyph 是其中一种,也就是需要3D眼镜的做法。该方法是利用人的视觉现象产生立体效果。简单来说就是颜色通道的重新混合:左眼取红色,右眼取蓝色和绿色。这种方法会造成一定的色彩信息损失,红色信息受影响比较明显,黑白两色不受影响。所以网站的图形元素大都采用黑白两色。

原先这两个小伙子买了一个专门拍立体图像的照相机,可惜只能拍摄竖幅画面,而且没有广角。所以只好采用另一种方法,也是比较通用的做法:并列两台一样的相机,他们用的是Canon 350D。当然,所用的镜头和拍摄设置都需要一致。将两台相机与同一个遥控器配对来进行同时曝光。并列相机之间的距离是可以调整的,最终的立体效果也会受此影响。

场景选择的是他们位于 Amsterdam 的工作室附近一个很热闹的地方。他们故意选择了一个人来人往的时刻拍摄,造成全景有一个动态的效果,也就是转起来的时候背景会有变化。其实如果要拍全景静态,那就得搞相机阵列,成本飙升,不是这个无预算的网站能够负担得起的。我们给奔驰S网站都没能采用这种做法,否则至少在这一效果就上到黑客帝国级别了,呵呵,扯远了。

虽然退而求其次,但是两台小单反拍一圈整144张图片还是挺不容易的。要是人还要站在路中间摆pose被万众景仰那就更不容易了。还好两个小伙子只是拍完场景就拍拍屁股走人,人的部分用合成的。请个摄影朋友,拉了个绿屏,打了个灯,在地上画个圈,再画上刻度。人体转盘就这么拍起来了。钦佩啊,大成本烧钱的主见鬼去吧,小(无)成本的智慧才是无限的!不过话说回来,合成的方法虽然省钱省事,效果上还是差一点。主要是摄影灯和自然场景上的光照条件还是有一定的差距,透视也会有一些问题。但是我觉得ok啦,至少我就没看出来,你呢?

讲拍摄部分莫名的兴奋,可能是想像到他们当时在街上拍摄的情形,感染到他们的创作激情。还是贴近自然让人感觉比较轻松啊,一个好创意+好执行就这么地玩出来了。接下来让我们回到电脑前,研究一下技术部分吧。

Barcinski & Jeanjean Website (Part2)

Powered by KevinCao.com ©2010 | Platform: WordPress | Theme: Motion
kevincao.com