ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2