早在四年前，索尼想要製作全新風格的“蜘蛛俠”電影這一訊息被洩露時，一個顯眼的詞彙便被反覆提及——“rejuvenate”，譯為“使其恢復年輕”。當時，除去《蜘蛛俠：返校日》之外，由索尼出品的《蜘蛛俠》真人電影已有五部之多（託比·馬圭爾主演《蜘蛛俠》三部曲，以及安德魯·加菲爾德主演的兩部《超凡蜘蛛俠》）。索尼高層希望以一部動畫電影來讓這個系列重新恢復活力。
而為了拍攝這部動畫電影，索尼找到了當時因《天降美食》系列以及《樂高大電影》等作品在業界小有名氣的導演搭檔——菲爾·羅德和克里斯托弗·米勒。有著天馬行空的創意以及各種鬼才想法的這兩位導演提出的要求則是：希望這部動畫讓觀眾感到“就像走進了漫畫裡一般”。他們同時也為能夠在這部電影中使用到真人電影無法達成的敘事手段而感到興奮。
第一次看到《蜘蛛俠：平行宇宙》這部電影時，就被其中的十足創新的視覺動態效果所驚豔，跟以往 3D 動畫追求自然流暢截然相反，《蜘蛛俠：平行宇宙》反而在往漫畫觀感體驗靠攏，讓 3D 動畫 2D 化，而且不是單純的 2D 化。
正如在一篇文章裡看到的評論：混搭上各類平行宇宙間不同的漫畫風格，保留下了對話方塊、漫畫分格、字幕特效，還尤其加強了手繪塗鴉的部分，並刻意打造出這部分的「稚拙感」。當這些再加上神奇到炸裂的分鏡，足以讓人看得目不暇接。接下來我們簡單的解析下這電影的亮點：
一、視覺表達的創新點
1. 一拍二模擬 2D 動畫
在進入正題故事沒多久，相信看慣了 3D 動畫的大家都會有種稍稍不適應的感覺...「這電影是不是有些卡？」
沒錯，它確實就是卡。這是電影第一個讓人感覺有些「異常」的地方，卻也是電影最特別的地方。仔細看你可以發現只有人物角色是有著卡頓感的，而它們的周圍環境卻很流暢，形成了一種微妙的對比。關於這一點，在知乎中有網友給我們作出瞭解答：
電影一般採用的是 24 幀每秒的制式，也就是說如果是手繪 2D 動畫片，需要每秒連續畫 24 張畫以使畫面中動畫流暢，這也就是動畫中俗稱的1拍1。
但是有人發現我同樣的動作只畫第 1，3，5，7....合計總共只畫 12 幀，然後把每幀停留 2 倍時間，觀眾並不會明顯察覺，而動畫師卻省下一半繪製時間，這就是動畫中俗稱的1拍2，這個行為的發明只是為了節約成本。3D 動畫一般不這麼做是因為 3D 角色動畫師在設定好關鍵幀後，其中間幀是自動生成的，所以本身沒必要去節省中間幀。
1拍2是 2D 動畫的傳統做法，3D 動畫強行這麼做可以讓人產生 2D 動畫的質感錯覺，但同時 Sony 選擇了背景動畫、鏡頭動畫和其它位移動畫又保持1拍1，從而保持 3D 動畫特有的鏡頭順滑的優勢。
這樣的處理手法一方面使得畫面有種 2D 逐幀動畫特有的逐幀質感（如同小時候看的阿凡提動畫那樣），另一方面產生一種自然中卻又有點違和的感受，好比人物和場景不在同一個時空中，這使得這個電影的視覺表現與故事主題產生了一種呼應和統一。
2. 漫畫手法還原
電影中我們可以看到很多在美式漫畫中常用的手法和效果。如爆炸的 BOOM、跳樓時的 AHHHHH、吐絲時的 THWIP 這些手繪擬聲詞；主角奔跑時、參與戰鬥前描述心裡活動的對話方塊；速度線、感知危險的訊號提示等等。這些都在不斷讓我們重溫閱讀漫畫的感受。下面是這些表現手法在電影中的應用 ：
這些表現手法，使得電影畫面多了份在平面漫畫中才有的張力，這和它們多年曆史沖刷下變化而來的屬性有關（漫畫的歷史沿襲不同文化的不同路徑，且在發展中有了很多的交融，這裡主要從美式漫畫手法的角度出發）。我們以漫畫中常見的對話方塊為例。
大家都知道影象成為人類表達媒介的時間要早於文字，然而，在人們學會使用連續的影象來表達一個有始有終的故事之前，遇到需要說明的情節，單靠一幅影象是無法滿足的，於是，一直到公元前兩千多年前的埃及人，他們想到了一種可以說明的辦法。
這是古埃及麥勒盧卡（Mereruka）陵墓中，兩個男人正在屠殺鬣狗的情景壁畫。讓人值得注意的是，在兩個角色之間的空白處飄浮著象形文字，經翻譯，內容是其中一個人對另一個人說：“ 捉緊它！”
文字的出現幫助幫助繪者豐富了影象之外的資訊——表達主角的思想活動，同時又增加了畫面的緊張感。
這些文字雖是整體的一部分，但也獨立於影象之外，和影象關聯度不大。而到了公元前7世紀左右的中美洲文明中，出現了用抽象的符號來概括語言的方式，這種符號後來逐漸發展成為一種類似卷軸或旗幟的圖形，在歐洲中世紀和文藝復興的藝術中都曾出現。或許是因為受限於構圖，這種對話方式所涉及的語言較為簡略，但這個時候文字已能夠比較好得融合到畫面中。
從18世紀開始流行政治性諷刺漫畫，其中出現了大量的對白。這個時期的漫畫家們已經非常熟悉如何使用對話方塊了，有的像簡化了的卷軸，有的前粗後細的類似氣球的氣泡，總之形式便非常接近現代漫畫中的對話方塊。而且這些對話方塊已經能承載更多的文字，對畫面起到了一定的渲染氛圍的作用。
發展到了20世紀初，對話方塊在漫畫中的作用已經很關鍵，同時也衍生了擬聲詞、情緒符號等等漫畫手法，它們不僅僅是內容、思想的傳達，還具備著情緒表達、推動劇情、氛圍渲染等等的作用。
回到我們的電影。正是這些在平面漫畫中常見手法和元素，使得靜態的漫畫如同可以「發聲」一般，且因為這些手法讓《蜘蛛俠：平行宇宙》比起一般的 3D 電影，在視覺層面豐富了觀眾其它感官的感受。看回前面的動圖，哪怕沒有聲音，我們都能通過眼睛更具體得「聽」到它發生了什麼。
3. 不用運動模糊
既然要還原漫畫閱讀體驗，一些 3D 動畫裡經常用的手法自然也要拋棄，比如運動模糊。但是去掉運動模糊後，原本在 3D 動畫中流暢的運動感和速度感會變得非常不足，這個決定通常會對電影風格產生直接影響。
關於這個問題，電影的特效總監迪米安是這麼說的，我們知道我們必須解決（沒有運動模糊）。我們只是不想用任何看起來過於傳統的東西來解決它。我們想從2D動畫中尋找解決的方案和想法。我們真的在找一些東西，它看起來像是受到動畫的啟發，或者是通過塗片、拉伸幾何圖形來表現運動模糊的方式，但卻不是那樣做的。最後，採用了一些解決方案。Imageworks 的線條工具允許藝術家繪製同樣連線形狀的運動線，也有從相機快門啟發的技術。例如，迪米安說，快速相機平底鏡上的背景，無論是合成還是藉助特效，都會被塗上很大的汙點和劃線，但卻會以一種非常塊狀的插圖方式出現。我們基本上儘量避免任何看起來像是平滑的漸變或者因為運動模糊而變得模糊的東西。相反，這是一種非常圖形化的處理。
後面我們可以看到，電影裡通過疊影（相機快門啟發的方式）、場景的錯位、速度線等方式來補充畫面的動感，並保證了電影本身的風格語言。
4. 色散/高光溢色
實際上我們可以從電影畫面裡看到一般產生於比較老化或者早期的鏡頭拍攝的照片質感（高光溢色），還有一些鏡頭色散的效果，這其實也是電影工作室有意為之。
導演 Peter Ramsey 在接受採訪時是這麼對電影畫面解釋的：某種意義上說，你根本不用花費精力去注意什麼，因為我們做的就是還原漫畫，而我們在看漫畫的時候會發現，有時候漫畫裡都有錯誤，有時候印刷不好，顏色都塗到了線條之外，所以看起來就覺得模糊不清。而且這和真人電影是相通的，比如有時鏡頭中一些東西是沒有對上焦有些模糊，這樣觀眾才會集中注意力在重要而清晰的畫面上。
色散/高光溢色的效果在這裡就是起到虛化和模糊的作用。如導演提到的印刷不好的情況，在 20 世紀初中期的印刷行業經常出現，當時的 CMYK 4色印刷會因為有對版的誤差出現導致噴色錯版，這樣的錯版在後面發展中也成為了一種風格化的處理，導演注意到這點，並應用到了電影中，這既把漫畫的質感還原得更到位，讓觀者產生共鳴同時也利用這樣的錯位生成一種視覺景深感，使得電影的層次更強，解決了向 2D 靠近後在電影顯得平的問題。
這部電影在視覺表達上有很多的突破，創作團隊很大膽得把多種風格不一的人物混合在一起，使得平行宇宙的概念合理化，並通過平面漫畫的方式把視覺語言和整個電影的題的結合達到了高度的統一。整個電影透露出一種處處不穩定的矛盾感，創作團隊沒有把這種矛盾消弱，而是把他們都展現了出來，這樣的碰撞感受讓人不得不佩服他們對於整體的把控和自信。
二、視覺效果與濾鏡實現
電影從片頭就迫不及待的展現出了它在表現形式上的創新，但仔細觀察你會發現裡面用到的效果並非從0到1的創新，只不過索尼的動畫團隊把這些視覺元素應用的淋漓盡致。
由於工作中涉及了短視訊濾鏡和轉場的 OpenGL Shader 程式碼編寫，所以在二刷電影的時候特別留意了電影裡的特效，並思考有哪些是可以通過 Shader 來實現的。當然了，電影裡的效果是動畫設計師反覆調整和多重加工出來的，絕非一段程式碼就能完美模擬。這裡僅僅是從技術角度去探討電影裡一些效果在 Shader 程式碼層面的可行性。
1. HalfTone 半調濾鏡
電影高度還原了漫畫應有的觀賞體驗，在畫面的渲染上使用了 Ben-Day dot (本戴點）讓我們感受到了閱讀紙質漫畫書的質感。Ben-Day dot 與 HalfTone 的不同之處在於 Ben-Day dot 在特定區域中的大小和分佈總是相同，而 HalfTone 能根據影象的顏色細節呈現大小和漸變不一定點。我們可以用 HalfTone 半調濾鏡去生成差不多的質感。下面擷取幾張截圖可見一斑：
科普下 Ben-Day dot (本戴點），全名是「本戴點狀製版法」，以插圖畫家和印刷商 Benjamin Henry Day, Jr.（19 世紀出版商 Benjamin Henry Day 的兒子）命名，在 1879 年被髮明的印刷製版技術。它根據顏色和視錯覺原理，通過小彩色點的間隔疏密、大小或重疊來生成所需要的效果。例如，洋紅色圓點間隔比較寬就會形成粉紅色。 20 世紀 50 年代和 60 年代的彩色漫畫書很受歡迎，但是全綵漫畫的成本很高，因此漫畫出版商在四色印刷（ 青色、品紅色、黃色、黑色 ）中使用了 Ben-Day dot，通過它列印出陰影和二次色 ，如綠色、紫色、橙色、肉色等，因為本戴點的特性這種方式可以節省大量的油墨，漫畫商通過這樣廉價的印刷方式印刷在便宜紙張上生產漫畫書，從而可以獲得較高的收益。
後來這種方式被美國波普藝術大師羅伊·利希滕斯坦（RoyLichtenstein，1923～1997）充分運用在繪畫上並使其發揚光大。在 20 世紀中葉，抽象表現繪畫盛極一時之際，他和紐約年輕一代畫家，提出了新形式的具象繪畫——波普藝術，在 60 年代一舉成名，成為美國新藝術運動的主推動人，甚至許多曾受美國商業影響的域外文化，亦感受他作品的震撼力。利希滕斯坦的繪畫或雕刻作品，引用自漫畫、日用品、廣告以及一些美術史上名畫家的作品造型，結合本戴點的特點再現了美國社會當時濃厚的商業文化和時代特徵。
我們來看看實現的方式。在 OpenGL 的 Shader 語言中，通過建立一個排列的圓形的 pattern，結合影象的 RGB 通道色值得到影象的半調圖案，在跟原圖進行「變亮」影象混合模式，可以得到我們想要的半調質感：
precision highp float;
uniform sampler2D inputImageTexture;
varying vec2 textureCoordinate;
vec2 center = vec2(.5, .5);
float angle = 1.57;
float scale = 1.;
vec2 tSize = vec2(1000., 563.);
float blendLighten(float base, float blend) {
return max(blend,base);
}
vec3 blendLighten(vec3 base, vec3 blend) {
return vec3(blendLighten(base.r,blend.r),blendLighten(base.g,blend.g),blendLighten(base.b,blend.b));
}
vec3 blendLighten(vec3 base, vec3 blend, float opacity) {
return (blendLighten(base, blend) * opacity + base * (1.0 - opacity));
}
float pattern() {
float s = sin( angle ), c = cos( angle );
vec2 tex = textureCoordinate * tSize - center;
vec2 point = vec2( c * tex.x - s * tex.y, s * tex.x + c * tex.y ) * scale;
return ( sin( point.x ) * sin( point.y ) ) * 4.0;
}
void main() {
vec4 color = texture2D(inputImageTexture, textureCoordinate);
float average = ( color.r + color.g + color.b ) / 3.0;
vec4 halftone = vec4( vec3( average * 10.0 - 5.0 + pattern() ), color.a );
gl_FragColor = color + vec4(.02)*halftone;
gl_FragColor = vec4(blendLighten(color.rgb, halftone.rgb, .05), 1.);
}
複製程式碼
然後使用圖層混合模式「變亮」，將兩張圖做畫素融合：
這裡做了一個網頁 Demo，點選連結後通過右上角的濾鏡開關可以看到前後效果：Demo1
2. Glitch 故障效果
Glitch 故障效果在很多都網際網路產品中同樣可以看到應用，最典型的比如抖音的 LOGO 動畫以及短視訊中的濾鏡效果。在電影中，由於另外幾位蜘蛛俠來自不同的平行世界導致原子不穩定，表現出了差不多的花裡胡哨的故障效果。
索尼工作室在製作故障效果的時候使用了手繪圖案+多層效果融合的方式來呈現，當然了，程式碼想要模擬這樣的效果並不容易，如果可以找到一張合適的遮罩圖也許可以大致模擬出來。不過這裡只單純展示常規的基於影象本身的故障效果（程式碼通過基於時間來做畫素和顏色通道偏移來模擬故障效果）：
precision highp float;
uniform sampler2D inputImageTexture;
uniform sampler2D inputImageTexture2;
varying vec2 textureCoordinate;
uniform float time;
float amount = 0.1;
float speed = 0.5;
float random1d(float n){
return fract(sin(n) * 43758.5453);
}
float random2d(vec2 n) {
return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
}
float randomRange (in vec2 seed, in float min, in float max) {
return min + random2d(seed) * (max - min);
}
float insideRange(float v, float bottom, float top) {
return step(bottom, v) - step(top, v);
}
float rand(vec2 co){
return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}
float blendDarken(float base, float blend) {
return min(blend,base);
}
vec3 blendDarken(vec3 base, vec3 blend) {
return vec3(blendDarken(base.r,blend.r),blendDarken(base.g,blend.g),blendDarken(base.b,blend.b));
}
vec3 blendDarken(vec3 base, vec3 blend, float opacity) {
return (blendDarken(base, blend) * opacity + base * (1.0 - opacity));
}
void main() {
vec2 uv = textureCoordinate;
float sTime = floor(sin(time*0.0005) * speed * 6.0 * 24.0);
vec3 inCol = texture2D(inputImageTexture, uv).rgb;
vec3 outCol = inCol;
float maxOffset = amount/4.0;
vec2 uvOff;
for (float i = 0.0; i < 10.0; i += 1.0) {
if (i > 10.0 * amount) break;
float sliceY = random2d(vec2(sTime + amount, 2345.0 + float(i)));
float sliceH = random2d(vec2(sTime + amount, 9035.0 + float(i))) * 0.25;
float hOffset = randomRange(vec2(sTime + amount, 9625.0 + float(i)), -maxOffset, maxOffset);
uvOff = uv;
uvOff.x += hOffset;
vec2 uvOff = fract(uvOff);
if (insideRange(uv.y, sliceY, fract(sliceY+sliceH)) == 1.0 ){
outCol = texture2D(inputImageTexture, uvOff).rgb;
}
}
float maxColOffset = amount/6.0;
vec2 colOffset = vec2(randomRange(vec2(sTime + amount, 3545.0),-maxColOffset,maxColOffset), randomRange(vec2(sTime , 7205.0),-maxColOffset,maxColOffset));
uvOff = fract(uv + colOffset);
float rnd = random2d(vec2(sTime + amount, 9545.0));
if (rnd < 0.33) {
outCol.r = texture2D(inputImageTexture, uvOff).r;
} else if (rnd < 0.66) {
outCol.g = texture2D(inputImageTexture, uvOff).g;
} else {
outCol.b = texture2D(inputImageTexture, uvOff).b;
}
vec3 inCol2 = texture2D(inputImageTexture2, uv).rgb;
vec3 finalColor = blendDarken(outCol, inCol2);
gl_FragColor = vec4(finalColor, 1.0);
}
複製程式碼
同樣的，通過 Demo 右上角的濾鏡開關可以看到前後效果： Demo2
3. RGB Shift/Split RGB 分離
細心可以發現，上面第二個 Glitch 效果同樣用到了 RGB 顏色分離，在電影中出現了大量的這樣的效果，把色彩變化應用到極致，有些魔性有些虛幻。
Shader 實現起來會相比上面兩個濾鏡更簡單一下，通過對影象的 RGB 三個顏色做拆分以及座標偏移就可以實現：
precision highp float;
uniform sampler2D inputImageTexture;
varying vec2 textureCoordinate;
uniform float time;
float amount = 0.01;
float angle = 0.;
void main() {
vec2 offset = amount * vec2(cos(time*.001), sin(time*.001));
vec4 cr = texture2D(inputImageTexture, textureCoordinate + offset);
vec4 cga = texture2D(inputImageTexture, textureCoordinate);
vec4 cb = texture2D(inputImageTexture, textureCoordinate - offset);
gl_FragColor = vec4(cr.r, cga.g, cb.b, cga.a);
}
複製程式碼下面兩張圖片對比前後效果：
同樣的，通過 Demo 右上角的濾鏡開關可以看到前後效果：Demo3
最後，這部電影可以說的太多太多，有太多讓人覺得驚豔的點，沒辦法一一都提到，我們只能從視覺方面和實現的可能性簡單得聊聊，歡迎補充。
在快寫完文章的時候，想起開頭 Sony 說到的「rejuvenate（使其恢復年輕）」。我們可以感覺到這個電影從故事和風格無不充斥著現在年輕人會喜歡的元素，可以說這是一部很酷的作品，但是在看到了很多資料後我們不禁有一些感慨，這些很酷炫的效果和元素風格其實在上個世紀就已經存在且有著很深的歷史痕跡，從某種意義上，與其說是更年輕的體現，感覺倒不如說是這是一種復古了。由此我們也延伸出了一些問題：
有人說風格是個輪迴，這麼一看，所謂的「更年輕的風格」或者「過氣的風格」都像是個偽命題。也就是說，是不是並不存在什麼年輕或過時的風格，只有時間時間久了，看膩了的風格？
又或者說，是不是因為技術的創新才讓產品（電影或者其它）變得年輕了，和風格，實際沒太大關係？感覺挺有意思，可以想想。
相關連結：