Task.01 ~ WebGL スクール第 10 期

🪬 ~ 要件

• Box Geometry を利用すること
• ボックスが画面上に１００個以上描かれるようにすること
• 配置は自由
• 色や大きさなどは自由

👾 ~ Demo

• https://dev.shoya-kajita.com/015/

🎮 ~ Getting Started

• node : v.17.0.0
• npm : 8.1.0

// install
npm i

// development
npm run dev

// production
npm run build

// build preview
npm run preview

🗒️ ~ Note

GPUComputationRenderer について

• Three.js の GPGPU のサンプルが難しすぎるから解体して勉強してみる
• GPGPU がまったくわからないので GPUComputationRenderer.js をまず調べてみるメモ
• 【React Three Fiber】GPGPU を使用した Particles の実装 @ふぉくるさん
• Toon Shading @中野みさきさん

curlNoise について

• glsl-curl-noise

クォータニオンについて

• クォータニオン

インスタンスメッシュについて

• インスタンスメッシュの個別回転 @ふぉくるさん

三角関数について

• WebGL 開発に役立つ重要な三角関数の数式・概念まとめ（Three.js 編）

Fog について

• 距離フォグ：wgld.org