Crear sombreadores con el Diseñador de sombras en Visual Studio
En este artículo, aprenderá a usar el Diseñador de sombras para crear diferentes tipos de sombreadores.
Crear sombreadores de colores planos básicos
Puede usar el Diseñador de sombras y el lenguaje DGSL (Directed Graph Shader Language) para crear un sombreador de color plano. Este sombreador establece el color final en un valor de color RGB constante. Puede implementar un sombreador de color plano escribiendo el valor de color de una constante de color RGB en el color del resultado final.
Antes de empezar, asegúrese de que se muestran la ventana Propiedades y el Cuadro de herramientas.
Cree un sombreador DGSL con el que trabajar. Para obtener información sobre cómo agregar un sombreador DGSL al proyecto, vea la sección Introducción de Diseñador de sombras.
Elimine el nodo Color de punto. Use la herramienta Seleccionar para seleccionar el nodo Color de punto y, después, en la barra de menús, elija Editar>Eliminar.
Agregue un nodo Constante de color al gráfico. En el Cuadro de herramientas, en Constantes, seleccione Constante de color y muévala a la superficie de diseño.
Especifique un valor de color para el nodo Constante de color. Use la herramienta Seleccionar para seleccionar el nodo Constante de color y, después, en la ventana Propiedades, en la propiedad Salida, especifique un valor de color. Para el color naranja, especifique un valor de (1,0, 0,5, 0,2, 1,0).
Conecte la constante de color al color final. Para crear las conexiones, mueva el terminal RGB del nodo Constante de color al terminal RGB del nodo Color final y, después, mueva el terminal Alfa del nodo Constante de color al terminal Alfa del nodo Color final. Estas conexiones establecen el color final en la constante de color definida en el paso anterior.
La ilustración siguiente muestra el gráfico de sombreador completo y una vista previa del sombreador aplicado a un cubo.
Nota
En la ilustración, el color naranja se especificó para ilustrar mejor el efecto del sombreador.
Es posible que algunas formas proporcionen mejores vistas previas para algunos sombreadores. Para más información sobre cómo obtener una vista previa de los sombreadores en el Diseñador de sombras, vea Diseñador de sombras.
Crear sombreadores de Lambert básicos
También puede usar el Diseñador de sombras y el lenguaje DGSL (Directed Graph Shader Language) para crear un sombreador de iluminación que implementa el modelo de iluminación de Lambert clásico.
El modelo de iluminación de Lambert incorpora iluminación ambiental y direccional para sombrear objetos en una escena 3D. Los componentes ambientales proporcionan un nivel de iluminación base en la escena 3D. Los componentes direccionales proporcionan iluminación adicional de fuentes de luz direccionales (lejanas). La iluminación ambiental afecta a todas las superficies de la escena igualmente, sin importar su orientación. Para una superficie determinada, es el producto del color de ambiente de la superficie y del color y la intensidad de la luz ambiental en la escena. La iluminación direccional afecta a cada superficie de la escena de manera diferente, en función de la orientación de la superficie con respecto a la dirección de la fuente de luz. Es un producto del color difuso y la orientación de la superficie, y del color, la intensidad y la dirección de las fuentes de luz. Las superficies que miran directamente hacia la fuente de luz reciben la máxima contribución y las superficies que miran directamente al otro lado no reciben ninguna contribución. Bajo el modelo de iluminación de Lambert, se combinan el componente ambiental y uno o más componentes direccionales para determinar la contribución de color difuso total para cada punto del objeto.
Antes de empezar, asegúrese de que se muestran la ventana Propiedades y el Cuadro de herramientas.
Cree un sombreador DGSL con el que trabajar. Para obtener información sobre cómo agregar un sombreador DGSL al proyecto, vea la sección Introducción de Diseñador de sombras.
Desconecte el nodo Color de punto del nodo Color final. Elija el terminal RGB del nodo Color de punto y, después, elija Romper vínculos. Deje el terminal Alfa conectado.
Agregue un nodo Lambert al gráfico. En el Cuadro de herramientas, en Utilidad, seleccione Lambert y muévalo a la superficie de diseño. El nodo Lambert calcula la contribución de color difuso total del píxel, en función de parámetros de iluminación ambiente y difusa.
Conecte el nodo Color de punto al nodo Lambert. En modo Seleccionar, mueva el terminal RGB del nodo Color de punto al terminal Color difuso del nodo Lambert. Esta conexión proporciona al nodo Lambert el color difuso interpolado del píxel.
Conecte el valor de color calculado al color final. Mueva el terminal Salida del nodo Lambert al terminal RGB del nodo Color final.
La ilustración siguiente muestra el gráfico de sombreador completo y una vista previa del sombreador aplicado a un modelo de tetera.
Nota
Para demostrar mejor el efecto del sombreador en esta ilustración, se especificó un color naranja mediante el parámetro MaterialDiffuse del sombreador. Un juego o una aplicación puede usar este parámetro para proporcionar un valor de color único para cada objeto. Para obtener información sobre los parámetros de los materiales, consulte Diseñador de sombras.
La siguiente ilustración muestra el sombreador descrito en este documento aplicado a un modelo 3D.
Crear sombreadores de Phong básicos
También puede usar el Diseñador de sombras y el lenguaje DGSL (Directed Graph Shader Language) para crear un sombreador de iluminación que implementa el modelo de iluminación de Phong clásico.
El modelo de iluminación Phong extiende el modelo de iluminación de Lambert para incluir reflejos especulares, que simulan las propiedades brillantes de una superficie. El componente especular proporciona iluminación adicional de las mismas fuentes de iluminación direccionales que se usan en el modelo de iluminación de Lambert, pero su contribución al color final se procesa de manera diferente. El resaltado especular afecta a cada superficie en la escena de manera diferente, en función de la relación entre la dirección de la vista, la dirección de las fuentes de luz y la orientación de la superficie. Es un producto del color especular, la potencia especular y la orientación de la superficie, y del color, la intensidad y la dirección de las fuentes de luz. Las superficies que reflejan la fuente de luz directamente en el visor reciben la contribución especular máxima y las superficies que reflejan la fuente de luz lejos del visor no reciben ninguna contribución. En el modelo de iluminación Phong, uno o más componentes especulares se combinan para determinar el color y la intensidad del resaltado especular para cada punto en el objeto y, después, se agregan al resultado del modelo de iluminación Lambert para producir el color final del píxel.
Para obtener más información sobre el modelo de iluminación Lambert, vea Cómo: Crear un sombreador Lambert básico.
Antes de empezar, asegúrese de que se muestran la ventana Propiedades y el Cuadro de herramientas.
Cree un sombreador Lambert, como se describe en Cómo: Crear un sombreador Lambert básico.
Desconecte el nodo Lambert del nodo Color final. Elija el terminal RGB del nodo Lambert y, después, elija Romper vínculos. Esto hace sitio para el nodo que se agrega en el paso siguiente.
Agregue un nodo Agregar al gráfico. En el Cuadro de herramientas, en Matemáticas, seleccione Agregar y muévalo a la superficie de diseño.
Agregue un nodo Especular al gráfico. En el Cuadro de herramientas, en Utilidad, seleccione Especular y muévalo a la superficie de diseño.
Agregue la contribución especular. Mueva el terminal Salida del nodo Especular al terminal X del nodo Agregar y, después, mueva el terminal Salida del nodo Lambert al terminal Y del nodo Agregar. Estas conexiones combinan las contribuciones de color difuso y especular totales para el píxel.
Conecte el valor de color calculado al color final. Mueva el terminal Salida del nodo Agregar al terminal RGB del nodo Color final.
La ilustración siguiente muestra el gráfico de sombreador completo y una vista previa del sombreador aplicado a un modelo de tetera.
Nota
Para demostrar mejor el efecto del sombreador en esta ilustración, se especificó un color naranja mediante el parámetro MaterialDiffuse del sombreador y un acabado de aspecto metálico mediante los parámetros MaterialSpecular y MaterialSpecularPower. Para obtener información sobre los parámetros de los materiales, consulte Diseñador de sombras.
Es posible que algunas formas proporcionen mejores vistas previas para algunos sombreadores. Para obtener más información sobre la vista previa de los sombreadores, consulte Diseñador de sombras.
La siguiente ilustración muestra el sombreador descrito en este documento aplicado a un modelo 3D. La propiedad MaterialSpecular se establece en (1,00, 0,50, 0,20, 0,00) y su propiedad MaterialSpecularPower se establece en 16.
Nota
La propiedad MaterialSpecular determina el acabado aparente del material de la superficie. Una superficie muy brillante como el cristal o el plástico suele tener un color especular que es un tono brillante de blanco. Una superficie metálica suele tener un color especular próximo al color difuso. Una superficie con acabado satinado suele tener un color especular que es un tono oscuro de gris.
La propiedad MaterialSpecularPower determina la intensidad de los reflejos especulares. Las potencias especulares altas simulan reflejos más opacos y localizados. Las potencias especulares muy bajas simulan reflejos intensos y circulares que pueden saturar en exceso y ocultar el color de toda la superficie.
Crear sombreadores de textura básicos
Use el Diseñador de sombras y el lenguaje DGSL (Directed Graph Shader Language) para crear un sombreador de una textura. Este sombreador establece directamente el color final en los valores RGB y alfa muestreados de la textura.
Puede implementar un sombreador básico de una sola textura escribiendo los valores de color y alfa de una muestra de textura directamente en el color de salida final.
Antes de empezar, asegúrese de que se muestran la ventana Propiedades y el Cuadro de herramientas.
Cree un sombreador DGSL con el que trabajar. Para obtener información sobre cómo agregar un sombreador DGSL al proyecto, vea la sección Introducción de Diseñador de sombras.
Elimine el nodo Color de punto. En el modo Seleccionar, seleccione el nodo Color de punto y, después, en la barra de menús, elija Editar>Eliminar. Esto hace sitio para el nodo que se agrega en el paso siguiente.
Agregue un nodo Muestra de textura al gráfico. En el Cuadro de herramientas, en Textura, seleccione Muestra de textura y muévala a la superficie de diseño.
Agregue un nodo Coordenada de textura al gráfico. En el Cuadro de herramientas, en Textura, seleccione Coordenada de textura y muévala a la superficie de diseño.
Elija una textura para aplicar. En el modo Seleccionar, seleccione el nodo Muestra de textura y, después, en la ventana Propiedades, especifique la textura que quiere usar mediante la propiedad Nombre de archivo.
Cree la textura públicamente accesible. Seleccione el nodo Muestra de textura y, después, en la ventana Propiedades, establezca la propiedad Acceso en Público. Ahora puede configurar la textura desde otra herramienta, como el Editor de modelos.
Conecte las coordenadas de textura a la muestra de textura. En el modo Seleccionar, mueva el terminal Salida del nodo Coordenada de textura al terminal UV del nodo Muestra de textura. Esta conexión muestrea la textura en las coordenadas especificadas.
Conecte la muestra de textura al color final. Mueva el terminal RGB del nodo Muestra de textura al terminal RGB del nodo Color final y, después, mueva el terminal Alfa del nodo Muestra de textura al terminal Alfa del nodo Color final.
La ilustración siguiente muestra el gráfico de sombreador completo y una vista previa del sombreador aplicado a un cubo.
Nota
En esta ilustración, se usó un plano como la forma de vista previa y se especificó una textura para demostrar mejor el efecto del sombreador.
Es posible que algunas formas proporcionen mejores vistas previas para algunos sombreadores. Para más información sobre cómo obtener una vista previa de los sombreadores en el Diseñador de sombras, vea Diseñador de sombras
Crear sombreadores de textura de escala de grises
Use el Diseñador de sombras y el lenguaje DGSL (Directed Graph Shader Language) para crear un sombreador una textura de escala de grises. Este sombreador modifica el valor de color RGB del ejemplo de textura y después lo usa junto con el valor alfa sin modificar para establecer el color final.
Puede implementar un sombreador de textura de escala de grises modificando el valor de color de una muestra de textura antes de escribirlo en el color de salida final.
Antes de empezar, asegúrese de que se muestran la ventana Propiedades y el Cuadro de herramientas.
Cree un sombreador de textura básico, como se describe en Cómo: Crear un sombreador de textura básico.
Desconecte el terminal RGB del nodo Muestra de textura del terminal RGB del nodo Color final. En el modo Seleccionar, elija el terminal RGB del nodo Muestra de textura y, después, elija Romper vínculos. Esto hace sitio para el nodo que se agrega en el paso siguiente.
Agregue un nodo Desaturar al gráfico. En el Cuadro de herramientas, en Filtros, seleccione Desaturar y muévalo a la superficie de diseño.
Calcule el valor de escala de grises mediante el nodo Desaturar. En el modo Seleccionar, mueva el terminal RGB del nodo Muestra de textura al terminal RGB del nodo Desaturar.
Nota
De forma predeterminada, el nodo Desaturar desatura completamente el color de entrada y usa las proporciones de luminancia estándar para la conversión de escala de grises. Puede cambiar el comportamiento del nodo Desaturar cambiando el valor de la propiedad Luminancia o solo desaturando parcialmente el color de entrada. Para desaturar parcialmente el color de entrada, proporcione un valor escalar en el intervalo [0,1) al terminal Por ciento del nodo Desaturar.
Conecte el valor de color de escala de grises al color final. Mueva el terminal Salida del nodo Desaturar al terminal RGB del nodo Color final.
La ilustración siguiente muestra el gráfico de sombreador completo y una vista previa del sombreador aplicado a un cubo.
En esta ilustración, se usó un plano como la forma de vista previa y se especificó una textura para demostrar mejor el efecto del sombreador. Es posible que algunas formas proporcionen mejores vistas previas para algunos sombreadores. Para obtener más información sobre la vista previa de los sombreadores, consulte Diseñador de sombras.
Crear sombreadores de degradado basados en geometría
Use el Diseñador de sombras y el lenguaje DGSL (Directed Graph Shader Language) para crear un sombreador de degradado basado en geometría. Este sombreador escala un valor de color RGB constante según el alto de cada punto de un objeto en el espacio global.
Puede implementar un sombreador basado en geometría mediante la incorporación de la posición del píxel en el sombreador. En los lenguajes de sombreado, un píxel contiene más información que solo el color y la ubicación en una pantalla 2D. Un píxel, conocido como un fragmento en algunos sistemas, es una colección de valores que describen la superficie que corresponde a un píxel. El sombreador que se describe en este documento usa el alto de cada píxel de un objeto 3D en el espacio global para afectar al color de salida final del fragmento.
Antes de empezar, asegúrese de que se muestran la ventana Propiedades y el Cuadro de herramientas.
Cree un sombreador DGSL con el que trabajar. Para obtener información sobre cómo agregar un sombreador DGSL al proyecto, vea la sección Introducción de Acerca del Diseñador de sombras.
Desconecte el nodo Color de punto del nodo Color final. Elija el terminal RGB del nodo Color de punto y, después, elija Romper vínculos. Esto hace sitio para el nodo que se agrega en el paso siguiente.
Agregue un nodo Multiplicar al gráfico. En el Cuadro de herramientas, en Matemáticas, seleccione Multiplicar y muévalo a la superficie de diseño.
Agregue un nodo Vector de máscara al gráfico. En el Cuadro de herramientas, en Utilidad, seleccione Vector de máscara y muévalo a la superficie de diseño.
Especifique los valores de máscara para el nodo Vector de máscara. En el modo Seleccionar, seleccione el nodo Vector de máscara y, después, en la ventana Propiedades, establezca la propiedad Verde / Y en True y las propiedades Rojo / X, Azul / Z y Alfa / W en False. En este ejemplo, las propiedades Rojo / X, Verde / Y y Azul / Z se corresponden a los componentes X, Y y Z del nodo Posición global y Alfa / W no se usa. Dado que solo Verde / Y está establecido en True, solo el componente Y del vector de entrada permanece después de que se enmascare.
Agregue un nodo Posición global al gráfico. En el Cuadro de herramientas, en Constantes, seleccione Posición global y muévala a la superficie de diseño.
Enmascare la posición de espacio global del fragmento. En el modo Seleccionar, mueva el terminal Salida del nodo Posición global al terminal Vector del nodo Vector de máscara. Esta conexión enmascara la posición del fragmento para ignorar los componentes X y Z.
Multiplique la constante de color RGB por la posición del espacio de global enmascarada. Mueva el terminal RGB del nodo Color de punto al terminal Y del nodo Multiplicar y, después, mueva el terminal Salida del nodo Vector de máscara al terminal X del nodo Multiplicar. Esta conexión escala el valor de color según el alto de píxel en el espacio global.
Conecte el valor de color escalado al color final. Mueva el terminal Salida del nodo Multiplicar al terminal RGB del nodo Color final.
La ilustración siguiente muestra el gráfico de sombreador completo y una vista previa del sombreador aplicado a una esfera.
Nota
En esta ilustración, se especificó un color naranja para mostrar mejor el efecto del sombreador pero como la forma de vista previa no tiene ninguna posición en el espacio global, no se puede ver una vista previa completa del sombreador en el Diseñador de sombras. El sombreador se debe previsualizar en una escena real para demostrar el efecto completo.
Es posible que algunas formas proporcionen mejores vistas previas para algunos sombreadores. Para obtener más información sobre la vista previa de los sombreadores, consulte Diseñador de sombras.
En la siguiente ilustración se muestra el sombreador descrito en este documento aplicado a una escena 3D que se demuestra en Cómo: Modelar un terreno en 3D. La intensidad del color aumenta con el alto del punto en la posición global.
Para obtener más información sobre cómo aplicar un sombreador a un modelo 3D, vea Cómo: Aplicar un sombreador a un modelo en 3D.
Contenido relacionado
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de