本文へスキップ

材料

はじめに​

このセクションでは、スタジオでのマテリアルの使用方法について説明します。

素材の種類​

素材または標準素材​

標準的なPBR素材。

物件を見る こちら.

照明なし素材​

照明や影の影響を受けない素材。 カラーは一貫性を保ち、フィジカル・ベース・レンダリング（PBR）はサポートしない。

物件を見る こちら.

材料特性​

マテリアルはコードを通して、またはエディターのMeshコンポーネント内で直接設定することができます。

material-properties.png

コードによる素材の設定​

ecs.Material.set(world, component.eid, {
  r: 255,
  g: 128,
  b: 64,
  roughness: 0.5,
  metalness: 0.8,
  opacity: 1.0,
  side: "front"
})

ecs.UnlitMaterial.set(world, component.eid, {
  r: 255,
  g: 0,
  b: 128,
  opacity: 1.0,
  side: "double"
})

テクスチャを読み込む​

テクスチャを読み込むには、アセットまたは画像を提供する独立したURLが必要です。 サポートされているさまざまなタイプのテクスチャマップの詳細については、マテリアルとアンライトマテリアルのAPIセクションを参照してください。

import * as ecs from '@8thwall/ecs'

ecs.registerComponent({
    name: 'apply-texture-to-material',
    schema: {
        // @asset
        myTexture: ecs.string,
    },
    add: (world, component) => {
        const { myTexture } = component.schemaAttribute.get(component.eid)
        ecs.assets.load({ url: myTexture })
            .then((result) => {
                ecs.Material.set(world, component.eid, {
                    r: 255,
                    g: 128,
                    b: 64,
                    textureSrc: `${result.remoteUrl}`,
                    roughness: 0.5,
                    metalness: 0.8,
                    opacity: 1.0,
                    side: "back"
                })
            })
            .catch((error) => {
                console.error('Failed to load texture:', error)
            })
    }
})

特殊素材​

シャドー素材​

影がかかったときだけレンダリングするマテリアル。

注：これを機能させるには、3つの設定がオンになっている必要があります：

  1. ライトの「キャストシャドウ」を有効にする
  2. 影素材オブジェクトの「影を受け取る」を有効にする。
  3. 影を落とすオブジェクト（下の画像の赤いボール）にも影を落とす必要がある。

shadow-material.png

ecs.ShadowMaterial.set(world, component.eid, {r: 0, g: 250, b: 0, opacity: 1, side: 'front', depthTest: true, depthWrite: true})

ハイダー素材​

背後のオブジェクトを隠す素材。

hider-material.png

ランタイムのカメラパース：

hider-material-result.png

ecs.HiderMaterial.set(world, component.eid)