Materiales
Aprende cómo agregar materials y textures a entities con formas primitivas.
Materials
Los materiales pueden aplicarse 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, agregar 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 sobrescribir 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 engine 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 planos 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 sencilla de darle 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 agrega a una entidad que también tiene una forma de caja, por lo que coloreará la caja con este material.
//Crear entidad y asignar forma
const meshEntity = engine.addEntity()
Transform.create(meshEntity, {
position: Vector3.create(4, 1, 4),
})
MeshRenderer.setBox(meshEntity)
//Crear material y configurar sus campos
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() u 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 must be imported via
import { Material } from "@dcl/sdk/ecs"
Ver Imports para ver cómo manejarlos fácilmente.
Colores del material
Dar a un material un color plano. En un Material PBR, estableces el albedoColor campo. Los colores albedo responden a la luz y pueden incluir tonos en ellos.
Los valores de color son del tipo Color4, compuesto de r, g y b valores (red, green, and blue). Cada uno de estos toma valores entre 0 y 1. Al establecer diferentes valores para estos, puedes componer cualquier color visible. Para negro, ajusta los tres a 0. Para blanco, ajústalos 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 brillo rojo muy intenso.
Ver tipos de color para más detalles sobre cómo establecer colores.
También puedes editar los siguientes campos en un Material PBR para ajustar 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 material básico en lugar de un material PBR.
Uso de texturas
Establece un archivo de imagen como textura en un material configurando el textura parámetro.
En el ejemplo anterior, la imagen para el material está ubicada en un assets/materials folder, which is located at root level of the scene project folder.
💡 Tip: Recomendamos mantener tus archivos de imagen de textura en algún lugar dentro de /assets folder inside your scene.
Mientras creas 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. Esto toma un valor delTextureFilterModeenum. Ver Texture Scaling.wrapMode: Determina cómo se repite (tile) una textura sobre un objeto. Esto toma un valor delTextureWrapModeenum. Ver Texture Wrapping.
Para crear una textura que no se vea 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 en el proyecto de la escena.
La URL debe comenzar con https, http Las URLs no están soportadas. El sitio donde se aloja la imagen también debe tener políticas CORS (Cross Origin Resource Sharing) que permitan acceder externamente a ella.
Ajuste de repetición de textura
Puedes establecer cómo se alinea una textura con una superficie. Por defecto, la textura se estira para ocupar la superficie una 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, donde 1 es el ancho o alto completo de la textura.tiling: Escala la textura. El valor por defecto es el Vector 2[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 solo se muestra 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 repeat, la textura se repite tantas veces como quepa, pero la orientación de esas repeticiones se refleja (mirrored).
📔 Nota: El offset y tiling las propiedades solo son compatibles en el cliente de escritorio DCL 2.0.
Usa esta función para cubrir una superficie grande con un patrón en mosaico. Por ejemplo, repite la siguiente imagen:
En el siguiente ejemplo, la textura usa un mirror modo de repetición, y cada repetición de la textura ocupa solo 1/4 de la superficie. Esto significa que veremos 4 copias de la imagen, reflejadas 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 el 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 tarda en moverse entre las dos posiciones
Este otro parámetro opcional también está disponible:
movementType: define si el movimiento será sobre eloffseto eltilingcampo. Por defecto usaoffset.easingFunction: La curva para la tasa de cambio en el 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ádirección: Un Vector2 para el movimientospeed: 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. Tras ese tiempo, el movimiento se detendrá.
Secuencias de tween complejas
También puedes hacer que los movimientos de textura sigan una secuencia compleja con tantos pasos como quieras. Usa el sequence campo para listar tantos tweens como quieras; se ejecutarán secuencialmente después del primer tween descrito en el Tween component.
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 multicapa
Puedes usar varios archivos de imagen como capas para componer texturas más realistas, por ejemplo incluyendo una bumpTexture y un 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 brillo en ciertas partes de un material, para lograr efectos muy interesantes.
Configurar UVs
Otra alternativa para cambiar la escala o alineación de una textura es configurar las uv propiedades en el MeshRenderer component.
Estableces 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; un plano, por ejemplo, necesita tener 8 uv puntos definidos, 4 para cada una de sus dos caras.
El siguiente ejemplo incluye una función que simplifica el ajuste de uvs. La setUVs función definida aquí recibe un número de filas y columnas como parámetros, y establece las uvs de modo que la imagen de la textura se repita un número específico de veces.
Para ajustar las UVs de una caja mesh shape, se aplica la misma estructura. Cada una de las 6 caras del cubo requiere 4 pares de coordenadas, uno por cada esquina. Todos estos 48 valores se listan como un único array.
📔 Nota: Las propiedades Uv están actualmente disponibles solo en plano y en caja shapes. Además, uv los valores afectan por igual a todas las capas de textura, ya que se establecen en la shape.
Escalado de textura
Cuando las texturas se estiran o reducen 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 la perspectiva causan esto de forma natural. Existen varios texture filtering algoritmos que existen para compensar esto de diferentes maneras.
El Material el objeto usa el bilinear algoritmo por defecto, pero te permite configurarlo para usar en su lugar los algoritmos nearest neighbor o trilinear configurando el samplingMode propiedad de la textura. Esto toma un valor del 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 permanecerán marcados con nitidez cuando la textura se vea más grande en pantalla en lugar de verse difuminada.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 no iluminados
La mayoría de las veces querrás que los materiales en tu escena sean afectados por las condiciones de iluminación, incluyendo sombras y ser teñidos por los cambios de tono de 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, que están destinados a señalar pistas al jugador.
Para crear un material no iluminado, 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 colortextura: TexturaalphaTexture: 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 quieres mostrarfilterMode: Determina cómo se estiran o comprimen los píxeles en la textura cuando se renderiza. Esto toma un valor delTextureFilterModeenum. Ver Texture Scaling.wrapMode: Determina cómo se repite (tile) una textura sobre un objeto. Esto toma un valor delTextureWrapModeenum. Ver Texture Wrapping.
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 algunaMaterialTransparencyMode.MTM_ALPHA_TEST: Cada píxel es completamente opaco o completamente transparente, según un umbral.MaterialTransparencyMode.MTM_ALPHA_BLEND: Son posibles valores intermedios según 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 en función de la textura proporcionada.
Si estableces el transparencyMode a MaterialTransparencyMode.MTM_ALPHA_TEST, puedes afinar el umbral utilizado para determinar si cada píxel es transparente o no. Establece la alphaTest propiedad entre 0 y 1. Por defecto su valor es 0.5.
Al usar un material no iluminado, puedes agregar un alphaTexture para hacer transparentes solo ciertas regiones del material, basadas en una textura.
📔 Nota: Esto 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 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 Materials componente, sin ningún helper que la simplifique, es la siguiente:
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 producen 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 caja tipo admite un uvs campo.
Los valores soportados para $case son los siguientes:
texturaavatarTexture
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() manejan 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 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 no iluminados, etc.
Hay dos maneras de usar el GltfNodeModifiers componente:
Modificar el material de todo el modelo dejando la
pathpropiedad como una cadena vacía.Modificar el material de un nodo específico en el modelo (o varios nodos) estableciendo la
pathpropiedad a 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 array 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.
💡 Tip: Puedes usar la app Babylon Sandbox para inspeccionar el glTF modelo y encontrar la ruta al nodo que quieres modificar.
En algunos modelos, sin embargo, el sandbox de Babylon puede listar rutas que pertenecen a vértices en lugar de meshes, lo cual no funcionará. Si intentas usar una ruta que no es válida, la consola de la escena mostrará un mensaje de error que incluye la lista completa de rutas válidas en ese modelo.
El material property es un objeto que representa el material a usar. Debe escribirse usando la sintaxis avanzada para materiales, como se muestra en el ejemplo anterior. Funciones auxiliares como Material.setPbrMaterial() no pueden usarse aquí.
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 del 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 No iluminado, textura vs avatarTexture vs videoTexture), haciendo la manipulación de materiales 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 solo lecturaFlatMaterialobjeto accesor que proporciona acceso de lectura directo 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 solo lectura o null, dependiendo si la entidad tiene o no unMaterialcomponent.
Material.getFlatMutable(entity: Entity): FlatMaterial: Devuelve un lectura y escrituraFlatMaterialobjeto que permite modificar sus propiedades. Lanzará un error si la entidad llamada no tiene elMaterialcomponent.
Material.getFlatMutableOrNull(entity: Entity): FlatMaterial | null: Devuelve un lectura y escritura o nullFlatMaterialobjeto que permite modificar sus propiedades. En caso de que la entidad no tenga uncomponente Material, retornaránull.
Eliminar sombras de un modelo glTF
Para eliminar sombras de un glTF modelo, puedes establecer el castShadows propiedad a false más cercano en el GltfNodeModifiers objeto. Esto conserva el material original del modelo, pero evita que proyecte sombras. Esto es útil para modelos que no deben proyectar sombras, como haces de luz.
Última actualización