- 2013年01月16日 (水)
- Tweet
HTML5関連技術のWebGL(three.js)とFlash(Away3D)のパフォーマンス比較
HTML5関連技術であるWebGL (three.js ライブラリを使用)でどれだけのオブジェクトを表示できるのか気になったので、Flash(Away3Dライブラリを使用)とパフォーマンスを比較してみました。WebGL対応ブラウザであるGoogle ChromeやFirefox等でご覧ください。
- Flash Demo (Primitive Version)
- Flash Demo (Optimum Version)
訂正
※[2013/01/16 23:50追記] 匿名さんやthree.jsの開発者であるMr.doobさんからコメントで、ジオメトリの作成部分で最適化が足りない旨の指摘を頂きました。ジオメトリを無駄に作成していたためパフォーマンスが低下し、無駄にメモリ使用量が増えていました。「HTML Demo (Primitive Version Ex) 」のほうではその部分を修正しています。
※[2013/01/17 11:30追記] Sombressoulさんが指摘しているように、Three.jsにはジオメトリをマージする機能が設けられているということで、最適化されているバージョン「HTML Demo (Optimum Version)」を追加しました。
検証結果
私のマシン(Mac OS X 10.8.2, 3.4GHz, AMD Radeon HD 6970M 2048 MB, Chrome 24)で計測した平均FPSは次の通りです。Flashのほうが30倍以上のオブジェクトを表示しても高FPSを保てています。
- WebGL (three.js)は1331個のオブジェクトを表示して約41fps
- WebGL (three.js)は42875個のオブジェクトを表示して約60fps
- Flash (Away3D)は42875個のオブジェクトを表示して約60fps
Stage3DとWebGLの比較というよりは、フレームワークとしてAway3Dとthree.jsの比較といったところでしょうか。WebGLもFlashのStage3DもOpenGL (Stage3Dの場合はDirectXも含む)をキックしているので基本的に描画に関するパフォーマンスの違い大差ないと思うので、Three.jsやAway3Dなどのフレームワーク群がどれだけGPUに最適化した情報を用意できるか、が論点じゃないかと思います。あとActionScriptとJavaScriptのスクリプトの処理速度の差も。
※[2013/01/17 11:30追記] Three.jsのほうの最適化バージョンを作ったら、Away3Dと同じパフォーマンスになりました。
メモリとCPU使用率
メモリとCPU使用率の点もアクティビティモニタを使って調べてみました。WebGLとFlashは同じオブジェクトの個数で試してみました。 ([2013/01/17 11:45追記] 再度検証しなおしました。)
- HTML Demo (Optimum Version)
- Flash Demo (Optimum Version)
WebGL(Three.js)の場合は、ブラウザのプロセス(Chrome RendererとChrome Helper)の値の合算で次の値で出してみました。
- CPU使用率:12.7%
- メモリ使用:356.2MB
Flash Stage3Dの場合は、プラグイン(PepperFlashPlayer)が使用している値は次の通りとなります。
- CPU使用率:4.6%
- メモリ使用:222.1MB
プラグインとブラウザのプロセス(Chrome RendererとChrome Helper)の値の合算だと次の値となります。
- CPU使用率:18.7%
- メモリ使用:400MB
WebGLとStage3Dのブラウザ対応状況
参考までにWebGLとStage3Dのブラウザ対応状況をまとめておきました。
ソースコード
ソースコードは次の箇所からダウンロード可能です。
- WebGL Source (ZIPファイル)
- Flash Source (ZIPファイル)
2013年01月16日(水) 19:55
ソース見たのですが、three.jsのジオメトリを作成している部分をforの外に出すと、だいぶパフォーマンスが改善しました。
(PCにもよるかもですが、Box10648で約30fps)
それでもflashのが速い事実は変わらないのですが、ご報告まで。
2013年01月16日(水) 21:43
The three.js is not optimal. You should move the geometry creation outside of the loop and reuse it.
var geometry = new THREE.CubeGeometry(30, 30, 30, 1, 1, 1);
var texture = new THREE.ImageUtils.loadTexture(‘imgs/image.png’);
var material = new THREE.MeshBasicMaterial({map:texture});
// Box
for (var i = 0; i < CELL_NUM; i++)
{
for (var j = 0; j < CELL_NUM; j++)
{
for (var k = 0; k < CELL_NUM; k++)
{
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = 50 * (i – CELL_NUM / 2);
mesh.position.y = 50 * (j – CELL_NUM / 2);
mesh.position.z = 50 * (k – CELL_NUM / 2);
container.add(mesh);
}
}
}
2013年01月16日(水) 23:44
> 匿名-san, Mr.doob
Sorry, I just take a mistake.
I should move the code of geometry creation to outside of the loop.
Fixed Demo
http://clockmaker.jp/labs/130101_webgl_cubes/index_fix.html
I will add the correct sentence in this article.
2013年01月17日(木) 03:12
The experiment is a big bluff. Authors Flash demo source contains 2 applications: PrimitiveCubes and ParticleCubes.
PrimitiveCubes does it fairly, closely resembling WebGL demo source.
ParticleCubes bakes all geometry into a single object, using ParticleGeometryHelper:
mesh = new Mesh(ParticleGeometryHelper.generateGeometry(geometrySet), material);
Now look at the address of the demo:
http://clockmaker.jp/labs/130101_away3d_cubes/bin-release/ParticleCubes1331.html
The demo shows 1 (!one!) object exactly at 60fps. Not a big deal 🙂
Try the following link for a proper comparison:
http://clockmaker.jp/labs/130101_away3d_cubes/bin-release/PrimitiveCubes.html
My windows machine now shows 15900 polygons instead of 514500. Each cube has 12 polygons, hence it renders approximately 1325 objects. Keep in mind that Stage3D uses native DirectX, while WebGL call may be translated to DirectX.
2013年01月17日(木) 08:44
Is that correct to compare the use of a particle system in Away3D with array of primitives in Three.js?
If I understand correctly (I’m not an expert on Away3D), then in case of a particles system, the geometry of all cubes is merge into a single object and then sends to a render. Is that right?
If it is, then would be better to compare http://clockmaker.jp/labs/130101_away3d_cubes/bin-release/ParticleCubes.html with something like http://alteredqualia.com/three/examples/webgl_buffergeometry_perf.html
And http://clockmaker.jp/labs/130101_away3d_cubes/bin-release/PrimitiveCubes.html with http://clockmaker.jp/labs/130101_webgl_cubes/index_fix.html
Correct me please if I get it wrong. 🙂
2013年01月17日(木) 08:51
自分の環境penDではFlashは1fps未満、HTMLは30fpsでました
この手の他の比較テストもいくつか見ましたが、HTMLの方が高速でした
どうやらGPUが強力な環境だとFlashが勝るようです
この辺りブラウザのGPU対応がまだまだということなのでしょうね
2013年01月17日(木) 11:23
To DzmitryM, Sombressoul
I’m sorry that I don’t know feature of marge geometry in threejs. I made the example of marge geometry version.
http://clockmaker.jp/labs/130101_webgl_cubes/index_opt.html
As Sombressoul say, these demo should be compared in best optimum version or simple usage version.
2013年01月17日(木) 11:27
>名無しさん
コメントありがとうございます。
もしかしたらですが、FlashのほうがGPUが有効になっておらずソフトウェアレンダリング(CPU)で描画されているのかもしれません。可能性として
(1) Flash Player のハードウェアアクセラレーションの設定を明示的にOFFにしている
(2) Flash PlayerのGPUサポートするグラフィックボードドライバに該当しないため、暗黙的にハードウェアアクセラレーションが無効になっている
環境がpenDということで古いマシンだと推測すると(2)の可能性がありますが、(1)の設定も念の為ご確認をお願いできませんでしょうか?
2013年01月17日(木) 15:35
This stage3D 30x faster than webgl misunderstanding has spread like wildfire-FUD in some parts of the flashcommunity… Hope the “corrections” spread equally.. :S
Rule of thumb, if something seems too good to be true, it probably is.