BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Adobe FlashをHTML 5で代替するPixi.jsがWebGLを新たにサポート、クロスプラットフォームとインタラクティブアプリに対応

Adobe FlashをHTML 5で代替するPixi.jsがWebGLを新たにサポート、クロスプラットフォームとインタラクティブアプリに対応

原文(投稿日:2019/05/31)へのリンク

Adobe Flashの標準ベースのオープンソース代替品であるPixiJSが先頃、5番目のメジャーバージョンをリリースした。PixiJS v5では、大規模なWebGL機能セットを新たなAPIで抽象化すると同時に、必要に応じてHTML5のcanvasにフォールバックする。これによって開発者は、WebGL APIを操作したり、ブラウザやデバイスの互換性に配慮する必要なく、リッチでインタラクティブなグラフィックス、クロスプラットフォームアプリケーション、ゲームを開発することが可能になる。ファーストクラスのWebGLサポート以外にも、新たなPixiJSは、グラフィックスとスプライトのレンダリングの高速化、GPU使用率の低下、フィルターとテクスチャのアップグレードを特徴としている。

"The HTML5 Creation Engine"と呼ばれるPixiJSは、Adobe Flashを彷彿とさせる、リッチグラフィックスなどのインタラクティブコンテンツを簡単に作成するためのレンダリングライブラリだ。それと同時に、パフォーマンスや開発者エクスペリエンスも重視している。PixiJSチームによれば、

このプロジェクトの目的は、すべてのデバイスで機能する、高速かつ軽量な2Dライブラリを提供することです。PixiJSレンダラにより、WebGLの予備知識がなくても、誰でも、ハードウェアアクセラレーションのパワーを享受できます。しかも高速です。本当に速いのです。

PixiJS v5はWebGLを完全にサポートしており、WebGLが利用できない場合はHTML5のcanvasにフォールバックする。一方でPixiJS v5は、中間レベルAPIの背後にある低レベルのWebGL機能を抽象化することで、利用可能な場合にベースとなるWebGLレイヤを自動的に最適化する。具体的には、中間レベルのAPIにGeometryShaderStateの各アスペクトが含まれており、特定の時点でのグラフィックを定義するMeshの定義に活用している。イベントハンドラを追加し、Meshプロパティを変更することで、最終的なインタラクティブグラフィックスが生成される仕組みだ。Pixiのドキュメントには以下のような、50行のコードから生成される回転テクスチャトライアングルの例が紹介されている。

const app = new PIXI.Application();
document.body.appendChild(app.view);

const geometry = new PIXI.Geometry()
    .addAttribute('aVertexPosition', // the attribute name
        [-100, -100, // x, y
            100, -100, // x, y
            100, 100], // x, y
        2) // the size of the attribute

    .addAttribute('aColor', // the attribute name
        [1, 0, 0, // r, g, b
            0, 1, 0, // r, g, b
            0, 0, 1], // r, g, b
        3) // the size of the attribute

    .addAttribute('aUvs', // the attribute name
        [0, 0, // u, v
            1, 0, // u, v
            1, 1], // u, v
        2); // the size of the attribute

const vertexSrc = `

    precision mediump float;

    attribute vec2 aVertexPosition;
    attribute vec3 aColor;
    attribute vec2 aUvs;

    uniform mat3 translationMatrix;
    uniform mat3 projectionMatrix;

    varying vec2 vUvs;
    varying vec3 vColor;

    void main() {

        vUvs = aUvs;
        vColor = aColor;
        gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);

    }`;

const fragmentSrc = `

    precision mediump float;

    varying vec3 vColor;
    varying vec2 vUvs;

    uniform sampler2D uSampler2;

    void main() {

        gl_FragColor = texture2D(uSampler2, vUvs) * vec4(vColor, 1.0);
    }`;

const uniforms = { uSampler2: PIXI.Texture.from('examples/assets/bg_scene_rotate.jpg') };

const shader = PIXI.Shader.from(vertexSrc, fragmentSrc, uniforms);

const triangle = new PIXI.Mesh(geometry, shader);

triangle.position.set(400, 300);
triangle.scale.set(2);

app.stage.addChild(triangle);

app.ticker.add((delta) => {
    triangle.rotation += 0.01;
});

これに対して、次のような単純かつ静的で、無色のシーンでも、

WebGL APIへの40回以上のアクセスを含む、120行以上のコードが必要になる場合がある。

WebGL(Web Graphics Library用)は、汎用目的で低レベルな、オープンソースのグラフィックWeb APIだ。 WebGLのコマンドは、グラフィックスプロセッシングユニット(GPU)の機能セットに直接タップするように設計されている。GPUは、並列動作するように設計された多数の計算ユニットで構成される超並列プロセッサであり、CPUと並列的に動作する。WebGLは主に、プラグインを使用せずにWebGLをサポートするブラウザ内において、2次元グラフィックスやインタラクティブな3次元グラフィックスをレンダリングするために使用される。WebGLのプログラムは、JavaScriptで記述された制御コードと、フレームバッファーを含む特殊効果コード(シェーダコード)で構成される。

WebGLレンダリングはパイプラインプロセスである。WebGLで視覚化するシーンは、3つの頂点で構成される三角形( テッセレーション )に分割される。パイプラインの最初のステージ(頂点シェーディング)では、三角形を取得して、それが描画されるキャンバス座標の計算を行う。WebGL canvasは3次元のキャンバスで、3軸すべてが-1.0から+1.0の値を取る。三角形はラスタライズされ(2番目のパイプラインフェーズ)、フラグメントシェーダによってペイントされ(3番目のフェーズ)、三角形の各ピクセルに色、深度、その他の関連プロパティが関連付けられる。マッピング結果はWebGLフレームバッファに保存されることで、深度テストやブレンドといったフレームバッファ操作の適用が可能になる(第4フェーズ)。

GPUとCPUの間の通信は高価なものになる可能性があるため、グラフィックスレンダリングの最適化には、GPUの並列使用の最大化と、GPUとCPU間の同期操作の最小化が含まれる。 PixiJS v5では、開発者エクスペリエンスを向上させるために、これをバックグラウンドで実現するバッチ処理とキャッシュ技術を加えている。

さらにPixiJS v5では、GPUの使用率低減と、フィルタとテクスチャのアップグレードも行われた。

PixiJSは、MITライセンス下でリリースされている。

この記事に星をつける

おすすめ度
スタイル

BT