Webブラウザ上で3Dをぐりぐりと動かすようなアニメーションを作る場合、WebGLを使うのは基本として、処理においてもGPUを使う方が効率的になります。とはいえ、GPUを使ってどう処理を行えば良いのか分からないことでしょう そこで使ってみたいのがGPU対応のライブラリです。今回はアニメーションライブラリとしてGPU.jsを紹介します。

GPU.jsの使い方

GPU.jsを使った一例です。Canvasが4つに分かれており、それぞれが連携してアニメーションしています。

実際の動きです。60fpsでています。

グリッドやボールは増減できます。

GPU.jsを使わないCPUでの計算処理モードもあるのですが、動きがとても遅くなります。GPU様々と言ったところでしょう。Web上でスムーズなアニメーション処理を実現したい時にはぜひチェックしてください。

GPU.jsはJavaScript製のオープンソース・ソフトウェア（ISC License）です。

gpu.js - GPU Accelerated JavaScript gpujs/gpu.js: GPU Accelerated JavaScript