福野泰介の一日一創

多量のオープンデータをスムーズに描画したい時、グラフィックス・プロセッシング・ユニット、GPUの助けを借りましょう！パワーの違いはあれど、スマホ・タブレットからPCまで、現代コンピューターにはほぼ標準装備。多数のデータを並列に計算してくれます。

WebGLを使えばブラウザ上でGPUパワーが使えます。「WebGL で100万パーティクルを表示してみるテスト | Runstant」をベースに、シンプルにリライトしました。

「WebGL 100万パーティクルデモ - 1M perticles demo」src on GitHub
Apple M1 ProのMacBook Proでは、300万パーティクルまで120fps維持してくれました。いい感じです！

参考、シェーダーを使った描画いろいろ
「Inigo Quilez :: computer graphics, mathematics, shaders, fractals, demoscene and more」

下記コードを加えるだけでクリックで、フルスクリーンになります。

document.body.onmousedown = () => canvas.requestFullscreen();

インタラクティブなアート製作にもいいですね！