~ この記事はTech KAYAC Advent Calendar 2020の18日目の記事になります ~ こんにちは!クライアントワークチーム・フロントエンドエンジニアの深澤です。web や unity の実装を担当しています。 今日は three.js で soft particle (ソフトパーティクル)を実装する方法を紹介していきたいと思います。 ソフトパーティクルを使って、霧のような雰囲気の中をキツネが駆けるシーンを作ってみました。 この動作デモはこちらから、動作デモのソースはこちらのリポジトリからご覧いただくことができます。 ソフトパーティクルについて ソフトパーティクルとは 特徴 実装方針 three.jsでの実装 JavaScript GLSL 改善点 霧の表現 最後に ソフトパーティクルについて ソフトパーティクルとは おおまかに一言でまとめると「深度値の比較をして透過率
![【WebGL】three.js : soft particle - KAYAC engineers' blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/5b86a7a0e2379f49b8741b149877ee6139b324d3/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Ft%2Ftakumifukasawa%2F20201217%2F20201217140610.gif)