メインコンテンツまでスキップ

<pc-asset>

<pc-asset>タグは、アセットを定義するために使用されます。

使用法
  • <pc-app>の直接の子である必要があります。

属性​

属性タイプデフォルト説明
address-uEnum"repeat"texture および textureatlas アセットの場合: 0から1の範囲外の座標を水平方向にどうサンプリングするか — "repeat" | "clamp" | "mirror"
address-vEnum"repeat"texture および textureatlas アセットの場合: 0から1の範囲外の座標を垂直方向にどうサンプリングするか — "repeat" | "clamp" | "mirror"
anisotropyNumber"1"texture および textureatlas アセットの場合: 異方性フィルタリングの最大レベル。浅い視野角での品質が向上します
atlasString-sprite アセットの場合: このスプライトが読み込む textureatlas <pc-asset> の id。アトラスはスプライトより前に宣言する必要があります
dataString-インラインのJSONアセットデータ。テクスチャアトラス（フレーム定義）やスプライトで使用されます
flip-yBoolean"false"texture および textureatlas アセットの場合: アップロード時に画像データを垂直方向に反転するかどうか
frame-keysString-sprite アセットの場合: スプライトを構成するアトラスのフレームキーを、スペースまたはカンマ区切りで指定したリスト
idString-他のタグがこのアセットを参照するために使用する一意の識別子
lazyBoolean"false"プリロードをスキップするかどうか。lazyなアセットは<pc-model>、<pc-particles>、<pc-sky>、<pc-material>のテクスチャマップによってオンデマンドでロードされます — その他の要素はロードをトリガーしません
mag-filterEnum"linear"texture および textureatlas アセットの場合: テクスチャが元のサイズより大きく表示されるときに使用されるフィルター — "nearest" | "linear"
min-filterEnum"linear-mip-linear"texture および textureatlas アセットの場合: テクスチャが元のサイズより小さく表示されるときに使用されるフィルター — "nearest" | "linear" | "nearest-mip-nearest" | "linear-mip-nearest" | "nearest-mip-linear" | "linear-mip-linear"
mipmapsBoolean"true"texture および textureatlas アセットの場合: テクスチャがミップマップを生成して使用するかどうか
pixels-per-unitNumber"1"sprite アセットの場合: ワールドユニットあたりのピクセル数
render-modeEnum"simple"sprite アセットの場合: "simple" | "sliced" | "tiled"。9スライスパネルには "sliced" を使用します
srcString-アセットファイルへのパス
srgbBoolean"false"texture および textureatlas アセットの場合: テクスチャがsRGB（ガンマエンコードされた）カラーデータを保持するかどうか。ハードウェアによるガンマデコードが有効になります
typeEnuminferredアセットタイプ："audio" | "binary" | "css" | "container" | "font" | "gsplat" | "html" | "json" | "script" | "shader" | "sprite" | "text" | "texture" | "textureatlas"
これらが読み取られるタイミング

lazyとテクスチャオプションはライブです。変更するとアセットが更新され、削除すると上の表に示したエンジンのデフォルト値が復元されます。その他のすべての属性はアセットが作成されるときに一度だけ読み取られるため、後から変更しても効果はありません。

アセットのタイプに適用されない属性を設定した場合 — 例えばオーディオアセットにテクスチャオプションを設定した場合や、スプライト以外にframe-keysを設定した場合 — 無視した属性を列挙するコンソール警告が出力されます。

テクスチャオプション​

テクスチャオプションはテクスチャが作成されるときに適用され、それぞれがdata JSONの対応するキーをオーバーライドします。設定しなかったオプションは何も書き込まないため、エンジンのフォーマットごとのデフォルト値 — HDRファイルのrgbeエンコードや、KTX2ファイルが選択したトランスコード先フォーマットなど — がそのまま有効になります。したがって、実際に必要なオプションだけを設定する価値があります。

これらのオプションはすでに読み込まれたテクスチャにも適用されるため、開発者ツールから試すのに便利です。ただし2つは他より高コストです。読み込み済みのテクスチャでsrgbまたはmipmapsを変更すると、背後にあるGPUリソースが再作成されるため、これらはマークアップ側で最初から宣言することをおすすめします。

<!-- くっきりしたピクセルアートのテクスチャ: フィルタリングとミップマップなし、端をクランプ -->
<pc-asset id="sprite-sheet" src="assets/textures/tiles.png"
          min-filter="nearest" mag-filter="nearest" mipmaps="false"
          address-u="clamp" address-v="clamp"></pc-asset>

<!-- タイリングする地面のテクスチャ。浅い角度でもシャープに -->
<pc-asset id="ground" src="assets/textures/gravel.jpg" anisotropy="16"></pc-asset>

タイプの推論​

typeを省略した場合、srcのファイル拡張子から推論されます:

タイプ拡張子
audio.mp3
binary.bin
container.glb, .gltf
css.css
gsplat.ply, .sog
html.html
json.json
script.js, .mjs
shader.frag, .glsl, .vert
text.txt
texture.hdr, .jpg, .ktx2, .png, .webp

それ以外の拡張子、またはfont、sprite、textureatlasなど推論の対象外のタイプでは、明示的なtype属性が必要です。

イベント​

これらのイベントは、addEventListener()を使用するか、このインターフェースのoneventnameプロパティにイベントリスナーを割り当てることでリッスンできます。

イベント説明
loadアセットの読み込みが完了するたびに発生します。後から読み込まれるlazyアセットや、その後の再読み込みも含みます。
errorアセットの読み込みが失敗したときに発生するErrorEventで、エンジンのエラーがmessageに入ります。

どちらのイベントもバブリングしないため、要素自身でリッスンしてください。あるいは、<pc-app>が保持するすべてのアセットを監視するには、<pc-app>でキャプチャフェーズのリスナーを使用します。

document.querySelector('pc-app').addEventListener('error', (event) => {
    console.warn(`${event.target.id} failed to load: ${event.message}`);
}, true);

読み込みが失敗した場合でも要素はreadyになります。readyであることは読み込みが決着したことを意味し、成功したことを意味しません。

例​

<pc-app>
    <!-- スクリプトアセット -->
    <pc-asset src="assets/scripts/animate.mjs"></pc-asset>
    <!-- GLBアセット -->
    <pc-asset src="assets/models/car.glb" id="car"></pc-asset>
</pc-app>

スプライトは、テクスチャアトラス（フレーム定義を保持）と、それを参照する1つ以上の sprite アセットによって定義されます。アトラスは、それを使用するスプライトより前に宣言する必要があります。

<pc-app>
    <!-- テクスチャアトラス（インラインのフレーム定義付き） -->
    <pc-asset id="ui-sheet" type="textureatlas" src="assets/textures/ui.png"
              data='{"frames":{"3":{"name":"panel","border":[10,10,10,10],"rect":[41,1,100,100],"pivot":[0.5,0.5]}}}'></pc-asset>
    <!-- アトラスからフレーム "3" を読み込む9スライススプライト -->
    <pc-asset id="panel" type="sprite" atlas="ui-sheet" frame-keys="3" render-mode="sliced"></pc-asset>
</pc-app>

JavaScriptインターフェース​

AssetElement APIを使用して、<pc-asset>要素をプログラムで作成および操作できます。