Materials
Aprende cómo agregar materials y textures a entities con formas primitivas.
Materials
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, agregar una textura, etc.
glTF modelos incluyen sus propios materiales, que se importan implícitamente a una escena junto con el modelo. Para modificar o sobrescribir estos materiales, usa el GltfNodeModifiers component. Consulta 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 (renderizado físicamente basado). Consulta 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. Admite colores lisos o texturas, y diferentes propiedades como metallic, emissive, transparencia, etc. Lee más sobre PBR.
Materiales 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 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. Consulta Add Components.
Añadir 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.
//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() o cualquiera de las otras funciones auxiliares y sobrescribirá el material original. No hace falta eliminar el Material ni usar la sintaxis avanzada.
📔 Nota: El Material component debe importarse mediante
import { Material } from "@dcl/sdk/ecs"
Consulta Imports para ver cómo manejar esto fácilmente.
Colores del material
Dale a un material un color liso. En un material PBR, estableces el albedoColor campo. Los colores albedo responden a la luz y pueden incluir matices.
Los valores de color son de tipo Color4, compuestos por valores r, g y b (rojo, verde y azul). Cada uno de ellos acepta valores entre 0 y 1. Al establecer distintos valores para estos componentes, puedes componer cualquier color visible. Para negro, pon los tres en 0. Para blanco, ponlos todos en 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í que, por ejemplo, {r: 15, g: 0, b: 0} produce un resplandor rojo muy brillante.
Consulta tipos de color para más detalles sobre cómo establecer 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: También conocido como Specular Color en otra nomenclatura.
Para crear un material de color liso 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 texture parámetro.
En el ejemplo anterior, la imagen del material se encuentra en una assets/materials que está ubicada en el nivel raíz de la carpeta del proyecto de la scene.
💡 Consejo: Recomendamos mantener tus archivos de imagen de textura en algún lugar dentro de /assets dentro de tu scene.
Al crear una textura, también puedes pasar parámetros adicionales:
filterMode: Determina cómo se estiran o comprimen los píxeles de la textura al renderizarse. Esto toma un valor delTextureFilterModeenum. Consulta Escalado de Textura.wrapMode: Determina cómo se aplica en mosaico una textura sobre un objeto. Esto toma un valor de laTextureWrapModeenum. Consulta 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 URL no son compatibles.
Texture wrapping
Puedes configurar 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 la altura completa de la textura.tiling: Escala la textura. El valor predeterminado es el Vector 2[1, 1], que hace que la imagen se repita una vez cubriendo toda la superficie.TextureWrapMode: Determina qué ocurre si el mosaico 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: Igual que en wrap, la textura se repite tantas veces como quepa, pero la orientación de estas repeticiones se refleja.
📔 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 ejemplo de abajo, la textura usa un modo de wrap mirror 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.
Tweens de textura
Haz que una textura se deslice suavemente usando un Tween componente, configurado con el modo TextureMove . El tween cambia gradualmente el valor de las offset o el tiling propiedades de una textura durante un periodo de tiempo, de una forma suave y optimizada.
📔 Nota: Los Texture Tweens son una función que solo está soportada en el cliente de escritorio DCL 2.0.
Usa la Tween component con el setTextureMove función para mover la textura entre dos posiciones.
El tween de textura toma la siguiente información:
entity: La entity de la que mover la texturestart: Un Vector2 para la posición inicialend: 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 eltilingcampo. Por defecto usaoffset.easingFunction: La curva de la tasa de cambio a lo largo del tiempo, el valor predeterminado esEasingFunction.EF_LINEAR. Otros valores hacen que el cambio acelere y/o desacelere a distintas tasas.
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 entity de la que mover la texturedirection: Un Vector2 para el movimientospeed: Cuántas unidades por segundo se moverá la entity
También están disponibles estos otros parámetros opcionales:
movementType: define si el movimiento será en el campo offset o 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 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 componente.
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 capas para componer texturas más realistas, por ejemplo incluyendo un bumpTexture y un emissiveTexture.
El bumpTexture puede simular bultos y arrugas en una superficie, modificando cómo se comportan los 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.
Establecer UVs
Otra alternativa para cambiar la escala o la alineación de una textura es configurar uv propiedades en el componente MeshRenderer.
Tú estableces u y v coordenadas 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 deberán 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 la configuración de las uvs. La función setUVs definida aquí recibe un número de filas y columnas como parámetros, y establece las uvs para que la imagen de la textura se repita un número específico de veces.
Para establecer las UVs de una caja forma mesh, se aplica la misma estructura. Cada una de las 6 caras del cubo toma 4 pares de coordenadas, uno para cada esquina. Todos estos 48 valores se enumeran como un solo array.
📔 Nota: Las propiedades de Uv solo están disponibles actualmente en plano y en formas caja . Además, los valores de uv afectan por igual a todas las capas de textura, ya que se establecen en el shape.
Escalado de texturas
Cuando las texturas se estiran o se reducen a un tamaño distinto del de la imagen de textura original, esto a veces puede crear artefactos. En un entorno 3D, los efectos de la perspectiva lo provocan de forma natural. Existen varios algoritmos de filtrado de texturas que existen para compensar esto de diferentes maneras.
El Material objeto usa el bilinear algoritmo por defecto, pero te permite configurarlo para usar los algoritmos nearest neighbor o trilinear en su lugar, estableciendo la propiedad samplingMode 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 de estilo pixel art, ya que los contornos permanecerán nítidamente marcados al verse la textura más grande en pantalla en lugar de desenfocarse.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.
Materiales Unlit
La mayoría de las veces querrás que los materiales de tu escena se vean afectados por las condiciones de iluminación, incluidas las sombras y el tinte producido por los cambios de tono de las distintas horas del día. Pero en otros casos quizá quieras mostrar los colores en su estado puro. Esto es útil al reproducir videos, o también para marcadores abstractos que necesitan destacar y que están pensados para señalar pistas al jugador.
Para crear un material unlit, usa Material.setBasicMaterial. Los materiales básicos no tienen todas las mismas propiedades que los materiales PBR, solo tienen las esenciales:
diffuseColor: Color4 para el colortexture: TexturealphaTexture: Textura separada para la capa de transparenciaalphaTest: Umbral para lograr transparencia basada en el color de la texturacastShadows: Si es false, no se proyectan sombras sobre otras entidades de la escena.
Retratos de Avatar
Para mostrar una imagen en miniatura de cualquier jugador, usa Material.Texture.Avatar al configurar 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 con el conjunto de wearables que el último servidor registrado tenía.
Puedes obtener el retrato de cualquier jugador de Decentraland, incluso si no está conectado actualmente, e incluso si no tiene un nombre de Decentraland reclamado.
Las siguientes propiedades son compatibles dentro del objeto que pases como argumento:
userId: ID del usuario cuyo perfil quieres mostrarfilterMode: Determina cómo se estiran o comprimen los píxeles de la textura al renderizarse. Esto toma un valor delTextureFilterModeenum. Consulta Escalado de Textura.wrapMode: Determina cómo se aplica en mosaico una textura sobre un objeto. Esto toma un valor de laTextureWrapModeenum. Consulta Texture Wrapping.
Materiales transparentes
Para hacer transparente un material con un color liso, simplemente define el color como un Color4, y establece el 4.º valor en algo entre 0 y 1. Cuanto más cerca esté 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 configurando 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 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 según la textura proporcionada.
Si estableces el transparencyMode a MaterialTransparencyMode.MTM_ALPHA_TEST, puedes ajustar con precisión el umbral usado 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 unlit, puedes añadir un alphaTexture para hacer que solo ciertas regiones del material sean transparentes, basándote 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 reproducción de video.
Reproducción de video
Para hacer streaming de video desde una URL a un material, o reproducir un video desde un archivo guardado en la escena, consulta 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 el aspecto de la pantalla de video.
Sintaxis avanzada
La sintaxis completa para crear un Materials componente, sin usar ayudas para simplificarlo, 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 por debajo generan esta sintaxis.
El $case 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 compatibles para $case son los siguientes:
textureavatarTexture
Dependiendo del valor de $case, es válido definir el objeto para la forma correspondiente, pasando cualquier propiedad relevante.
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() gestionan la sobrescritura de 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 unlit, etc.
Hay dos formas 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 del modelo (o de varios nodos) configurando la
pathpropiedad con la ruta al 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 que sea rojo.
El GltfNodeModifiers componente tiene las siguientes propiedades:
modifiers: Un array de modificadores. Cada modificador tiene las siguientes propiedades:path: La ruta al nodo del modelo que se va a modificar.material: El material que se va a usar.
El path propiedad es una cadena que representa la ruta al nodo del 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.
💡 Consejo: Puedes usar la Babylon Sandbox app para inspeccionar el glTF modelo y encontrar la ruta al nodo que quieres modificar.
Sin embargo, en algunos modelos, la sandbox de Babylon puede listar rutas que pertenecen a vértices en lugar de a meshes, lo cual no funcionará. Si intentas usar una ruta que no sea válida, la consola de la escena mostrará un mensaje de error que incluye la lista completa de rutas válidas de ese modelo.
El material propiedad es un objeto que representa el material que se va a usar. Debe escribirse usando la sintaxis avanzada para materiales, como se muestra en el ejemplo anterior. Funciones auxiliares como Material.setPbrMaterial() no se pueden usar aquí.
Modificar el material de un nodo específico del 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 distinto del 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 Unlit, texture vs avatarTexture vs videoTexture), haciendo la manipulación de materiales más intuitiva y menos propensa a errores.
Los siguientes métodos permiten manipular fácilmente el 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 como alternativa los siguientes métodos.
Material.getFlatOrNull(entity: Entity): ReadonlyFlatMaterial | null: Devuelve un objeto accesor de solo lectura o null, dependiendo de si la entidad tiene o no unMaterialcomponente.
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 elMaterialcomponente.
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 las sombras de un glTF modelo, puedes establecer el castShadows propiedad en false en el objeto GltfNodeModifiers Esto conserva el material original del modelo, pero evita que proyecte sombras. Esto es útil para modelos que no están destinados a proyectar sombras, como haces de luz.
Última actualización