2010年頃にWHATWGにてcanvasの仕様が策定されました。それ以降、Webでのグラフィックは、Flashよりもcanvasでの制作がメインになると言われるようになりました。iPhoneやiPadでも問題なく表現できるということが、canvasの普及に、より拍車をかけました。実際、javascriptを使用するcanvasはある程度重い処理も実行できます。canvasは一体どれほどのパフォーマンスを発揮するのか。弊社では処理能力を計る最適な方法として、パーティクルを使用した「ストレンジ・アトラクター」を制作してみました。ストレンジ・アトラクターはおもしろいグラフィックを描画できるので、以前はActionScript 2.0や、またVJの素材としてC++で制作していました。今回は、canvasの描画がどれ程CPUを使うのかというテストなので、シンプルなグラフィックを作りました。

javascriptの実行速度はブラウザに搭載されているレンダリングエンジンによって、まだパフォーマンスにばらつきがあります。また、canvasはまだGPUを使用せず、メモリの処理も最適ではない為、重い処理を行うには限界があります。

2005年にカオス理論を少し勉強して、遊んでみました。ストレンジ・アトラクターは美的な観点からもシャープで優れています。ミニマルかつよりスムーズでダイナミックな表現のグラフィックや動画を、コンピュータの性能をフルに使って制作することができます。

2005年フラッシュAs1.0コード。 120パーティクル

今回、canvasで制作したのは「Peter de Jong アトラクター」というカオス原理を使用したものです。ループ処理でcanvasにパーティクルを描画し、一方で別のループ処理を実行することで、全体的なグラフィックを完成させていきます。実験の結果ですが、現バージョンのjavascriptは、やはりC++の実行速度よりは遅いものの、AS1.0、2.0よりは断然速いというものでした。

2003年C++コードv.2.0。 VJライブで作った動画。

2003年最初C++コードテスト。 10,000パーティクル

2009年頃、Adobe Labsは「Alchemy」というFlashライブラリをベータ版として開発しました。AlchemyはC++のコードにリンクさせるもので、大変速い処理を可能にしていました。当時もストレンジ・アトラクターを使用して、その新しいFlashエンジンの可能性を探りました。しかしAdobeはAlchemyをリリースしませんでした。そうした過程を経ながら、現在はGPUを使用したグラフィックの描画が主流になっているので、ブラウザでの実行がスタンダードになっています。

javascriptを使用した重い処理はまだブラウザによって速度が異なります。openGL等の3dのライブラリを開発しているKronosグループは、「WebCL」APIを新たに開発しています。またはIntelで開発された「River Trail」APIは今のjavascriptよりもCPUのローレベルの処理をさらに効率的に行えるようになっています。