iT邦幫忙

2021 iThome 鐵人賽

DAY 30
0
Modern Web

成為Canvas Ninja ! ~ 理解2D渲染的精髓系列 第 30

Day 30 - 3D繪圖篇 - 噪聲地形演算II - 成為Canvas Ninja ~ 理解2D渲染的精髓

這是我最後的波紋了。

其實我一直想試著講一次這句話(X)

首先來丟一張案例完成後的圖片~

img

大家應該多少有看過這種類型的圖樣,最常見的應該就是在遊戲的3D場景上~

事實上有很多電腦動畫中的海面高山 都是透過這樣的方法來產生3D模型的。

其實對於已經大致理解噪聲概念的我們來說,這個案例並不是很難,原理上大概就是

  • 透過程式去產生網格,然後把網格的格眼座標(線條交錯的地方)記錄到一個陣列中

  • 透過透視投影運算,還有柏林噪聲函數來把座標轉換過一遍

  • 把轉換過的點連起來

那麼我們就馬上來看看實作的部分吧~

codepen : https://codepen.io/mizok_contest/pen/PoKPjew

首先前半段的Perlin's noise,這個函式其實是我從別的地方找來,然後稍加整理過的。

主要的核心則是Grid這個類,Grid在被實例化後會先來到init方法,而init之後會來到核心的initVertices方法,這個方法就是用來生成格眼座標陣列用的~

而有了格眼座標陣列,我們就可以把點跟點之間連起來~ over~

initVertices() {
    for (let x = 0; x <= this.w; x++) {
      for (let y = 0; y <= this.h; y++) {
        this.vertices.push([
          -0.5 * this.w * this.space + x * this.space,
          y * this.space + this.z
        ]);
      }
    }
    this.vertices = this.vertices.map((o, i) => {
      let x = o[0];
      let y = this.y;
      let z = o[1];
      //先用柏林噪聲取得這個座標下的浮點數
      // 這邊的0.01&0.1 是用來調節崎嶇程度的係數(可以試著調整看看)
      let perlin = perlinNoise(x * 0.01, y * 0.01, z * 0.1);
      // 接著再用投影公式去把正確的投影點位算出來
      return this.project(
      // 這邊這個perlin * 3 的3也是是用來調節崎嶇程度的係數
        o[0], this.y + this.cvs.height * perlin * 3, o[1]
      )
    });
  }

完賽後記

當初之所以參賽,其實是想陪朋友一起參加。

但是寫著寫著就突然發現我真的很喜歡寫這個題目(如果不要有每天的完稿壓力的話那就更好了QQ,每天7點多下班回家趕稿的生活真的累)

而且賽程中也發生了蠻多讓人印象深刻的事情(例如把系列文貼到社群上宣傳的時候意外的被業界的名人tag了XD)

我覺得這次的參加經驗對我來說收穫良多~可以的話明年大概也會參賽!

小弟就在這邊先下台一鞠躬 ^ ^


上一篇
Day 29 - 3D繪圖篇 - 噪聲地形演算I - 成為Canvas Ninja ~ 理解2D渲染的精髓
下一篇
目錄頁 : 成為Canvas Ninja ~ 理解2D渲染的精髓
系列文
成為Canvas Ninja ! ~ 理解2D渲染的精髓31

2 則留言

0
princend0230
iT邦新手 5 級 ‧ 2021-10-16 20:42:00

太水了啦 /images/emoticon/emoticon42.gif

0
jerrythepotato
iT邦新手 5 級 ‧ 2021-10-17 00:23:02

讓我想到之前看過這個
[Unity Tutorial] How to Make Low Poly Water

Mizok iT邦新手 5 級 ‧ 2021-10-17 01:38:20 檢舉

其實就是差不多的東西
不過我感覺前端要渲染出來這麼多的格眼感覺應該會需要處理效能問題,我發現我光是做一幀出來, 1000*1000就是極限了, 大概這個range之後瀏覽器就會開始卡

用之前大大提到的 Web worker 應該能解決這個問題哈哈,未來的研究方向就決定是這個了~

我要留言

立即登入留言