Diseñador de sombras

En este documento se describe cómo trabajar con el Diseñador de sombras de Visual Studio para crear, modificar y exportar efectos visuales personalizados que se conocen como sombreadores.

Puede utilizar el Diseñador de sombras para crear efectos visuales personalizados para su juego o aplicación incluso si no tiene conocimientos de programación de HLSL.Para crear un sombreador en el Diseñador de sombras, basta con diseñarlo como gráfico; es decir, agregar a la superficie de diseño nodos que representan datos y operaciones y, a continuación, crear conexiones entre ellos para definir cómo procesan los datos las operaciones.En cada nodo de la operación, se proporciona una vista previa del efecto hasta ese punto para poder ver el resultado.Los datos recorren los nodos hacia un nodo final que representa la salida del sombreador.

Formatos compatibles

El Diseñador de sombras admite estos formatos de sombreador:

Nombre de formato	Extensión de archivo	Operaciones admitidas (ver, editar, exportar)
Lenguaje dirigido de Gráficos Sombreador	.dgsl	Ver, editar
Sombreador de HLSL (código fuente)	.hlsl	Exportar
Sombreador de HLSL (código de bytes)	.cso	Exportar
Encabezado de C++ (matriz de código de bytes de HLSL)	.h	Exportar

Introducción

En esta sección se describe cómo agregar un sombreador de DGSL al proyecto de Visual Studio y proporciona la información básica para ayudarle a empezar.

Para agregar un sombreador de DGSL al proyecto

1. En Explorador de soluciones, abra el menú contextual del proyecto al que desea agregar el sombreador y, a continuación Add, Nuevo elemento.

2. En el cuadro de diálogo agregar nuevo elemento, en Instalado, Gráficos seleccione, y Sombreador visual Gráfico (.dgsl) seleccione.

3. Especifique Nombre de archivo de presentación, y Ubicación donde desea que se creará.

4. elija el botón de Agregar .

El sombreador predeterminado

Cada vez que cree un sombreador de DGSL, empieza como sombreador mínimo que solo tiene un nodo Color de punto que esté conectado al nodo Color final.Aunque este sombreador esté completo y funcional, no hace mucho.Por consiguiente, el primer paso para crear un sombreador que funciona suele ser eliminar el nodo Color de punto o desconectarlo de nodo Color final para hacer sitio para otros nodos.

Trabajar con el diseñador de sombreados

Las secciones siguientes se describe cómo utilizar el Sombreador Designer para ejecutar los sombreadores personalizados.

Barras de herramientas del diseñador de sombras

Las barras de herramientas del Diseñador de sombras contienen comandos que ayudan a trabajar con gráficos de sombreador de DGSL.

Los comandos que afectan al estado del Diseñador de sombras se encuentran en la barra de herramientas del Modo del Diseñador de sombras en la ventana principal de Visual Studio.Las herramientas de diseño y comandos se encuentran en la barra de herramientas del Diseñador de sombras en la superficie de diseño del diseñador de sombras.

A continuación, se muestra la barra de herramientas del Modo Diseñador de sombras :

En esta tabla se describen los elementos de la barra de herramientas del Modo Diseñador de sombras; se muestran en el orden en que aparecen de izquierda a derecha.

Elemento de la barra de herramientas	Descripción
Select	Habilita la interacción con nodos y bordes en el gráfico.En este modo, puede seleccionar nodos y moverlos o eliminarlos y puede establecer los bordes o romperlos.
Panorámica	Habilita el movimiento de un gráfico de sombreador en relación con el marco de la ventana.Para realizar el movimiento panorámico, seleccione un punto de la superficie de diseño y muévalo. En el modo Seleccionar, puede presionar y mantener presionada la tecla Ctrl para activar el modo Desplazamiento lateral temporalmente.
Zoom	Habilita la presentación de más o menos detalles del gráfico del sombreador en relación con el marco de la ventana.En el modo de Zoom, seleccione un punto de la superficie de diseño y muévalo a la derecha o hacia abajo para acercar o a la izquierda o hacia arriba para alejar. En el modo Seleccionar, puede presionar y mantener presionada la tecla Ctrl para acercar o alejar la rueda del mouse.
Zoom para ajustar	Muestra el gráfico de sombreador completo en el marco de la ventana.
Modo de representación en tiempo real	Cuando se habilita la representación en tiempo real, Visual Studio dibuja de nuevo la superficie de diseño, incluso si no se realiza ninguna acción del usuario.Este modo es útil cuando se trabaja con los sombreadores que cambian con el tiempo.
Vista previa con esfera	Cuando está habilitada, se utiliza un modelo de una esfera para obtener una vista previa del sombreador.Solo puede estar habilitada una forma de vista previa en cada momento.
Vista previa con cubo	Cuando está habilitada, se utiliza un modelo de un cubo para obtener una vista previa del sombreador.Solo puede estar habilitada una forma de vista previa en cada momento.
Vista previa con cilindro	Cuando está habilitada, se utiliza un modelo de un cilindro para obtener una vista previa del sombreador.Solo puede estar habilitada una forma de vista previa en cada momento.
Vista previa con cono	Cuando está habilitada, se utiliza un modelo de un cono para obtener una vista previa del sombreador.Solo puede estar habilitada una forma de vista previa en cada momento.
Vista previa con tetera	Cuando está habilitada, se utiliza un modelo de una tetera para obtener una vista previa del sombreador.Solo puede estar habilitada una forma de vista previa en cada momento.
Vista previa con plano	Cuando está habilitada, se utiliza un modelo de un plano para obtener una vista previa del sombreador.Solo puede estar habilitada una forma de vista previa en cada momento.
Cuadro de herramientas	Como alternativa muestra u oculta el Cuadro de herramientas.
Propiedades	Como alternativa muestra u oculta la ventana Propiedades.
Avanzado	Contiene comandos y opciones avanzados. Exportar Habilita la exportación de un sombreador en varios formatos. exportación como Exporta el sombreador como código fuente de HLSL o como código byte compilado del sombreador.Para obtener más información sobre cómo exportar sombreadores, vea Cómo: Exportar un sombreador. Motores gráficos Habilita la selección del representador que se usa para mostrar la superficie de diseño. Presentación con D3D11 Utiliza Direct3D 11 para presentar la superficie de diseño del Diseñador de sombras. Representar con D3D11WARP Utiliza Windows Advanced Rasterization Platform (WARP) de Direct3D 11 para presentar la superficie de diseño del Diseñador de sombras. View Habilita la selección de información adicional sobre el Diseñador de sombras. Velocidad de fotograma Cuando está habilitada, muestra la velocidad de fotograma actual en la esquina superior derecha de la superficie de diseño.La velocidad de fotograma es el número de marcos dibujados por segundo. Esta opción es útil cuando se habilita la opción de Modo en tiempo real de representación. Sugerencia Puede elegir el botón Avanzadas para volver a ejecutar el último comando.

Trabajar con nodos y conexiones

Utilice el modo Seleccionar para agregar, quitar, cambiar de posición, conectar y configurar nodos.Aquí se muestra cómo realizar estas operaciones básicas:

Para realizar operaciones básicas en el modo Seleccionar

• Aquí se muestra cómo:

  • Para agregar un nodo al gráfico, selecciónelo en el Cuadro de herramientas y, a continuación, muévalo a la superficie de diseño.

  • Para quitar un nodo del gráfico, selecciónelo y, a continuación, presione Suprimir.

  • Para cambiar la posición de un nodo, selecciónelo y después muévalo a una nueva ubicación.

  • Para conectar dos nodos, mueva un terminal de salida de un nodo a un terminal de entrada de otro nodo.Solo los elementos que tienen tipos compatibles pueden conectarse.Una línea entre los terminales muestra la conexión.

  • Para quitar una conexión, en el menú contextual de cualquiera de los terminales conectados, elija Romper vínculos.

  • Para configurar las propiedades de un nodo, seleccione el nodo y, a continuación, en la ventana Propiedades, especifique valores nuevos para las propiedades.

Obtener una vista previa de los sombreadores

Para ayudarle a entender cómo aparecerá un sombreador en la aplicación, puede configurar el modo en que se muestra una vista previa del efecto.Para ver una aproximación de su aplicación, puede elegir una de las distintas formas para presentar, configurar texturas y otros parámetros de materiales, habilitar la animación de efectos basados en el tiempo y examinar la vista previa desde distintos ángulos.

Formas

El Diseñador de sombras incluye seis formas que pueden usarse para realizar la vista previa del sombreador: esfera, cubo, cilindro, cono, tetera y plano.Dependiendo del sombreador, algunas formas pueden proporcionar una mejor vista previa.

Para elegir una forma de vista previa

• En la barra de herramientas Modo Diseñador de sombras, elija la forma que desee.

Parámetros de texturas y parámetros

Muchos sombreadores dependen de texturas y propiedades para producir un aspecto único para cada clase de objeto en la aplicación.Para ver el aspecto que tendrá el sombreador en su aplicación, puede establecer las texturas y las propiedades del material que se utilizan para presentar la vista previa de forma que coincidan con las texturas y los parámetros que podría utilizar en su aplicación.

Para enlazar una textura distinta a un registro de textura, o para modificar otros parámetros de material

1. En el modo Seleccionar, seleccione un área vacía de la superficie de diseño.Esto hace que la ventana Propiedades muestre las propiedades globales del sombreador.

2. En la ventana Propiedades, especifique los valores nuevos para la textura y las propiedades de parámetro que desee cambiar.

Estos son los parámetros del sombreador que puede modificar:

Parámetro	Propiedades
Textura 1 - Textura 8	Acceso Public para permitir que la propiedad se pueda establecer desde el editor de modelos; de lo contrario, Private. Nombre de archivo Ruta de acceso completa del archivo de textura asociado al registro de textura.
material ambiente	Acceso Public para permitir que la propiedad se pueda establecer desde el editor de modelos; de lo contrario, Private. Valor El color difuso del píxel actual debido a iluminación indirecta, o ambiental.
material difuso	Acceso Public para permitir que la propiedad se pueda establecer desde el editor de modelos; de lo contrario, Private. Valor Color que describe cómo difumina la iluminación directa del píxel actual.
material emisivo	Acceso Public para permitir que la propiedad se pueda establecer desde el editor de modelos; de lo contrario, Private. Valor Contribución de color del píxel actual, a causa de la iluminación propia proporcionada.
material especular	Acceso Public para permitir que la propiedad se pueda establecer desde el editor de modelos; de lo contrario, Private. Valor Color que describe cómo refleja la iluminación directa del píxel actual.
potencia especular material	Acceso Public para permitir que la propiedad se pueda establecer desde el editor de modelos; de lo contrario, Private. Valor Exponente que define la intensidad de los reflejos especulares del píxel actual.

Efectos basados en el tiempo

Algunos sombreadores tienen un componente basado en tiempo que anima el efecto.Para ver en acción el aspecto que tiene el efecto, la vista previa tiene que actualizarse varias veces por segundo.De forma predeterminada, la vista previa se actualiza cuando se cambia el sombreador; para cambiar este comportamiento de forma que pueda ver efectos basados en el tiempo, tiene que habilitar la representación en tiempo real.

Para habilitar la representación en tiempo real

• En la barra de herramientas Diseñador de sombras, elija Representación en tiempo real.

Examinar el efecto

Muchos sombreadores se ven afectados por variables como el ángulo de vista o la iluminación direccional.Para examinar la respuesta del efecto a medida que cambian estas variables, puede rotar la vista previa libremente y observar cómo se comporta el sombreador.

Para girar la forma

• Mantenga presionada Alt y, después, seleccione cualquier punto de la superficie de diseño y muévalo.

Exportar sombreadores

Antes de poder usar un sombreador de la aplicación, tiene que exportarla en un formato que DirectX comprenda.

Puede exportar sombreadores como código fuente de HLSL o como código de bytes de sombreador compilado.El código fuente de HLSL se exporta a un archivo de texto con una extensión de nombre de archivo .hlsl.El código de bytes del sombreador se puede exportar a un archivo binario sin formato que tiene una extensión de nombre de archivo .cso, o a un archivo de encabezado (.h) de C++ que codifica el código de bytes del sombreador en una matriz.

Para obtener más información sobre cómo exportar sombreadores, vea Cómo: Exportar un sombreador.

Métodos abreviados de teclado

Command	Métodos abreviados de teclado
Cambiar al modo Seleccionar	Ctrl+G, Ctrl+Q S
Cambiar al modo Zoom	Ctrl+G, Ctrl+Z Z
Cambiar al modo Movimiento panorámico	Ctrl+G, Ctrl+P K
Seleccionar todo	Ctrl+A
Eliminar la selección actual.	Eliminar
Cancelar la selección actual	Escape
Acercar	Ctrl+rueda del mouse hacia delante Signo más (+)
Alejar	Ctrl-rueda del mouse hacia atrás Signo menos (-)
Desplazar lateralmente en sentido ascendente la superficie de diseño	Rueda del mouse hacia atrás AvPág
Movimiento panorámico de la superficie de diseño hacia abajo	Rueda del mouse hacia delante RePág
Movimiento panorámico de la superficie de diseño hacia la izquierda	Mayús+rueda del mouse hacia atrás Rueda del mouse a la izquierda Mayús+AvPág
Movimiento panorámico de la superficie de diseño hacia la derecha	Mayús+rueda del mouse hacia delante Rueda del mouse a la derecha Mayús+RePág
Mover el foco del teclado a otro nodo	Las teclas de flecha
Seleccionar el nodo que tiene el foco de teclado (agrega el nodo al grupo de selección)	Mayús+espacio
Alternar la selección del nodo que tiene el foco de teclado	Ctrl+barra espaciadora
Alternar la selección actual (si no hay nodos seleccionados, seleccione el nodo que tiene el foco de teclado)	Barra espaciadora
Desplazar hacia arriba la selección actual	Mayús+flecha arriba
Desplazar hacia abajo la selección actual	Mayús+Flecha abajo
Desplazar hacia la izquierda la selección actual	Mayús+flecha izquierda
Mueva la selección actual a la derecha	Mayús+flecha derecha

Temas relacionados

Título	Descripción
Trabajar con activos 3D para juegos y aplicaciones	Proporciona información general sobre las herramientas de Visual Studio que puede utilizar para ejecutar texturas y las imágenes, los modelos 3D, y los efectos de presentación.
Editor de imágenes	Describe cómo usar el editor de imágenes de Visual Studio para ejecutar texturas e imágenes.
Editor de modelos	Describe cómo usar el editor de modelos de Visual Studio para trabajar con modelos 3D.