WebGL ドキュメントの作成とパブリッシュ

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

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

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

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

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

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

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

アニメーションの GLTF および GLB 形式への変換

WebGL-glTF および GLB は、ファイルサイズおよびランタイム処理を減らします。Animate では、両方の形式のドキュメントを使用できます。両方の形式でビデオを使用したい場合は、この例の最後にあるチュートリアルを参照して、次の手順に従ってください。

Animate での WebGL GLTF の書き出しを使用した高度なアニメーションの作成方法

Animate 18.0 以前のバージョン

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

WebGL ドキュメントタイプ

Animate では、インタラクティブなリッチコンテンツを作成して 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 では、WebGL ドキュメントを使用して、WebGL 形式のコンテンツをすばやく作成してパブリッシュできます。WebGL ドキュメントを作成するには、次の操作を行います。

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

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

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

1. Animate で、Ctrl + Enter キー（Windows）または Command + Enter キー（MAC）を押します。これにより、デフォルトブラウザーが起動し、WebGL コンテンツがレンダリングされます。

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

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

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

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

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

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

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

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

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

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

WebGL 出力について

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

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

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

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 は、その機能がサポートされていないことを視覚的に示します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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