Materiales
Aprende cómo añadir materiales y texturas a entidades con formas primitivas.
Materiales
Los Materials pueden aplicarse a entities que usan formas primitivas (cube, sphere, plane, etc.) agregando un Material component. Este component tiene varios fields que te permiten configurar las properties del material, agregar una texture, etc.
glTF models incluyen sus propios materiales, que se importan implícitamente a una scene junto con el model. Para modificar o sobrescribir estos materials, usa GltfNodeModifiers component. Consulta Modificar materiales glTF para más detalles.
Al importar un modelo 3D con sus propios materials, ten en cuenta que no todos los shaders son compatibles con el engine de Decentraland. Solo se admiten materials estándar y materiales PBR (physically based rendering). Consulta consideraciones sobre modelos 3D externos para más detalles.
Hay diferentes tipos de materials compatibles:
PBR (Physically Based Rendering): El tipo de material más común en Decentraland. Admite colores planos o textures, y diferentes properties como metallic, emissive, transparency, etc. Lee más sobre PBR.
Materials básicos: no responden a las luces ni a las sombras, lo que los hace ideales para mostrar imágenes tipo billboard.
Usa el Scene Editor en Creator Hub
La forma más sencilla de darle a un entity un Material es usar el Scene Editor. Puedes agregar un Material component a tu entity y luego configurar todos los fields disponibles en la UI del Scene Editor. Consulta Add Components.
Agregar un material
El siguiente ejemplo crea un material PBR y configura algunos de sus fields para darle un color rojo y propiedades metálicas. Este material se agrega a un entity que también tiene una box shape, por lo que coloreará la box con este material.
//Crear entity y asignar shape
const meshEntity = engine.addEntity()
Transform.create(meshEntity, {
position: Vector3.create(4, 1, 4),
})
MeshRenderer.setBox(meshEntity)
//Crear material y configurar sus fields
Material.setPbrMaterial(meshEntity, {
albedoColor: Color4.Red(),
metallic: 0.8,
roughness: 0.1,
})Para cambiar el material de un entity que ya tiene un Material component, ejecuta Material.setPbrMaterial() o cualquiera de las otras funciones auxiliares y sobrescribirá el material original. No es necesario eliminar el Material original ni usar la sintaxis avanzada.
📔 Nota: El Material component debe importarse a través de
import { Material } from "@dcl/sdk/ecs"
Consulta Imports para ver cómo manejarlas fácilmente.
Colores de Material
Dale a un material un color plano. En un Material PBR, estableces el albedoColor field. Los colores albedo responden a la luz y pueden incluir sombras.
Los valores de color son de tipo Color4, compuestos por r, g y b values (rojo, verde y azul). Cada uno de estos acepta valores entre 0 y 1. Al establecer diferentes values para estos, puedes componer cualquier color visible. Para negro, establece los tres en 0. Para blanco, establece todos en 1.
📔 Nota: Si estableces cualquier color en albedoColor un valor superior a 10.5, se verá como emissive, con más intensidad cuanto mayor sea el valor. Así, por ejemplo, {r: 15, g: 0, b: 0} produce un resplandor rojo muy brillante.
Consulta tipos de color para obtener más detalles sobre cómo establecer colores.
También puedes editar los siguientes fields en un Material PBR para ajustar mejor cómo se percibe su color:
emissiveColor: El color emitido por el material.
reflectivityColor: también conocido como Specular Color en otra nomenclatura.
Para crear un material de color plano que no se vea afectado por la luz y las sombras del entorno, crea un basic material en lugar de un material PBR.
Usando texturas
Configura un archivo de imagen como texture en un material estableciendo el texture parámetro.
En el ejemplo anterior, la imagen del material está ubicada en una carpeta assets/materials que se encuentra en el nivel raíz de la carpeta del proyecto de la scene.
Mientras creas una texture, también puedes pasar parámetros adicionales:
filterMode: Determina cómo se estiran o comprimen los píxeles de la texture al renderizarse. Toma un valor delTextureFilterModeenum. Consulta Escalado de texturas.wrapMode: Determina cómo se repite una texture sobre un objecto. Toma un valor delTextureWrapModeenum. Consulta Envoltura de texturas.
Para crear una texture que no se vea afectada por la luz y las sombras del entorno, crea un basic material en lugar de un material PBR.
Texturas desde una URL externa
Puedes apuntar la texture de tu material a una URL externa en lugar de una ruta interna en el proyecto de la scene.
La URL debe comenzar con https, http las URLs no son compatibles.
Envoltura de texturas
Puedes definir cómo una texture se alinea con una surface. Por defecto, la texture se estira para ocupar la surface una vez, pero puedes escalarla y desplazarla.
Los siguientes fields están disponibles en todas las textures:
offset: Desplaza la texture para cambiar su alineación. El value es un Vector2, donde ambos ejes van de 0 a 1, siendo 1 el ancho o alto completo de la texture.tiling: Escala la texture. El value por defecto es el Vector 2[1, 1], lo que hace que la imagen se repita una vez cubriendo toda la surface.TextureWrapMode: Determina qué ocurre si el tiling de la imagen no cubre toda la surface. Esta property toma sus values delTextureWrapModeenum, lo que permite los siguientes values:TextureWrapMode.TWM_CLAMP: La texture solo se muestra una vez con el tamaño especificado. El resto de la surface de la mesh se deja transparente. El value detilingse ignora.TextureWrapMode.TWM_REPEAT: La texture se repite tantas veces como quepa en la mesh, usando el tamaño especificado.TextureWrapMode.TWM_MIRROR: Igual que en wrap, la texture se repite tantas veces como quepa, pero la orientación de estas repeticiones se refleja.
📔 Nota: El offset y tiling las properties solo son compatibles en el cliente de escritorio DCL 2.0.
Usa esta feature para cubrir una gran surface con un patrón repetido. Por ejemplo, repite la siguiente imagen:
En el siguiente ejemplo, la texture usa un mirror wrap mode, y cada repetición de la texture ocupa solo 1/4 de la surface. Esto significa que veremos 4 copias de la imagen, reflejadas entre sí en ambos ejes.
Tweens de texturas
Haz que una texture se deslice suavemente usando un Tween component, configurado con el modo TextureMove . El tween cambia gradualmente el value de las offset o la tiling properties de una texture durante un período de tiempo, de forma suave y optimizada.
📔 Nota: Los Texture Tweens son una feature que solo es compatible en el cliente de escritorio DCL 2.0.
Usa la Tween component con la función setTextureMove para mover la texture entre dos posiciones.
El texture tween toma la siguiente información:
entity: El entity al que mover la textureinicio: Un Vector2 para la posición inicialfinal: Un Vector2 para la posición finalduration: Cuántos milisegundos tarda en moverse entre las dos posiciones
También está disponible este otro parámetro opcional:
movementType: define si el movimiento será en eloffseto latilingfield. Por defecto usaoffset.easingFunction: La curva para la tasa de cambio a lo largo del tiempo; el value por defecto esEasingFunction.EF_LINEAR. Otros values hacen que el cambio acelere y/o desacelere a diferentes ritmos.
El ejemplo anterior ejecuta un tween que dura 1 segundo y mueve la texture solo una vez. Para lograr un movimiento continuo, por ejemplo para simular la caída de una cascada, necesitas usar setTextureMoveContinuous.
El ejemplo anterior usa setTextureMoveContinuous, con una dirección de (0, 1), y una velocidad de 1 unidad por segundo.
El texture continuous tween toma la siguiente información:
entity: El entity al que mover la texturedirection: Un Vector2 para el movimientospeed: Cuántas unidades por segundo se moverá el entity
También están disponibles estos otros parámetros opcionales:
movementType: define si el movimiento será en el field offset o en el field tiling. Por defecto usa offset.duration: Cuántos milisegundos mantener el movimiento. Después de este tiempo, el movimiento se detendrá.
Secuencias complejas de tween
También puedes hacer que los movimientos de la texture sigan una secuencia compleja con tantos pasos como quieras. Usa el sequence field para listar tantos tweens como quieras; se ejecutarán secuencialmente después del primer tween descrito en Tween component.
Ten en cuenta que, al definir un tween dentro de un TweenSequence, necesitas usar el formato más detallado de Tween.Mode.TextureMove para definir el tween.
Texturas multicapa
Puedes usar varios archivos de imagen como layers para componer textures más realistas, por ejemplo incluyendo un bumpTexture y un emissiveTexture.
La bumpTexture puede simular relieves y arrugas en una surface, modificando cómo se comportan los normals de la surface en cada píxel.
La emissiveTexture puede acentuar el resplandor en ciertas partes de un material para lograr efectos muy interesantes.
Configurar UVs
Otra alternativa para cambiar la escala o la alineación de una texture es configurar las properties uv en el component MeshRenderer.
Estableces u y v coordinates en la imagen 2D de la texture para que correspondan a los vertices de la shape. Cuantos más vertices tenga el entity, más uv coordinates deberán definirse en la texture; por ejemplo, un plane necesita tener 8 uv points definidos, 4 para cada una de sus dos faces.
El siguiente ejemplo incluye una function que simplifica la configuración de uvs. La setUVs function definida aquí recibe un número de rows y cols como parámetros, y configura las uvs para que la imagen de la texture se repita un número específico de veces.
Para configurar los UVs de una box mesh shape, se aplica la misma estructura. Cada una de las 6 faces del cube toma 4 pares de coordinates, uno para cada esquina. Los 48 values se listan como un único array.
📔 Nota: Las properties UV actualmente solo están disponibles en plane y en box shapes. Además, uv los values afectan por igual a todas las capas de texture, ya que se establecen en la shape.
Escalado de texturas
Cuando las textures se estiran o se reducen a un tamaño diferente del de la imagen original de la texture, esto a veces puede crear artefactos. En un entorno 3D, los efectos de la perspectiva hacen que esto ocurra de forma natural. Existen varios algoritmos de filtrado de texturas que existen para compensarlo de diferentes maneras.
La Material object usa el bilinear algoritmo por defecto, pero te permite configurarlo para usar los algoritmos de vecino más cercano o trilineal en su lugar estableciendo la filterMode property de la texture. Esto toma un value del TextureFilterMode enum:
TextureFilterMode.TFM_POINT: Usa un algoritmo de "vecino más cercano". Esta configuración es ideal para gráficos de estilo pixel art, ya que los contornos se mantendrán nítidamente marcados cuando la texture se vea más grande en pantalla, en lugar de verse borrosa.TextureFilterMode.TFM_BILINEAR: Usa un algoritmo bilinear para estimar el color de cada píxel.TextureFilterMode.TFM_TRILINEAR: Usa un algoritmo trilineal para estimar el color de cada píxel.
Materials sin iluminación
La mayoría de las veces querrás que los materials de tu scene se vean afectados por las condiciones de iluminación, incluidas las sombras y los tintes producidos por los cambios de tono de las distintas horas del día. Pero en otros casos quizá quieras mostrar los colors en su estado puro. Esto es útil al reproducir videos, o también para marcadores abstractos que necesitan destacar y están pensados para señalar hints al player.
Para crear un material sin iluminación, usa Material.setBasicMaterial. Los basic materials no tienen todas las mismas properties que los materiales PBR; solo tienen las esenciales:
diffuseColor: Color4 para el colortexture: TexturealphaTexture: texture separada para la layer de transparenciaalphaTest: umbral para lograr transparencia en función del color de la texturecastShadows: Si es false, no se proyectan sombras sobre otros entities de la scene.
Retratos de Avatar
Para mostrar una imagen en miniatura de cualquier player, usa Material.Texture.Avatar al establecer la texture de tu material, pasando la dirección de un player existente. Esto crea una texture a partir de una imagen de 256x256 del player, mostrando la cabeza y los hombros. El player se muestra usando el conjunto de wearables que el server actual registró por última vez.
Puedes obtener el retrato de cualquier player de Decentraland, incluso si no está conectado actualmente, e incluso si no tiene un Decentraland name reclamado.
Las siguientes properties son compatibles dentro del object que pasas como argumento:
userId: ID del user cuyo profile quieres mostrarfilterMode: Determina cómo se estiran o comprimen los píxeles de la texture al renderizarse. Toma un valor delTextureFilterModeenum. Consulta Escalado de texturas.wrapMode: Determina cómo se repite una texture sobre un objecto. Toma un valor delTextureWrapModeenum. Consulta Envoltura de texturas.
Materials transparentes
Para hacer transparente un material con un color plano, simplemente define el color como un Color4y establece el 4.º value en algo entre 0 y 10 y 1. 1Cuanto más cerca esté de
Si un material usa una textura .png que incluye transparencia, será opaco por defecto, pero puedes activar su transparencia estableciendo el transparencyMode a MaterialTransparencyMode.MTM_ALPHA_BLEND.
La transparencyMode puede tener los siguientes values:
MaterialTransparencyMode.MTM_OPAQUE: Sin transparencia en absolutoMaterialTransparencyMode.MTM_ALPHA_TEST: Cada píxel es completamente opaco o completamente transparente, según un umbral.MaterialTransparencyMode.MTM_ALPHA_BLEND: Son posibles valores intermedios en función del value de cada píxel.MaterialTransparencyMode.MTM_ALPHA_TEST_AND_ALPHA_BLEND: Usa una combinación de ambos métodos.MaterialTransparencyMode.MTM_AUTO: Determina el método según la textura proporcionada.
Si estableces el transparencyMode a MaterialTransparencyMode.MTM_ALPHA_TEST, puedes ajustar finamente el umbral utilizado para determinar si cada píxel es transparente o no. Establece el alphaTest propiedad entre 0 y 1. Por defecto, su valor es 0.5.
Al usar un material sin iluminación, puedes añadir un alphaTexture para hacer que solo ciertas regiones del material sean transparentes, basándose en una textura.
📔 Nota: Debe ser una imagen de un solo canal. En esta imagen usa el color rojo o negro para determinar qué partes de la textura real deben ser transparentes.
Esto puede usarse de formas muy interesantes junto con videos. Consulta video en reproducción.
Video en reproducción
Para transmitir video desde una URL a un material, o reproducir un video desde un archivo almacenado en la scene, consulta video en reproducción.
El video se usa como una textura en un material, puedes establecer cualquiera de las otras propiedades de los materiales para alterar cómo se ve la pantalla de video.
Sintaxis avanzada
La sintaxis completa para crear un Materiales componente, sin ningún helper para simplificarlo, se ve así:
Así es como el protocolo base interpreta los componentes Material. Las funciones helper abstraen esto y exponen una sintaxis más amigable, pero detrás de escena generan esta sintaxis.
La $case campos te permiten especificar uno de los tipos permitidos. Cada tipo admite un conjunto distinto de parámetros. Hay dos niveles de $case aquí:
La
materialcampo admite los valorespbryunlit, para definir el tipo de material.La
texcampo dentro de una textura admite los siguientes valores, para definir el tipo de textura:textureavatarTexturevideoTexture
Dependiendo del valor de $case, es válido definir el objeto para el tipo correspondiente, pasando cualquier propiedad relevante.
Para añadir un Material componente a una entidad que potencialmente ya tenga una instancia de este componente, usa Material.createOrReplace(). Las funciones helper como Material.setPbrMaterial() manejan la sobrescritura de instancias existentes del componente, pero ejecutar Material.create() en una entidad que ya tenga este componente devuelve un error.
Modificar materiales glTF
Usa la GltfNodeModifiers componente para modificar los materiales de un glTF modelo. Este componente te permite sobrescribir los materiales de un glTF modelo con tus propios materiales. Puedes usar cualquiera de las propiedades del Material componente, incluyendo textura, textura de video, materiales sin iluminación, etc.
Hay dos maneras de usar el GltfNodeModifiers componente:
Modifica el material de todo el modelo dejando el
pathpropiedad como una cadena vacía.Modifica el material de un nodo específico en el modelo (o varios nodos) estableciendo la
pathpropiedad a la ruta al nodo.
Modifica el material de todo el modelo
El siguiente ejemplo muestra cómo modificar el material de un glTF modelo. En este caso, el material de todo el modelo se modifica para ser rojo.
La GltfNodeModifiers component tiene las siguientes propiedades:
modifiers: Un array de modificadores. Cada modificador tiene las siguientes propiedades:path: La ruta al nodo en el modelo que se va a modificar.material: El material a usar.
La path La propiedad es una cadena que representa la ruta al nodo en el glTF modelo que se va a modificar. Si quieres modificar el material de todo el modelo, puedes usar una cadena vacía. Si quieres modificar el material de un nodo específico, puedes usar la ruta al nodo. La ruta debe apuntar a un nodo mesh, no a un nodo vértice.
La material La propiedad es un objeto que representa el material a usar. Debe escribirse usando la sintaxis avanzada para materials, como se muestra en el ejemplo anterior. Las funciones helper como Material.setPbrMaterial() no se pueden usar aquí.
Modifica el material de un nodo específico en el modelo
El siguiente ejemplo muestra cómo modificar el material de un nodo específico en el glTF modelo. En este caso, el material de la cabeza se modifica para usar una textura alternativa.
Un GltfNodeModifiers puede contener varios modificadores, cada uno modificando un nodo diferente en el modelo. El siguiente ejemplo muestra cómo modificar el material de la cabeza y el cuerpo de un glTF modelo.
Modificar campos de un material existente
El componente Material proporciona una interfaz simplificada para acceder y modificar las propiedades del componente Material. Elimina la necesidad de navegar por estructuras de unión profundamente anidadas (PBR vs Unlit, texture vs avatarTexture vs videoTexture), lo que hace que la manipulación de materiales sea más intuitiva y menos propensa a errores.
Los siguientes métodos permiten una manipulación sencilla del Material componente:
Material.getFlat(entity: Entity): ReadonlyFlatMaterial: Devuelve un objeto accesor de solo lecturaFlatMaterialque proporciona acceso directo de lectura a las propiedades del material. Devolverá un error si la entidad no tiene unMaterialcomponente. Para evitar esto, se pueden usar los siguientes métodos como alternativa.
Material.getFlatOrNull(entity: Entity): ReadonlyFlatMaterial | null: Devuelve un objeto accesor de solo lectura o null, dependiendo de si la entidad tiene o no unMaterialcomponent.
Material.getFlatMutable(entity: Entity): FlatMaterial: Devuelve un objeto accesor de lectura y escrituraFlatMaterialobjeto que permite modificar sus propiedades. Lanzará un error si la entidad a la que se llama no tiene elMaterialcomponent.
Material.getFlatMutableOrNull(entity: Entity): FlatMaterial | null: Devuelve un objeto accesor de lectura y escritura o nullFlatMaterialobjeto que permite modificar sus propiedades. En caso de que la entidad no tenga uncomponente Material, devolveránull.
Eliminar sombras de un modelo glTF
Para eliminar sombras de un glTF modelo, puedes establecer la castShadows propiedad a false en el GltfNodeModifiers objeto. Esto conserva el material original del modelo, pero evita que proyecte sombras. Esto es útil para modelos que no están pensados para proyectar sombras, como haces de luz.
Última actualización