iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
Modern Web

在JS的世界碰碰撞撞乒乒乓乓!30天一起玩Matter.js!系列 第 10

Day10. 人與人之間偶有摩擦,物體與物體之間叫做碰撞 - Collision(上)

  • 分享至 

  • xImage
  •  

我們先前已經有了碰撞,但是之前我們其實都是使用預設的物理現象與engine模組來製造碰撞,其實並沒有太深入去了解 Matter.js 是怎麼處理與看待碰撞這件事,我們今天來聊聊,Matter.js中的碰撞大概的實作流程與相關模組。

在做碰撞檢測前,我們先定義一下碰撞這個行為本身,什麼叫碰撞?

聽起來很直覺的問題,要回答得清楚倒也沒那麼容易,容筆者在這裡下一個快速簡短的小定義:當兩個物體的面積上發生了接觸,且此接觸對兩個物體帶來了相互作用造成物體本身能的改變。

其實 Matter.js 的模組中跟碰撞相關的還挺多的,我們來一一條列稍微看看他們在做什麼。

  • Bounds - 創建與操作AABB盒
  • Contact - 用來創建與操作碰創相接內容
  • Detector - 用來監測碰撞發生的Pairs
  • Grid - 創建與操作Broadphase grid結構(Broadphase簡單的說是一種叫粗略的碰撞檢測方式)
  • Pair / Pairs - 創建與操作碰撞用的Pair
  • Query - 處理碰撞的查詢
  • Resolver - 用來處理碰撞前後的資訊(位置/速度)
  • SAT - 倚賴Separating Axis Theorem來偵測是否有發生碰撞

以API文件為準,我們其實總共就29個大標,扣掉一個在筆者現行版本文件已註明會淘汰且由其他的模組處理的,28個模組中就有8個在處理碰撞資訊,畢竟碰撞偵測與實行就是物理引擎中相當重要的一環。

其實在 Matter.js 裡面有單獨一個碰撞的資料夾,要看原始碼的話可以看看這個:

https://github.com/liabru/matter-js/tree/master/src/collision

在演算層面,碰撞有很多方式與計算理論, Matter.js 採用的是 SAT 理論 (SAT也可以看這個),筆者一樣不會細提,不過提供一篇蠻詳細的參考文章,如果對背後演算有興趣的可以參考 這個

稍微提一下碰撞這個行為本身在 Matter.js 中相關模組怎麼發生作用的及順序的。

原始碼會是參考:

https://github.com/liabru/matter-js/blob/master/src/core/Engine.js

首先是 engine 在創建的時候,會創建一個 grid,grid 會去用現有所有的物體,來計算並儲存一些關於物體相關的資訊(如物體所占區域),當物體位移或資訊改變的時候,也會移並改變這些儲存的內容。

接著輪到檢測碰撞的階段,前面講剛體的時候,我們有聊過 collision filter 這個屬性的設置與運行方式,如果不記得的人,可以回去看這裡。

當確認兩物體有碰撞可能性的話,進一步會用上面提到的SAT方式來做碰撞檢測、創建碰撞對(Pair)。

所以上面這麼多模組,其實都是彼此高度相依的,如果讀者想嘗試了解碰撞理論,可以跟著筆者上面寫的流程與提供的原始碼連結稍微嘗試追追看,可能會對它的實作有更多的了解。

在我們的實作中,撇除高度自製的場景,我們其實相對不太會呼叫這幾個模組,所以今天其實也沒有範例代碼(但其實筆者今天撰寫這篇文花費了閱讀參考資料跟追原始流程比平常寫代碼還多XD)。

今天主要是帶大家了解一下文件中這些模組個別扮演的角色,還有一些物理學計算的名詞,雖然沒有太多的解釋,有些是以提供參考內容的方式,如果有想藉這個機會深讀一下碰撞及物理學一些概念的話,這些資料應該會是一個敲門磚。

明天的下集會著重於碰撞發生檢測相關事件,也就是我們要怎麼知道碰撞、實作相關反應的部分,也會有代碼帶大家一起練習,那我們明天見!


上一篇
Day9. 一起動手做彈珠台!(1)
下一篇
Day11. 人與人之間偶有摩擦,物體與物體之間叫做碰撞 - Collision(下)
系列文
在JS的世界碰碰撞撞乒乒乓乓!30天一起玩Matter.js!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言