タグ

Three.jsと開発に関するtoshi3221のブックマーク (2)

  • WebGL対応のライブラリThree.jsを爆速にする方法 | ClockMaker Blog

    前回のWebGL(Three.js)とStage3D(Away3D)の比較ですが、Mr.doobさんを始め国内外の多くの方からご指摘頂きWebGL(Three.js)版を最適化したところ、最終的にはFlash(Away3D)版と同じぐらいのパフォーマンスになりました。当初、最適化・検証不足で間違った情報を掲載してしまい申し訳ありませんでした。 さて、そのWebGL(Three.js)版を最適化した手法が有意義だったのでシェアしたいと思います。 デモの紹介 まずはこちらの2つのデモの再生を比較してみてください。WebGL対応のブラウザ(例:Google Chrome)でご覧ください。 ▼最適化前 ▼最適化後 どうでしょう? 圧倒的に後者のほうが滑らかに再生できているのではないかと思います。 後者のほうは配置している3Dのオブジェクト数が10倍近く多いにもかかわらずです。 ※ちなみにFlash

    WebGL対応のライブラリThree.jsを爆速にする方法 | ClockMaker Blog
    toshi3221
    toshi3221 2015/07/25
    THREE.GeometryUtils.merge()でジオメトリを結合して描画コールを減らす
  • 多彩な表現力のWebGLを扱いやすくする「Three.js」

    多彩な表現力のWebGLを扱いやすくする「Three.js」:Webグラフィックをハックする(5)(1/5 ページ) Three.jsはWebGLの冗長な仕様をうまくラップし、扱いやすいインターフェイスで提供するライブラリだ。サンプルコードと見比べながら、効率良く学習しよう Three.jsの基礎 連載も5回目を迎え、いよいよ佳境に入ります。今回の題材は、Webブラウザ上で3次元グラフィックを実現する「WebGL」です。ただし、これまでと違ってAPIを直接は触れず、「Three.js」を利用します。Three.jsはWebGLの冗長な仕様をうまくラップし、扱いやすいインターフェイスで提供するライブラリです。Mr.Doob氏を中心にオープンソースで開発が進められており、WebGL界隈ではデファクトスタンダードに近い地位を築いています。 Three.jp公式サイト WebGLはこれまで解説し

    多彩な表現力のWebGLを扱いやすくする「Three.js」
  • 1