Love real-time simulation and rendering.

About me

GPGPU で並列化した大規模シミュレーションや，リアルタイムレンダリングを実装することが好きです．特に，それらをブラウザ上で実現することにこだわりがあります．最近では，WebGPU のコンピュートシェーダーを用いて，ブラウザ上で動作する GPGPU 並列化したシミュレーションを実装することに取り組んできました (See Works!)．

また，作品を作るために用いた技術について記事を執筆し，発信することも好きです (See Articles!)．X で実装の途中過程も随時発信しているので，よろしければご覧ください．

実装したプロジェクトのソースコードは，すべて GitHub で公開しています．

Works

以下のデモはすべてブラウザ上で動作します（一部のデモは WebGPU 対応が必要です）．

WebGPU-Ocean

WebGPU を用いて，ブラウザ上で動作するリアルタイム流体シミュレーションを実装しました．シミュレーションは，2018 年に Hu らによって提案された MLS-MPM という新しい手法を，GPGPU で並列化したものを用いています．ブラウザ上で動作する流体シミュレーションとしては，自分が知る限りでは現時点で最大クラスの規模のものです．

WaterBall

球体上の流体シミュレーションに挑戦しました．WebGPU-Ocean と同じく，MLS-MPM を GPGPU 並列化したものを用いており，高速です．

Splash

WebGPU-Ocean をさらに発展させた流体シミュレーションです．2018 年に提案された Narrow-Range Filter という手法を用いて，流体表面をより美しくレンダリングし，さらにレイマーチングによる影の表現も行いました．パフォーマンスもさらに向上させ，GPU によってはブラウザ上で 100 万粒子規模のリアルタイムシミュレーションも可能です．

Wasm-Slime

Rust + wasm-bindgen-rayon を用いて，ブラウザ上で動作する並列流体シミュレーションを実装しました．マルチスレッドによる並列化により，シングルスレッドだけで達成するのが困難なスケールのシミュレーションを実現しました．

Coupling fluid & softbody simulation (WIP)

Position Based Dynamics という手法を用いて，流体とソフトボディを融合したシミュレーションを実装することに挑戦しています．

Articles

作った作品に関する技術の発信を，英語・日本語を問わず行っています．

WebGPU Fluid Simulations: High Performance & Real-Time Rendering

ハイパフォーマンスな 3D 流体シミュレーションをブラウザ上で実現するために用いた技術について，Codrops という企業から依頼をいただき書いた記事です．記事の紹介ツイートは 2000 いいねを超えるなど，話題になりました．

Splash: A Real-Time Fluid Simulation in Browsers Implemented in WebGPU

作品の 1 つである Splash を紹介するために，英語掲示板である reddit に書いた記事です．1400 以上の upvote をいただき，r/GraphicsProgramming というサブレディットの中で歴代 5 番目に注目された記事となっています（2025/05/25 現在）．

Splash: A Real-Time Fluid Simulation in Browsers Implemented in WebGPU
byu/matsuoka-601 inGraphicsProgramming

Zenn

Zenn にも積極的に記事を投稿しています．

Skills

WebGPU (WGSL)

WGSL のコンピュートシェーダーを用いて，GPGPU を用いた，ブラウザ上で動作する大規模な物理シミュレーションを作ってきました．

WebGL では難しかった GPGPU 最適化の中には，WebGPU のコンピュートシェーダーのおかげで書きやすくなっているものが多くあります．そのため，将来的には，WebGPU によってブラウザ上でできることの幅が大きく広がりうると予想しています．

Three.js & WebGL (GLSL)

Three.js や GLSL を用いてレンダリングしたシミュレーションも作成中です。

流体はメタボールという手法でレンダリングしています。また、緑色のソフトボディは、2D 空間上で擬似的な法線を計算し、屈折やスペキュラを計算することで、あたかも 3D 空間上の物体であるかのように再現しています。

SIMD を用いた高速化

プログラムの高速化のコンペティションサイトである highload.fun に趣味で参加しています．AVX2 という SIMD の命令セットを用いて，プログラムを極限まで高速化することに挑戦しています．以下が成績の一部です（いずれも 2025/05/25 時点）．

最近では wasm の SIMD サポートも充実してきているため，SIMD 最適化されたシミュレーションやアプリケーションをブラウザ上で動かすことにも挑戦したいと考えています．

競技プログラミング

大学時代は，趣味として競技プログラミングをしていました．データ構造やアルゴリズムに関する知識を応用して，問題を解くのが好きです（アカウント : SPARKLE）．

TypeScript

ここまでに紹介した，ブラウザ上のアプリケーションはすべて TypeScript で実装しています．

Rust

Rust と wasm-bindgen-rayon を用いて，ブラウザ上で動作する並列流体シミュレーションを実装しました．紹介記事はこちら

C++

競技プログラミングや highload.fun のコンペティションには C++ で参加しています．