Cómo: Crear un sombreador de gradiente basado en geometríaHow to: Create a geometry-based gradient shader

En este artículo se muestra cómo usar el Diseñador de sombras y el lenguaje DGSL (Directed Graph Shader Language) para crear un sombreador de degradado basado en geometría.This article demonstrates how to use the Shader Designer and the Directed Graph Shader Language to create a geometry-based gradient shader. Este sombreador escala un valor de color RGB constante según el alto de cada punto de un objeto en el espacio global.This shader scales a constant RGB color value by the height of each point of an object in world space.

Crear un sombreador de degradado basado en geometríaCreate a geometry-based gradient shader

Puede implementar un sombreador basado en geometría mediante la incorporación de la posición del píxel en el sombreador.You can implement a geometry-based shader by incorporating the position of the pixel into your shader. 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.In shading languages, a pixel contains more information than just its color and location on a 2D screen. 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.A pixel—known as a fragment in some systems—is a collection of values that describe the surface that corresponds to a pixel. 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.The shader that's described in this document utilizes the height of each pixel of a 3D object in world space to affect the final output color of the fragment.

Antes de empezar, asegúrese de que se muestran la ventana Propiedades y el Cuadro de herramientas.Before you begin, make sure that the Properties window and the Toolbox are displayed.

  1. Cree un sombreador DGSL con el que trabajar.Create a DGSL shader with which to work. Para obtener información sobre cómo agregar un sombreador DGSL al proyecto, vea la sección Introducción de Diseñador de sombras.For information about how to add a DGSL shader to your project, see the Getting Started section in Shader Designer.

  2. Desconecte el nodo Color de punto del nodo Color final.Disconnect the Point Color node from the Final Color node. Elija el terminal RGB del nodo Color de punto y, después, elija Romper vínculos.Choose the RGB terminal of the Point Color node, and then choose Break Links. Esto hace sitio para el nodo que se agrega en el paso siguiente.This makes room for the node that's added in the next step.

  3. Agregue un nodo Multiplicar al gráfico.Add a Multiply node to the graph. En el Cuadro de herramientas, en Matemáticas, seleccione Multiplicar y muévalo a la superficie de diseño.In the Toolbox, under Math, select Multiply and move it to the design surface.

  4. Agregue un nodo Vector de máscara al gráfico.Add a Mask Vector node to the graph. En el Cuadro de herramientas, en Utilidad, seleccione Vector de máscara y muévalo a la superficie de diseño.In the Toolbox, under Utility, select Mask Vector and move it to the design surface.

  5. Especifique los valores de máscara para el nodo Vector de máscara.Specify mask values for the Mask Vector node. 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.In Select mode, select the Mask Vector node, and then in the Properties window, set the Green / Y property to True, and then set the Red / X, Blue / Z and Alpha / W properties to 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.In this example, the Red / X, Green / Y, and Blue / Z properties correspond to the x, y, and z components of the World Position node, and Alpha / W is unused. Dado que solo Verde / Y está establecido en True, solo el componente Y del vector de entrada permanece después de que se enmascare.Because only Green / Y is set to True, only the y component of the input vector remains after it is masked.

  6. Agregue un nodo Posición global al gráfico.Add a World Position node to the graph. En el Cuadro de herramientas, en Constantes, seleccione Posición global y muévala a la superficie de diseño.In the Toolbox, under Constants, select World Position and move it to the design surface.

  7. Enmascare la posición de espacio global del fragmento.Mask the world space position of the fragment. En el modo Seleccionar, mueva el terminal Salida del nodo Posición global al terminal Vector del nodo Vector de máscara.In Select mode, move the Output terminal of the World Position node to the Vector terminal of the Mask Vector node. Esta conexión enmascara la posición del fragmento para ignorar los componentes X y Z.This connection masks the position of the fragment to ignore the x and z components.

  8. Multiplique la constante de color RGB por la posición del espacio de global enmascarada.Multiply the RGB color constant by the masked world space position. 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.Move the RGB terminal of the Point Color node to the Y terminal of the Multiply node, and then move the Output terminal of the Mask Vector node to the X terminal of the Multiply node. Esta conexión escala el valor de color según el alto de píxel en el espacio global.This connection scales the color value by the height of the pixel in world space.

  9. Conecte el valor de color escalado al color final.Connect the scaled color value to the final color. Mueva el terminal Salida del nodo Multiplicar al terminal RGB del nodo Color final.Move the Output terminal of the Multiply node to the RGB terminal of the Final Color node.

La ilustración siguiente muestra el gráfico de sombreador completo y una vista previa del sombreador aplicado a una esfera.The following illustration shows the completed shader graph and a preview of the shader applied to a sphere.

Note

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.In this illustration, an orange color is specified to better demonstrate the effect of the shader, but because the preview shape has no position in world-space, the shader cannot be fully previewed in the Shader Designer. El sombreador se debe previsualizar en una escena real para demostrar el efecto completo.The shader must be previewed in a real scene to demonstrate the full effect.

Gráfico de sombreador y vista previa de su efecto

Es posible que algunas formas proporcionen mejores vistas previas para algunos sombreadores.Certain shapes might provide better previews for some shaders. Para más información sobre cómo obtener una vista previa de los sombreadores en el Diseñador de sombras, vea Vista previa de sombreadores en Diseñador de sombrasFor information about how to preview shaders in the Shader Designer, see Previewing shaders in Shader Designer

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.The following illustration shows the shader that's described in this document applied to the 3D scene that's demonstrated in How to: Model 3D terrain. La intensidad del color aumenta con el alto del punto en la posición global.The intensity of the color increases with the height of the point in the world.

Efecto de degradado aplicado a un modelo de terreno 3D

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 3D.For more information about how to apply a shader to a 3D model, see How to: Apply a shader to a 3D model.

Vea tambiénSee also