cover_photo

Generative Art - Cube Wave

VFX production by babylonjs

前言

本來這個特效是想放在首頁當作背景動畫的,但做完以後發現

  1. 老爺機開這個網頁會異常卡頓
  2. 光影太亮會影響閱讀體驗 無奈之下只好作廢,如果有人好奇效果怎麼樣可以參觀這邊

這篇文章主要記載這個效果的視覺優化過程,方便之後金魚腦可以回來參考(X

設計步驟

  1. 視覺元素 : 雖然已經是萬年老梗了,但方塊一直是我很喜歡的視覺元素,從美術課第一次畫素描到第一次接觸電腦圖學方塊就像學習程式的hello words,所以很自然而然的我就(又)把他加入我創作的要素裡了
  2. 動態:從以前我就很喜歡這種數大便是美的視覺動態,當龐大數量的粒子(方塊)一起動起來的時候會有一種療癒感
  3. 主視覺顏色:沒什麼別的原因,就只是喜歡
  4. combine !

優化步驟

  1. 攝影機角度 : 一個好看的角度是所有好看畫面的基礎,由於我的網頁排版置中,所以我刻意找了一個看起來最直線型的
  2. fog 霧:荷包有限,所以電腦效能也有限,使用fog可以遮住很多你不想花心思微調的地方(偷懶)
  3. light 燈光:打光是一門藝術,由於加了fog以後場景整體看起來會非常暗,所以可以使用燈光讓想要傳達的地方看起來更清楚
  4. post processing - bloom 發光:好的特效不能不發光你說是吧?
  5. post processing - ambient occlusion 環境光剔除:增加亮暗面之間的對比可以幫助陰影細節看起來更美好
  6. post processing - grain顆粒感:讓你的畫面看起來有一點顆粒感,使用這個可以增加些微的場景細節

Reference

  1. 10 Tips to make Your 3D Render more Cinematic
  1. Cube wave Animation loop_ Blender 2.81. HD