Materiales
Aprende cómo agregar materiales y texturas a entidades con formas primitivas.
Materiales
Los materiales se pueden aplicar a entidades que usan formas primitivas (cubo, esfera, plano, etc.) añadiendo un Material componente. Este componente tiene varios campos que te permiten configurar las propiedades del material, añadir una textura, etc.
glTF los modelos incluyen sus propios materiales que se importan implícitamente en una escena junto con el modelo. Para modificar o anular estos materiales, usa el GltfNodeModifiers componente. Ver Modificar materiales glTF para más detalles.
Al importar un modelo 3D con sus propios materiales, ten en cuenta que no todos los shaders son compatibles con el motor de Decentraland. Solo se admiten materiales estándar y materiales PBR (physically based rendering). Ver consideraciones sobre modelos 3D externos para más detalles.
Hay diferentes tipos de materiales compatibles:
PBR (Physically Based Rendering): El tipo de material más común en Decentraland. Soporta colores lisos o texturas, y diferentes propiedades como metallic, emissive, transparency, etc. Lee más sobre PBR.
Materiales básicos: No responden a luces y sombras, lo que los hace ideales para mostrar imágenes tipo billboard.
Usa el Scene Editor en Creator Hub
La forma más fácil de dar a una entidad un Material es usar el Scene Editor. Puedes añadir un Material componente a tu entidad y luego configurar todos los campos disponibles en la UI del Scene Editor. Ver Add Components.
Agregar un material
El siguiente ejemplo crea un material PBR y establece algunos de sus campos para darle un color rojo y propiedades metálicas. Este material se añade a una entidad que también tiene una forma de caja, por lo que coloreará la caja con este material.
//Create entity and assign shape
const meshEntity = engine.addEntity()
Transform.create(meshEntity, {
position: Vector3.create(4, 1, 4),
})
MeshRenderer.setBox(meshEntity)
//Create material and configure its fields
Material.setPbrMaterial(meshEntity, {
albedoColor: Color4.Red(),
metallic: 0.8,
roughness: 0.1,
})Para cambiar el material de una entidad que ya tiene un Material componente, 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 componente debe importarse vía
import { Material } from "@dcl/sdk/ecs"
Vea Imports para ver cómo manejar estos fácilmente.
Colores de material
Dale a un material un color liso. En un Material PBR, configuras el albedoColor campo. Los colores albedo responden a la luz y pueden incluir matices en ellos.
Los valores de color son del tipo Color4, compuesto por r, g y b valores (red, green, and blue). Cada uno de estos toma valores entre 0 y 1. Ajustando diferentes valores para estos, puedes componer cualquier color visible. Para negro, pon los tres a 0. Para blanco, ponlos todos a 1.
📔 Nota: Si estableces cualquier color en albedoColor a un valor mayor que 1, aparecerá 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.
Vea tipos de color para más detalles sobre cómo configurar colores.
También puedes editar los siguientes campos en un Material PBR para afinar cómo se percibe su color:
emissiveColor: El color emitido por el material.
reflectivityColor: AKA Specular Color en otra nomenclatura.
Para crear un material de color liso que no sea afectado por la luz y las sombras del entorno, crea un material básico en lugar de un material PBR.
Uso de texturas
Establece un archivo de imagen como textura en un material configurando el parámetro texture .
En el ejemplo anterior, la imagen para el material se ubica en un assets/materials carpeta, que se encuentra en el nivel raíz de la carpeta del proyecto de la escena.
Al crear una textura, también puedes pasar parámetros adicionales:
filterMode: Determina cómo se estiran o comprimen los píxeles en la textura cuando se renderiza. Toma un valor delTextureFilterModeenum. Ver Escalado de texturas.wrapMode: Determina cómo se repite una textura sobre un objeto. Toma un valor delTextureWrapModeenum. Ver Envoltorio de texturas.
Para crear una textura que no sea afectada por la luz y las sombras del entorno, crea un material básico en lugar de un material PBR.
Texturas desde una URL externa
Puedes apuntar la textura de tu material a una URL externa en lugar de a una ruta interna del proyecto de la escena.
La URL debe comenzar con https, http Las URLs http no son compatibles. El sitio donde se aloja la imagen también debe tener CORS policies (Cross Origin Resource Sharing) que permitan acceder a ella externamente.
Envoltorio de textura
Puedes establecer cómo se alinea una textura con una superficie. Por defecto, la textura se estira para ocupar la superficie una sola vez, pero puedes escalarla y desplazarla.
Los siguientes campos están disponibles en todas las texturas:
offset: Desplaza la textura para cambiar su alineación. El valor es un Vector2, donde ambos ejes van de 0 a 1, siendo 1 el ancho o alto completo de la textura.tiling: Escala la textura. El valor por defecto es el Vector2[1, 1], que hace que la imagen se repita una vez cubriendo toda la superficie.TextureWrapMode: Determina qué sucede si el tiling de la imagen no cubre toda la superficie. Esta propiedad toma sus valores delTextureWrapModeenum, que permite los siguientes valores:TextureWrapMode.TWM_CLAMP: La textura se muestra solo una vez en el tamaño especificado. El resto de la superficie del mesh queda transparente. El valor detilingse ignora.TextureWrapMode.TWM_REPEAT: La textura se repite tantas veces como quepa en el mesh, usando el tamaño especificado.TextureWrapMode.TWM_MIRROR: Como en wrap, la textura se repite tantas veces como quepa, pero la orientación de esas repeticiones está en espejo.
📔 Nota: El offset y tiling las propiedades solo son compatibles en el cliente de escritorio DCL 2.0.
Usa esta característica para cubrir una superficie grande con un patrón en mosaico. Por ejemplo, repite la siguiente imagen:
En el ejemplo siguiente, la textura usa un mirror modo de envoltura, y cada repetición de la textura ocupa solo 1/4 de la superficie. Esto significa que veremos 4 copias de la imagen, en espejo entre sí en ambos ejes.
Tween de texturas
Haz que una textura se desplace suavemente usando un Tween componente, configurado con el TextureMove modo. El tween cambia gradualmente el valor de las offset o el tiling propiedades de una textura durante un periodo de tiempo, de manera suave y optimizada.
📔 Nota: Los Texture Tweens son una característica que solo es compatible en el cliente de escritorio DCL 2.0.
Usa la Tween componente con la setTextureMove función para mover la textura entre dos posiciones.
El tween de textura toma la siguiente información:
entity: La entidad cuya textura se moverástart: Un Vector2 para la posición inicialend: Un Vector2 para la posición finalduration: Cuántos milisegundos toma moverse entre las dos posiciones
Este otro parámetro opcional también está disponible:
movementType: define si el movimiento será sobre el campooffseto eltilingfield. Por defecto usaoffset.easingFunction: La curva para la tasa de cambio a lo largo del tiempo, el valor por defecto esEasingFunction.EF_LINEAR. Otros valores hacen que el cambio acelere y/o desacelere a diferentes ritmos.
El ejemplo anterior ejecuta un tween que dura 1 segundo y mueve la textura 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 tween continuo de textura toma la siguiente información:
entity: La entidad cuya textura se moverádirection: Un Vector2 para el movimientoCambia la velocidad a la que se reproduce una animación cambiando la propiedad: Cuántas unidades por segundo se moverá la entidad
También están disponibles estos otros parámetros opcionales:
movementType: define si el movimiento será sobre el campo offset o el campo tiling. Por defecto usa offset.duration: Cuántos milisegundos sostener el movimiento. Después de este tiempo, el movimiento se detendrá.
Secuencias de tween complejas
También puedes hacer que los movimientos de la textura sigan una secuencia compleja con tantos pasos como quieras. Usa el sequence campo para listar tantos tweens como desees; se ejecutarán secuencialmente después del primer tween descrito en el Tween componente.
Ten en cuenta que al definir un tween dentro de un TweenSequence, necesitas usar el formato más verboso de Tween.Mode.TextureMove para definir el tween.
Texturas en varias capas
Puedes usar varios archivos de imagen como capas para componer texturas más realistas, por ejemplo incluyendo una bumpTexture y una emissiveTexture.
El bumpTexture puede simular bultos y arrugas en una superficie, modificando cómo se comportan las normales de la superficie en cada píxel.
El emissiveTexture puede acentuar el resplandor en ciertas partes de un material, para lograr efectos muy interesantes.
Establecer UVs
Otra alternativa para cambiar la escala o alineación de una textura es configurar las propiedades uv en el componente MeshRenderer component.
Configuras las coordenadas u y v en la imagen 2D de la textura para que correspondan a los vértices de la forma. Cuantos más vértices tenga la entidad, más uv coordenadas necesitan definirse en la textura; por ejemplo, un plano necesita tener 8 uv puntos definidos, 4 para cada una de sus dos caras.
El siguiente ejemplo incluye una función que simplifica la configuración de uvs. La función setUVs definida aquí recibe un número de filas y columnas como parámetros y establece los uvs para que la imagen de la textura se repita un número específico de veces.
Para establecer los UVs para una box mesh shape, the same structure applies. Each of the 6 faces of the cube takes 4 pairs of coordinates, one for each corner. All of these 48 values are listed as a single array.
📔 Nota: Las propiedades Uv actualmente solo están disponibles en plane y en box shapes. Además, uv values affect all the texture layers equally, since they are set on the shape.
Escalado de texturas
Cuando las texturas se estiran o encogen a un tamaño diferente del de la imagen de textura original, esto a veces puede crear artefactos. En un entorno 3D, los efectos de perspectiva causan esto de forma natural. Existen varios texture filtering algoritmos que existen para compensar esto de diferentes maneras.
El Material object uses the bilinear algorithm by default, but it lets you configure it to use the nearest neighbor o trilinear algorithms instead by setting the samplingMode property of the texture. This takes a value from the TextureFilterMode enum:
TextureFilterMode.TFM_POINT: Usa un algoritmo de "nearest neighbor". Esta configuración es ideal para gráficos estilo pixel art, ya que los contornos se mantendrán marcados de forma nítida cuando la textura se vea ampliada en pantalla en lugar de difuminarse.TextureFilterMode.TFM_BILINEAR: Usa un algoritmo bilineal para estimar el color de cada píxel.TextureFilterMode.TFM_TRILINEAR: Usa un algoritmo trilineal para estimar el color de cada píxel.
Materiales sin iluminación
La mayoría de las veces querrás que los materiales en tu escena se vean afectados por las condiciones de iluminación, incluidas las sombras y los cambios de matiz según las diferentes horas del día. Pero en otros casos podrías querer mostrar los colores en su estado puro. Esto es útil al reproducir videos, o también para marcadores abstractos que necesitan destacar, diseñados para señalar pistas al jugador.
Para crear un material sin iluminación, usa Material.setBasicMaterial. Los materiales básicos no tienen todas las mismas propiedades que los materiales PBR, solo tienen lo esencial:
diffuseColor: Color4 para el colortexture: TexturealphaTexture: Textura separada para la capa de transparenciaalphaTest: Umbral para lograr transparencia basado en el color de la texturacastShadows: Si es false, no se proyectan sombras sobre otras entidades en la escena.
Retratos de avatar
Para mostrar una imagen en miniatura de cualquier jugador, usa Material.Texture.Avatar al establecer la textura de tu material, pasando la dirección de un jugador existente. Esto crea una textura a partir de una imagen de 256x256 del jugador, mostrando cabeza y hombros. El jugador se muestra vistiendo el conjunto de wearables que el servidor actual registró por última vez.
Puedes obtener el retrato de cualquier jugador de Decentraland, incluso si no están conectados actualmente, e incluso si no tienen un NAME reclamado en Decentraland.
Las siguientes propiedades son compatibles dentro del objeto que pasas como argumento:
userId: ID del usuario cuyo perfil deseas mostrarfilterMode: Determina cómo se estiran o comprimen los píxeles en la textura cuando se renderiza. Toma un valor delTextureFilterModeenum. Ver Escalado de texturas.wrapMode: Determina cómo se repite una textura sobre un objeto. Toma un valor delTextureWrapModeenum. Ver Envoltorio de texturas.
Materiales transparentes
Para hacer un material con un color liso transparente, simplemente define el color como un Color4, y establece el cuarto valor a algo entre 0 y 1. Cuanto más cerca de 1, más opaco será.
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.
El transparencyMode puede tener los siguientes valores:
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 basados en el valor 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 afinar el umbral usado para determinar si cada píxel es transparente o no. Establece la propiedad alphaTest entre 0 y 1 . Por defecto su valor es 0.5.
Al usar un unlit material, puedes añadir un alphaTexture para hacer solo ciertas regiones del material transparentes, basadas en una textura.
📔 Nota: Esta 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 maneras muy interesantes junto con videos. Ver reproducción de video.
Reproducción de video
Para transmitir video desde una URL a un material, o reproducir un video desde un archivo almacenado en la escena, ver reproducción de video.
El video se usa como una textura en un material; puedes configurar 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 asistentes que la simplifiquen, se ve así:
Así es como el protocolo base interpreta los componentes Materials. Las funciones auxiliares abstraen esto y exponen una sintaxis más amigable, pero detrás de escena generan esta sintaxis.
El $case el campo te permite especificar uno de los tipos permitidos. Cada tipo admite un conjunto diferente de parámetros. En el ejemplo anterior, el box type admite un uvs campo.
Los valores compatibles para $case son los siguientes:
textureavatarTexture
Dependiendo del valor de $case, es válido definir el objeto para la forma correspondiente, pasando las propiedades relevantes.
Para añadir un Material componente a una entidad que potencialmente ya tiene una instancia de este componente, usa Material.createOrReplace(). Las funciones auxiliares como MeshRenderer.setPbrMaterial() se encargan de sobrescribir instancias existentes del componente, pero ejecutar Material.create() en una entidad que ya tiene este componente devuelve un error.
Modificar materiales glTF
Usa la GltfNodeModifiers componente para modificar los materiales de un glTF modelo. Este componente te permite anular los materiales de un glTF modelo con tus propios materiales. Puedes usar cualquiera de las propiedades del Material componente, incluidas texture, video texture, unlit materials, etc.
Hay dos formas de usar el GltfNodeModifiers componente:
Modificar el material de todo el modelo dejando la propiedad
pathcomo una cadena vacía.Modificar el material de un nodo específico en el modelo (o varios nodos) estableciendo la propiedad
patha la ruta del nodo.
Modificar 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.
El GltfNodeModifiers El componente tiene las siguientes propiedades:
modifiers: Un arreglo de modificadores. Cada modificador tiene las siguientes propiedades:path: La ruta al nodo en el modelo a modificar.material: El material a usar.
El path property es una cadena que representa la ruta al nodo en el glTF modelo 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 de vértice.
El material property es un objeto que representa el material a usar. Debe escribirse usando la advanced syntax para materiales, como se muestra en el ejemplo anterior. No se pueden usar aquí funciones auxiliares como Material.setPbrMaterial() can't be used here.
Modificar 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.
A 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.
Quitar sombras de un modelo glTF
Para quitar sombras de un glTF modelo, puedes establecer el castShadows a false más cercano en el GltfNodeModifiers object. 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