Ir al contenido principal

Materiales

Introducción​

En esta sección se explica cómo utilizar los materiales en Studio.

Tipos de material​

Material o Material estándar​

Un material estándar PBR.

Ver propiedades aquí.

Material no iluminado​

El material no se ve afectado por la iluminación ni las sombras. El color se mantiene consistente, sin soporte para Physical Based Rendering (PBR).

Ver propiedades aquí.

Propiedades de los materiales​

Los materiales pueden configurarse mediante código o directamente en el componente Malla del editor.

Configuración de materiales mediante código​

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"
})

Cargar una textura​

Cargar una textura requiere un asset o una url independiente que sirva una imagen. Puedes visitar la sección de la API sobre Material y Material no iluminado para obtener más información sobre los distintos tipos de mapas de textura compatibles.

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)
            })
    }
})

Materiales especiales​

Material de sombra​

Material que sólo se renderiza cuando se proyecta una sombra sobre él.

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

Material del ocultador​

Material que oculta cualquier objeto que se encuentre detrás de él.

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