WebGL とは

WebGL は、プラグインを追加することなく互換ブラウザー上でグラフィックをレンダリングするためのオープン Web スタンダードです。WebGL は、Web スタンダードであるすべてのブラウザーに完全に統合され、Web ページキャンバスの一部として、画像処理および効果の使用を加速する GPU を活用できます。WebGL エレメントは他の HTML エレメントに埋め込んで、ページの他の部分と合成することができます。

最新ブラウザーのほとんどで WebGL がサポートされますが、サポートされる正確なバージョンについて詳しくは、このリンクを参照してください。

一部のブラウザーでは、WebGL がデフォルトで有効になっていません。ご使用のブラウザーで WebGL を有効にするには、この記事を参照してください。

注意:

お使いのブラウザーで WebGL が有効であることを確認してください。一部のブラウザーでは WebGL がデフォルトで無効になっているからです。

WebGL- glTF ドキュメントタイプ(ベータ版)の使用

Animate CC には、2 つの WebGL-glTF ドキュメントタイプがあります。WebGL- glTF Standard ドキュメントタイプを使用して、どの標準 WebGL- glTF パッケージとも統合することができます。標準に完全に準拠しています。

  1. WebGL- glTF ベースのドキュメントを作成するには、ホーム画面の「詳細設定」インテントから WebGL- glTF Standard または WebGL- glTF Extended を選択します。

    WebGL-glTF ドキュメントタイプ
    WebGL-glTF ドキュメントタイプ
  2. 要件に応じて幅、高さ、単位を指定し、「作成」を選択します。

WebGL-glTF ファイルのパブリッシュ

  1. プロパティインスペクターの「プロパティ」を選択します。

    WebGL-glTF ファイルをパブリッシュ
    WebGL-glTF ファイルをパブリッシュ
  2. 出力名」テキストボックスに名前を入力します。

    WebGL- glTF 標準ドキュメントタイプのパブリッシュ設定ダイアログ
    WebGL- glTF 標準ドキュメントタイプのパブリッシュ設定ダイアログ
  3. 「形式」オプションで GLB または GLTF を選択します。

  4. 「画像解像度」テキストボックスで 10 進数字(1 ~ 3 )を指定します。

  5. ファイルサイズを減らすには、JSON ファイルの空白を削除にチェックを入れます。

  6. デフォルトでは、標準のオプション(タイムラインをループおよび非表示レイヤーを含める)が選択されています。小さなエラーを見つけるには、それらをオフにすることができます。

  7. パブリッシュ」ボタンをクリックしてファイルをパブリッシュします。

WebGL- glTF (Standard および Extended) に関するビデオチュートリアル

WebGL- glTF (Standard および Extended) に関するビデオチュートリアル
WebGL-glTF Export(Standard および Extended)の使用方法を示すビデオ

Animate CC18.0 以前のバージョン

Animate CC または以前のバージョンの Animate CC を使用している場合は、次のコンテンツを参照できます。

The WebGLドキュメントタイプ

Animate CC では、インタラクティブなリッチコンテンツを作成して Web Graphics Library(WebGL)形式でパブリッシュできます。WebGL は、ブラウザーに完全に統合されるので、Animate は、Web ページキャンバスの一部として、グラフィックの処理およびレンダリングの使用を加速する GPU を活用できます。

この新しいドキュメントタイプを使用すると、コンテンツを作成してすぐに WebGL 出力にパブリッシュできます。Animate 内の強力なツールを活用してリッチコンテンツを作成しながらも、すべての互換ブラウザー上で実行される WebGL 出力をレンダリングできます。そのため、従来形式の Animate のタイムライン、ワークスペースおよび描画ツールを使用して、WebGL コンテンツをネイティブにオーサリングして生成できます。一般的に使用されているほとんどのブラウザーが WebGL をサポートしているので、Animate でほとんどの Web プラットフォーム上のコンテンツをレンダリングできます。

注意:

WebGL のサポートはプレビュー目的でのみ利用可能です。この Animate のアップデートには、サウンド、スクリプトおよび一連のインタラクティブ機能を使用する基本アニメーション向けのサポートが含まれます。今後の Animate リリースで、WebGL ドキュメントタイプ向けに有効となる機能が追加される予定です。WebGL 向けにサポートされる Animate 機能の一覧については、KB の記事を参照してください。

WebGL ドキュメントの作成

Animate CC では、WebGL ドキュメントを使用して、WebGL 形式のコンテンツをすばやく作成してパブリッシュできます。WebGL ドキュメントを作成するには、次の操作をおこないます。

  1. Animate CC を起動します。
  2. ようこそ画面で、「WebGL (プレビュー)」オプションをクリックします。または、ファイル新規メニューオプションを選択して、新規ドキュメントダイアログを表示します。「WebGL (プレビュー)」オプションをクリックします。

ブラウザーでの WebGL コンテンツのプレビュー

Animate のムービープレビュー機能を使用して、コンテンツをプレビューまたはテストできます。プレビューするには、次の操作をおこないます。

  1. Animate CC で、Ctrl + Enter キー(Windows)または Command + Enter キー(MAC)を押します。これにより、デフォルトブラウザーが起動し、WebGL コンテンツがレンダリングされます。
Animate CC では、WebGL コンテンツを実行するための Web サーバーが必要です。Animate CC には、WebGL コンテンツをポート番号 8090 で実行するように設定された Web サーバーが組み込まれています。他のサーバーがこのポートを既に使用している場合は、Animate により競合が自動的に検出され解消されます。

WebGL 形式でのコンテンツのパブリッシュ

Animate では、WebGL コンテンツをツール内でネイティブに作成してパブリッシュできます。

WebGL ドキュメントをパブリッシュするには、次の操作をおこないます。

  1. ファイル パブリッシュ設定を選択し、パブリッシュ設定ダイアログを表示します。または、ファイルパブリッシュを選択します(既に WebGL のパブリッシュ設定を行っている場合)。
  2. パブリッシュ設定ダイアログで、次の値を指定します。

出力ファイル

出力ファイルの分かりやすい名前を入力します。また、WebGL 出力のパブリッシュ先を参照して指定するか、入力します。

HTML を上書き

WebGL プロジェクトをパブリッシュするたびに HTML ラッパーを上書きするかどうかを指定できます。パブリッシュされた HTML ファイルに対して既に外部で変更を加えており、Animate CC でアニメーションやアセットに対する変更を更新する際にその変更を保持する場合は、このチェックボックスをオフにします。

非表示レイヤーを含める

すべての非表示レイヤーが WebGL 出力に含まれるようになります。「非表示レイヤーを含める」をオフにすると、ムービークリップ内でネストされているレイヤーを含めて、非表示になっているすべてのレイヤーは、作成される WebGL に書き出されません。レイヤーを非表示にすることによって、WebGL ドキュメントの各バージョンを簡単にテストすることができます。

タイムラインをループ

コンテンツが最後のフレームまで来ると最初から繰り返して再生されます。フレームの最後でコンテンツを停止する場合は、このオプションをオフにします。

webGL_publishSettings
  1. 「パブリッシュ」をクリックして、指定した場所に WebGL コンテンツをパブリッシュします。

注意:

ブラウザーで実行される WebGL コンテンツに指定可能な最大 FPS は 60 FPS です。

WebGL 出力について

パブリッシュされた WebGL 出力には次のファイルが含まれます。

HTML ラッパーファイル

このファイルにはランタイムが含まれます。また、このファイルはアセットを呼び出し、WebGL レンダラーの初期化もおこないます。ファイル名はデフォルトで <FLA_name>.html です。パブリッシュ設定ダイアログ(ファイル/パブリッシュ設定)で、この HTML ファイルに別の名前を付けることができます。

この HTML ファイルは、デフォルトでは FLA と同じディレクトリに配置されます。パブリッシュ設定ダイアログで、別の場所を指定できます。

JavaScript ファイル(WebGL ランタイム)

WebGL 上でパブリッシュされたコンテンツをレンダリングします。WebGL ドキュメントの libs/ フォルダー内にパブリッシュされます。ファイル名は flwebgl-<version>.min.js です。

HTML ラッパーは、この JS ファイルを利用して WebGL コンテンツをレンダリングします。

テクスチャアトラス

ステージ上のビットマップインスタンスを含む、(シェイプの)すべてのカラー値が保存されます。

WebGL ドキュメントへのオーディオの追加

オーディオを読み込んで WebGL ドキュメントに埋め込み、同期設定(イベント、開始および停止)を使用して再生を制御し、実行時にタイムラインのオーディオを再生することができます。WebGL では現在、.wav 形式と .mp3 形式のみがサポートされます。

オーディオの操作について詳しくは、「Animate でのサウンドの使用」を参照してください。

既存のコンテンツの WebGL ドキュメントへの移行

Animate 内の既存のコンテンツを WebGL ドキュメントに移行できます。この目的のために、Animate では、コンテンツの手動によるコピーまたは読み込みによって、コンテンツを移行できます。また、Animate 内で複数のドキュメントを操作している場合は、複数のドキュメントに及ぶコンテンツをレイヤーまたはライブラリ内のアセットとしてコピーするのが一般的なプラクティスです。Animate のほとんどの機能がサポートされますが、WebGL 形式にさらに適応させるために、一部のコンテンツタイプが変更されます。

Animate には、視覚的にリッチなコンテンツを生成するための複数の強力な機能があります。ただし、それらの機能の一部は Animate 特有のものであり、WebGL ドキュメントではサポートされません。Animate は、そのようなコンテンツをサポートされる形式に変更し、サポートされないツールまたは機能については視覚的に示すように設計されています。

コピー

コンテンツ(レイヤーまたはライブラリシンボル)を従来形式の Animate ドキュメントタイプ(ActionScript 3.0、AIR for Android、AIR for Desktop など)から WebGL ドキュメントにコピーする場合。この場合、サポートされていないコンテンツタイプは、削除されるか、またはサポートされているデフォルトに変換されます。

例えば、3D アニメーションをコピーした場合、ステージ上のオブジェクトに適用されているすべての 3D 変形が削除されます。

読み込み

サポートされていないコンテンツを含む PSD または AI ファイルを読み込む場合。この場合、コンテンツは、削除されるか、またはサポートされているデフォルトに変換されます。

例えば、ぼかし効果が適用されている PSD ファイルを読み込むと、Animate では、その効果を削除します。

複数のドキュメントタイプでの作業

複数のドキュメントタイプ(例えば、ActionScript 3.0 と WebGL)で同時に作業し、サポートされていないツールまたはオプションを選択した状態でドキュメントを切り替えた場合。この場合、Animate CC は、その機能がサポートされていないことを視覚的に示します。

例えば、ActionScript 3.0 ドキュメント内で点線を作成した状態で、線ツールを選択したまま WebGL に切り替えます。ポインターおよびプロパティインスペクターでは、WebGL 内で点線がサポートされないことが視覚的に示されます。

スクリプト

アクションパネルで JavaScript コードを記述できます。このコードは、プレーヤーがフレームを開始した後に実行されます。フレームスクリプトのコンテキストにおける「this」変数は、それが属する MovieClip のインスタンスを指します。また、フレームのスクリプトでは、コンテナ HTML ファイルで宣言された JavaScript 関数および変数にアクセスできます。ActionScript ドキュメントからフレームまたはレイヤーをコピーして WebGL ドキュメントに貼り付けた場合、スクリプト(存在する場合)はコメントアウトされます。

移行後にコンテンツに適用される変更点

従来形式のコンテンツを WebGL ドキュメントに移行した場合に適用される変更のタイプを次に示します。

コンテンツが削除される

HTML5 Canvas でサポートされないコンテンツタイプは削除されます。次に例を示します。

フィルター

サポートされていません。効果は削除され、代わりにシェイプに単色の塗りが適用されます。

Filters
ぼかしフィルター効果が削除され、単色の塗りに置き換えられます。

サポートされるデフォルト値にコンテンツが変更される

コンテンツタイプまたは機能はサポートされますが、機能のプロパティはサポートされません。次に例を示します。

 

放射状グラデーション

主要な色を使用して、単色の塗りを適用するように変更されます。

Radial Gradient
放射状グラデーションは、主要な色を使用した単色の塗りに変更されます。

サポートされない機能の一覧および移行時におけるそれらのフォールバック値については、この記事を参照してください。

ビットマップキャッシュによるレンダリングパフォーマンスの向上

ランタイムビットマップキャッシュでは、静的なムービークリップ(背景イメージなど)やボタンシンボルを実行時にビットマップとしてキャッシュするように指定することにより、レンダリングパフォーマンスを最適化できます。デフォルトでは、ベクターアイテムはフレームごとに再描画されます。ムービークリップまたはボタンシンボルをビットマップとしてキャッシュすると、ブラウザー上でそのアイテムが連続して再描画されることがなくなります。これは、イメージがビットマップであり、位置が変更されないためです。この結果、WebGL コンテンツのレンダリングパフォーマンスが大幅に向上します。

例えば、複雑な背景を持つアニメーションを作成するときは、背景にすべてのアイテムが含まれたムービークリップを作成します。次に、プロパティインスペクターで、背景のムービークリップのビットマップとしてキャッシュを選択します。再生中、背景は、現在のスクリーン深度で保存されたビットマップとして描画されます。ビットマップがステージ上で素早く 1 回のみ描画されるので、アニメーションの再生が高速でよりスムーズになります。

ビットマップキャッシュを使用すると、所定の位置にムービークリップを自動的に「定着」させることができます。変更が生じた領域については、ベクターデータを使ってビットマップキャッシュが更新されます。これにより、ブラウザーで再描画処理が必要となる頻度が下がり、よりスムーズで高速なレンダリングパフォーマンスが得られます。

ムービークリップシンボルに対して「ビットマップとしてキャッシュ」プロパティを有効にするには、ムービークリップインスタンスを選択し、プロパティインスペクター(ウィンドウプロパティ)の「レンダリング」ドロップダウンで「ビットマップとしてキャッシュ」を選択します。

CacheAsBitmap

ビットマップとしてキャッシュを使用する場合の考慮事項

WebGL コンテンツで「ビットマップとしてキャッシュ」プロパティを使用する場合は、次の点について考慮してください。

  • ムービークリップシンボルの最大サイズは 2048 x 2048 に制限されます。WebGL では一部のピクセルが予約されているので、キャッシュ可能なムービークリップインスタンスの実際の上限は 2048 x 2048 よりも小さくなります。
  • 同じムービークリップのインスタンスが複数ある場合、最初に検出されたインスタンスのサイズでキャッシュが生成されます。ただし、そのキャッシュは再生成されず、ムービークリップが大幅に変形された場合にも、「ビットマップとしてキャッシュ」プロパティは無視されません。そのため、アニメーションの途中でムービークリップシンボルのサイズが大きく変化する場合、そのアニメーションでブロックノイズが発生しているように見えることがあります。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー