HTML5関連技術のWebGL(three.js)とFlash(Away3D)のパフォーマンス比較

HTML5関連技術であるWebGL (three.js ライブラリを使用)でどれだけのオブジェクトを表示できるのか気になったので、Flash(Away3Dライブラリを使用)とパフォーマンスを比較してみました。WebGL対応ブラウザであるGoogle ChromeやFirefox等でご覧ください。

訂正

※[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追記] 再度検証しなおしました。)

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のブラウザ対応状況をまとめておきました。

参照:Can I use WebGL

ソースコード

ソースコードは次の箇所からダウンロード可能です。

投稿者 : 池田 泰延

BookMark

いかがでしたでしょうか、ブックマークはこちらからどうぞ。

このエントリーをはてなブックマークに追加

Comment/Trackback 9件

  • 匿名 より:

    ソース見たのですが、three.jsのジオメトリを作成している部分をforの外に出すと、だいぶパフォーマンスが改善しました。
    (PCにもよるかもですが、Box10648で約30fps)

    それでもflashのが速い事実は変わらないのですが、ご報告まで。

  • Mr.doob より:

    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);
    }
    }
    }

  • 池田 泰延 より:

    > 匿名-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.

  • DzmitryM より:

    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.

  • Sombressoul より:

    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. :-)

  • 名無し より:

    自分の環境penDではFlashは1fps未満、HTMLは30fpsでました
    この手の他の比較テストもいくつか見ましたが、HTMLの方が高速でした
    どうやらGPUが強力な環境だとFlashが勝るようです
    この辺りブラウザのGPU対応がまだまだということなのでしょうね

  • 池田 泰延 より:

    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.

  • 池田 泰延 より:

    >名無しさん
    コメントありがとうございます。
    もしかしたらですが、FlashのほうがGPUが有効になっておらずソフトウェアレンダリング(CPU)で描画されているのかもしれません。可能性として

    (1) Flash Player のハードウェアアクセラレーションの設定を明示的にOFFにしている
    (2) Flash PlayerのGPUサポートするグラフィックボードドライバに該当しないため、暗黙的にハードウェアアクセラレーションが無効になっている

    環境がpenDということで古いマシンだと推測すると(2)の可能性がありますが、(1)の設定も念の為ご確認をお願いできませんでしょうか?

  • anon より:

    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.