TypeScriptPhysicsCanvas APIPerformance
ブラウザで動く物理エンジンを自前で書いた話
4 分で読める
このトピックを深掘りする
Canvas vs DOM・インタラクティブUI
CanvasとDOMの使い分け・CSSインタラクション・カスタム物理エンジン・ポートフォリオ設計
全5本中 5 本目。
次に読む記事
Canvas vs DOM — 203個のコンポーネントで選んだ基準と実測データ
203個のインタラクティブコンポーネントをCanvas APIとDOMに振り分けた判断基準を、実例と実測データで解説する。
203個のCanvas/DOMコンポーネントで踏んだバグ Top 10 — 実データから見えたパターン
203個のインタラクティブコンポーネントを開発する過程で実際に遭遇したバグをgit履歴から集計し、頻出パターンと修正手法をTop 10形式でまとめた。
CSSだけで作るインタラクティブUI — transform, transition, custom propertiesの実践
FidgetSpinner、InfiniteKnob、ToggleSwitchなどのDOM+CSSベースのインタラクティブUIで活用したtransform、transition、custom propertiesのCSS技法を実例で解説する。
シリーズ全体の流れを見ながら、次に読む記事へ進めます。 初めての方は /start →
よくある質問
- Q. ポートフォリオサイトに物理エンジンを自作するのは現実的ですか？
- 使う機能が「重力・衝突判定・バウンド」に限られるなら現実的。180行で実装でき、Matter.jsの300KBを4KBに削減できた。
- Q. 物理演算で60fpsを維持するにはどうすればよいですか？
- Grid空間分割でO(n²)を軽減し、固定タイムステップで物理演算を安定させ、Canvas/DOMをエンティティ数で使い分けることで200パーティクルでも60fpsを維持できる。
- Q. Canvas APIとDOMの使い分け基準は何ですか？
- パーティクル100個以上はCanvas、バッジ20個程度はDOM + CSS Transformを使う。アクセシビリティとテキスト選択が必要なものはDOM。