Manual para Programar en XNA 3 1

XNA Game Studio 3.
1
Carlos Osnaya Medrano
Manual de programacin bsica sobre computacin grfica
3D en XNA Game Studio 3.1
1 Contenido
Parte I............................................................................................................................................................ 4
1
Diseo del manual de XNA en espaol.................................................................................................. 5

1.1
Estructura ..................................................................................................................................... 5
1.2
A quin va dirigido el manual de programacin en XNA .............................................................. 5
1.3
Requisitos ..................................................................................................................................... 6
1.3.1
Software ................................................................................................................................... 6
1.3.2
Hardware .................................................................................................................................. 7
Parte II Manual ............................................................................................................................................. 8

1
Vertex Buffer ......................................................................................................................................... 9

1.1
VertexBuffer ................................................................................................................................. 9
1.2
DynamicVertexBuffer ................................................................................................................. 19
Primitivas ............................................................................................................................................. 21
2.1
PointList ...................................................................................................................................... 22
2.2
LineList ........................................................................................................................................ 23
2.3
LineStrip ...................................................................................................................................... 23
2.4
Modos de Culling ........................................................................................................................ 24
2.5
TriangleList.................................................................................................................................. 24
2.6
TriangleStrip ............................................................................................................................... 26
2.7
TriangleFan ................................................................................................................................. 27
Creando objeto 3D .............................................................................................................................. 28

3.1
Posicionando cmara.................................................................................................................. 31
3.2
Teclado ....................................................................................................................................... 32
3.3
Control 360 ................................................................................................................................. 32
3.4
Traslacin.................................................................................................................................... 34
3.5
Escala .......................................................................................................................................... 35
3.6
Rotacin ...................................................................................................................................... 37
Textura ................................................................................................................................................ 40
4.1
El txel ........................................................................................................................................ 40
4.2
Filtros .......................................................................................................................................... 41
4.3
Mipmaps ..................................................................................................................................... 42
4.4
Plano con textura........................................................................................................................ 42
4.5
Modos de direccionamiento ....................................................................................................... 48
Texto .................................................................................................................................................... 52
5.1
SpriteFont ................................................................................................................................... 52
5.2
6
Cmo cargar modelos 3D desde un archivo X y FBX ........................................................................... 61

6.1
Formatos de archivos ................................................................................................................. 61
6.2
La clase Model ............................................................................................................................ 61
6.3
Ejemplo 01 .................................................................................................................................. 63
6.4
Ejemplo 02 .................................................................................................................................. 66
6.4.1
7
7.1
Shader ......................................................................................................................................... 74
7.2
Iluminacin ambiental ................................................................................................................ 75
7.2.1
HLSL. Modelo de iluminacin ambiental ................................................................................ 75
7.2.2
Inciando FX Composer............................................................................................................ 81
7.2.3
HLSL. Modelo de iluminacin ambiental con textura ............................................................ 86
7.2.4
Aadiendo nuevo efecto en FX Composer ............................................................................. 90

Iluminacin difusa ...................................................................................................................... 91
7.3.1
Fuente de iluminacin direccional ......................................................................................... 93
7.3.2
Fuente de iluminacin puntual .............................................................................................. 97
7.3.3
Fuente de iluminacin spot .................................................................................................. 103
7.4
7.4.1
7.5
Iluminacin especular ............................................................................................................... 110

Reflexin especular. Actualizando cdigos de fuentes de iluminacin ............................... 112
Mltiples fuentes de iluminacin ............................................................................................. 114
7.5.1
Multi-pass rending ............................................................................................................... 115
7.5.2
Ejemplo Multiluces ............................................................................................................... 115
Cmo agregar un efecto en XNA ....................................................................................................... 123

8.1
Blending ................................................................................................................................. 70
Iluminacin .......................................................................................................................................... 74
7.3
Sprite Font Texture ..................................................................................................................... 57
Efecto ambiental....................................................................................................................... 123
8.1.1
Clonacin de efecto.............................................................................................................. 123
8.1.2
Interfaz para el shader ......................................................................................................... 126
8.2
Luz direccional .......................................................................................................................... 132
8.3
Efecto multiluces ...................................................................................................................... 139
Colisin .............................................................................................................................................. 150

9.1
Bounding Sphere vs. Bounding Sphere ..................................................................................... 151
9.2
Axis Aligned Bounding Box vs. Axis Aligned Bounding Box....................................................... 160
9.3
Ray vs. Boundign Sphere .......................................................................................................... 167
9.3.1
Cmara libre ......................................................................................................................... 167
9.3.2
La clase Mira ......................................................................................................................... 173
9.3.3
La clase Proyectil .................................................................................................................. 174

2
9.3.4
La clase ModeloEstatico ....................................................................................................... 176
9.3.5
Implementacin ................................................................................................................... 178
10
Bibliografa .................................................................................................................................... 182
11
Glosario ......................................................................................................................................... 184
Parte I
1 Diseo del manual de XNA en espaol

1.1 Estructura
El manual est constituido por nueve captulos, los primeros seis muestran el uso de las clases
principales de dibujado en 3D en XNA, y no demuestran una gran complicacin para el lector. Los ltimos
tres captulos hacen uso de las clases explicadas en los seis primeros, y aumenta la complejidad del cdigo,
pues abarca conceptos matemticos computacin grfica y un nuevo lenguaje de programacin. Sin
embargo, se ha tratado de explicar de la mejor manera para su comprensin.
En cada captulo se muestra una serie de ejemplos con su cdigo explicado lnea a lnea, al finalizar cada
uno se muestran imgenes que ayudan a demostrar el resultado esperado. En ocasiones se deja al lector un
ejercicio para que verifique los diferentes valores que pueden tomar algunos mtodos, o se deja que
complemente algunos ejemplos vistos con anterioridad.
En seguida se muestra un resumen de los captulos del manual de programacin en XNA.
Vertex buffer. En este captulo se explican las clases VertexBuffer y DynamicVertexBuffer, clases que
representan el bfer de vrtices del dispositivo grfico. Para mostrar las diferencias entre cada clase, se
utiliza un arreglo de vrtices para dibujar un tringulo.
Primitivas. Aqu se muestra cada una de las primitivas que XNA ofrece para dibujar. En cada una de ellas
se utiliza un mismo arreglo de vrtices para mostrar las diferencias entre cada una de ellas; a excepcin de la
ltima, en donde se le asigna al bfer de vrtices otro arreglo.
Creando objeto 3D. En este captulo se muestra cmo posicionar la cmara en el mundo tridimensional,
a utilizar la entrada de datos por medio del teclado y el gamepad del Xbox 360, para trasladar, rotar y/o
escalar un cubo. Este cubo es creado a partir de un arreglo de vrtices y uno de ndices.
Textura. Se presenta un plano, creado a partir de un arreglo de vrtices, en donde texturiza una imagen.
A la textura se le aplican diferentes filtros predefinidos en XNA, tambin se utilizan todos los modos de
direccionamiento que presenta XNA.
Texto. XNA tiene dos formas de presentar texto en pantalla, una es a partir de un XML con todas las
propiedades de la fuente y la otra es a partir de una imagen con todos los caracteres a mostrar.
Iluminacin. Se deja a un lado XNA y se manejan los shaders, para explicar modelos de iluminacin
bsicos con diferentes tipos de fuente de iluminacin. Y se introduce al lector al lenguaje de programacin
sobre hardware, High Level Shader Languaje (HLSL).
Cmo agregar un efecto en XNA. Se integran los efectos, vistos en el captulo anterior, en una solucin
de XNA. Se hacen pequeos cambios a los shaders, pero solo como cuestin de ilustracin; se le deja al
lector tratar de entender los cambios y el crear la aplicacin que totalice los efectos de iluminacin en XNA.
Colisin. El ltimo captulo revisa las clases BoundingSphere, BoundingBox y Ray. Para cada una de ellas
se presenta un caso de colisin entre ellas mismas, a excepcin de la clase Ray, ya que no es una envolvente.
Se crean las clases Camara, Mira, Proyectil, ModeloEstatico y ModeloDinamico; que complementan los tres
ejemplos de colisin.
1.2 A quin va dirigido el manual de programacin en XNA

El manual de programacin naci con la idea de apoyar a los estudiantes que estn cursando, o hayan
cursado, la materia de Computacin grfica, en la carrera de Ingeniera en computacin, de la Facultad de
Ingeniera en la Universidad Nacional Autnoma de Mxico. Sin embargo, en la Internet se encontr mucho
inters por parte de personas apasionadas con los grficos, y sobre todo, con la nueva tecnologa que
representa XNA Game Studio.
El manual est enfocado en los grficos 3D, por lo tanto, se recomienda que el pblico lector de esta
obra tenga los siguientes conocimientos, solo para una mejor comprensin.
5
Lenguaje de programacin C#.

Paradigma de programacin orientado a objetos.
Lenguaje de programacin C.
Geometra Analtica.
Algebra Lineal.
Aunque la anterior lista representa un obstculo, se ha tratado de explicar de la mejor manera los
ejemplos, para aquellas que estn por involucrarse en esta materia.
1.3 Requisitos
El manual de programacin estar acompaado por los programas fuentes, listos para ser ejecutados
desde un inicio. Tambin se incluirn videos demostrativos de algunos ejemplos que requieran ms que una
imagen.
Adems se incluir una copia de Visual Studio 2008 Express, XNA Game Studio 3.1 y FX Composer. Todo
este software se puede descargar gratuitamente de las siguientes direcciones Web.
1.3.1
http://www.microsoft.com/express/download/
http://www.microsoft.com/downloads/details.aspx?FamilyID=80782277-d584-42d2-8024893fcd9d3e82&displaylang=en
http://developer.nvidia.com/object/fx_composer_home.html
Software
XNA Game Studio funciona sobre plataformas Windows, en la Tabla 1-1 se muestran las versiones de los
sistemas operativos admitidos para la instalacin de XNA. Se recomienda la actualizacin del sistema
operativo
Tabla 1-1
Sistema Operativo
Versiones admitidas
Windows XP
Home Edition
Professional
Media Center Edition
Tablet PC Edition
Windows Vista
Home Basic
Home Premium
Business
Enterprise
Ultimate
Window 7
Home Basic
Home Premium
Professional
Enterprise
Ultimate
En el caso del Xbox 360, se debe contar con XNA Game Studio Connect. Este software se descarga desde
el bazar del Xbox 360.
1
Tabla de requisitos tomada de la siguiente direccin: http://msdn.microsoft.com/es-mx/library/bb203925.aspx
XNA Game Studio 3.1 necesita del entorno de desarrollo Visual Studio 2008, en cualquiera de sus
versiones Express, Standard, Professional o Team System. Las especificaciones de software y hardware de
cada una de ellas varan.
1.3.2
Hardware
El requisito adicional en hardware, sobre la PC, es una tarjeta grfica que admita Shader Model 3.0 y
DirectX 9.0c. Este requisito es indispensable para poder ejecutar los ejemplos mostrados en el captulo de
Iluminacin. Se recomienda la actualizacin de los controladores de la tarjeta grfica.
Para probar los ejemplos en el Xbox 360, se debe contar con un disco duro para su almacenamiento.
Parte II Manual
1 Vertex Buffer
1.1 VertexBuffer
Los modelos tridimensionales que se pueden ver en los videojuegos estn conformados por un conjunto
de planos triangulares en el espacio tridimensional. Cada plano est constituido por una terna de puntos y
una triada de aristas. Los puntos, alejndonos del trmino matemtico, almacenan informacin sobre su
posicin, color, textura, normal, tangente y binormal. Los puntos en el espacio, por lo menos deben
contener un conjunto de tres coordenadas (x, y, z). Dado la posible informacin que representan estos
puntos, se les ha denominado vrtices.
El vertex buffer es una regin de memoria, en la tarjeta grfica, para almacenar vrtices. Para establecer
dichos datos en el bfer de vrtices, XNA ofrece las clases VertexBuffer y DynamicVertexBuffer, esta ltima
2
hereda de la primera y VertexBuffer no se recomienda para el uso sobre el Xbox360 .
En el ejemplo siguiente, se muestra el uso del VertexBuffer para dibujar un tringulo. Comience por abrir
Visual Studio y cree un nuevo proyecto; para ello, vaya al men principal y seleccione
Archivo\Nuevo\Proyecto. Enseguida se abrir una ventana de dilogo para seleccionar el tipo de proyecto y
plantilla instalados. En tipos de proyecto, seleccione XNA Game Studio 3.1 y en la parte de plantillas tome
Windows Game (3.1), vase Ilustracin 1-1.
Ilustracin 1-1 Ventana de dilogo: Nuevo proyecto
Al crear su nueva aplicacin, podr visualizar que automticamente se crea todo lo necesario para
comenzar, es ms, puede oprimir F5 para ejecutarla y ver una ventana azul, vase Ilustracin 1-2.
Para mayor informacin acerca del vertex buffer consulte: http://msdn.microsoft.com/en-us/library/bb198836.aspx
Ilustracin 1-2 Programa predefinido
Claro est, que esto hace ms rpido el desarrollo de la aplicacin, sin embargo, hay que explicar unas
cosas antes de continuar, y slo sern las necesarias para ver el tringulo dibujado en la ventana.
using System;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
Estas son las directivas que se necesitan para crear el tringulo y que tiene que colocar al inicio del
archivo Game1.cs creado por Visual Studio.
System es el espacio de nombre que contiene las clases fundamentales que definen los datos, los
3
eventos, las interfaces, etctera.
Microsoft.XNA.Framework es el espacio de nombre que contiene las clases necesarias para crear
juegos.
Microsoft.XNA.Framework.Graphics es el espacio de nombre que contiene los mtodos de la API de
bajo nivel.
namespace TutorialX01
{
public class Game1 : Microsoft.Xna.Framework.Game
{
GraphicsDeviceManager graphics;
}
}
Visual Studio crea el namespace, cuyo nombre corresponde al del proyecto; la clase Game1, que hereda
de la clase Game y la variable de instancia GraphicsDeviceManager que maneja la configuracin y
administracin del dispositivo grfico, que es la tarjeta de video de la computadora. La clase Game provee
de la inicializacin bsica del dispositivo grfico, de la lgica del juego y el cdigo del render.
Para el ejemplo se aaden las siguientes lneas, despus de la declaracin del dispositivo grfico
GraphicsDeviceManager.
VertexDeclaration vertexDeclaration;
BasicEffect effect;
3
Para mayor informacin acerca de System visite la siguiente direccin: http://msdn.microsoft.com/es-es/library/system.aspx
10
VertexBuffer vertexBuffer;
VertexDeclaration es la clase que representa la declaracin de un vrtice, debido a que existen

diferentes tipos de vrtices definidos en XNA, estos pueden ser:
VertexPositionColor. Esctructura personalizada que contiene posicin y color.

VertexPositionColorTexture. Estructura personalizada que contiene posicin, color y textura.
VertexPositionNormalTexture. Estructura personalizada que contiene posicin, normal y textura.
VertexPositionTexture. Estructura personalizada que contiene posicin y textura.
En este ejemplo se utiliza VertexPositionColor, ms adelante se mostraran los dems tipos de vrtices.
En DirectX se defina la estructura del tipo de vrtice, sin embargo, XNA da estos cuatro tipos de estructuras
como parte sta, sin ms que llamarlas como cualquier tipo de dato.
BasicEffect representa un shader versin 1.1, dando soporte para el color de los vrtices, textura e
iluminacin. En XNA es necesario utilizar un tipo de shader para mostrar en pantalla el dibujo, a diferencia
de DirectX u OpenGL.
VertexBuffer es la clase que representa el buffer de vrtices para manipular los recursos.
Ahora se instancia los vrtices que crearan el tringulo, por lo que se usa un arreglo de
VertexPositionColor. El constructor sera el siguiente:
public VertexPositionColor (Vector3 position, Color color)
Tabla 1-1
Propiedad
Descripcin
position
Es un Vector3, por lo que representa la posicin del vrtice en coordeanas x, y ,z.
color
Es el color del vrtice representado por los colores R,G,B.
private
{
new
new
new
};
readonly VertexPositionColor[] vertices =

VertexPositionColor(new Vector3(0.0F, 1.0F, 0.0F), Color.White),
VertexPositionColor(new Vector3(1.0F, -1.0F, 0.0F), Color. White),
VertexPositionColor(new Vector3(-1.0F, -1.0F, 0.0F), Color. White)
En el constructor, de la clase Game1, se inicializa el dispositivo grfico y algunas propiedades de la

ventana en donde se mostrar todo el mundo que se cre, en la Tabla 1-2 se muestran algunas de estas
4
propiedades .
public Game1()
{
graphics = new GraphicsDeviceManager(this);
this.IsMouseVisible = true;
this.Window.Title = "doxmo Tutorial 00";
this.Window.AllowUserResizing = true;
}
Para mayor informacin de los miebros de la clase Game consulte la siguiente direccin: http://msdn.microsoft.com/enus/library/microsoft.xna.framework.game_members.aspx
11
Tabla 1-2
Propiedad
Descripcin
IsMouseVisible
Muestra u oculta el puntero del mouse sobre la venta, por default est
oculto.
Window.Title
Es el ttulo de la ventana, por default el ttulo es el nombre que se le di a la

solucin en el momento de crearla.
Window.AllowUserResizing
Permite mximizar o redimensionar el tamao de la venta.
En el mtodo Initialize es donde se inicializa toda lgica o cualquier recurso no grfico. Por default
dentro del mtodo se tiene la inicializacin base de la clase Game, as que hay que agregar unas cuantas
lneas para crear la declaracin del vrtice, el efecto as como el bfer de vrtices.
protected override void Initialize()
{
base.Initialize();
}
La declaracin de VertexDeclaration necesita de dos parmetros; el primero es el dispositivo grfico en

el que se asocian los vrtices, el segundo es un arreglo de elementos de vrtices, que ya contiene la
estructura de VertexPositionColor.
{
vertexDeclaration = new VertexDeclaration(GraphicsDevice,
VertexPositionColor.VertexElements);
vertexBuffer = new VertexBuffer(GraphicsDevice, 3 * VertexPositionColor.SizeInBytes,
BufferUsage.WriteOnly);
effect = new BasicEffect(GraphicsDevice, null);
effect.VertexColorEnabled = true;
vertexBuffer.SetData<VertexPositionColor>(vertices, 0, vertices.Length);
base.Initialize();
}
El constructor del VertexBuffer est sobrecargado, el que se tom en cuenta es el que especfica el
tamao y su uso.
VertexBuffer (GraphicsDevice, Int32, BufferUsage)
Tabla 1-3
Parmetros
Descripcin
graphicsDevice
Es el dispositivo grfico asociado con el vertex buffer.
sizeInBytes
Es el nmero de bytes alojados en el vertex buffer.
Usage
Es la opcin que identifica el comportamiento del vertex buffer.
Para inicializar el efecto bsico que proporciona XNA se utiliza:

12
public BasicEffect (GraphicsDevice device, EffectPool effectPool)

Tabla 1-4
Parmetros
Descripcin
device
Es el dispositivo grfico que crear el efecto.
effectPool
Especifica un conjunto de recursos para compartir entre los efectos.
BasicEffect.VertexColorEnabled es una propiedad que habilita el uso de vertices con colores.

public void SetData<T> (T[] data, int startIndex, int elementCount)
El mtodo SetData de VertexBuffer adquiere los datos a copiar en el bfer de vrtices, donde T es un
tipo de dato en el bfer.
Tabla 1-5
Parmetros
Descripcin
data
Es un arreglo que ser copiado al vertex buffer.
starIndex
Indica el ndice a partir del cual se copiarn los datos.
elementCount
Es el nmero de elementos mximos a copiar.
Siguiendo con el cdigo generado automticamente, por Visual Studio, tenemos los siguientes mtodos:
protected override void LoadContent()
{
}
protected override void UnloadContent()
{
}
protected override void Update(GameTime gameTime)
{
base.Update(gameTime);
}
LoadContent es llamado cuando los recursos grficos necesitan ser cargados.

UnloadContent es llamado cuando los recursos grficos necesitan ser liberados.
Update actualiza el estado de la sesin de multiplayer, como actualizar o supervisar el estado de los
dispositivos de entrada, como el gamepad.
Como parte final del archivo Game1.cs se tiene el mtodo que dibujar las geometras, y otras cosas ms
en pantalla, que por el momento ser un tringulo.
protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.Black);
Single apecto = GraphicsDevice.Viewport.AspectRatio;
effect.World = Matrix.Identity;
effect.View = Matrix.CreateLookAt(new Vector3(0, 0, 5),
Vector3.Zero,
Vector3.Up);
13
effect.Projection = Matrix.CreatePerspectiveFieldOfView(1, apecto, 1, 10);

GraphicsDevice.RenderState.FillMode = FillMode.WireFrame;
GraphicsDevice.VertexDeclaration = vertexDeclaration;
GraphicsDevice.Vertices[0].SetSource(vertexBuffer, 0, VertexPositionColor.SizeInBytes);
effect.Begin();
effect.CurrentTechnique.Passes[0].Begin();
GraphicsDevice.DrawPrimitives(PrimitiveType.TriangleList, 0, 1);
effect.CurrentTechnique.Passes[0].End();
effect.End();
base.Draw(gameTime);
}
La primera lnea limpia el viewport especificando un color, en este caso negro. Se asignan valores a la
matriz de mundo del efecto, en este caso con la matriz identidad, esta matriz sirve para hacer cabios de
posicin del modelo. As tambin se le asigna un valor a la matriz de vista, que sirve para cambiar la posicin
y direccin de la cmara, por medio del mtodo esttico CreateLookAt. Por el momento no se explicaran a
fondo estos trminos, pues se ver en los siguientes ejemplos, por ahora slo escrbalos.
Projection: es la matriz para cambiar la imagen 3D a 2D que ser dibujada en la pantalla de la
computadora; hay diferentes formas de proyecciones que se vern posteriormente.
Fillmode: es un numerador que especifica cmo se rellena el tringulo; existen tres modos de relleno de
las geometras, los cuales pueden ser punto, malla o slido.
En el modo de relleno Point se dibujan los vrtices de la geometra sin conectarlos entre s, vase
Ilustracin 1-3.
Ilustracin 1-3 Fillmode.Point
En el modo de relleno WireFrame, slo se dibujan los lados que conectan los vrtices de la geometra,
vase Ilustracin 1-4.
14
Ilustracin 1-4 Fillmode.WireFrame
En el modo de relleno Solid, se dibujan los lados que conectan los vrtices y los rellena, como en la
Ilustracin 1-5.
Ilustracin 1-5 Fillmode.Solid
A GraphicsDevice.VertexDeclaration se le asigna la declaracin del vrtice al dispositivo grfico. A

GraphicsDevice.Vertices[0].SetSource se le asigna el contenido del bfer de vrtices.
public void SetSource (VertexBuffer vb, int offsetInBytes,int
vertexStride)
Tabla 1-6
Parmetro
Descripcin
15
vb
El verttex buffer de donde se tomaran los datos.
offsetInBytes
Es el byte a partir del cual sern copiados los datos.
vertexStride
Es el tamao en bytes de los elementos en el vertex

buffer.
Para dibujar la geometra se utilizan los mtodos del efecto, as que se envuelve entre un Begin, mtodo
que comienza el efecto; y un End, mtodo que finaliza el efecto, al mtodo GraphicsDevice.DrawPrimitives.
Tambin se debe envolver entre las tcnicas que contiene el efecto y sus pasadas, en este caso solo
tienen una y tambin comienza con un Begin y termina con un End.
public void DrawPrimitives(PrimitiveType primitiveType, int startVertex,
int primitiveCount)
DrawPrimitives dibuja una secuencia no indexada de la geometra, especificando el tipo de primitiva. En
el siguiente captulo se vern los distintos tipos de primitivas que ofrece XNA.
Tabla 1-7
Parmetro
Descripcin
primitiveType
Describe el tipo de primitiva a dibujar.
startVertex
Indica el primer vrtice a partir del cual comenzar a

dibujar.
primitiveCount
Es el nmero de primitivas a dibujar.
Para concluir este captulo, en el archivo Program.cs, que crea Visual Studio, se encuentra el mtodo
Main, el cual corresponde al punto de inicio del programa.
static void Main(string[] args)
{
using (Game1 game = new Game1())
{
game.Run();
}
}
El mtodo Run de la clase Game es para inicializar el juego, para mantener en un bucle el dibujo y para
comenzar el procesamiento de eventos de la aplicacin.
Genere el proyecto en el men Generar y corrija cualquier excepcin de compilacin que haya ocurrido.
Si todo sali bien corra la aplicacin con F5 o vaya al men Depurar para iniciar el programa, y ver un
tringulo como el que se muestra en la Ilustracin 1-6.
16
Ilustracin 1-6 Tringulo
En el Cdigo 1-1 se muestra el enlistado completo que debera tener Game1.cs.

Cdigo 1-1
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
using System;
{
{
BasicEffect effect;
private
{
new
new
new
};
readonly VertexPositionColor[] vertices =

VertexPositionColor(new Vector3(0.0F, 1.0F, 0.0F), Color.White),
VertexPositionColor(new Vector3(1.0F, -1.0F, 0.0F), Color.White),
VertexPositionColor(new Vector3(-1.0F, -1.0F, 0.0F), Color.White)
public Game1()
{
Content.RootDirectory = "Content";
}
{
vertexBuffer = new VertexBuffer(GraphicsDevice, 3 *
VertexPositionColor.SizeInBytes, BufferUsage.WriteOnly);
17
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
base.Initialize();
}
{
}
{
}
{
}
{
Vector3.Zero,
Vector3.Up);
effect.Projection = Matrix.CreatePerspectiveFieldOfView(1,
apecto, 1, 10);
GraphicsDevice.Vertices[0].SetSource(vertexBuffer, 0,
VertexPositionColor.SizeInBytes);
effect.Begin();
effect.End();
}
}
}
18
1.2 DynamicVertexBuffer
Al igual que la clase VertexBuffer, la clase DynamicVertexBuffer sirve para almacenar una lista de
vrtices, sin embargo, esta clase funciona para un arreglo dinmico de vrtices, mientras que el otro es para
un arreglo no dinmico. As mismo lo recomiendan para el uso de aplicaciones sobre el Xbox360, en vez del
VetertexBuffer; porque se puede sobre pasar el tamao de la memoria de 10MB del EDRAM de la consola.
VertexBuffer.SetData no ser necesario para escribir los datos en el bfer de vrtices. Para lo anterior se
cuentan con otros mtodos de entrada de datos, pero que por ahora slo se mostrara el adecuado para el
tringulo.
public void DrawUserPrimitives<T> (PrimitiveType primitiveType, T[]
vertexData, int vertexOffset, int primitiveCount)
Tabla 1-8
Parmetro
Descripcin
primitiveType
Describe el tipo de primitiva a dibujar
vertexData
Es el arreglo de vrtices
vertexOffset
Es el ndice del vrtice a partir del cual se copiaran

los datos al vertex buffer.
primitiveCount
Es el nmero de primitivas mximo que se

dibujaran.
En la lnea 65 del Cdigo 1-2 se muestra el fcil uso de DrawUserPrimitive. El resto del cdigo es el
mismo que en el ejemplo anterior.
Cdigo 1-2
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.

{
BasicEffect effect;
private readonly VertexPositionColor[] vertices =
{
new VertexPositionColor(new Vector3(0.0F, 1.0F, 0.0F), Color.Blue),
new VertexPositionColor(new Vector3(1.0F, -1.0F, 0.0F), Color.Green),
new VertexPositionColor(new Vector3(-1.0F, -1.0F, 0.0F), Color.Red)
};
public Game1()
{
}
{
19
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
base.Initialize();
}
{
}
{
}
{
}
{
Vector3.Zero,
Vector3.Up);
effect.Projection = Matrix.CreatePerspectiveFieldOfView(1, apecto, 1, 10);
effect.Begin();
GraphicsDevice.DrawUserPrimitives<VertexPositionColor>(
PrimitiveType.TriangleList, vertices, 0, 1);
effect.End();
}
}
20
2 Primitivas
Las primitivas son elementos bsicos para dibujar cualquier geometra en el espacio tridimensional. XNA
ofrece un conjunto de stas, y cada una se explicar a continuacin.
As como en el captulo anterior, se seguir usando el VertexBuffer y el DynamicBuffer para los
ejemplos.
Abra Visual Studio y cree un nuevo proyecto de XNA Game Studio 3.1, seleccionando la plantilla
Windows Game (3.1). Escriba la declaracin del bfer de vrtices y las variables de instancia de los vrtices,
en el archivo que Game1.cs; recuerde que se est trabajando en los archivos que se crean por default.
BasicEffect effect;
VertexPositionColor[] vertices ={
new VertexPositionColor(new Vector3(-2.0F, 0.0F, 2.0F), Color.White),
new VertexPositionColor(new Vector3(0.0F, 0.0F, 2.0F), Color.White),
new VertexPositionColor(new Vector3(2.5F, 0.0F, 2.0F), Color.White)};
VertexPositionColor[] abanico = {
new VertexPositionColor(new Vector3(0.5F, -0.5F, 2.0F), Color.White),
new VertexPositionColor(new Vector3(-0.5F, -1.0F, 2.0F), Color.White)};
En este caso se declararon dos arreglos de vrtices, el arreglo vertice es para mostrar cinco de las seis
primitivas de XNA, y el arreglo abanico es para mostrar la primitiva de abanico.
Dentro del constructor escriba las siguientes lneas para modificar algunas propiedades de la ventana en
que se mostraran las geometras, son las mismas propiedades que se explicaron en el captulo anterior.
this.Window.Title = "doxmo Tutorial 02a";
En el mtodo Initialize se crean las nuevas instancias del bfer de vrtices y el efecto.
vertexBuffer = new VertexBuffer(GraphicsDevice, 7 * VertexPositionColor.SizeInBytes,
Lo nico que cambia en esta declaracin es el nmero de elementos que contendr el bfer de vrtices,
as que se multiplica el nmero de elementos del arreglo por el tamao en bytes de la estructura
VertexPositionColor, es decir:
vertexBuffer = new VertexBuffer(GraphicsDevice, vertices.Length *
En el llenado del bfer de vrtices se utiliza el primer arreglo para mostrar las siguientes primitivas:
21
PointList
LineList
LineStrip
TriangleList
TriangleStrip
2.1 PointList
La primitiva PoinList toma una lista de vrtices y los muestra como puntos en el espacio, en el orden en
que se encuentran en el bfer de vrtices.
Cdigo 2-1
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
Single aspecto = GraphicsDevice.Viewport.AspectRatio;
effect.View = Matrix.CreateLookAt(new Vector3(0.0F, 0.0F, 6.0F),
Vector3.Zero,
Vector3.Up);
effect.Projection = Matrix.CreatePerspectiveFieldOfView(1.0F,
aspecto, 1.0F, 10.0F);
effect.Begin();
GraphicsDevice.DrawPrimitives(PrimitiveType.PointList, 0, 7);
effect.End();
El Cdigo 2-1 se deber escribir dentro del mtodo Draw, note que la mayora del cdigo es el mismo
que en el captulo anterior, excepto la lnea 16 en donde el tipo de primitiva ser PointList y el nmero
mximo de elementos que se dibujarn sern 7; por lo que podr cambiarlo por la propiedad Lenght del
arreglo vertices.
Inicie la aplicacin y ver siete puntos como en la Ilustracin 2-1.
Ilustracin 2-1 PointList
22
2.2 LineList
LineList es una primitiva que dibuja lneas rectas a partir de un par de vrtices del bfer de vrtices. En el
ejemplo se tienen siete vrtices con lo que se dibujarn tres lneas, el ltimo no se ocupa.
Modifique el mtodo DrawPimitives del Cdigo 2-1, lnea 16, cambiando el parmetro
PrimitiveType.PointList por PrimitiveType.LineList y el nmero de elementos a tres.
GraphicsDevice.DrawPrimitives(PrimitiveType.LineList, 0, 3);
Oprima F5 y ver algo similar a la Ilustracin 2-2. Como se puede ver, las lneas van del vertice 0 al 1, del
2 al 3 y del 4 al 5.
Ilustracin 2-2 LineList
2.3 LineStrip
LinStrip es la primitiva que une dos puntos para crear una lnea recta, tomando como punto de inicio el
segundo punto de la lnea anterior, excepto la primera lnea que no le antecede otra.
El nmero de rectas que se pueden dibujar dado un nmero de vrtices ser igual a:
= 1
2
Modifique el tipo de primitiva del Cdigo 2-1, lnea 16, por PrimitiveType.LineStrip y el nmero de
elementos a dibujar por seis, o por el nmero de elementos del arreglo vrtice menos uno.
GraphicsDevice.DrawPrimitives(PrimitiveType.LineStrip, 0, 6);
Oprima F5 y vera una imagen similar a la Ilustracin 2-3.
23
Ilustracin 2-3LineStrip
2.4 Modos de Culling

El culling es un algoritmo que determina la visibildad de las caras, sirve para dibujar slo aquella
geometra que se alcanza a ver, por ejemplo, en un cubo a lo ms que podemos ver son tres de sus caras. La
manera de conocer qu caras se dibujarn es por medio de la normal de sta. La normal es un vector
perpendicular al plano y la direccin de ste depender del sentido en que se vayan dibujando las primitivas.
Por default XNA tiene el modo CullCounterClockwiseFace activado, es decir, oculta aquellas caras que
por orden en el bfer de vrtices se asemejan al sentido contrario a las manecillas del reloj, ms adelante se
ver un ejemplo. El modo CullClockwiseFace, oculta aquellas caras que en el bfer de vrtices tengan el
orden semejante al sentido de las manecillas del reloj. El modo None hace caso omiso del modo de culling,
para dibujar todas las caras.
Escriba dentro del mtodo Draw en el Cdigo 2-1, lnea 13, el modo de culling None.
GraphicsDevice.RenderState.CullMode = CullMode.None;
Una manera sencilla de conocer qu caras no son dibujadas, es por medio de la regla de la mano derecha
para el caso de CullCounterClockwiseFace y la regla de la mano izquierda para el caso CullClockwiseFace.
2.5 TriangleList
TriangleList es la primitiva que toma triadas de vrtices para dibujar un tringulo. La manera de saber
qu nmero de elementos se pueden dibujar dado un nmero de vrtices es la siguiente:
=
El nmero de elementos ser igual a la parte entera del resultado de la divisin, adems de que debe ser
mayor a cero.
Modifique el mtodo Draw en el Cdigo 2-1, lnea 16; el primer parmetro cmbielo por
Primitive.TriangleList y el tercer parmetro por 2.
24
Oprima F5 para iniciar la aplicacin y ver una imagen similar a la Ilustracin 2-4.
Ilustracin 2-4 CullMode.None
Como puede ver, la primitiva toma los tres primeros vrtices para crear el tringulo de la derecha,
posteriormente toma los siguientes tres vrtices para dibujar el tringulo de la izquierda, por lo que no se
toma el ltimo vrtice.
Ahora modifique la lnea 13 del Cdigo 2-1 por CullClockwiseFace, para que oculte el tringulo cuya
primitiva se dibuje en el sentido de la manecillas del reloj.
GraphicsDevice.RenderState.CullMode = CullMode.CullClockwiseFace;
Ilustracin 2-5 CullMode.CullClockwiseFace
Despus cambie el modo del culling a CullCounterClockwiseFace para ocultar el tringulo cuya primitiva
se dibuje en el sentido contrario a las manecillas del reloj.
25
Ilustracin 2-6 CullMode.CullCounterClockwiseFace
2.6 TriangleStrip
TriangleStrip es la primitiva que permite dibujar con eficiencia tringulos, pues toma dos de los ltimos
vrtices del tringulo anterior ms un nuevo vrtice para crearlo, excepto la primera triada de vertices del
bfer de vrtices. Es decir, el primer tringulo toma los vrtices 1, 2 y 3; el segundo toma los vrtices 2, 3 y
4; el tercer tringulo toma los vrtices 3, 4 y 5.hasta concluir con la lista contenida en el bfer de vrtices.
Cambie el mtodo DrawPrimitives en el Cdigo 2-1, lnea 16, en el primer y ltimo parmetro.
GraphicsDevice.DrawPrimitives(PrimitiveType.TriangleStrip, 0, 5);
Inicie la aplicacin con la tecla F5, y ver algo similar a la Ilustracin 2-7.
Ilustracin 2-7 TriangleStrip
Para conocer la cantidad mxima de TriangleStrip que se pueden dibujar a partir de un nmero dado de
vrtices se resta el nmero de vrtices menos dos.
= 2
26
2.7 TriangleFan
Esta ltima primitiva utiliza el primer vrtice del bfer de vrtices, el ltimo vrtice del tringulo anterior
y el vrtice siguiente. Es decir, el primer tringulo est formado por los vrtices 1, 2 y 3; el segundo tringulo
por los vrtices 1, 3 y 4; el tercer tringulo est constituido por los vrtices 1, 4 y 5.
De nueva cuenta, cambie los parmetros uno y tres del mtodo DrawPimitives, del Cdigo 2-1, lnea 16.
GraphicsDevice.DrawPrimitives(PrimitiveType.TriangleFan, 0, 3);
Ilustracin 2-8 TriangleFan
El nmero de TriangleFan mximos que se pueden extraer de una lista de vrtices, se calcula al restar
dos, al nmero de vrtices del bfer, con lo cual se obtiene la siguiente frmula:
= 2
27
3 Creando objeto 3D
En este captulo se dibujar un cubo a partir de un arreglo de vrtices y un ndice que indica que nmero
de vrtice debe conformar el tringulo.
Un cubo se conforma de seis caras, ocho vrtices y doce tringulos, sin embargo, no se declararan treinta
y seis vrtices, pues habra redundancia en los datos hacindolo ineficaz para este ejemplo. As que el ndice
llevar el orden en que se deben dibujar los tringulos.
Comience por abrir Visual Studio y cree una nueva solucin para XNA. Declare en el archivo Game1.cs
como variables de instancia los vrtices, el efecto, el vertexbuffer, el indexbuffer y un arreglo de enteros que
servir como ndice.
Cdigo 3-1
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
BasicEffect effect;
IndexBuffer indexBuffer;
Color color = new Color(new Vector3(0.05859375F, 0.12890625F, 0.1484375F));
VertexPositionColor[] vertices ={
new VertexPositionColor(new Vector3(-1.0F, -1.0F, 1.0F), Color.White),
new VertexPositionColor(new Vector3(1.0F, -1.0F, 1.0F), Color.White),
new VertexPositionColor(new Vector3(-1.0F, -1.0F, -1.0F), Color.White),
new VertexPositionColor(new Vector3(-1.0F, 1.0F, -1.0F), Color.White),
new VertexPositionColor(new Vector3(1.0F, 1.0F, -1.0F), Color.White),
new VertexPositionColor(new Vector3(1.0F, -1.0F, -1.0F), Color.White)
};
Int32[] indices ={0, 1, 2,
0, 2, 3,
4, 6, 5,
// Posterior
4, 7, 6,
4, 5, 1,
// Izquierda
4, 1, 0,
3, 2, 6,
// Derecha
3, 6, 7,
1, 5, 6,
// Tapa
1, 6, 2,
4, 0, 3,
// Base
4, 3, 7};
// Frente
Las lnea 4 del Cdigo 3-1 representa: el bfer de ndices, que describe el orden de dibujo de los vrtices
en el bfer de vrtices.
Se pueden generar nuevos colores con el constructor Color que tiene ocho sobrecargas, lnea 5, en este
caso se utiliz la sobrecarga que recibe como parmetro una estructura Vector3, cuyas coordenadas (x, y, z)
representan el rojo, el verde y el azul respectivamente. El rango que puede contener cada coordenada (x, y,
z) es de 0.0F a 1.0F.
En el mtodo Initialize de la clase Game1, inicialice el bfer de vrtices, el bfer de ndices y el efecto.
Cdigo 3-2
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

{
vertexBuffer = new VertexBuffer(GraphicsDevice, vertices.Length *
// inicializacin del index buffer
indexBuffer = new IndexBuffer(GraphicsDevice, typeof(Int32), indices.Length,
28
11.
12.
13.
14.
15.
16.
17.

indexBuffer.SetData<Int32>(indices, 0, indices.Length);
base.Initialize();
}
El constructor de IndexBuffer que se ocup tiene la siguiente forma:

public IndexBuffer(GraphicsDevice graphicsDevice, Type indexType, int
elementCount, BufferUsage usage)
En la Tabla 3-1 se muestra el significado de cada parmetro que toma el constructor.
Tabla 3-1
Parmetro
Descripcin
graphicsDevice
Es el dispositivo grfico asociado con el bfer de

ndice.
indexType
Es el tipo usado por los valores del ndice.
elementCount
Es el nmero de valores en el bfer.
Usage
Es un conjunto de opciones que identifican el

comportamiento de los recursos del bfer de ndice.
En la lnea 14 del Cdigo 3-2, la asignacin de los datos de un arreglo al bfer de ndice se utiliz el
siguiente mtodo.
public void SetData<T>(T[] data, int startIndex, int elementCount)
Donde T es el tipo de dato de los elementos del arreglo a copiar en el bfer.
Tabla 3-2
Parmetro
Descripcin
data
Es el arreglo de datos a copiar.
startIndex
Es el ndice a partir del cual comenzar a copiar.
elementCount
Es el nmero de elementos a copiar.
Ya slo falta mandar a dibujar el cubo, as que en el mtodo Draw escriba las siguientes lneas para
poder ver el cubo en modo WireFrame.
Cdigo 3-3
1.
2.
3.
4.
5.
6.
7.
8.
9.

{
GraphicsDevice.Clear(color);
effect.View = Matrix.CreateLookAt(new Vector3(0.0F, 0.0F, -4.0F),
Vector3.Zero,
Vector3.Up);
29
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
effect.Projection = Matrix.CreatePerspectiveFieldOfView(1, aspecto, 1, 1000);

GraphicsDevice.Indices = indexBuffer;
effect.Begin();
GraphicsDevice.DrawIndexedPrimitives(PrimitiveType.TriangleList, 0,
0, indices.Length, 0, 12);
effect.End();
}
GraphicsDevice.Indices es una propiedad del dispositivo grfico para establecer el bfer de ndices al
dispositivo grfico.
El mtodo de dibujo, ahora toma un arreglo de enteros que indica el orden en que sern dibujados los
tringulos.
public void DrawIndexedPrimitives(PrimitiveType primitiveType, int
baseVertex, int minVertexIndex, int numVertices, int startIndex, int
primitiveCount)
En la Tabla 3-3 se muestra el significado de cada uno de los parmetros.
Tabla 3-3
Parmetro
Descripcin
primitiveType
Es el tipo de primitiva a dibujar.
baseVertex
Es el ndice a partir del cual se tomar en cuenta.
minVertexIndex
Es el ndice del vrtice usado durante la llamada.
numVertices
Es el nmero de vrtices usados durante la llamada.
startIndex
ndice a partir del cual se dibujar.
primitiveCount
Es el nmero de primitivas a dibujar.
Inicie el programa con F5 y podr ver algo parecido a la Ilustracin 3-1; si tuvo problemas de compilacin
resulvalas y vuelva a intentarlo.
30
Ilustracin 3-1 Cubo
Aunque a primera vista lo que aparece en el viewport no se parezca a un cubo, no es as, esto se debe a
la posicin de la cmara que se encentra frente a un lado del cubo. As que ahora modificaremos la posicin
de la cmara, slo para darnos una idea de que en realidad se ha dibujado una figura tridimensional.
3.1 Posicionando cmara

Para posicionar la cmara haremos uso del mtodo CreateLookAt que tiene tres vectores cmo
parmetros que indican: la posicin de la cmara, el punto de observacin y un vector unitario que indica
dnde es hacia arriba, vase Ilustracin 3-2.
Ilustracin 3-2 Parmetros del mtodo CreateLookAt
En este ejemplo slo se cambiar la posicin de la cmara sin cambiar los otros dos vectores. As que
comience por declarar los vectores de la cmara como variables de instancia de la clase Game1.
Vector3 posicion = new Vector3(0.0F, 0.0F, -4.0F);
Vector3 vista = Vector3.Zero;
Vector3 arriba = Vector3.Up;
31
Ahora asgnelas en los parmetros de CreateLookAt, lneas 7 9, Cdigo 3-3.

effect.View = Matrix.CreateLookAt(posicion, vista, arriba);
Para cambiar la posicin de la cmara se utilizar el teclado, y sabiendo que XNA se cre para que la
creacin de videojuegos fuera sencilla, pues s, tambin se utilizar el control 360 para cambiar la cmara.
3.2 Teclado
Comencemos con el teclado pues es el dispositivo de entrada de datos ms antiguo. Pero primero
definamos con qu teclas se harn los cambios.
Tecla
Movimiento
Flecha Izquierda
Disminuye la coordenada X
Flecha Derecha
Incrementa la coordenada X
Flecha Arriba
Incrementa la coordenada Y
Flecha Abajo
Disminuye coordenada Y
Avanza pgina
Incrementa coordenada Z
Retrocede pgina
Disminuye coordenada Z
Ahora hay que escribir las siguientes lneas de cdigo dentro del mtodo Update de la clase Game1.
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.Left))
posicion.X -= 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.Right))
posicion.X += 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.Up))
posicion.Y += 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.Down))
posicion.Y -= 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.PageUp))
posicion.Z += 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.PageDown))
posicion.Z -= 0.1F;
La clase Keyboard del namespace Microsoft.Xna.Framework.Input, es la encargada de verificar qu

tecla se oprimi o dej de oprimirse. El mtodo static GetState tiene dos sobrecargas, la primera no obtiene
ningn parmetro, y la segunda toma el jugador asociado al control.
IsKeyDown regresa un valor booleano si se ha presionado la tecla que se pas como parmetro; el
parmetro debe ser un elemento de la numeracin Keys.
3.3 Control 360

Antes de continuar con el manejo del control 360, es importante que se verifique que este dispositivo se
encuentre funcionando correctamente; por default Windows Vista y Windows 7 tiene el controlador
instalado, sin embargo, en versiones anteriores se tiene que descargar el controlador del control, en la
siguiente liga pueden descargarlo.
http://www.microsoft.com/hardware/download/download.aspx?category=Gaming
32
En la Ilustracin 3-3 se muestra el control del Xbox 360 con los nombres de los componentes de la clase
GamePad.
Ilustracin 3-3 Control 360
Ahora s, coloque las siguientes lneas de cdigo dentro del mtodo Update de la clase Game1, y por
debajo de las lneas que manejan el teclado.
if (GamePad.GetState(PlayerIndex.One).ThumbSticks.Right.X > 0)
posicion.X += 0.1F * GamePad.GetState(PlayerIndex.One).ThumbSticks.Right.X;
if (GamePad.GetState(PlayerIndex.One).ThumbSticks.Right.X < 0)
posicion.X -= 0.1F * -GamePad.GetState(PlayerIndex.One).ThumbSticks.Right.X;
if (GamePad.GetState(PlayerIndex.One).ThumbSticks.Right.Y > 0)
posicion.Y += 0.1F * GamePad.GetState(PlayerIndex.One).ThumbSticks.Right.Y;
if (GamePad.GetState(PlayerIndex.One).ThumbSticks.Right.Y < 0)
posicion.Y -= 0.1F * -GamePad.GetState(PlayerIndex.One).ThumbSticks.Right.Y;
if (GamePad.GetState(PlayerIndex.One).Triggers.Right > 0)
posicion.Z += 0.1F * GamePad.GetState(PlayerIndex.One).Triggers.Right;
if (GamePad.GetState(PlayerIndex.One).Triggers.Left > 0)
posicion.Z -= 0.1F * GamePad.GetState(PlayerIndex.One).Triggers.Left;
Al igual que con el teclado, la clase GamePad tiene mtodos estticos que muestran el estado de cada
uno de los componentes del control 360.
GetState tiene dos sobrecargas, en la primera recibe el nmero del jugador asociado al control; en la
segunda sobrecarga recibe el nmero del jugador (PlayerIndex) y el valor de la numeracin que especifica el
uso de la zona muerta (GamePadDeadZone).
Los valores que puede tomar GamePadDeadZone es: Circular, IndependentAxes y None. El valor de
Circular combina los posiciones x y y de cada uno de los sticks y es comparado con la zona muerta; esto es
una mejor prctica, que utilizar los ejes independientes. IndependentAxes compara a cada eje con la zona
muerta independientemente, y es el valor que se da por default en el mtodo GetState con un parmetro.
None regresa los valores sin procesar de cada stick como un arreglo; esto es cuando intenta implementar su
propia zona muerta.
Los sticks regresan un Vector2 con valores de punto flotante entre -1.0F y 1.0F. Los triggers regresan un
valor de punto flotante entre 0.0F y 1.0F. stos ltimos se utilizaran para cambiar el valor de la posicin de la
cmara.
Ya puede oprimir F5 para ejecutar la aplicacin y verificar que puede mover la cmara de posicin con el
teclado y el control del Xbox 360; en caso de tener un error de compilacin corrjalo y vulvalo a intentar.
33
Ilustracin 3-4 Cambio de posicin
3.4 Traslacin
Para comenzar con los tipos de transformaciones que puede realizarle a un modelo grfico, agregue las
siguientes variables de instancia a la clase Game1.
Vector3 traslacion = Vector3.Zero;
Single escala = 1.0F;
Single rotacionX = 0.0F;
Single rotacionY = 0.0F;
Single rotacionZ = 0.0F;
La traslacin consiste en mover los vrtices del modelo a una nueva posicin y esto se logra por medio
de la siguiente declaracin:
effect.World = Matrix.CreateTranslation(traslacion);
Recuerde que la matriz World sirve para realizar las transformaciones sobre la geometra, as que la
asignacin se le hace a la propiedad del efecto, en el mtodo Draw de la clase Game1.
El mtodo static CreateTranslation crea una matriz de translacin, la cual tiene cuatro sobrecargas, pero
todas comparten la idea de aceptar coordenadas x, y y z, de una manera u otra, en este caso fue un
Vector3D. Sus coordenadas se tomaran como la translacin respecto al eje que representan. Es decir, si el
vector tiene como coordenadas (1.0, -2.0, 0.0) los vrtices tendrn que trasladarse una unidad sobre el eje x,
menos dos unidades sobre el eje y, y cero unidades sobre el eje z.
Al igual que para mover la posicin de la cmara, la siguiente tabla muestra qu teclas debern oprimirse
para trasladar el modelo 3D.
Tabla 3-4
Tecla
Movimiento
Disminuye la coordenada X
Incrementa la coordenada X
34
Incrementa la coordenada Y
Disminuye la coordenada Y
Incrementa la coordenada Z
Disminuye la coordenada Z
Agregue las siguientes lneas de cdigo para trasladar el cubo, recuerde que deben escribirse dentro del
mtodo Update de la clase Game1.
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.D))
traslacion.X -= 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.A))
traslacion.X += 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.W))
traslacion.Y += 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.S))
traslacion.Y -= 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.Z))
traslacion.Z += 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.X))
traslacion.Z -= 0.1F;
Inicie la solucin oprimiendo F5, si hay algn error que compilacin resulvalo y vuelva a intentar.
Ilustracin 3-5 Traslacin
3.5 Escala
Para cambiar el tamao de los modelos se crea una matriz de escala, la cual tiene seis sobrecargas para
aceptar valores de tipo flotante o estructuras de tipo Vector3. El valor que se le asigne al mtodo esttico
CreateScale, se usar para cambiar el tamao del modelo. Algunas de las sobrecargas son:
Matrix.CreateScale (Single)
Matrix.CreateScale (Single, Single, Single)
Matrix.CreateScale (Vector3)
35
La primera sobrecarga escala las coordenadas de los vrtices por el valor del parmetro. En la segunda
sobrecarga cada parmetro representa la escala sobre el eje x, y y z, respectivamente. Y por ltimo, el
parmetro que toma un Vector3 toma los valores de sus coordenadas para cambiar el tamao del modelo,
muy parecido a la sobrecarga anterior.
En este caso se us un solo valor para cambiar en x, y y z el tamao del cubo. Las siguientes teclas son
para cambiar el tamao de la geometra.
Tecla
Accin
Incrementa el tamao.
Disminuye el tamao
Escriba el cdigo siguiente en el mtodo Update de la clase Game1, despus del que traslada la
geometra.
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.E))
escala += 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.R))
{
escala -= 0.1F;
if (escala < 0.1F)
escala = 0.1F;
}
Se coloca un condicional if en la disminucin de la escala, pues si llega a ser cero el modelo

desaparecera, y si llegar a ser menor que cero se llegara a cambiar el culling del modelo, lo que hara sera
mostrarnos las paredes internas del cubo.
Ahora hay que generar la matriz y multiplicarla por los valores anteriores, en el mtodo Draw de la clase
Game1.
effect.World = Matrix.Identity * Matrix.CreateTranslation(traslacion) *
Matrix.CreateScale(escala);
Oprima F5 y pruebe los cambios que puede hacer con el teclado; si hay un problema de compilacin
resulvalo y trate de nuevo.
36
Ilustracin 3-6 Escala
3.6 Rotacin
Como en cualquier otro juego en tercera persona, en el que se observa al personaje; el modelo 3D se
traslada sobre un mundo y tambin rota para poder cambiar de direccin mientras corren por sus vidas u
otra cosa que les pida cambiar de rumbo. La rotacin es la ltima transformacin que se har al cubito con
el que se ha estado trabajando, y que stas, las transformaciones, no son exclusivas de los modelos 3D,
tambin puede aplicarse a la cmara.
La rotacin se hace alrededor de un eje, y para eso se crea una matriz por medio de los mtodos
Matrix.CreateRotationX, Matrix.CreateRotationY y Matrix.CreateRotationZ. Esta terna de mtodos recibe
un parmetro en punto flotante que representa el ngulo en radianes que ser rotado alrededor de algn
eje coordenado.
En la Tabla 3-5 se muestra las teclas con las que manejar el cambio de orientacin del cubo.
Tabla 3-5
Tecla
Accin
Disminuye el ngulo de rotacin en Y.
Incrementa el ngulo de rotacin en Y.
Incrementa el ngulo de rotacin en X.
Disminuye el ngulo de rotacin en X.
Incrementa el ngulo de rotacin en Z.
Disminuye el ngulo de rotacin en Z.
Escriba las lneas cdigo dentro del mtodo Update y despus de las lneas que manipulan el tamao del
cubo.
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.J))
rotacionY -= 0.1F;
37
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.L))
rotacionY += 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.I))
rotacionX += 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.K))
rotacionX -= 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.U))
rotacionZ += 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.O))
rotacionZ -= 0.1F;
Ahora hay que multiplicar la matriz generada por la matriz de mundo del efecto; en este punto hay que
tener cuidado al colocar el ordene de las matrices, y que queda fuera del alcance de este documento, pues
la multiplicacin de las matrices no es conmutativa, as que en este ejemplo se coloca primero las matrices
de rotacin y despus la de traslacin.
effect.World = Matrix.Identity * Matrix.CreateScale(escala) *
Matrix.CreateRotationX(rotacionX) * Matrix.CreateRotationY(rotacionY) *
Matrix.CreateRotationZ(rotacionZ) *
Matrix.CreateTranslation(traslacion);
As que la siguiente ilustracin se muestra lo que pasa cuando se coloca primero las matrices de rotacin
y luego la de traslacin.
Ilustracin 3-7 Rotar y trasladar
Se oprimi una de las teclas que rota el cubo y luego se oprimi una que traslada al cubo; es como no si
hubiera movido los ejes coordenados, es decir, se rota alrededor del eje y y luego se traslada sobre el eje x,
conservando la misma distancia con el viewport.
Cambiando el orden de las matrices, primero la matriz de traslacin y luego las de rotacin, se aprecia un
cambio importante en la ilustracin siguiente.
38
Ilustracin 3-8 Rotar y trasladar
Se oprimieron las mismas teclas que en el ejemplo anterior para apreciar el cambio; en este caso es
como si se hubiera cambiado la orientacin de los ejes coordenados, es decir, primero se rota el cubo
alrededor del eje y (es como se hubieran girado tambin los ejes coordenados), y luego se traslad el cubo
sobre el eje x, lo que lo aleja del viewport.
39
4 Textura
Las texturas sirven como papel tapiz que se pegan sobre los modelos 3D para darle un aspecto ms
real, sin embargo, existen tcnicas ms avanzadas para generar la sensacin de realismo y que se basan en
el shader pero que no reemplazan a las texturas, las mejoran.
En este captulo se mostrar un ejemplo sencillo, un plano formado por dos tringulos y texturizado.
Las texturas son simplemente imgenes digitalizadas que deben tener ciertas caractersticas para que la
tarjeta grfica pueda soportarla. Anteriormente el tamao de las imgenes no pasaba de los 512x512
pixeles, empero la evolucin de las GPUs (Graphics Processing Unit) di cabida para experimentar con
mejores imgenes. As que hasta ahora las imgenes debern medir con potencias de 2, es decir, imgenes
que tengan las siguientes medidas sern aceptadas: 512x512, 512x1024, 256x512, 2048x1024, 1024zx1024,
etctera.
Los formatos de imgenes que podrn agregar en la solucin de un proyecto de XNA se muestran en la
5
Tabla 4-1.
Tabla 4-1
Formato
Significado
Bmp
Microsoft Windows bitmap.
Dds
DirectDrawSurface.
Dib
Microsoft Windows bitmap.
Hdr
High dynamic-range.
Jpg
Joint Photographic Experts Group (JPEG) compressed
Pfm
Portable float map.
Png
Portable Network Graphics.
Ppm
Portable pixmap.
Tga
Truevision Targa image.
Cada formato de imagen tiene sus caractersticas particulares que las hacen importantes para cada fin;
mientras unos son prcticamente una matriz de datos, lo que los hacen mucho ms grandes en bits y ms
completos; otros son menos grandes en bits pero con menor informacin y adems agregan sus cdigos
para ser decodificados; otros tantos agregan funciones como el canal alfa para crear sprites. As que en el
momento de seleccionar el formato de las imgenes hay que tener en cuenta la calidad, el tamao en bits y
el tiempo que tarda en cargarse. Este texto no abarca este tipo de cuestiones, pues est fuera de su alcance.
4.1 El txel
De la misma manera que las imgenes tienen al pixel como unidad de medida, para altura y anchura, las
texturas tienen al txel como su unidad, y en muchas de las veces es igual a uno. Adems, pueden ser ledos
5
Para mayor informacin sobre los formatos de imgenes visite la siguiente pgina web: http://msdn.microsoft.com/enus/library/microsoft.xna.framework.graphics.imagefileformat.aspx
40
o escritos desde una GPU. Especficamente, un txel puede ser cualquiera de los formatos de textura
6
disponible representados en la numeracin SurfaceFormat.
Para conocer qu parte de la textura le corresponde a un vrtice es necesario asignarle una coordenada
de textura; las coordenadas de texturas se llaman u y v. El origen de estas coordenadas se sita en la
esquina superior izquierda de la imagen; la coordenada u aumenta hacia la derecha y la coordenada v
aumenta hacia abajo. La Ilustracin 4-1 muestra en cada esquina las coordenadas que le corresponderan,
en el caso que la misma figura fuera la unidad.
La esquina superior izquierda el valor de las coordenadas son las mismas, cero; en la esquina superior
derecha el valor de la coordenada u es uno; en la esquina inferior izquierda la coordenada v es uno y la
coordenada u es cero; y por ltimo, en la esquina inferior derecha las coordenadas tienen el mismo valor,
uno.
Ilustracin 4-1 Textura
4.2 Filtros
Las geometras no siempre coincidirn con el tamao de las texturas, es decir, la distancia entre dos
vrtices puede medir ms o medir menos, comparada con una unidad de textura, por lo que puede haber un
mayor o menor nmero de pixeles asociados al txel. Por lo tanto existen dos modos de sampleo o de
muestreo, el de magnificacin y el de minificacin, que permiten seleccionar el color del pixel final. Los
filtros se encargan de calcular ese color del pixel, y XNA ofrece varios de stos, que estn enumerados en
7
TextureFilter , vase la Tabla 4-2. Tratar de explicar cmo funciona cada filtro est fuera del alcance de este
texto; si quiere conocer ms, acerca de los tipos de filtros, busque en libros de procesamiento digital de
imgenes.
Tabla 4-2
Miembro
Descripcin
Anisotropic
Filtro de textura anisotrpico que se utiliza como filtro de ampliacin o

reduccin de la textura. Este tipo de filtro compensa la distorsin producida
por la diferencia de ngulo entre el polgono de la textura y el plano de la
8
pantalla.
GaussianQuad
Es el filtro Gaussiano con mscara de 4 x 4 para la magnificacin y la
Para mayor informacin visite la siguiente pgina web: http://msdn.microsoft.com/enus/library/microsoft.xna.framework.graphics.surfaceformat.aspx

7
Para mayor informacin visite la siguiente pgina web: http://msdn.microsoft.com/enus/library/microsoft.xna.framework.graphics.texturefilter.aspx
8
Texto tomado de: http://msdn.microsoft.com/es-es/library/microsoft.windowsmobile.directx.direct3d.texturefilter(VS.85).aspx
41
minificacin.
Linear
Filtro de interpolacin bilineal utilizado como un filtro de ampliacin o

reduccin de la textura. Se utiliza un promedio ponderado de un rea 2x2 de
txels (elementos de textura de un pxel) alrededor del pxel deseado. El filtro
de la textura utilizado entre los niveles de mipmap es una interpolacin de
mipmaps trilineal en la que la impresora de trama realiza la interpolacin
lineal del color del pxel, utilizando los txels de las dos texturas de mipmap
ms cercanas.
None
Los mipmaps estn deshabilitados. En su lugar, la impresora de trama utiliza

el filtro de ampliacin.
Point
Filtro de punto utilizado como un filtro de ampliacin o reduccin de la

textura. Se utiliza el txel con las coordenadas ms prximas al valor de pxel
deseado. El filtro de textura utilizado entre los niveles de mipmap se basa en
el punto ms cercano; es decir, la impresora de trama utiliza el color del
9
txel de la textura de mipmap ms cercana.
PyramidalQuad
Usa un filtro paso banda con mscara de 4x4 para la magnificacin y

minificacin de la textura.
4.3 Mipmaps
Los mipmaps son una secuencia de texturas que parten de una original, cada textura es la mitad de su
tamao de su antecesora, excepto la primera. Esto ayuda a mejorar la imagen final, quitando ese parpadeo
cuando hay cambios bruscos, u otros problemas visuales.
4.4 Plano con textura

Ahora que ya se ha explicado un poco sobre las texturas en el mundo de la computacin grfica, es
momento de revisar un ejemplo que maneje una textura sobre una geometra simple. Dos tringulos
adyacentes formaran un cuadrado con una textura.
Comience por abrir Visual Studio 2008 y cree un nuevo proyecto para XNA, seleccione la plantilla
Windows Game (3.1).
Tomando parte del cdigo del ejemplo anterior, solo se explicaran las nuevas lneas de cdigo.
Ahora agregue las siguientes variables de instancia, dentro de la definicin de la clase pero fuera de todo
mtodo, en la clase Game1 (a menos que le haya cambiado el nombre)que hereda de la clase Game.
Cdigo 4-1
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
VertexPositionNormalTexture[] vertices ={
new VertexPositionNormalTexture(new Vector3(-1.0F, -1.0F, -1.0F),
new Vector3(0.0F,0.0F,-1.0F), new Vector2(0.0F,1.0F)),
new VertexPositionNormalTexture(new Vector3(-1.0F,1.0F,-1.0F),
new VertexPositionNormalTexture(new Vector3(1.0F,1.0F,-1.0F),
new VertexPositionNormalTexture(new Vector3(1.0F,-1.0F,-1.0F),
new Vector3(0.0F,0.0F,-1.0F), new Vector2(1.0F,1.0F))
};
Int32[] indices = { 0, 1, 2, 0, 2, 3 };
Texto tomado de: http://msdn.microsoft.com/es-es/library/microsoft.windowsmobile.directx.direct3d.texturefilter(VS.85).aspx
42
13.
14.
15.
16.
17.
18.
19.
20.
21.
Texture2D textura;
BasicEffect efecto;
Vector3 posicion = new Vector3(0.0F, 0.0F, 2.0F);
Vector3 vista = Vector3.Zero;
Vector3 traslacion = Vector3.Zero;
Single rotacionX = 0.0F;
Single rotacionY = 0.0F;
Single rotacionZ = 0.0F;
El tipo de vrtice en esta ocasin es VertexPositionNormalTexture, lnea 2, debe contener dos Vector3
que contendrn las coordenadas espaciales y la normal respectivamente; y un Vector2 para las coordenadas
de textura.
El objeto textura, lnea 13, representa una malla 2D de txeles y cada txel es direccionado por un vector
con coordenadas u y v.
En el mtodo Initialize de la clase Game1, agregue las siguientes lneas de cdigo para inicializar el
efecto y el dispositivo grfico.
VertexPositionNormalTexture.VertexElements);
efecto = new BasicEffect(GraphicsDevice, null);
efecto.TextureEnabled = true;
// se habilita la textura del efecto bsico
// modos de sampleo
GraphicsDevice.SamplerStates[0].MagFilter = TextureFilter.Linear;
GraphicsDevice.SamplerStates[0].MinFilter = TextureFilter.Linear;
GraphicsDevice.SamplerStates[0].MipFilter = TextureFilter.Linear;
En este caso necesitamos habilitar la propiedad Textura del EffectBasic que nos proporciona XNA; como
puede ver no se ha habilitado el color de los vrtices, pues no tiene sentido al carecer stos de dicha
informacin, pero haga la prueba para que vea que es lo que pasa.
Se inicializa el modo de sampleo del dispositivo grfico con SamplerStates, que recupera una coleccin
de objetos SamplerState del GraphicsDevice. Y se le asignan a cada una de las propiedades MagFilter,
Minfilter y MipFilter; el filtro de tipo Linear.
Antes de continuar con el cdigo es necesario aadir la imagen en el proyecto, as que para agregar un
nuevo elemento haga clic secundario sobre Content, en el Explorador de Soluciones de Visual Studio y
seleccione Agregar, vase Ilustracin 4-2.
43
Ilustracin 4-2 Agregar\ Elemento
En este caso se agreg una nueva carpeta, llamada Texturas, para almacenar las imgenes, y es que es
mejor tener las cosas ordenadas. Luego haga lo mismo con la carpeta creada en Content, o sea la nueva
carpeta creada con el nombre Texturas, y agregue Elemento existente, vase Ilustracin 4-2.
Siguiendo con el cdigo, dentro del mtodo LoadContent escriba las siguientes lneas para cargar la
textura y generar los MipMaps.
// Lectura de la textura
textura = Content.Load<Texture2D>(@"Texturas\Xin");
textura.GenerateMipMaps(TextureFilter.Linear); // creacin de los MipMaps
Hay dos maneras de cargar una textura desde un archivo, una es por medio el mtodo genrico y
10
esttico ContentManager.Load . ste carga un recurso para ser procesado por el Content Pipeline. Y el
otro es por medio del mtodo Texture2D.TextureFromFile.
Lo recomendable usar es el Content.Load, el cual recibe un String del Asset Name. El Asset Name es el
nombre que se usar como referencia en tiempo de ejecucin, por lo que no es necesario colocar la
extensin del archivo.
Para saber el Asset Name, seleccione el archivo en el Explorador de soluciones de Visual Studio, y ver
en la ventana Propiedades el String del Asset Name, vase Ilustracin 4-3.
10
Para mayor informacin revise la siguiente pgina web: http://msdn.microsoft.com/en-us/library/bb197848.aspx
44
Ilustracin 4-3 Asset Name
El string que debe recibir el mtodo LoadContent, debe incluir los nombres de las carpetas anidadas en
directorio asociado en el ContentManager, en donde se deposita el archivo creado por un Digital Content
11
Creation (DCC) . El ContentManager es una clase que carga el contenido del Content Pipeline en tiempo de
12
ejecucin .
Enseguida se generan los mipmaps de la textura con la constante TextureFilter.Linear con el que se filtra
cada nivel del mipmap, por medio del mtodo Texture.GenerateMipMaps.
public void GenerateMipMaps(TextureFilter filterType)
En el mtodo UnloadContent se aade la siguiente lnea para liberar el recurso ocupado, que en este
caso es la textura.
{
textura.Dispose();
}
Para poder apreciar que en realidad se ha colocado la textura sobre una geometra se toman las mismas
lneas de transformaciones del ejemplo anterior y se escriben dentro del mtodo Update.
if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
this.Exit();
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.Left))
posicion.X -= 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.Right))
posicion.X += 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.Up))
posicion.Y += 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.Down))
posicion.Y -= 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.PageUp))
posicion.Z += 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.PageDown))
posicion.Z -= 0.1F;
11
La DCC es una herramienta de creacin de contenido digital.

Para mayor informacin revise la siguientes pginas web: http://msdn.microsoft.com/enus/library/microsoft.xna.framework.content.contentmanager.aspx
http://msdn.microsoft.com/es-es/library/bb447756.aspx
12
45
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.D))
traslacion.X -= 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.A))
traslacion.X += 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.W))
traslacion.Y += 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.S))
traslacion.Y -= 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.Z))
traslacion.Z += 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.X))
traslacion.Z -= 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.E))
escala += 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.R))
{
escala -= 0.1F;
if (escala < 0.1F)
escala = 0.1F;
}
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.J))
rotacionY -= 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.L))
rotacionY += 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.I))
rotacionX += 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.K))
rotacionX -= 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.U))
rotacionZ += 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.O))
rotacionZ -= 0.1F;
if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.Escape))
this.Exit();
La asignacin de la textura a la propiedad Texture de la instancia efecto, lnea 13, Cdigo 4-2, es la
textura que ser aplicada hacia la geometra. El tipo de dato es un Texture2D, como lo indica la sintaxis
siguiente.
public Texture2D Texture { get; set; }
El mtodo EnableDefaultLighting, lnea 14, habilita la iluminacin por omisin de este efecto. La
propiedad PreferPerPixelLighting, lnea 15, obtiene o establece que la iluminacin por pxel puede ser
soportada por el dispositivo grfico, o sea la GPU. As que si no tiene una GPU con soporte mnimo para Pixel
Shader 2.0 no escriba esta lnea de cdigo.
Cdigo 4-2
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

{
GraphicsDevice.Clear(color);
efecto.World = Matrix.Identity * Matrix.CreateScale(escala) *
Matrix.CreateRotationX(rotacionX) *
Matrix.CreateRotationY(rotacionY) * Matrix.CreateRotationZ(rotacionZ) *
Matrix.CreateTranslation(traslacion);
efecto.View = Matrix.CreateLookAt(posicion, vista, arriba);
efecto.Projection = Matrix.CreatePerspectiveFieldOfView(1, aspecto, 1, 1000);
efecto.Texture = textura;
efecto.EnableDefaultLighting(); // Iluminacin por default del efecto bsico
efecto.PreferPerPixelLighting = true;
// iluminacin por pixel
GraphicsDevice.RenderState.FillMode = FillMode.Solid;
GraphicsDevice.RenderState.CullMode = CullMode.None;
46
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
// comienza el trazado de la geometra

efecto.Begin();
efecto.CurrentTechnique.Passes[0].Begin();
GraphicsDevice.DrawUserIndexedPrimitives<VertexPositionNormalTexture>(
PrimitiveType.TriangleList,
vertices, 0, vertices.Length, indices, 0, 2);
efecto.CurrentTechnique.Passes[0].End();
efecto.End();
}
Ahora inicie la depuracin oprimiendo F5 para poder ver el plano con la textura pegada a sta. Si todo
sali bien, podr ver una imagen similar a la Ilustracin 4-4, si tiene algn error de compilacin corrija y
vuelva a intentar.
Ilustracin 4-4 Plano con textura
Sobre todo mueva el modelo con el teclado para que pueda apreciar los cambios, como se muestra en la
Ilustracin 4-5.
Ilustracin 4-5 Transformaciones sobre el plano texturizado
47
4.5 Modos de direccionamiento

Hasta ahora las coordenadas de textura asignadas tienen valores de cero o uno, para cubrir toda la
geometra con la imagen, pero qu pasara si estos valores fueran mayores a uno? Bueno la manera en que
la textura ahora envolver a la geometra depender del tipo de direccionamiento que se le asigne a las
coordenadas u y v.
Para poder ver los modos de direccionamiento se cambiaran las coordenadas de textura por las
siguientes.
VertexPositionNormalTexture[] vertices ={
new VertexPositionNormalTexture(new Vector3(-1.0F, -1.0F, -1.0F),
new Vector3(0.0F,0.0F,-1.0F),
new Vector2(0.0F,5.0F)),
new VertexPositionNormalTexture(new Vector3(-1.0F,1.0F,-1.0F),
new VertexPositionNormalTexture(new Vector3(1.0F,1.0F,-1.0F),
new VertexPositionNormalTexture(new Vector3(1.0F,-1.0F,-1.0F),
new Vector2(5.0F,5.0F))
};
El modo de direccionamiento Wrap ser el primero en revisar, ste sirve para repetir la textura sobre la
geometra de manera que cubra toda.
En el mtodo Initialize agregue las siguientes lneas de cdigo, despus de la asignacin del filtro lineal.
GraphicsDevice.SamplerStates[0].AddressU = TextureAddressMode.Wrap;
GraphicsDevice.SamplerStates[0].AddressV = TextureAddressMode.Wrap;
En este caso se deja el mismo modo de direccionamiento para las coordenadas u y v, pero no significa
que as sea.
AddressU y AddressV son propiedades que obtienen o establecen el direccionamiento sobre las
coordenadas u y v, respectivamente. TextureAddressMode es una numeracin que define el modo de
direccionamiento de la textura.
Ejecute el programa y corrija cualquier error de compilacin que sucediera, si tiene xito lograr algo
similar a la Ilustracin 4-6.
48
Ilustracin 4-6 Wrap
El siguiente modo de direccionamiento corresponde a Clamp, las coordenadas de textura fuera del rango
[0.0, 1.0] se definen con el color de la ltima columna y rengln de la textura para rellenar. Cambie la
numeracin de TextureAddressMode.Wrap a TextureAddressMode.Clamp.
GraphicsDevice.SamplerStates[0].AddressU = TextureAddressMode.Clamp;
GraphicsDevice.SamplerStates[0].AddressV = TextureAddressMode.Clamp;
Inicie el programa y corrija cualquier error de compilacin que suceda, si tiene xito podr ver algo
similar a la Ilustracin 4-7.
Ilustracin 4-7 Clamp
El direccionamiento Mirror es similar al Wrap, sin embargo, en el momento de cubrir la geometra la

siguiente imagen estar invertida, como si se estuviera viendo en un espejo; esto sucede hasta que se
termine de cubrir la geometra.
Cambie la numeracin TextureAddressMode.Clamp por TextureAddressMode.Mirror en las
propiedades AddresU y AddresV.
49
GraphicsDevice.SamplerStates[0].AddressU = TextureAddressMode.Mirror;
GraphicsDevice.SamplerStates[0].AddressV = TextureAddressMode.Mirror;
Oprima F5 para comenzar con la depuracin y as correr el programa, si ocurre cualquier error de
compilacin o de tiempo de ejecucin solucinelo y vuelva a intentar. Si lo ha conseguido ver una imagen
como la que se muestra en la Ilustracin 4-8.
Ilustracin 4-8 Mirror
Modo de direccionamiento Border, aqu se coloca una vez la textura sobre la geometra y el resto, si es
que tiene, ser rellenado por un color.
Cambie la numeracin del modo de direccionamiento de las coordenadas u y v por Border, y agregue el
color al borde. BorderColor es una propiedad que obtiene o establece el color del borde.
GraphicsDevice.SamplerStates[0].AddressU = TextureAddressMode.Border;
GraphicsDevice.SamplerStates[0].AddressV = TextureAddressMode.Border;
GraphicsDevice.SamplerStates[0].BorderColor = Color.LightBlue;
Inicie con la depuracin del programa con F5, y corrija cualquier error para poder ver algo similar a la
Ilustracin 4-9.
50
Ilustracin 4-9 Border
Regularmente los modos de direccionamiento son iguales para u y v, sin embargo, pueden crearse
combinaciones entre las distintas propiedades.
51
5 Texto
En esta parte del tutorial no se ver nada del mundo 3D, que ms tiene en inters al autor, y es que
hasta este momento XNA 3.1 no tiene una librera del texto en 3D, como si lo tiene DirectX u OpenGL, pero
que de todas formas se tomar en cuenta en este escrito.
El tipo de fuente que se utiliza en XNA es prcticamente toda aquella que se tenga instalada en el
Sistema Operativo o que se pueda agregar como una textura de una fuente. Las primeras se agregarn al
proyecto como una descripcin del Sprit Font, as que debe tener instalado la fuente. La segunda toma una
imagen con los caracteres de la fuente, por lo que no necesita la fuente instalada en la computadora.
Ilustracin 5-1 Sprite Font Texture
Para comenzar este ejemplo, necesitar descargar las imgenes de las fuentes que se agregaron en la
misma carpeta en que descargo este tutorial. Pero si quieren crear las suyas pueden descargar la
13
herramienta Bitmap Font Maker de XNA CREATORS CLUB ONLINE . Estas texturas sern procesadas por el
Content Pipeline de XNA como Sprite Font Texture, que es uno de los procesos estndar que proporciona
XNA.
Lo que hace el proceso Sprite Font Texture es tomar una entrada, que en este caso es de tipo
Texture2DContent que representa una textura regular de dos dimensiones; y la transforma en una fuente
dando como salida a un SpriteFontContent. Esto lo hace al cambiar los pixeles de Color.Magenta a
Color.TransparentBlack, y claro estas texturas tienen un canal alfa para hacer transparentes las regiones
oscuras.
5.1 SpriteFont
En este ejemplo slo se mostrar un conjunto de enunciados que muestran el uso de texto en XNA. As
que comenzaremos por crear un proyecto nuevo de XNA Game Studio 3.1, utilizando la plantilla Windows
Game (3.1).
Ahora hay que agregar el SpritFont, esto se hace en el explorador de soluciones del proyecto. Como ya
se haba visto anteriormente, coloque el cursor sobre el icono de Content y oprima el botn derecho del
ratn para agregar un nuevo elemento al proyecto, como se muestra en la Ilustracin 5-2.
13
http://creators.xna.com/es-ES/utilities/bitmapfontmaker
52
Ilustracin 5-2 Nuevo elemento
Inmediatamente se abre una ventana dilogo, Agregar nuevo elemento Content, como se muestra en
la Ilustracin 5-3. Seleccione la plantilla Sprite Font, es la que muestra una letra A, cambie el nombre por el
de la fuente que quiere colocar en la aplicacin y d clic en el botn Agregar; no es necesario que el nombre
del SpriteFont sea el mismo que el de la fuente, es slo por orden. Recuerde que para poder utilizar el
SpritFont debe tener instalada la fuente en el Sistema Operativo.
Ilustracin 5-3 Agregar un Sprite Font
Visual Studio abrir de inmediato el archivo *.spritefont que agregamos al proyecto anteriormente.
Como podr ver es un archivo XML que contiene la descripcin de una fuente y que ser ledo por el Content
Pipeline de XNA; no es necesario que aprenda sobre XML para poder agregar texto en XNA, sin embargo,
sera una buena idea hacerlo porque usted mismo podra crear sus propia definicin de documentos o
esquema para instanciar los modelos grficos dentro de un mundo 3D, dndoles su pocin, orientacin y
nombre a cada uno de ellos. Adems que .NET tiene su librera para manipular XML.
En fin, el XML contiene diez etiquetas que corresponden a las propiedades que comnmente tienen las
14
fuentes, las cuales se presenta en la Tabla 5-1 .
Tabla 5-1
Etiqueta
14
Tipo de dato
Descripcin
Para ms informacin revise la siguiente direccin: http://msdn.microsoft.com/en-us/library/bb447759.aspx
53
<FontName>
String
Es el nombre de la fuente que se

tiene instalada en el Sistema
Operativo, y que prcticamente
toma cualquiera que est,
excepto las de tipo *.fon.
<Size>
Single
Es el tamao en punto flotante de

la fuente.
<Spacing>
Single
Es el nmero de pxeles a aadir

entre cada carcter cuando la
cadena se dibuja.
<UseKerning>
Boolean
Especifica si ser usado el ajuste

de espacio cuando se dibuje la
fuente. Su valor por default es
true.
<Style>
"Regular," "Bold," "Italic," o "Bold,

Italic"
Es el estilo de la fuente a ser

importada.
<DefaultCharacter>
Char
Es el carcter Unicode que

substituir al carcter que no se
encuentra en la fuente
importada. La especificacin de
esta etiqueta es opcional.
<CharacterRegions>
Uno o ms etiquetas
<CharacterRegion>
Uno o ms rangos numricos

indicando que subconjunto de
caracteres Unicode ser
importado.
<CharacterRegion>
Una etiqueta <Start> y una <End>
Es el inicio y el final de una regin

de caracteres Unicode.
<Start>
Char
Es el primer carcter Unicode a

incluir en un <CharacterRegion>
<End>
Char
Es el ltimo carcter Unicode a

incluir en un <CharcaterRegion>
En la lnea 4 del Cdigo 5-1 el nombre de la fuente se ha cambiado por Kids, en la lnea 6 se ha puesto el
valor de 20 para que se pueda apreciar la cadena en la ilustracin que enseguida aparecer; el valor del
espaciado ser de 2, lnea 8, pues por default es 0 y a veces por el tipo de fuente queda muy amontonado
como le ocurre a Kids. Tambin se ha des comentado la etiqueta DefaultCharacter, por si hubiera alguna
letra de la cadena que no pueda ser encontrada en el intervalo de caracteres de cdigo ASCII imprimible que
se le ha asignado, lneas 18 y 19.
Cdigo 5-1
1.
2.
3.
<?xml version="1.0" encoding="utf-8"?>

<XnaContent xmlns:Graphics="Microsoft.Xna.Framework.Content.Pipeline.Graphics">
<Asset Type="Graphics:FontDescription">
54
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
<FontName>Kids</FontName>
<Size>20</Size>
<Spacing>2</Spacing>
<UseKerning>true</UseKerning>
<Style>Regular</Style>
<DefaultCharacter>*</DefaultCharacter>
<CharacterRegions>
<CharacterRegion>
<Start> </Start>
<End>~</End>
</CharacterRegion>
</CharacterRegions>
</Asset>
</XnaContent>
Dejando a un lado el XML, es momento de regresar a C#, y comenzaremos declarando una instancia de
SpritFont en las variables de instancia de la clase Game1 que gener Visual Studio en el archivo Game1.cs.
Cdigo 5-2
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.

{
SpriteBatch spriteBatch;
SpriteFont kids;
public Game1()
{
this.Window.Title = "TutorialX07";
}
{
base.Initialize();
}
{
spriteBatch = new SpriteBatch(GraphicsDevice);
kids = Content.Load<SpriteFont>("Kids");
}
{
}
{
this.Exit();
}
{
GraphicsDevice.Clear(Color.White);
spriteBatch.Begin();
spriteBatch.DrawString(kids, "Hola mundo!", new Vector2(0.0F, 0.0F),
55
46.
47.
48.
49.
50.
51.
Color.Black);
spriteBatch.End();
}
}
En el mtodo LoadContet, lneas 21 26 Cdigo 5-2, se carga el *.spritfont que se aadi en el Content.
El tipo de dato que se usa es de tipo SpritFont en el mtodo genrico Content.Load. Hay que recordar que
slo se debe tomar el Asset Name con el que ContentManaged lo identifica, no se necesita la extensin del
archivo.
Como ltimo paso, hay que mandar a dibujar el SpriteFont en el mtodo Draw, lneas 40 - 50. Para
comenzar hay que preparar el dispositivo grfico para dibujar los sprites con SpriteBatch.Begin. Enseguida
se dibuja la cadena con el mtodo SpritBatch.DrawString que tiene seis sobrecargas, en este caso se
seleccion el primero que nos da el IntelliSense.
public void DrawString(SpriteFont spriteFont, string text, Vector2
position, Color color)
Cuyos parmetros se muestran en la Tabla 5-2.
Tabla 5-2
Parmetro
Descripcin
spriteFont
El sprit de la fuente.
text
La cadena a dibujar.
position
color
La localidad, en coordenadas de la pantalla, donde

ser dibujado el texto.
Es el color para el texto.
Inicie el programa con la tecla F5, para poder ver algo similar a la Ilustracin 5-4, si surge cualquier error
de compilacin encuentre el problema para resolverlo y trate de nuevo.
Ilustracin 5-4 Carcter desconocido
Como se puede ver, cuando se agregan caracteres con acentos, diresis o la letra , no podrn
mostrarse, a cambio se dibuja el signo que se le dio a la etiqueta DefaultCharacter del Spritfont; esto es
15
porque dichos caracteres no se en encuentran dentro del intervalo que se le dio al XML . Para resolver esto,
hay que agregar otro intervalo de caracteres ASCII o aumentar el nmero en que termina el intervalo.
<CharacterRegions>
<CharacterRegion>
<Start> </Start>
<End>ÿ</End>
</CharacterRegion>
15
Vase la siguiente direccin para revisar en que intervalo del cdigo ASCII se encuentran ciertos caracteres
http://msdn.microsoft.com/en-us/library/4z4t9ed1(VS.71).aspx
56
En este caso se aument el intervalo, para mostrar los signos de puntuacin que se ocupan en el
espaol. Vuelva a correr el programa y ver que el mensaje escrito ser el que quera mostrar.
Ilustracin 5-5 Aumenta el rango de caracteres reconocibles
Las dems sobrecargas del mtodo SpriteBatch.DrawString para dibujar texto, se dejan como ejercicio
para el lector.
5.2 Sprite Font Texture

En caso que el tipo de fuente no se encuentre instalado en el Sistema Opertativo, o se quiera enriquecer
ms el estilo de la fuente se podra exportar al programa una imagen con las letras necesarias que se ocupan
en el proyecto, para ello el Sprite Font Texture es una buena solucin.
Comience por agregar un nuevo elemento al Content; esta vez ser un archivo de imagen como se
muestra en la Ilustracin 5-6. A estas alturas ya sabr como agregar nuevos elementos en el Content, as
que omitiremos esos pasos. La imagen debe tener ciertas propiedades para que el Content Pipeline pueda
procesarla, y sta son que tenga un color magenta y este habilitado el canal Alfa.
Ilustracin 5-6 Adler
Sin embargo, hay que hacer unas modificaciones en el Content Processor, que es el que se encargara en
procesar la imagen de forma adecuada para crear un Sprite Font Texture. As que diriga el icono de la
imagen que acaba de agregar en el Content, lo anterior se realiza en el explorador de soluciones,
posteriormente haga clic para poder ver las propiedades del archivo. Por default, el valor que tiene la
propiedad Content Processor de la lista XNA Framework Content Pipeline, es Texture XNA Framework,
vase Ilustracin 5-7.
57
Ilustracin 5-7 Propiedades de una imagen
Cambie la manera en que el Content Pipeline procesar la imagen por Sprite Font Texture XNA
Framework, como se ve en la Ilustracin 5-8.
Ilustracin 5-8 Cambiando el procesador de contenido
Cabe aclarar que la textura que ha tomado el Content Pipeline debe tener todos los caracteres
necesarios para poder dibujar la cadena deseada, porque si no es as, tambin abra que dejar un carcter
por default en caso que no exista.
Ahora hay que agregar el Sprite Font Texture al cdigo, comience por declarar una variable de instancia
en la clase Game1, lnea5 Cdigo 5-3.
En el mtodo LoadContent, lneas 22 -29, al igual que en el ejemplo anterior, se carga el Sprit Font
Texture con el nombre del Asset. Y es aqu donde se modifican las propiedades del SpriteFont, el ms
importante es el SpriteFont.DefaultCharacter, lnea 26, pues no falta el smbolo que no se pueda
representar y d un error en tiempo de ejecucin, hay que asegurarse tambin que el carcter que se tome
por default est en el Sprite Font Texture, porque si as no fuera se caera en el mismo problema y esto
tambin lo es en el XML del ejemplo anterior.
58
Cdigo 5-3
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.

{
SpriteFont adler;
public Game1()
{
this.Window.Title = "TutorialX07";
}
{
base.Initialize();
}
{
adler = Content.Load<SpriteFont>("Adler0");
adler.DefaultCharacter = '*';
adler.LineSpacing = 0;
adler.Spacing = 0;
}
{
}
{
this.Exit();
}
{
spriteBatch.DrawString(adler, DateTime.Now.TimeOfDay.ToString(),
new Vector2(GraphicsDevice.Viewport.Width / 4.5F,
GraphicsDevice.Viewport.Height / 2),
Color.White);
spriteBatch.End();
}
}
En el mtodo Draw, lneas 42 - 53, como en el ejemplo anterior de dibuja la cadena con el mismo
mtodo sobrecargado SpriteBatch.Drawing, lnea 47. Sin embargo, esta vez se mostrar el reloj del sistema
como la cadena; para ello se obtiene la propiedad DateTime.Now.TimeOfDay en forma de String. Y la
posicin de la cadena ser tomando en cuenta el ancho y alto del Viewport. Para que no se vea alterado el
color de la cadena, pues se pretende que el Sprite Font Texture tiene los colores y efectos que no nos puede
dar el XML, se deja en Color.White.
Por fin, esto es todo con respecto a texto en XNA, o por lo menos lo ms bsico para colocar informacin
valiosa en el Viewport, pues a veces no sabemos qu valores toma los vrtices de nuestros modelos 3D o de
colisin en tiempo real.
59
Ilustracin 5-9 Reloj
Inicie el programa con la tecla F5 y corrija cualquier error de compilacin si as lo necesitar; ver un
lindo reloj ms o menos como la Ilustracin 5-9.
60
6 Cmo cargar modelos 3D desde un archivo X y FBX

Mquinas que crean mquinas, software que crea software, as es cmo se hacen las cosas, pero todo
tuvo un comienzo, es por eso que se explic lo que era el bfer de vrtices y el bfer de ndices. Sin
embargo, para crear aplicaciones ms complejas es necesario apoyarse de herramientas ya construidas para
no volver a reinventar la rueda. Por eso, en esta parte, se har mencin a la carga de modelos 3D, que al fin
de cuentas fueron hechos en herramientas de modelacin, como pueden ser 3D MAX, XSI, MAYA,
AutoCAD, etc.
6.1 Formatos de archivos

Los modelos 3D se guardan en memoria secundaria, por lo que se tiene un archivo con toda la
informacin necesaria para representar en XNA lo que se tena en el modelador.
Estos archivos tienen su propia estructura para almacenar los vrtices, las coordenadas de textura, las
normales, los ndices de los vrtices, los ndices de las coordenadas de textura, los materiales, etctera.
Algunos de los formatos de estos archivos son *.3ds, *.x, *.obj, *.fbx, *.md5, *.dwg, *.max, *.exp, etctera.
Sin embargo, no se entrar en detalle qu informacin guarda cada uno de ellos, pues estara lejos del
alcance de este escrito, eso y porque algunos estn protegidos.
XNA no puede abrir todos los diferentes archivos que generan los modeladores 3D, esto le
correspondera al programador. Para nuestra fortuna hay dos tipos de archivos que puede abrirse y
cargarse, sin complicarnos la vida, estos son los *.x y los *.fbx.
El formato *.x fue introducido en el DirectX 2.0 y que ahora puede estar codificado en forma binaria o en
16
texto plano .
El formato *.fbx es una de las tecnologas de Autodesk, cuyo objetivo es la portabilidad de los datos 3D a
travs de las diferentes soluciones que existen en el mercado, tambin puede presentarse en forma binaria
17
o en texto plano .
La forma de codificar los archivos, ya sea binaria o en texto, depender en qu es lo que le conviene
mejor para la aplicacin, o para el desarrollador. Cuando el texto es plano, es fcil revisar, por si llegar a
haber algn problema a la hora cargar el modelo 3D en la solucin, puesto que es texto que nosotros como
humanos podemos interpretar de forma rpida, otra de las caractersticas importantes es que el archivo
ocupa menos memoria en comparacin con el binario. Por otra parte, los archivos que se guardan en forma
binaria son muy fciles de interpretar por la computadora, en comparacin con el texto plano.
6.2 La clase Model

Para manipular de una manera ms sencilla la informacin obtenida de un modelo 3D, mucho ms
elaborado, XNA ofrece una clase llamada Model y la ayuda de su ContentManaged para crgalo. Las
propiedades en las que se conserva la informacin de los modelos, de la clase Model, son Meshes y Bones.
Meshes: es una coleccin de objetos ModelMesh que componen el modelo, y cada ModelMesh puede
moverse independientemente de otro y ser compuesto por mltiples materiales identificados como objetos
ModelMeshPart.
Bones: es una coleccin de objetos ModelBone que describen cmo cada uno de los mesh en la
coleccin Meshes de este modelo se relaciona con su mesh padre.
Pero qu es el mesh?, el mesh como tal es donde se guarda la informacin de la geometra, por lo que
tiene un vertex buffer y un index buffer, adems de otros datos.
La clase ModelMeshPart es un lote de informacin de la geometra a enviar al dispositivo grfico durante
el rendering. Cada ModelMeshpart es una subdivisin de un objeto ModelMesh, as que la clase
16
17
Para mayor informacin revise la siguiente liga http://msdn.microsoft.com/en-us/library/bb174837(VS.85).aspx

Para mayor informacin revise la siguiente liga http://usa.autodesk.com/adsk/servlet/pc/index?siteID=123112&id=6837478
61
ModelMesh est formada por varios objetos ModelMeshpart, y que tpicamente se basan en la informacin
del material. Por ejemplo, si en una escena se tiene una esfera y un cubo, y cada uno de ellos tiene
diferentes materiales, stos se representaran como objetos ModelMeshpart y la escena se representar
como un ModelMesh. En la Ilustracin 6-1, se muestra un ModelMesh que contiene tres ModelMeshpart.
Ilustracin 6-1 Tres ModelMeshpart diferentes
En fin, creo que ha sido momento de tener el ejemplo de cmo cargar un modelo 3D en una solucin de
XNA. El primer ejemplo ser muy simple para comprender un poco ms el cmo aprovechar las propiedades
de la clase Model. (Cmo leer el bfer de vrtices de un ModelMeshPart para crear nuestra propia
18
envolvente de colisin) As que no se desesperen si quieren una solucin rpida para sus necesidades, es
mejor ir por las piedritas.
18
Esto debido a la pregunta que surga en los foros, cmo leo el vertex buffer de un mesh?
62
6.3 Ejemplo 01
El siguiente ejemplo muestra cmo cargar un modelo 3D, un elefante, as que si quieren probar ste
ejemplo con un archivo que contenga ms de un modelo 3D, solo se ver uno. Tampoco ser la mejor
manera de hacerlo, pero creo menester para explicarlo. Pero no se preocupen, en los siguientes ejemplos de
este captulo se har mejor la codificacin.
Abra Visual Studio para crear una nueva solucin de XNA, llegado hasta este punto no creo que sea
necesario explicar cmo crear una nueva solucin, as que enseguida aada un nuevo archivo *.x o *.fbx.
XNA tiene predefinido tomar estos dos tipos de archivos para procesarlos. Para este ejemplo se utiliz la
figura de un elefante, Elefante.fbx, que pueden descargar del mismo sitio en donde descargaron este texto.
Es de esperarse que el ContentManaged sea el encargado de tomar estos tipos de archivos, as que en el
momento de agregar el archivo, no hay que olvidar que es en el Content en donde hay que agregar el
archivo, a menos que cambie la carpeta raz del Content.
En el archivo Game1.cs escriba las siguientes lneas de cdigo fuera del constructor pero dentro de la
clase Game1:
Model modelo;
BasicEffect basicEffect;
La primera lnea es un objeto de la clase Model, que no creo sea necesario explicar para qu sirve, el
segundo objeto es el efecto bsico que nos ofrece XNA, para mandar a dibujarlo.
En el mtodo LoadContent de la clase Game1 hay que leer el contenido del archivo Elefante, y se har
con ayuda del mtodo genrico Load del Content.
{
modelo = Content.Load<Model>("Elefante");
}
Hay que recordar que el nombre que se le pasa como parmetro al mtodo debe ser el que est en el
Asset name.
Hasta el momento todo esto ha sido conocido, eso espero, as que hay que pasar al mtodo Draw. Y es
en esta parte que a muchos les parecer mal, pero esa no es la intencin, es nada ms para que pueda
explicarse mejor el ejemplo, as que la optimizacin se deja como ejercicio para el lector.
Cdigo 6-1
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

{
Matrix[] transformaciones = new Matrix[modelo.Bones.Count];
modelo.CopyAbsoluteBoneTransformsTo(transformaciones);
// preparando el efecto
basicEffect = (BasicEffect)modelo.Meshes[0].Effects[0];
basicEffect.World = transformaciones[modelo.Meshes[0].ParentBone.Index];
basicEffect.Projection = Matrix.CreatePerspectiveFieldOfView(1.0F,
GraphicsDevice.Viewport.AspectRatio,
1.0F, 1000.0F);
basicEffect.View = Matrix.CreateLookAt(new Vector3(150.0F, 25.0F, 250.0F),
new Vector3(-50.0F, 0.0F, 0.0F), Vector3.Up);
basicEffect.EnableDefaultLighting();
ModelMesh modelMesh = modelo.Meshes[0];
ModelMeshPart meshPart = modelMesh.MeshParts[0];
63
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
// preparando el dispositivo
GraphicsDevice.Vertices[0].SetSource(
modelMesh.VertexBuffer, meshPart.StreamOffset, meshPart.VertexStride);
GraphicsDevice.VertexDeclaration = meshPart.VertexDeclaration;
GraphicsDevice.Indices = modelMesh.IndexBuffer;
basicEffect.Begin(SaveStateMode.None);
basicEffect.CurrentTechnique.Passes[0].Begin();
GraphicsDevice.DrawIndexedPrimitives(PrimitiveType.TriangleList,
meshPart.BaseVertex, 0, meshPart.NumVertices, meshPart.StartIndex,
meshPart.PrimitiveCount);
basicEffect.CurrentTechnique.Passes[0].End();
basicEffect.End();
}// fin del mtodo Draw
En la lnea 5, Cdigo 6-1, se crea un arreglo de matrices con dimensin igual al nmero de objetos
ModelBone que contenga el modelo. Esto servir para dejar el modelo 3D, que tenamos en el modelador,
en la misma posicin en la que estaba. En la lnea 6 se utiliza el mtodo CopyAbsoluteBoneTransformsTo
para copiar las transformaciones de cada uno de los huesos en la matriz que sea acaba de crear.
Ahora hay que inicializar el efecto y sus propiedades para poder visualizar el modelo 3D; en la lnea 8 se
hace una conversin explicita del tipo de dato, esto es para inicializar el efecto bsico que nos proporciona
XNA. Sin embargo, no inicializa todas las propiedades que quisiramos, como son las luces y las matrices.
Vase que de antemano tomamos el primer ModelMesh y su primer ModelEffect de ste; esto es porque
sabemos que el archivo contiene un slo modelo, as que slo tiene un ModelMesh y un slo ModelEffect.
No es necesario que sepamos cuntos meshes contiene el archivo; porque al fin de cuentas es un arreglo, y
si conocen el uso de arreglos en C#, vern que el propio arreglo conoce cuntos elementos tiene, y es
porque es un objeto.
As que enseguida le damos valores a las matrices World, Projection y View, lneas 9, 10 y 13
respectivamente. En la matriz World le asignamos la matriz de transformaciones, pero utilizando como
indce el del ParentBone. El ParentBone es una propiedad del ModelMesh que obtiene el ModelBone padre
de ese mesh. El ModelBone de un mesh contiene una matriz de transformacin que indica cmo es
colocado con referencia al mesh padre del modelo. Trate de colocar el valor de cero y ver que no es lo
igual, a menos que el modelo estuviera en el centro de referencia del sistema coordenado y orientado a los
ejes.
Ilustracin 6-2 Posicin Correcta e incorrecta
En la Ilustracin 6-2 se muestra el resultado de haber respetado el ndice proporcionado por

ParentBone, y cuando no se toma en cuenta.
Para poder ver las caractersticas de los materiales del modelo, se habilita la luz que por default tiene el
efecto, vase lnea 15.
De antemano se conoce el nmero de meshes que contiene el archivo, as que se declara un
ModelMesh, lnea 17. Y tambin se conoce cuntos MeshPart tiene el ModelMesh, por lo que se declara en
64
la lnea 18. Esto en s, es malo hacerlo en esta parte del cdigo, pero se hizo para poder explicarlo de la
mejor manera.
Ahora hay que preparar el dispositivo grfico con los datos a dibujar, el primero es el contenido del bfer
de vrtices, con el mtodo SetSource, lneas 21 22. Lo interesante aqu es de dnde se obtiene la
informacin, del ModelMesh y del ModelMeshPart; ambos pertenecen a la clase Model. Si recuerda el
primer parmetro del mtodo SetSource, es el mismo bfer de vrtices, el cual es parte del ModelMesh.
Despus necesita el byte a partir del cual sern copiados los datos, lo cual es proporcionado por el
ModelMeshPart. Y por ltimo est necesita el tamao en bytes de los elementos del bfer de vrtices, el
cual tambin es proporcionado por el ModelMeshPart.
Despus de lo anterior, ahora se necesita declarar el tipo de vrtices que ocupar el dispositivo, para eso
regresamos a usar el mtodo VertexDeclaration y la propiedad con el mismo nombre del ModelMeshPart,
lnea 23.
Ya como ltimo preparativo del dispositivo, se asigna el bfer de indices del ModelMesh al Indexbuffer
de GraphicsDevice, lnea 24.
En este ejemplo se conoce el nmero tcnicas de rendereo, as que el ndice en los arreglos Passes ser
cero, lneas 27 y 31.
Otra vez, se recurre al mtodo DrawIndexPrimitives del dispositivo grfico para mandar a dibujar la
geometra, y obtenemos los datos de las propiedades BaseVertex, NumVertices, StartIndex y
PrimitiveCount de la ModelMeshPart. No hace falta decir para qu son estas propiedades, as que si hay
alguna duda revsese el captulo 001.
Eso es todo para poder ver el elefante en el viewport, Ilustracin 6-3; si hay algn error de compilacin
corrija y vuelva a intentarlo otra vez.
Ilustracin 6-3 Un mesh
Como un agregado cambie la lnea de la propiedad World del efecto por el siguiente enlistado.
tiempo = (Single)gameTime.TotalGameTime.TotalSeconds;
basicEffect.World = transformaciones[modelo.Meshes[0].ParentBone.Index] *
Matrix.CreateRotationX(tiempo) * Matrix.CreateRotationY(tiempo) *
Matrix.CreateRotationZ(tiempo);
En donde tiempo es una variable de instancia de la clase Game1 de tipo float, y que se inicializa dentro
del mtodo Draw de la clase Game1, y antes de la asignacin de datos a la propiedad World. A ste se le
65
asigna el valor total en segundos, del tiempo transcurrido desde el inicio de la aplicacin. Y como se
encuentra dentro del mtodo Draw se actualizar cada vez que se mande a rasterizar.
En la asignacin de valores a la propiedad World del efecto, se obtienen primero las matrices de rotacin
alrededor de los ejes coordenados x, y y z. Estas matrices se obtienen con ayuda de los mtodos estticos
CreateRotationX, CreateRotationY y CreateRotationZ de la clase Matrix. La variable tiempo, de tipo float,
representa el ngulo expresado en radianes.
Inicie una vez ms la aplicacin y ver rotar el modelo extrado de un archivo *.fbx o *.x.
6.4 Ejemplo 02
En un archivo se pueden encontrar varios y diferentes modelos, cada uno con sus respectivos materiales,
texturas y/o efectos. As que este ejemplo muestra cmo dibujar dichos modelos contenidos en un archivo.
Cree un nuevo proyecto para XNA Game Studio 3.1 y seleccione la plantilla Windows Game (3.1). En
Content, en Explorador de soluciones, agregue dos nuevas carpetas con los nombres Modelos y Texturas
respectivamente.
Uno de los problemas al cargar archivos que contenan texturas, ya sea en formato *.x o *.fbx, es el
nombre relativo del archivo de la textura. Este nombre relativo se crea cuando se exporta el archivo desde el
modelador 3D. Este nombre contiene la ruta de donde se lea la textura o simplemente el nombre de la
textura. As que en el momento en que se trata de generar la solucin, oprimiendo F6, aparece el error de
Missing asset, esto es porque de forma automtica XNA hace referencia al nombre del archivo de la textura
que viene dentro de las propiedades del archivo *.x o *.fbx, y al no encontrar dicho archivo no permite
continuar con la ejecucin, an si no se hace mencin en los archivos *.cs de la solucin de XNA.
Una solucin es dejar el archivo *.x o *.fbx en el mismo lugar en donde se encuentran las texturas, pero
esto dejara todo revuelto, as que otra de las soluciones es modificar el nombre del archivo de textura que
se hace mencin en el arhivo *.x o *.fbx. En los achivos *.x lo encuentran con el metadato TextureFilename
y en *.fbx como RelativeFilename. Pero esto tambin sera algo mal hecho, as que otra de las soluciones es
crear carpetas que contengan por separado a las texturas, los shaders, los modelos, etctera, en la solucin
que se est creando. Y a partir de ellas es toman los recursos necesarios para modelar y no estar
modificando a mano dichos nombres de archivos de textura.
Los nombres de las carpetas son necesarios para este ejemplo, pues el archivo que contiene la
geometra, hace referencia a los archivos de textura:
"..\..\Content\Texturas\Piso.bmp"
"..\..\Content\Texturas\Tablero.bmp"
"..\..\Content\Texturas\Checker.bmp"
Ahora agregue el archivo, en este caso se utiliz el archivo con nombre TeterasF03.FBX, en la carpeta
Modelos, y los archivos de textura, en este caso fueron: Piso.bmp, Tablero.bmp y Checker.bmp, en la
carpeta Texturas, y ver algo similar a la Ilustracin 6-4.
66
Ilustracin 6-4 Agregando texturas en el Content
Todos los modelos los haremos rotar alrededor de los ejes locales de cada uno de ellos, por medio del
teclado. As que comenzaremos por agregar las variables de instancia en el archivo Game1.cs que cre
Visual Studio.
Model modelo;
Single rotacionX, rotacionY, rotacionZ;
const Single angulo = 2.0F * (Single)Math.PI / 180.0F;
Matrix[] transformaciones;
Las variables rotacionX, rotacionY y rotacionZ son los ngulos a rotar alrededor de los ejes x, y y z
respectivamente. Recordando que los ngulos se deben pasar en radianes, la constante angulo ser el
ngulo de dos grados por el que se incrementar las variables rotacionX, rotacionY y rotacionZ cada vez que
oprima una de las siguientes teclas.
Tabla 6-1
Tecla
Accin
Left
Incrementa la variable rotacionY.
Right
Decrementa la variable rotacionY.
Up
Incrementa la variable rotacionX.
Down
Decrementa la variable rotacionX.
PageDown
Incrementa la variable rotacionZ.
PageUp
Decrementa la variable rotacionZ.
Incrementa la variable escala.
Decrementa la varibale escala.
67
La variable escala es el valor en punto flotante que se usar para aumentar o disminuir el tamao de
todas las figuras geomtricas. El arreglo Matrix guardar todos los BoneTransforms del modelo.
En el constructor de la clase Game1 se cambian las ya dichosas propiedades siguientes:
public Game1()
{
this.Window.Title = "TutorialX08c";
}
En el mtodo LoadContent de la clase Game1 se comienza por cargar el contenido del archivo del
modelo tridimensional, al objeto modelo. Inmediatamente se copian las matrices de transformacin de cada
figura geomtrica del objeto modelo
{
modelo = Content.Load<Model>(Content.RootDirectory + @"\Modelos\TeterasF03");
transformaciones = new Matrix[modelo.Bones.Count];
}
Hasta este punto no cambia nada al ejemplo anterior, pero ntese que hasta el momento no existe
ninguna instancia de la clase BasicEffect.
En el mtodo Update, de la clase Game1, hay que agregar todas las acciones descritas en la tabla 6-1.
{
this.Exit();
if (Keyboard.GetState().IsKeyDown(Keys.Left))
rotacionY += angulo;
if (Keyboard.GetState().IsKeyDown(Keys.Right))
rotacionY -= angulo;
if (Keyboard.GetState().IsKeyDown(Keys.Up))
rotacionX += angulo;
if (Keyboard.GetState().IsKeyDown(Keys.Down))
rotacionX -= angulo;
if(Keyboard.GetState().IsKeyDown(Keys.PageDown))
rotacionZ +=angulo;
if(Keyboard.GetState().IsKeyDown(Keys.PageUp))
rotacionZ -=angulo;
if (Keyboard.GetState().IsKeyDown(Keys.Z))
escala += 0.1F;
if (Keyboard.GetState().IsKeyDown(Keys.C))
{
if((escala-=0.1F)<1.0F)
escala = 1.0F;
}
}
68
Cada variable se incrementa o decrementa con un valor constante, cada vez que se registra una tecla
oprimida. En el caso de la variable escala, hay que verificar que no tenga un menor a uno. En realidad puede
tener un valor menor a uno, lo que hara es encoger los modelos geomtricos; sin embargo, debe ser mayor.
Para el mtodo Draw se crean dos instrucciones foreach, una de ellas est anidada; la primera de ellas va
a mapear los ModelMesh que contiene el arreglo Meshes del objeto modelo. El segundo bucle va a mapear
los efectos de cada mesh que contiene el arreglo Effects del ModelMesh obtenido del foreach anterior.
{
foreach (ModelMesh mesh in modelo.Meshes)
{
foreach (BasicEffect efecto in mesh.Effects)
{
efecto.World = Matrix.CreateRotationX(rotacionX) *
Matrix.CreateRotationY(rotacionY)
* Matrix.CreateRotationZ(rotacionZ) * Matrix.CreateScale(escala)
* transformaciones[mesh.ParentBone.Index];
efecto.View = Matrix.CreateLookAt(new Vector3(-50.0F, 70.0F, 75.0F),
new Vector3(0.0F, 0.0F, 0.0F), Vector3.Up);
efecto.Projection = Matrix.CreatePerspectiveFieldOfView(1,
GraphicsDevice.Viewport.AspectRatio, 1.0F, 10000.0F);
efecto.EnableDefaultLighting();
efecto.PreferPerPixelLighting = true;
}// fin de foreach
mesh.Draw();
}// fin de foreach
}
Vase que en el foreach anidado se utiliza la clase BasicEffect para cargar en el GraphicsDevice todas las
propiedades, como es el material, la iluminacin, texturas, etctera.
En el cuerpo del foreach anidado se le pasan los valores a las matrices World, View y Projection. Aqu lo
importante es la matriz World de BasicEffect, pues es la que har que las figuras roten o escalen. Tom en
cuenta el orden en que estn dispuestas las operaciones, recuerde que es una multiplicacin de matrices, y
por ende su propiedad no es conmutativa. As que como tarea vea que lo que pasa al alterar el orden de las
matrices de transformacin.
La propiedad PreferPerPixelLighting de BasicEffect, indica que se habilita la iluminacin por pxel,
siempre y cuando su Unidad de Procesamiento Grfico o GPU (Graphics Processing Unit) soporte Pixel
Shader Model 2.0. Si no es as, comente la lnea o ponga el valor a false.
Terminando el foreach anidado, se manda a llamar al mtodo Draw de la clase ModelMesh, sta manda
a dibujar todos los ModelMeshPart del mesh, usando el efecto actual.
Corra el ejemplo con F5, y vera algo similar a la Ilustracin 6-5.
69
Ilustracin 6-5 Multiples meshes
Oprima las teclas indicadas para las acciones mencionadas en la Tabla 6-1, y ver cmo se mueven todas
la teteras al unsono. Note que todas las teteras tienen diferentes propiedades de materiales, textura y sus
combinaciones. Sin embargo, algunas de ellas son trasparentes, como lo muestra la Ilustracin 6-6.
Ilustracin 6-6 Render tomado desde un modelador 3D.
6.4.1
Blending
En realidad el efecto de las teteras menos opacas o ms transparentes es una unin de pxeles que da la
sensacin de material translcido. Este proceso se le llama blend y la frmula que se utiliza en el ejemplo se
le llama ecuacin de blend.
= ( ) + ( )
PixelSalida: es valor de pxel, resultado de la suma de las multiplicaciones de fuente y destino.

PixelFuente: es el color del pxel que se pretende sea el translcido.
FactorBlendFuente: es un factor por el que se multiplica a PixelFuente.
PixelDestino: es el color del pxel que se desea ver a travs del PixelFuente.
70
FactorBlendDestino: factor por el que se multiplica a PixelDestino.

Los factores indican cunto y cmo contribuye cada pxel al clculo final del color.
Los factores blend se componen por Red, Green, Blue y Alpha (r, g, b, a). Y cada uno de ellos se multiplica
por su contraparte en el pxel destino y/o fuente. La siguiente tabla muestra los factores de la numeracin
19
Blend que proporciona XNA.
Tabla 6-2
Nombre del miembro
Descripcin
Zero
Cada componente del pxel es multiplicado por (0, 0, 0, 0), por lo que elimina.
One
Cada componente del pxel es multiplicado por (1, 1, 1, 1), por lo que no se ve
afectado.
SourceColor
InverseSourceColor
SourceAlpha
InverseSourceAlpha
DestinationAlpha
InverseDestinationAlpha
SourceAlphaSaturation
BothInverseSourceAlpha
Cada componente del pxel es multiplicado por el color en el pxel fuente. ste
puede ser representado como ( , , , ).
Cada componente del pxel es multiplicado por la resta de 1 menos el valor del
componente del pxel fuente. ste puede ser representado como (1 , 1
, 1 , 1 ).
Cada componente del pxel es multiplicado por el valor alfa del pxel fuente.
ste puede ser representado como ( , , , ).
Cada componente del pxel es multiplicado por el valor obtenido de la resta de

1 menos el valor que contiene el pxel fuente en el campo del canal alfa. ste
puede ser representado como (1 , 1 , 1 , 1 )
Cada componente del pxel es multiplicado por el valor alfa del pxel destino.
ste puede ser representado como ( , , , ).
1 menos el valor que contiene el pxel destino en el campo del canal alfa. ste
puede ser representado como (1 , 1 , 1 , 1 ).
Cada componente del pxel fuente o destino se multiplica por el valor ms

pequeo entre alfa del fuente o uno menos alfa del destino. El componente
alfa no sufre cambios. ste puede ser representado como (, , , 1), donde
= ( , 1 ).
Aplica slo a la plataforma Win32. Cada componente del pxel fuente es
multiplicado por el resultado de la resta 1 menos el valor que contiene el pxel
fuente en el campo del canal alfa, y cada componente del pxel destino es
multiplicado por el valor alfa del pxel fuente. stos pueden ser representados
como (1 , 1 , 1 , 1 ) , y para
el blend destino
( , , , ); el blend destino se invlida. De este modo slo es soportado
por el SourceBlend de RenderState.
19
Para mayor informacin visite la siguiente pgina:

http://msdn.microsoft.com/en-us/library/microsoft.xna.framework.graphics.blend.aspx
71
BlendFactor
Cada componente del pxel

20
RenderState.BlendFactor .
es
multiplicado
por
la
propiedad
InverseBlendFactor

1 menos la propiedad BlendFactor. ste mtodo es soportado solo s
SupportsBlendFactor es verdadero en las propiedades SourceBlendCapablities
o DestinationBlendCapabilities.
Estos factores se pueden ocupar tanto para el blend fuente como en el destino, a menos que se diga lo
contrario.
En este caso el canal alfa se involucra en las operaciones, y es quien nos indica la opacidad, por lo que un
valor grande es un material ms opaco. Los valores que puede tomar el canal alfa es entre 0 y 1. Este valor
de alfa puede provenir del material de la figura geomtrica o de la textura, pero esto ya lo tiene registrado
los elementos del arreglo Effects del mesh, por lo que no hay necesidad de agregarlo directamente en el
cdigo. Para habilitar el efecto de transparencia, se le debe indicar al dispositivo grfico el estado de
procesamiento, en ste caso es el blending.
Tomando el ejemplo anterior, escriba las siguientes lneas de cdigo, entre la llave de apertura del
foreach anidado y la asignacin de la matriz de mundo de efecto.
Cdigo 6-2
1.
2.
3.
4.
5.
6.
7.
8.
9.
if (efecto.Alpha != 1.0F)
{
efecto.GraphicsDevice.RenderState.AlphaBlendEnable = true;
efecto.GraphicsDevice.RenderState.SourceBlend = Blend.One;
efecto.GraphicsDevice.RenderState.DestinationBlend = Blend.One;
efecto.GraphicsDevice.RenderState.BlendFunction = BlendFunction.Add;
}
else
efecto.GraphicsDevice.RenderState.AlphaBlendEnable = false;
No todos los mesh del archivo contienen el mismo efecto de transparencia, as que hay que tener
cuidado de habilitar y deshabilitar el blending, pues si no se hace, el efecto afectara a todos los dems
meshes siguientes del primero que lo activo. Como se haba indicado anteriormente, el canal alfa es la clave
del blending, pues nos indica que tan opaco es el material o la textura. En la lnea 1 del enlistado anterior,
ver que se verifica que la propiedad Alpha del objeto efecto sea diferente de 1.0F para activar el efecto de
blending.
Para activar el blend se establece en verdadero a la propiedad AlphaBlendEnable del RenderState. Para
las lneas 4 y 5 se establece el factor de blend en One de la enumeracin Blend, a SourceBlend y
DestinationBlend. En la lnea 6 se aplica la combinacin de colores por medio de la ecuacin de blend, que
nos ofrece la enumeracin BlendFunction, como Add.
En el cuerpo de else se deshabilita el efecto con slo poner en falso la propiedad AlphaBlendEnable del
RenderState.
Corra el ejemplo y ver algo similar a la Ilustracin 6-7. Cada tetera tiene asignado diferentes materiales
y texturas, adems se habilito el blend que contiene contiene cada una de ellas.
20
BlendFactor es una propiedad que obtiene o establece el color usado por un factor constante-blend durante el blending. El valor por
default es Color.White. Para mayor informacin visite la pgina siguiente:
http://msdn.microsoft.com/en-us/library/microsoft.xna.framework.graphics.renderstate.blendfactor.aspx
72
Ilustracin 6-7 Blending
Mueva con las teclas vistas en la tabla 6.-1 las teteras, para que vea el resultado final y esperado del
archivo.
21
Juegue con los valores de los factores de blend y los diferentes valores de la propiedad BlendFunction ,
para que corrobore los distintos efectos que logra con sus combinaciones.
21
Para mayor informacin visite la siguiente pgina:

http://msdn.microsoft.com/en-us/library/microsoft.xna.framework.graphics.blendfunction.aspx
73
7 Iluminacin
En este captulo se explicarn algunos modelos de iluminacin, as como diferentes tipos de fuentes
importantes en computacin grfica.
El ojo humano es ms sensible a los cambios de brillo que a los de color, por lo que una imagen con
22
efectos de iluminacin transmite ms informacin al espectador de forma ms eficaz.
La iluminacin es uno de los elementos que le da ms vida a un videojuego, y es que solo hay que
recordar algunos ttulos para distinguir la importancia que tuvieron. Por ejemplo, las aventuras de
TomRaider, HalfLife, Gears of War, Final Fantasy o WarCraft. Son videojuegos que con el paso del tiempo,
experiencia y tecnologa aumentaron la sensacin de realismo, exigiendo ms por parte de los usuarios que
de los mismos creadores.
Y aunque mucho tiene que ver el comportamiento de la luz en el mundo real, tambin es muy cierto que
en este mundo de la computacin grfica no todo se maneja como en la naturaleza, y esto debido a que las
mquinas en que se desarrollan y corren estn limitadas. Y es que para pruebas basta el botn del error del
punto flotante o errores de aproximacin. En fin, en lo que se refiere a la parte de videojuegos y
entretenimiento lo que se ve bien, est bien. Claro que en el caso de un CAD (Computer Aided Design) sera
un desastre natural.
Los clculos matemticos para obtener los efectos de iluminacin se explicarn de la mejor manera, para
que se puedan implementar en un shader, ocupando Hight Level Shader Languaje (HLSL). Lo cual har un
poco difcil de explicar la codificacin, pues este lenguaje de programacin es diferente a C#. Adems Visual
Studio no proporciona las mismas herramientas para escribir este tipo de programas com sucede con sus
lenguajes nativos. Es decir, no se tiene el apoyo del IntelliSense, o el realce de los tipos de datos y de
mtodos; etctera. Por lo tanto, solo queda un editor de texto plano y llano.
La recomendacin para este captulo es descargar un IDE (Integrated Development Environment) para
shaders. Pueden descargar el que ms les agrade, sin embargo, los ejemplos que se vern a travs de este
escrito fueron desarrollados en FX Composer 2.5.
7.1 Shader
Shader: procedimiento de sombreado e iluminacin personalizado que permite al artista o programador
23
especificar el renderizado de un vrtice o un pxel.
La palabra shader proviene directamente del software RenderMan de Pixar.
24
Estara de sobra escribir algo de la historia del hardware programable, sin embargo, es necesario hacer
una diferencia entre lo que anteriormente se utilizaba para crear un renderizado en tiempo real y el
hardware programable.
La programacin fija, llamada fixed function, est sujeta a las APIs de renderizado, la cual haca las
mismas funciones de transformacin, desde que se tenan los datos de los vrtices hasta la representacin
visual en la pantalla, a este proceso de transformacin se le conoce como pipiline. Esto produca efectos
pobres y no tena le flexibilidad que necesitaban los artistas.
Con el paso del tiempo, y a causa de los buenos efectos obtenidos a partir del renderizado off-line, en las
pelculas y anuncios de televisin. Los ingenieros de hardware comenzaron a ver la posibilidad de hacer ms
flexible el pipeline.
El vertex shader fue una de las mejoras que vinieron a eliminar el procesador de vrtices de la tarjeta
grfica y los sustitua por un microprocesador programable, sin embargo, an no se poda lograr efectos
sorprendentes en tiempo real como los vistos en filmes.
22
http://www.nvidia.es/object/IO_20020107_6675.html
http://www.srg.es/files/apendice_tuberia_programable.pdf
24
dem
23
74
Luego vino la verdadera revolucin en el renderizado en tiempo real con la llegada de los fragment
shaders, pues ahora se podan implementar muchos ms modelos de iluminacin que anteriormente se
limitaba a Flat y Gouraud. Algunos de los modelos de iluminacin que ahora se implementan son Phong,
Blinn, Cell, Mapping, Toon, etctera.
Anteriormente se hacia la programacin de shaders por medio del lenguaje ensamblador, sin embargo, y
como era de suponerse, pasar a un lenguaje de alto nivel era la va ms apropiada, si es que se quera
avanzar ms rpido.
Por lo que ahora se tienen en el mercado, tres lenguajes importantes para shader: HLSL (High Level
Shading Languaje) de Microsoft, GLSL (OpenGL Shading Languaje) de OpenGl, y Cg(C for graphics) creado por
Nvidia. El primero corre sobre DirectX y XNA, el segundo lenguaje es para ocuparla con OpenGL; y por ltimo
Cg correr tanto en OpenGL como en DirectX, lo cual lo convierte en uno de los lenguajes de programacin
de hardware ms verstil, sin embargo, en este texto se usa HLSL, porque XNA con ayuda de su
ContentManger har ms sencillo cargar el programa de sombreado.
Como este texto no trata con profundidad el lenguaje HLSL y el texto est dirigido para programadores,
no para artistas, es recomendable que las matemticas explicadas ms adelante y el cdigo se traten de
entender lo mejor posible, y esto se tratar de lograr con ejemplos de iluminacin bsica, por lo que se
espera que en un futuro el lector pueda entender un poco ms, cualquier shader en HLSL, y porque no, en
GLSL o en Cg.
En los siguientes subtemas se explicaran a groso modo el significado de cada modelo de iluminacin,
acompaado de algunos clculos matemticos y al final de cada uno de ellos, un ejemplo ocupando HLSL en
FX Composer, para visualizar en tiempo real los cambios en las variables del shading.
Cabe aclarar, si es que no lo he mencionado anteriormente, no se profundizar en el lenguaje de
shading, ni en el uso del IDE FX Composer y mucho menos, en la forma artstica en que puede manejarse
esta herramienta. Pues el fin de este tema es introducir al lector al hardware programable con ejemplos
sencillos.
7.2 Iluminacin ambiental

El modelo de iluminacin ambiental es la intensidad en que se refleja la propiedad del material en todas
direcciones, de una manera difusa, por lo que no se debe considerar como auto-iluminante, aunque as lo
aparenta. Este modelo muestra un objeto de color monocromtico, a menos que una de sus partes
poligonales tenga otra propiedad, o sea, otro color. Y aunque no es de mucho inters manejar la iluminacin
ambiental por separado, es importante para complementar los siguientes modelos.
La ecuacin de iluminacin es la siguiente:
=
Donde es la intensidad resultante, es la intensidad de la luz ambiental, y que puede considerarse

constante para todos los objetos. El coeficiente de reflexin ambiental, es una propiedad del material que
refleja la cantidad de luz ambiental; su valores varan entre 0 y 1.
Tmese en cuenta que el coeficiente de reflexin ambiental, como en los dems modelos de iluminacin,
es una conveniencia emprica y no corresponde a ninguna propiedad fsica de los materiales reales.
7.2.1
HLSL. Modelo de iluminacin ambiental
El ejemplo siguiente aplica el modelo de iluminacin ambiental, ocupando HLSL para darle al lector
desde el inicio una introduccin a la sintaxis.
Pero antes hay que redefinir la ecuacin de iluminacin ambiental para el shader. Los trminos de
intensidad de luz ambiental, y el coeficiente de reflexin ambiental, quedaran como un nico
elemento, el color del material ambiental, esto es para fines prcticos lo que no significa que no se puedan
aadir en el cdigo. Por lo tanto la ecuacin sera la siguiente:
75
Este primer ejemplo toma el color de entrada desde la aplicacin XNA para colorear la geometra de un
modelo 3D. Esta interaccin entre la aplicacin XNA y el shader necesita de variables uniform, que no son
ms que variables globales al estilo del lenguaje de C, pero su caracterstica principal es que son de slo
lectura.
La forma de definir una variable en HLSL es la siguiente:
[Store_Class][Type_Modifier] Type Name
[Index][:Semantic][Annotations][=Initial_Value][:Packsoffset][:Register];
Store_Class: son modificadores opcionales que le sugieren al compilador el alcance y tiempo de vida de
25
las variables; este modificador puede ser especificado en cualquier orden .
Type_Modifier: es opcional el modificador de tipo de variable.
Type: es cualquier tipo enlistado en la Tabla 7-1.
Tabla 7-1
Tipos intrnsecos
Descripcin
Bufer
Bufer, que contiene uno o ms escalares.
Scalar
Un componente escalar.
Vector, Matrix
Componente mltiple vector o matriz.
Sampler, Shader, Texture
Sampler, shader u objeto textura
Struct, Use Defined
Estructura personalizad o tipo definido
26
Name[Index]: es una cadena ASCII que identifica nicamente a una variable shader.
Semantic: es una informacin opcional como parmetro, usado por el compilador para ligar las entradas
y salidas de los shaders, o sea el VertexShader y PixelShader. Hay varias semnticas predefinidas para el
vertex y pixel shaders, adems de que no se pueden crear otras. El compilador ignorar la semntica a
menos que se declaren como variables globales o como parmetro dentro de un shader.
Annotanios: es un metadato opcional, en la forma de un string, conectado a una variable global. Una
anotacin es usada por el framework del efecto e ignorada por HLSL.
Initial_Value: es el valor inicial y es opcional; el nmero de valores depender del nmero de
componentes en Type. Cada una de las variables marcadas como extern debern ser inicializadas con un
valor literal; cada variable marcada como static deber ser inicializada como contante.
Las variables globales no se deben marcar como extern o static, y si se inicializan no sern compiladas
dentro del shader y podrn ser optimizadas.
Packoffset: es una palabra reservada para empaquetar manualmente una constante.
Register: es una palabra reservada para asignarle a una variable un registro en particular.
El listado siguiente muestra el programa que utiliza el modelo de iluminacin ambiental, para la
geometra.
25
26
Para mayor informacin consulte la siguiente pgina: http://msdn.microsoft.com/en-us/library/bb509706(v=VS.85).aspx

Para mayor informacin consulte la siguiente pgina: http://msdn.microsoft.com/en-us/library/bb509587(v=VS.85).aspx
76
Las lneas 1 5, del Cdigo 7-1, es un comentario multi lnea enmarcado entre /* y */, al estilo de C;
tambin pueden hacerse comentarios de una sola lnea empleando //.
Enseguida del comentario se crean las variables globales, lneas 6 14, stas se consideran variables
uniform, as que no es necesario colocar el Storage_Class uniform.
Las variables world, view y projection son matrices de 4 renglones por 4 columnas de tipo float, vase
que le precede dos puntos y el nombre de la variable, pero con la primera letra mayscula, esto es una
anotacin que ayudar a visualizar el resultado de la compilacin en FX Composer, y no es necesario que
tenga el mismo nombre que la variable. Por lo tanto, las semnticas para las siguientes variables, view y
projection, tienen el mismo fin que World. HLSL no tomar en cuenta estas semnticas, pero se han incluido
en este programa, simplemente para poder visualizar el resultado final en el IDE.
Cdigo 7-1
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
/*
Modelo de iluminacin ambiental.
*/
float4x4 world : World;
float4x4 view : View;
float4x4 projection : Projection;
float4 colorMaterialAmbiental
<
string UIName = "Color Ambiental";
string UIWidget = "Color";
> = {0.05F, 0.05F, 0.05F, 1.0F};
float4 mainVS(float3 posicion : POSITION) : POSITION
{
float4x4 wvp = mul(world, mul(view, projection));
return mul(float4(posicion.xyz, 1.0F), wvp);
}
float4 mainPS() : COLOR
{
return colorMaterialAmbiental;
}
technique ModeloAmbiental
{
pass p0
{
VertexShader = compile vs_3_0 mainVS();
PixelShader = compile ps_3_0 mainPS();
}
}
La variable colorMaterialAmbiental es un vector de cuatro componentes escalares de tipo float, y cada

uno de ellos representa los componentes RGBA del color. Enseguida de la declaracin de esta variable se
puede ver la inclusin de un metadato encerrado entre < y >, y la inicializacin de la variable; esto con el fin
de manipular con la mayor sencillez el color en FX Composer. HLSL descartar este metadato y no se tomar
en cuenta en la aplicacin XNA, pero que repito, es para poder manejar las variables de una manera ms
sencilla en FX Composer.
El metadato UIName, de colorMaterialAmbiental le asigna un alias de tipo string al nombre, pero que
ser ignorado por HLSL, empero que se reflejar en la interfaz grfica del usuario (GUI, por su soglas en
ingls) de FX Composer. Se utiliza tambin, el string UIWidget para abrir una ventana llamada Color Picker
en FX Composer, la cual ayuda a seleccionar un color, vase Ilustracin 7-1.
77
La inicializacin de la variable es como cualquier asignacin a un arreglo de flotantes en C; entre llaves y

separado por comas se asignan los valores correspondientes, no olvide colocar el punto y coma al final de la
asignacin.
Ilustracin 7-1 Color Picker
Las lneas 16 19 es la subrutina que servir para hacer los clculos correspondientes a cada vrtice que
sea ledo por el shader, regularmente llamado vertex shader. Esta subrutina necesita datos de entrada,
adems de las variables globales, que se obtienen a partir de los parmetros de sta, lnea 16. Ntese que la
declaracin es parecida a las funciones del lenguaje de C, pero con la diferencia que sta debe recibir por lo
menos una semntica y arrojar otra.
Las semnticas son regularmente estructuras, cuyos componentes son semnticas predefinidas de HLSL.
Por ejemplo:
struct VertexShaderEntrada
{
float4 Posicion : POSITION;
float2 CoordenadaTextura : TEXCOORD0;
};
struct VertexShaderSalida
{
};
Algunas de las semnticas establecidas para las entradas son:
POSITIONn
TEXCOORDn
NORMAL
COLORn
Y para datos de salida:
POSITION
COLORn
27
TEXCOORDn
En donde n es nmero entero.

27
Para mayor informacin acerca de las semnticas, consulte la siguiente direccin: http://msdn.microsoft.com/enus/library/bb509647(v=VS.85).aspx
78
Tome en cuenta la integridad de los datos, pues a veces puede haber truncamiento de datos,
provocando errores en tiempo de ejecucin. Tambin tome en cuenta que las semnticas deben ser las
mismas en ambas estructuras de entrada como de salida.
En este ejemplo no se manejan las semnticas como estructuras de entrada y de salida, por lo que en los
parmetros de la funcin mainVS, lnea 16, se deben incluir despus del nombre de la variable y despus de
los parmetros de la funcin, pues esto indica al compilador que el resultado arrojado por la subrutina ser
de tipo POSITION. Por lo menos el vertex shader debe arrojar la posicin del vrtice, para que el pixel shader
lo tome como una semntica de interpoladores como se muestra en la subrutina mainPS, lneas 22 25,
tambin llamada pixel shader.
Este vertex shacer toma como entrada la posicin del vrtice, y tambin puede agregarse otras, como las
coordenadas de textura, la normal y la tangente del vrtice. En este ejemplo solo se necesita el valor de la
posicin del vrtice para implementar el modelo de iluminacin ambiental.
El valor arrojado por el vertex shader es de tipo float y que gracias a la semntica POSITION, es posible
que el pixel shader pueda interpolarlo para su uso.
Los interpoladores o variables Varying sirven para la comunicacin entre los vertex shader y pixel
shaders.
Estos interpoladores son para mantener la congruencia de la informacin, por ejemplo, en la Ilustracin
7-2 se muestra una superficie formada por tres vrtices v1, v2 y v3, y cada uno de ellos con sus respectivas
normales nv1, nv2 y nv3. Estos datos slo son tiles cuando se est trabajando a nivel de vrtice, y que se
recomienda que a este nivel se haga la mayora de los clculos, pues el nmero de veces que se ejecuta es
menor que si se trabaja a nivel pxel.
Para que el pxel shader, tambin llamado fragment shader, pueda hacerse de los datos
correspondientes, debe interpolar la informacin recibida del vertex shader antes de comenzar cualquier
clculo. La normal de color verde, nf, es la normal correspondiente a ese pxel y es el resultado de la
interpolacin que se hace al momento de pasar los datos del vertex shader al pxel shader. Es por eso que se
debe tener una buena integracin de datos en el momento de declarar las variables, y el orden de las
semnticas correspondientes a las de tipo uniform.
Ilustracin 7-2 Interpolacin de vertex shader a pixel shader
En el vertex shader, mainVS, se harn las transformaciones que regularmente hace el pipeline. Cambiar
del espacio de coordenadas locales a las coordenadas de mundo, luego a las coordenadas de vista y por
ltimo se transforma a las coordenadas de proyeccin.
Esta transformacin se hace sobre cada uno de los vrtices; para la transformacin se ocupan las
matrices de mundo, vista y proyeccin; estas matrices las proporciona la API de XNA y DirectX.
79
En la lnea 18 se declara una matriz de 4 renglones por 4 columnas, que se inicializa con la multiplicacin
28
de las variables world, view y projection. La funcin mul es una funcin intrnseca de HLSL; multiplica dos
matrices A y B siempre y cuando el nmero de columnas de la matriz A sea igual al nmero de renglones de
la matriz B. As que est funcin trabaja de la misma manera que se hara una multiplicacin de matrices en
algebra lineal. El resultado es una matriz cuya dimensin es igual al nmero de renglones de la matriz A por
el nmero de columnas de la matriz B.
Tmese en cuenta que la multiplicacin de matrices no es conmutativa, as que hay que cuidar el orden
en que se le dan las matrices a la funcin intrnseca mul.
Luego de haber obtenido la matriz wvp, se multiplica por la posicin del vrtice para hacer la
transformacin de las coordenadas locales a las de proyeccin, lnea 19. Pero antes de hacer dicha
operacin se debe homogenizar el vector de posicin del vrtice, esto es para poder realizar la
multiplicacin. En este caso se crea un nuevo vector de cuatro elementos de tipo flotante, donde los
primeros tres son iguales a las coordenadas x, y y z de la posicin del vrtice, y el ltimo es uno. Como valor
de retorno del vertex shader es la posicin del vrtice transformado, utilizando la palabra reservada return.
El pixel shader, mainPS, lneas 22 25, no tiene una semntica de entrada explcita, pues en este caso se
toma como default la posicin del vrtice. Pero si tiene una explcita de salida que indica que regresar el
color del pxel, este valor de retorno es el color que se toma a partir de la entrada de la aplicacin XNA, y en
este caso de FX Composer, lnea 24. Aqu es importante aclarar que este color de retorno iluminara o
coloreara de igual forma la geometra, esto representa el material ambiental del objeto y la ecuacin del
modelo ambiental.
Por ltimo, se tiene la tcnica con la cual se har pasar la informacin de la geometra, lneas 27 34,
para su transformacin directa en el hardware programable. Se debe comenzar por escribir la palabra
technique y enseguida el nombre, lnea 27. El nombre de la tcnica como el de las subrutinas puede
contener caracteres alfanumricos y guin bajo.
En el cuerpo de la la tcnica, encerrada entre { y }, se incluyen las pasadas por las que se harn las
transformaciones de la informacin de la geometra, y estas deben comenzar con la palabra reservada pass,
luego del nombre. Esto regularmente se utiliza para efectos ms elaborados, por lo que no se incluye en la
mayora de los ejemplos de este texto, y que por el momento no se ver.
La declaracin de las variables VertexShader y PixelShader se deben de hacer dentro de pass, lneas 31 y
32, cuya sintaxis debe cumplir con lo siguiente:
PixelShader = compile ShaderTarget ShaderFunction();
VertexShader = compile ShaderTarget ShaderFunction();
Tabla 7-2
Parmetros
Descripcin
XXXShader
Una variable shader, que representa el shader compilado. Puede

PixelShader o VertexShader.
ShaderTarget
Es el model shader contra el que se compila.
ShaderFunction()
Es una cadena ASCII que contiene el nombre de la funcin de entrada del

shader; esta es la funcin que comienza la ejecucin cuando el shader es
invocado. El () representa los argumentos del shader.
28
Para conocer todas las funciones intrnsecas que ofrece HLSL, consulte la siguiente pgina web: http://msdn.microsoft.com/enus/library/ff471376(v=VS.85).aspx
80
29
Los model shader, dependern del API con la cual se har su ejecucin, la GPU y el sistema operativo.
Sin embargo, XNA no tiene soporte para todas las versiones de model shader, por lo que trabajara al igual
que Direct3D 9, cuyos modelos de shaders se limita a las versiones 1, 2 y 3. En la tabla siguiente se enlista los
30
model shader que pueden ocuparse .
Tabla 7-3
Model Shader
Shader Profile
Shader Model 1
vs_1_1
Shader Model 2
ps_2_0, ps_2_x, vs_2_0,.vs_2_x
Shader Model 3
ps_3_0, vs_3_0
Las funciones mainVS y mainPS que se ocupan para la declaracin de las variables shaders, no deben
contener como argumentos las semnticas que ocupa la API como entradas, pero si debe especificarse
aquellas que se declaren como uniform y que puedan servir como entradas extras para la activacin de
cierto clculo. En este ejemplo las funciones de shaders contienen nicamente las semnticas que la API
necesita como entrada, por lo que en las lneas 32 y 33 se deja vaco los argumentos.
7.2.2
Inciando FX Composer
FX Composer 2.5 es un IDE para el desarrollo de shaders orientado para artistas y programadores, ste
ltimo es en el que se enfocar este texto, pues permite escribir directamente en su editor de texto,
visualizar en tiempo real el resultado del shader y una interfaz sencilla para manipular las variables uniform
que pueda tener el shader. En la Ilustracin 7-3 se muestra la interfaz grfica de FX Composer 2.5.
29
Antes de ejecutar el shader se debe saber el modelo de shader que puede ejecutar la GPU, por lo que es menester revisar las
caractersticas del dispositivo grfico.
30
Para mayor informacin acerca de los model shader visite la pgina siguiente: http://msdn.microsoft.com/enus/library/bb509626(v=VS.85).aspx
81
Ilustracin 7-3 GUI de Fx Composer 2.5
Una vez iniciado FX Composer 2.5 cree un nuevo proyecto oprimiendo las teclas Ctrl+Mays+N, o en
File\New Project como se ve en la Ilustracin 7-4, para abrir un cuadro de dilogo.
Ilustracin 7-4 Nuevo proyecto
En el cuadro de dilogo, Ilustracin 7-5, se tiene el TextBox Name y el ListBox Location, para darle
nombre al proyecto y localidad en el dispositivo de almacenamiento. Es recomendable dejar habilitada la
creacin del directorio del proyecto, pues esto permite una mejor organizacin. Para cambiar de localidad el
proyecto el botn abrir otro cuadro de dilogo para buscar en dnde quisiera que se alojara.
Ilustracin 7-5 Ventana de dilogo
82
Una vez que se tiene el nombre del proyecto y la localidad, oprima el botn OK. En seguida se activarn
iconos del ToolBar, y en el TabPage Render se activar el viewport que mostrar la geometra.
La insercin de un nuevo Effect consiste en crear un nuevo shader en los diferentes lenguajes de shaders
disponibles en FX Composer 2.5. En la barra de tareas oprima en la etiqueta Create\Add Effect, como se ve
en la Ilustracin 7-6.
Ilustracin 7-6 Aadir nuevo efecto
Enseguida se abre una ventana de dilogo Effect Wizard, Ilustracin 7-7, para agregar un nuevo efecto al
proyecto. En este caso slo se trabajar con HLSL FX por lo que se habilita la casilla son dicho nombre en el
cuadro de dilogo.
Ilustracin 7-7 Ventana de dilogo para aadir nuevo efecto
Ya seleccionado, el perfil a crear, se oprime el botn Next para seguir con la seleccin de la plantilla
Empty que ofrece FX Composer de una lista predeterminada que tiene, vase Ilustracin 7-8.
83
Ilustracin 7-8 Plantillas para HLSL
En este punto se debe dar un nombre al archivo fx que se crear y su localizacin. Despus de haber
nombrado al archivo, oprima el botn Next.
Este ltimo apartado es para darle nombre al efecto, se recomienda dejar el establecido por FX
Composer, pues corresponder al asignado en el archivo *.fx, de la misma manera que el nombre del
material, tambin se recomienda dejar activada la casilla Create a material for this effect. Oprima el botn
Finish, vase Ilustracin 7-9.
Ilustracin 7-9 Ventana de dilogo para el nombre del efecto
En la parte de materiales de la GUI podr ver que se ha creado un nuevo material llamado
Ambiental_Material, el cual solo corresponde a una muestra del efecto en una esfera. Como se ha
seleccionado la plantilla Empty, la esfera es ms un crculo blanco. Haga doble clic sobre el material
Ambiental_Material para poder editarlo, vase Ilustracin 7-10.
84
Ilustracin 7-10 Editor de texto de FX Composer
El editor de texto ofrece el realce de palabras reservadas, el nombre de las variables de HLSL y los
comentarios.
Borre todo el contenido del editor de texto y escriba el Cdigo 7-1 de este texto. Compile la aplicacin
con la tecla F6 y vera el cambio inmediato en el material Ambiental_Material. Si tiene un error en tiempo de
compilacin busque el error en las lneas transcritas en el editor de texto, pues este ejemplo ha sido
probado perfectamente.
Para ver el resultado en el viewport que se encuentra en la TabPage Render, primero obtenga el foco
oprimiendo en la pestaa. Luego seleccione uno de los modelos predefinidos de FX Composer en la barra de
tareas, o importe un modelo en el men File\Import
En el viewport se visualiza una elefante con el material DefaultMaterial, sta no se puede editar pero si
se manipular sus propiedades.
Ahora hay que aadir el material Ambiental_Material al modelo, para esto arrastre el material de la
seccin Materials hacia el elefante, y en automtico ver el cambio en el viewport, vase Ilustracin 7-11.
85
Ilustracin 7-11 Elefante con iluminacin ambiental
Para cambiar el Color Ambiental, seleccione de la parte Properties el parmetro con dicho nombre y se
abrir el Color Picker para seleccionar el color con el ratn.
Al seleccionar el color dentro del crculo y la intensidad en la barra, se ver el cambio inmediato en el
viewport y en el material.
7.2.3
HLSL. Modelo de iluminacin ambiental con textura
La textura es uno de los parmetros que permiten dar al renderizado una mejor vista de los que
queremos que aparente tal modelo. Es por eso que en este ejemplo slo se aadir una textura al shader
anterior, y que en los siguientes modelos de iluminacin no sea necesario volver a explicar. Tambin se
cambiar la manera en que se escriben las semnticas de entrada y salida para los shaders vertex y pixel.
La declaracin de la variable texturaModelo de tipo Texture2D en el Cdigo 7-2, lnea 16, es la variable
que contendr la textura provista por la API como entrada, la declaracin de sta es la misma que para
cualquier variable uniform.
Type Name
Tabla 7-4
Parmetro
Descripcin
Type
Es uno de los siguientes tipos: Texture1D, Texture1DArray,

Texture2D, Texture2DArray, Texture3D, TextureCube.
Name
Cadena ASCII que identifica el nombre de la variable.
Despus de haber declarado la variable es recomendable escribir de inmediato el tipo de sampleo de la

31
textura. La siguiente sintaxis declara el estado del sampleo para Direct3D 9 .
31
Para mayor informacin acerca del tipo de muestreo de la textura en Direct3D 9 y Direct3D 10 visite la siguiente direccin web:
http://msdn.microsoft.com/en-us/library/bb509644(VS.85).aspx
86
sampler Name = SamplerType{Texture = <texture_variable>; [state_name =

state_value;]}
Tabla 7-5
Parmetro
Descripcin
sampler
Palabra reservada que se requiere.
Name
Cadena ASCII nica que identifica el nombre de la variable sampler.
SamplerType
[entrada] Tipo de muestreo que es uno de los siguientes: sampler,

sampler1D, sampler 2D, sampler3D, samplerCUBE, sampler_state,
SamplerState.
Texture = <texture_variable>
Una variable de textura. La palabra reservada Texture es requerida

para establecer la regla de la mano izquierda o derecha. Los corchetes
de ngulo son para establecer la regla de la mano izquierda y si se
omiten es para establecer la regla de la mano derecha.
[entrada] Asignacin de estados opcional. Todas las asignaciones de
estado pueden aparecer fuera del bloque encerrado por { y }. Cada
asignacin ser separada con un punto y coma. La siguiente lista
muestra los posibles nombres de estado:
AddressU
AddressV
AddressW
state_name = name_value
BorderColor
Filter
MaxAnisotropy
MaxLOD
MinLOD
MipLODBias
Los valores de los estados sern igual a los ofrecidos por Direct3D o
32
XNA
Las lneas 21 29 muestran el tipo de sampleo que se utiliza para la textura, y si se recuerda el Textura
no ser necesario explicar lo estados y valores que puede tomar el tipo de sampleo.
La declaracin de estructuras que le siguen al tipo de sampleo es opcional, pero es ms sencillo de
entender, de escribir y de mantener. Estas estructuras representan la semntica de entrada y salida para el
vertex shader, lneas 48 56, y como semntica de entrada para el pixel shader, lneas 58 68.
32
Para mayor informacin acerca de los valores que ofrece Direct3D consulte la siguiente direccin web:
http://msdn.microsoft.com/en-us/library/bb173347(v=VS.85).aspx
87
Cdigo 7-2
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
/*
Modelo de iluminacin ambiental.
Carlos Osnaya Medrano
*/
<
string UIName = "Color Ambiental";
> = {0.05F, 0.05F, 0.05F, 1.0F};
texture2D texturaModelo
<
string UIName = "Textura";
>;
sampler modeloTexturaMuestra = sampler_state
{
Texture = <texturaModelo>;
MinFilter = Linear;
MagFilter = Linear;
MipFilter = Linear;
AddressU = Wrap;
AddressV = Wrap;
};
{
};
{
};
struct PixelShaderEntrada
{
};
VertexShaderSalida mainVS(VertexShaderEntrada entrada)
{
VertexShaderSalida salida;
salida.Posicion = mul(entrada.Posicion, wvp);
salida.CoordenadaTextura = entrada.CoordenadaTextura;
return salida;
}// fin del VertexShader mainVS
float4 mainPS(PixelShaderEntrada entrada,
uniform bool habilitarTextura) : COLOR
{
if(habilitarTextura)
{
float4 texturaColor = tex2D(modeloTexturaMuestra,
entrada.CoordenadaTextura);
colorMaterialAmbiental *= texturaColor;
}
return colorMaterialAmbiental;
}// fin del PixelShader mainPS
88
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
technique Texturizado
{
pass p0
{
PixelShader = compile ps_3_0 mainPS(true);
}
}// fin de la tcnica Texturizado
technique Material
{
pass p0
{
PixelShader = compile ps_3_0 mainPS(false);
}
}// fin de la tcnica Material
Para que las estructuras puedan servir como semnticas, es necesario que todos sus campos sean
semnticos.
La estructura VertexShaderEntrada y VertexShaderSalida tienen los mismos campos, se ha dejado de
esta manera para una mejor comprensin del cdigo, por lo que no es necesario escribir ambos. Estas
estructuras albergan el campo de tipo float4 que representa la posicin del vrtice, y cuya semntica es
POSITION. El segundo campo es de tipo float2, representa la coordenada de textura que contiene el vrtice,
por lo tanto su semntica es TEXCOORD0.
La estructura PixelShaderEntrada, lneas 43 46, contiene un slo campo de tipo float2 que representa
la coordenada de textura del pxel; la semntica debe ser la misma que arroja como resultado el vertex
shader, en este caso es TEXCOORD0.
La subrutina mainVS toma como entrada la estructura VertexShaderEntrada y da como resultado una
estructura VertexShaderSalida, esta sintaxis es igual que en el lenguaje C y C#, por lo que no se
profundizara. Hay que recordar que estas subrutinas que se compilan como shaders deben tener como
entradas y salidas semnticas de HLSL.
En la lnea 50 se declara la variable salida de tipo VertexShaderSalida, que fungir como dato de salida
del vertex shader. Enseguida se inicializan los campos de dicha variable, lneas 52 y 53. La coordenada de
textura del vrtice de entrada se le asigna sin ninguna modificacin al campo CoordenadaTextura de la
variable salida. Y por ltimo, se regresa como dato de salida la variable salida.
El pixel shader mainPS, lneas 58 68, sigue ofreciendo como salida, el tipo de dato float4 que
representa el color final del pxel, gracias a la semntica COLOR. A diferencia al ejemplo anterior, ste toma
como parmetro de entrada una estructura y una variable de tipo uniform, que no tiene semntica; lo
anterior servir para habilitar la textura, en el resultado final del pxel. Las variables que se den como
argumentos en las subrutinas que se compilen como vertex o pixel shaders deben tener semntica, en dado
caso de no hacerlo se debe incluir la palabra reservada uniform, antes del tipo de dato de la variable.
El clculo necesario para tener como resultado final la combinacin de cualquier modelo de iluminacin,
y la textura, es una multiplicacin uno a uno, es decir elemento por elemento, entre el arreglo de cuatro
elementos que representa el color obtenido a partir de las operaciones del modelo de iluminacin, por el
resultado de la funcin intrnseca tex2D de HLSL, lnea 63 65.
tex2D(s, t) 33
Tabla 7-6
Parmetro
Descripcin
33
Para mayor informacin acerca de las funciones intrnsecas para textura, revise la siguiente pgina web:
http://msdn.microsoft.com/en-us/library/ff471376(v=VS.85).aspx
89
[entrada]Estado de muestreo de la textura.
[entrada]Coordenada de textura.
Con el condicional if y la variable habilitarTextura de tipo bool, lnea 62, se procesan los datos
correspondientes para texturizar el pxel, en caso contrario slo se pinta con el color ambiental.
En este ejemplo se utilizan dos tcnicas Texturizado, lneas 70 77, y Material, lneas 79 86. Tambin
se pudo haber utilizado una variable global para habilitar la textura, pero se ha dejado as para fines
educativos. La compilacin del pixel shader mainPS, lneas 75 y 84, pasan como parmetro de entrada el
valor true o false directamente.
7.2.4
Aadiendo nuevo efecto en FX Composer
Retomando el proyecto ya hecho en el dubtema 7.2.2, aada un nuevo efecto tomando la plantilla
Empty. Luego borre todo el contenido del nuevo efecto y escriba el listado anterior, Ambiental con Textura.
Compile el efecto y quite cualquier error de compilacin si as sucediese.
Cambie el material del modelo en el viewport, arrastrando el material Ambiental con Textura al modelo
tridimensional, ver que la geometra es de un slo color, esto es porque no tiene una textura como
entrada.
Haga clic en el parmetro Textura en la parte Properties de FX Composer 2.5, Ilustracin 7-12, seleccione
la opcin Image para abrir un cuadro de dilogo llamado Textures, Ilustracin 7-13.
Ilustracin 7-12 Campo Textura
Luego oprima el icono Add Image, aquel con forma de cruz o el smbolo ms, en seguida se abrir otra
ventana de dilogo para seleccionar las imgenes tomadas de memoria secundaria. Sin embargo, no todas
podrn agregarse al shader, pero s estarn enlistadas en el cuadro de dilogo Textures, como lo muestra la
Ilustracin 7-13. Una vez seleccionada la imagen oprima el botn OK y de inmediato ver en el viewport del
TabPage Render que la textura est envolviendo al modelo.
90
Ilustracin 7-13 Texturas
FX Composer no ejecuta todas las tcnicas que el archivo fx contiene, pero s las compila. As que para
ver el efecto que no se est ejecutando coment la tcnica que est ms arriba del archivo.
Por ltimo, cambie los valores al color ambiental para ver el resultado final sobre la textura.
Ilustracin 7-14 Ambiental con textura
7.3 Iluminacin difusa

La iluminacin ambiental no es de gran inters, pues los colores son planos y no da una sensacin de
volumen de los objetos. La iluminacin difusa junto con la ambiental obtiene ese sentido de volumen,
gracias a las diferentes intensidades en cada vrtice o pxel, esta cantidad de luz reflejada depende del
ngulo formado entre la normal del vrtice o pxel y el haz de luz incidente que proviene de una fuente de
iluminacin, vase Ilustracin 7-15.
91
Ilustracin 7-15 ngulo formado entre el haz de luz y la normal de la superficie
La reflexin difusa o tambin llamada reflexin Lambertiana, no toma en cuenta la posicin del
observador, por lo tanto es independiente de ste y, slo es proporcional al coseno del ngulo de incidencia
de luz y la normal.
La ecuacin de iluminacin difusa es:
= cos
Donde es la intensidad de la fuente luminosa; es el coeficiente de reflexin difusa del material que
vara entre cero y uno. Regularmente el rango del ngulo se encuentra entre 0 a 90, esto es con el fin de
hacer autoocluyente la reflexin difusa, vase Ilustracin 7-16.
Ilustracin 7-16 Autoocluyente
Para conocer el ngulo entre dos vectores, se utiliza la siguiente expresin:

= cos
Donde y son dos vectores cualesquiera.

||
Despejamos el coseno del ngulo y obtenemos la siguiente expresin:

92
cos =

||
Ahora se toman los valores de los vectores y , donde el vector del haz de luz es unitario y el coseno el
ngulo debe ser positivo, para ser autoocluyente la expresin quedara como:
cos = , 0
Donde max selecciona el valor mximo entre el producto punto y cero. La ecuacin de iluminacin difusa
quedara escrita como:
= , 0
Para obtener una iluminacin ms realista se agrega el modelo de iluminacin ambiental, al modelo
difuso, esto se logra sumando ambos modelos de iluminacin.
= + , 0
El vector del haz de luz depender del tipo de fuente de iluminacin. En este texto se manejaran tres
tipos bsicos de fuentes, mismas que ofrece DirectX en su pipeline, Direccional, Puntual y Spot. Pero antes
se reescribe la ecuacin anterior para adaptarlo al shader de los siguientes ejemplos.
La intensidad de iluminacin y coeficiente de reflexin ambiental se sustituye por el color ambiental del
material; la intensidad de iluminacin y coeficiente de reflexin difusa se sustituyen por el color difuso del
material.
7.3.1
= + , 0.0
Fuente de iluminacin direccional
La fuente de iluminacin direccional es semejante a tener una fuente en el infinito con una cantidad
constante de energa, por lo que no importa la distancia del objeto a la fuente.
Tambin se puede considerar que el vector del haz de iluminacin direccional es paralelo para todos los
vrtices o pixeles del modelo tridimensional. En la Ilustracin 7-17 se muestra que el vector de iluminacin
es paralelo para todos los vrtices o pxeles del cubo.
Ilustracin 7-17 Iluminacin direccional
Por lo tanto, la nica informacin que se requiere de este tipo de fuente es su direccin; el vector
unitario es el adecuado para este tipo de luz. Tambin se puede considerar el color de la fuente, pero en
este ejemplo no se tomar en cuenta.
Retomando la ecuacin de iluminacin, hasta ahora descrita, se reescribir para el shader de manera que
sea prctico usar.
93
En los siguientes ejemplos los clculos necesarios para obtener el color final sobre el material y textura
del modelo tridimensional se har por pxel, esto no significa que no se puedan hacer por vrtice, es ms, las
operaciones que se hagan por pxel son muy similares a los que se haran por vrtice. As que si el lector
quiere probar estos ejemplos sobre cada vrtice, se espera no le sea difcil de lograrlo. Tambin se ha
tomado la decisin de dejar las operaciones por pxel, pues el resultado final es mejor, visualmente, pero
requiere ms poder de GPU en comparacin si se hiciese por vrtice.
En el siguiente enlistado similar al visto con anterioridad, se explicarn las cosas nuevas que se han
agregado para el modelo de iluminacin difusa, reutilizando el ejemplo del modelo de iluminacin ambiental
con textura.
Cdigo 7-3
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
/*
Modelo de iluminacin: Especular o Difusa.

Tipo de fuente: Direccional.
Tcnica empleada: PixelShader.
Material clsico.
*/
float3 direccionLuz
<
string UIName = "Direccin de Luz";
>;
<
string UIName = "Material ambiental";
> = {0.05F, 0.05F, 0.05F, 1.0F};
float4 colorMaterialDifuso
<
string UIName = "Material difuso";
> = {0.24F, 0.34F, 0.39F, 1.0F};
texture2D texturaModelo
<
>;
{
MinFilter = Linear;
MagFilter = Linear;
MipFilter = Linear;
AddressU = Wrap;
AddressV = Wrap;
};
{
float3 Normal : NORMAL;
};
{
94
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.

float3 WorldNormal : TEXCOORD1;
float3 WorldPosition : TEXCOORD2;
};
{
};
VertexShaderSalida MainVS(VertexShaderEntrada entrada)
{
salida.WorldNormal = mul(entrada.Normal, world);
salida.WorldPosition = mul(entrada.Posicion, world);
return salida;
}// fin del vertex shader MainVS
float4 MainPS(PixelShaderEntrada entrada,
{
// modelo de iluminacin difusa
// iluminacin difusa
direccionLuz = normalize(direccionLuz);
float reflexionDifusa = max(dot(-direccionLuz, entrada.WorldNormal), 0.0F);
float4 difuso = colorMaterialDifuso * reflexionDifusa;
float4 color;
// color final
color = colorMaterialAmbiental + difuso;
// modelo de iluminacin especular
// texturizado
{
float4 colorTextura = tex2D(modeloTexturaMuestra,
color *= colorTextura;
}
// color final
color.a = 1.0F;
return color;
}// fin pixel shader MainPS
{
pass P0
{
VertexShader = compile vs_3_0 MainVS();
PixelShader = compile ps_3_0 MainPS(true);
}
}
technique Material
{
pass P0
{
PixelShader = compile ps_3_0 MainPS(false);
}
}
95
En la declaracin de variables globales se han agregado la direccin de la luz, lneas 15 18, Cdigo 7-3, y
el color del material difuso, lneas 26 30. En la estructura de entrada para la subrutina vertex shader, se ha
agregado el campo Normal de tipo float3 y semntica NORMAL, lnea 49, que recibir la normal asociado al
vrtice. Para la estructura VertexShaderSalida se ha aadido el campo WorldNormal de tipo float3 con
semntica TEXCOORD1, lnea 57; y el campo WorldPosition de tipo float3 con semntica TEXCOORD2, lnea
58. Estos dos ltimos campos son para hacerle pasar al pixelshader de manera coherente los datos de la
normal y posicin utilizando la semntica TEXCOORD. En la estructura PixelShaderEntrada se agregan los
mismos campos WorldNormal y WorldPosition que los que contiene VertexShaderSalida, vase que tienen
la misma semntica.
Dentro de la subrutina MainVS, lneas 68 78, se inicializan los campos de la variable inmediata salida.
Los nuevos campos de la estructura VertexShaderSalida deben contener la normal y posicin del vrtice en
el espacio de coordenadas de mundo, para eso hay que multiplicar la normal y posicin del vrtice por la
matriz de mundo world, lneas 74 y 75.
La direccin de la luz debe ser normalizada, es decir, debe convertirse el vector a un vector unitario, pues
lo nico que interesa de este tipo de fuente es la direccin de sta. La funcin intrnseca normalize regresa
el vector de cualquier tamao normalizado. En la lnea 85 se le asigna a la misma variable direccionLuz, el
resultado de la normalizacin. Adems con esto se asegura que el vector dado por la API sea unitario,
tambin se pudo haber normalizado desde sta y evitarle el clculo a la GPU.
La intensidad difusa, como se haba explicado con anterioridad, depende del coseno del ngulo formado
entre la normal del vrtice o pxel y el vector de direccin de la fuente de iluminacin. Por lo que el valor
mximo de la intensidad difusa ser cuando la direccin de luz sea paralela a la normal y el menor ser
cuando sean ortogonales. Para hacer autoocluyente, como se indica en la ecuacin del modelo de
iluminacin difusa, se utiliza la funcin intrinseca max, lnea 86, que devuelve el valor mximo entre los dos
parmetros que recibe. El primer parmetro es el resultado de la funcin intrnseca dot que obtiene el
producto punto entre dos vectores, y el primero de dot es direccinluz multiplicado por menos uno; el
cambio de direccin de direccionLuz, es para darle coherencia entre la entrada del dato por parte del
usuario y el clculo para la intensidad, pues lo que se pregunta es hacia a dnde apunta la luz, no de dnde
proviene la luz. El segundo parmetro de la funcin max es cero, pues los valores que debe normalmente
tomar la intensidad difusa es entre cero y uno. La asignacin del resultado de la funcin max a la variable
reflexionDifusa de tipo float, lnea 86, es para una mejor comprensin del ejemplo, por lo que no es
necesario declararla.
Luego de haber obtenido la intensidad de iluminacin difusa, se debe de multiplicar por el color del
material difuso para luego sumarlo al modelo de iluminacin ambiental. Primero se declara la variable
difuso y se inicializa con la multiplicacin entre el escalar intesidadDifusa por el vector colorMaterialDifuso,
lnea 87. La variable color, lnea 88, servir para almacenar el color final, a partir de la suma de los modelos
de iluminacin.
El comentario de la lnea 92 indica que a partir de ah se harn los operaciones para el modelo de
iluminacin especular.
Hasta este punto es todo lo nuevo en este cdigo, todo el resto es el mismo que en el ejemplo anterior.
Cree un proyecto nuevo en FX Composer para probar el shader, si no conoce cmo crear uno, lea el subtema
7.2.2, si encuentra un error de compilacin, corrija y pruebe de nuevo.
96
Ilustracin 7-18 Difuso con textura
Como se puede ver en la Ilustracin 7-18 el modelo tiene un aspecto mucho mejor que en el visto en la
Ilustracin 7-14. Pruebe con la tcnica Material, comentando la tcnica Texturizado, lneas 108 115, para
poder apreciar mejor la sensacin de volumen del objeto, como se muestra en la Ilustracin 7-19.
Ilustracin 7-19 Difuso sin textura
7.3.2
Fuente de iluminacin puntual
La fuente de iluminacin puntual es similar a tener un foco incandescente en un cuarto totalmente

oscuro. Esto hace que la direccin de la fuente de iluminacin al vrtice vare dependiendo de la posicin en
la cual se encuentre la fuente y/o el vrtice. En la Ilustracin 7-20 se muestra el vector de posicin de la
fuente y los vectores de cada vrtice o pxel.
97
Ilustracin 7-20 Fuente puntual
Otra caracterstica importante de este tipo de fuente, es la atenuacin. La atenuacin como en el mundo
real, depender de la distancia entre el foco y el objeto; entre ms cerca se encuentre de la fuente mayor
intensidad de luz reflejada se tiene; entre ms alejado del foco menor intensidad de luz se podr reflejar.
Una tentativa para obtener esta atenuacin es la inversa del cuadrado de la distancia.
=
1
2
Sin embargo, como lo indican los pioneros en graficacin por computadora, esto no siempre funciona
bien. As que una forma til, permitiendo una mayor gama de efectos es:
1
, 1
1 + 2 + 3 2
Donde 1 , 2 y 3 son constante definidas por el usuario. La primera constante evita que el denominador
sea demasiado pequeo cuando la luz est cerca. La funcin min limita a un valor a uno, para asegurar que
siempre se atene.
Una manera de conocer qu valores deben tener las constantes de atenuacin es graficar la ecuacin
anterior, como se muestre en la Ilustracin 7-21.
98
1.2
Factor de atenuacin
1
0.8
0.6
0.4
0.2
0
0
50
100
150
200
250
300
350
Distancia
Ilustracin 7-21 Factor de atenuacin de iluminacin. c1= 1, c2 = 0, c3 = 0.001
Regularmente los valores del factor de atenuacin deben estar entre cero y uno, este valor mximo
puede manipularse a partir de la primera constante, las dems constantes es para disminuir el factor de
atenuacin conforme aumenta la distancia. Tome en cuenta que estos valores, por lo menos para las
constantes 2 y 3 deben ser menores que uno y mayores a cero.
Reescribiendo la ecuacin de iluminacin con el factor de atenuacin para el modelo de iluminacin

difuso.
= + , 0
Luego se sustituye el miembro derecho del factor de atenuacin y tenemos la nueva ecuacin de
iluminacin para la fuente tipo puntual y spot.
= +
1
, 1 , 0
1 + 2 + 3 2
Muchas de las lneas del cdigo siguiente son iguales a las vistas en la fuente de iluminacin direccional,
por lo tanto slo describirn aquellas que sean relevantes.
En la declaracin de variables globales se tiene la posicin de la fuente de iluminacin como posicionLuz,
una variable de tipo float3, lneas 15 18, Cdigo 7-4. Las constantes de atenuacin 1 , 2 y 3 y rango son
variables de tipo float, lneas 32 y 33. La variable rango sirve para evaluar la atenuacin a la distancia
establecida por rango, es decir, aquel modelo que se encuentre dentro de la distancia establecida por rango,
ser afectada por la atenuacin, en dado caso que estuviera fuera de esa distancia la atenuacin sera cero,
por lo que slo la iluminacin ambiental afectara el color final del material y textura.
La variable atenuado de tipo bool, lneas 46 49, sirve para activar los clculos de atenuacin dentro de
un condicional if.
Las estructuras de entrada y salida para los shaders vertex y pixel, siguen siendo las mismas que en el
ejemplo anterior. En el pixel shader, lneas 87 132, el nico cambio importante es el clculo de la direccin
de la luz a partir de la posicin de dicha fuente, y los clculo de atenuacin.
El primer paso es calcular la direccin de la luz para cada pxel, esto se logra restando el vector de
posicin del pxel (o vrtice) menos el vector de posicin de la luz. Luego se normaliza dicho resultado y se le
asigna a una nueva variable local, direccionLuz de tipo float3, lnea 91.
99
Vase que el clculo para la intensidad difusa, lnea 92, no se multiplica la direccin de luz por menos
uno, esto es porque se busca de dnde proviene el haz y no hacia donde apunta.
La variable color de tipo float4 se utiliza para almacenar el color final que resulte de las operaciones para
el color difuso, especular y atenuacin. Cada vez que se termine con el clculo de cualquier modelo de
iluminacin se le asignar el resultado a color como la suma entre el contenido de color y el resultado de la
operacin del modelo, excepto con el primero, lnea 95.
Para habilitar la atenuacin se hace uso del condicional if, lneas 102 120, y la variable uniform
atenuado. Lo primero que hay que obtener es la distancia entre la fuente de iluminacin y el pxel, para
luego compararlo con el rango ofrecido por el usuario. La funcin intrnseca distance obtiene la distancia
entre dos vectores, siempre y cuando sean de la misma dimensin, es decir, que tengan el mismo nmero
de elementos. Tambin se pudo haber obtenido el mdulo de la resta entre posicin de la fuente y el pxel,
pero se ha dejado de esta manera para que el lector puedo comprender mejor el cdigo. El resultado
arrojado por distance se guarda en la variable local distancia, lnea 105. En seguida se declara la variable de
tipo float, atenuacin, lnea 107, que almacenar el factor de atenuacin.
Ahora se compara la distancia entre la fuente al pxel y el rango establecido por el usuario, en caso que la
distancia sea menor o igual al rango, se calcula el factor de atenuacin, lnea 114 y 115; en caso contrario el
factor de atenuacin es cero. Luego se multiplica el factor por el modelo de iluminacin difuso, lnea 119.
Despus del condicional que habilita la atenuacin, se suma el color del material ambiental al color final
que se ha obtenido y luego se le asigna a la variable color, lnea 122.
Cdigo 7-4
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
/*

Tipo de fuente: Puntual.
Material clsico.
*/
float3 posicionLuz
<
string UIName = "Posicin de Luz";
>;
<
string UIName = "Color ambiental";
> = {0.05F, 0.05F, 0.05F, 1.0F};
<
string UIName = "Color difuso";
> = {0.24F, 0.34F, 0.39F, 1.0F};
float c1, c2, c3; // constante de atenuacin
float rango;
// rango a evaluar la atenuacin
texture2D texturaModelo;
{
MinFilter = Linear;
MagFilter = Linear;
100
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
MipFilter = Linear;
AddressU = Wrap;
AddressV = Wrap;
};
bool atenuado
<
string UIName = "Atenuado";
> = false;
{
};
{
};
{
};

{
return salida;
float4 MainPS(PixelShaderEntrada entrada, uniform bool texturizado) : COLOR
{
float4 color;
float3 direccionLuz = normalize(posicionLuz - entrada.WorldPosition);
float reflexionDifusa = max(dot(direccionLuz, entrada.WorldNormal), 0.0F);
float4 difuso = reflexionDifusa * colorMaterialDifuso;
// color final
color = difuso;
// atenuacin
if(atenuado)
{
// atenuacin
float distancia = distance(entrada.WorldPosition,
posicionLuz); // distancia de la fuente al vrtice
float atenuacion;
// Si la distancia entre la fuente y el vrtice se
// encuentra entre el rango
// ste se ver afectado por la atenuacin, en caso
// contrario la atenuacin
101
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
// ser de cero.
if(distancia <= rango)
atenuacion = min(1 / (c1 + (c2 * distancia) +
(c3 * pow(distancia, 2.0F))), 1.0F);
else
atenuacion = 0;
// color final
color *= atenuacion;
}// fin del if
// color final
color += colorMaterialAmbiental;
// texturizado
if(texturizado)
{
float4 texturaColor = tex2D(modeloTexturaMuestra,
color *= texturaColor;
}
// color final
color.a = 1.0F;
return color;
}// fin pixel shader MainPs
{
pass P0
{
}
}
technique Material
{
pass P0
{
}
}
Cree un nuevo proyecto en FX Composer 2.5 para probar el Cdigo 7-4 y ver algo similar a la Ilustracin
7-22; si no conoce cmo generar un proyecto en FX Composer 2.5 lea Inciando FX Composer.
102
Ilustracin 7-22 Fuente puntual
Para saber que realmente se ha generado un tipo de fuente diferente, cambie de posicin del modelo.
Esto se logra seleccionando el modelo en el viewport luego oprima la letra W y aparecer un gizmo con tres
colores, azul, verde y rojo. Al acercar el cursor del ratn a alguna de la flechas del gizmo ver que estas
cambian a un color blanco y el puntero cambia de figura. Cuando esto pasa haga clic y arrastre el puntero
del mouse para mover el modelo en la direccin. Al cambiar de posicin el modelo, los vectores de direccin
de iluminacin cambian y as tambin el color en cada pxel.
Juegue con los valores de entrada del shader en la parte Parameters de FX Composer, sobre todo con las
constantes, recomiendo tener cerca la grfica del factor de atenuacin para tener una mejor referencia de lo
que se hace.
7.3.3
Fuente de iluminacin spot
La fuente de iluminacin spot es similar a tener una lmpara sorda en un cuarto oscuro, este tipo de
fuente ilumina una regin en forma cnica, que gradualmente se atena dependiendo de la distancia del
objeto a la posicin de la fuente y del ngulo de abertura de la lmpara.
Las caractersticas de una fuente tipo spot estn representadas en la Ilustracin 7-23, donde la posicin
de la fuente est representado por el vector de posicin , el objetivo de la luz o lugar hacia dnde apunta
la fuente, es el vector de posicin .
Adems de incluir la atenuacin de la distancia entre la fuente y el objeto, en la fuente spot existe la
atenuacin respecto al ngulo de apertura interno y externo . Esto indica que el objeto que se encuentre
dentro del ngulo interno no sufrir ninguna atenuacin por parte del cono. Si el objeto se encuentra entre
el ngulo interno y el externo ser afectado por la atenuacin del cono. Y si el objeto est fuera del ngulo
externo el nico modelo de iluminacin que puede afectarlo es el ambiental.
103
Ilustracin 7-23 Fuente de iluminacin spot
La manera de saber qu vrtice o pxel debe ser afectado por la fuente, es por medio del ngulo que
existe entre la normal y el vector de direccin de la fuente hacia el vrtice o pxel. En la Ilustracin 7-24 ste
ngulo es , el cual es menor cuando el vrtice o pxel se encuentran dentro del cono de iluminacin y,
mayor cuando est fuera.
Para comparar ngulos entre vectores se echara mano de la funcin trigonomtrica coseno y la relacin
que existe entre sta y el producto punto.
Las condiciones para conocer qu parte del objeto deben ser iluminados, atenuados o ignorados es la
34
siguiente :
0.0
cos cos
=
cos cos
1.0
34
cos cos
cos < cos < cos

cos cos
http://wiki.gamedev.net/index.php/D3DBook:%28Lighting%29_Direct_Light_Sources
104
Ilustracin 7-24 Fuente spot
Y la ecuacin del modelo de iluminacin quedara expresada como:

1
, 1 , 0
1 + 2 + 3 2
= +
Tmese en cuenta que la funcin coseno tiene su valor mximo cuando el ngulo es cero y menor
cuando es radianes, esto por considerar que tambin es una fuente autoocluyente. As que la anterior
2
condicin acerca de la atenuacin es correcta.
El exponente falloff es un valor tipo flotante que regularmente debe tomar valores positivos, en la
Ilustracin 7-25 se tiene una grfica de la atenuacin angular, un nombre que de ahora en adelante le he
propuesto para diferenciarla de la atenuacin de distancia.
105
1.2
Factor de atenuacion
1
0.8
0.6
0.4
0.2
0
0
10
20
30
40
50
60
ngulo
Ilustracin 7-25 Factor de atenuacin angular. falloff = 3, = 10, = 15
El Cdigo 7-5 tiene muchas cosas ya vistas en el primer ejemplo, Fuente de iluminacin direccional, se ha
suprimido la variable uniform direccionLuz, y se ha modificado la subrutina MainPS.
Las variables globales nuevas son los ngulos interno y externo, lneas 15 y 28 respectivamente, estas
son de tipo float, y es importante que los valores que se den a estas variables sea en radianes, la API que es
la encargada de ofrecer dichas entradas extras de informacin, ofrecer los datos ntegros para el shader.
La posicin y el blanco de la luz spot, lneas 19 y 33, tambin son variables uniform que complementan
los datos de entrada para el shader; ambos son de tipo float3.
El exponente de atenuacin angular falloff, lnea 24, las constantes de atenuacin de distancia, lnea 49,
y el rango lnea 50, son variables de tipo flotante que corresponden a las ecuaciones de atenuacin, todas
ellas son las nuevas entradas de informacin por parte del usuario.
En la subrutina MainPS, lneas 103 162, se hacen las operaciones correspondientes para cada pxel. Lo
primero que se hace es declarar la variable color, lnea 105, para almacenar el resultado obtenido de cada
uno de los modelos de iluminacin.
El vector unitario , indica la direccin de la fuente spot, por lo tanto es la resultante de la resta entre el
vector de posicin de luz y el vector de posicin del blanco de sta. En la lnea 106 se asigna dicha operacin
a la variable direccionSpot.
La direccin de la luz respecto al pxel es el vector unitario de la resta del vector de posicin de luz menos
la posicin del pxel, lnea 108, que se almacena en la variable direccionLuz. Esta variable sirve para calcular
la intensidad de la iluminacin difusa, lneas 109 112.
Los cosenos de los ngulos internos y externos bien pudieron haberse calculado por parte de la API. Pero
aqu se calculan con la funcin intrnseca cos, a cada ngulo, lneas 118 y 119, y se almacenan en nuevas
variables tipo float, este exceso de declaraciones de variables slo es para fines didcticos, por lo que la
optimizacin del cdigo se deja al lector como ejercicio. El coseno del ngulo es el producto punto entre
direccionSpot y direccionLuz, recordando hacer autoocluyente se selecciona el valor mximo entre cero y el
producto escalar, lnea 117.
El condicional if, lneas 122 126, hacen la segunda evaluacin del condicional de atenuacin ngular, es
decir, se pregunta si el ngulo se encuentra entre el ngulo interno y el externo, en dado caso que as sea
se ejecuta la operacin de atenuacin angular y se multiplica el resultado por la variable color para luego
volverla a asigna a la misma, lneas 124 y 125.
106
Si el ngulo no se encuentra entre y , se pregunta si es mayor que , en caso que as sea el factor de
atenuacin es cero y se le multiplica la variable color para luego volver a asignarle la resultante al mismo
color, lnea 129.
Cdigo 7-5
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
/*

Tipo de fuente: Spot.
Material clsico.
*/
float4x4 world: World;
float anguloInterno
<
string UIName = "ngulo interno";
>;// ngulo interno en radianes
float3 blancoLuz
<
string UIName = "Blanco de la luz";
>;// hacia dnde ilumina la luz
float falloff
<
string UIName = "Fallof";
>;// exponente de atenuacin
float anguloExterno
<
string UIName = "ngulo externo";
>;// ngulo externo, que se toma de referencia para atenuar la luz
float3 posicionLuz
< string UIName = "Posicin de la fuente";
>;
// color de la luz ambiental
<
string UIName = "Luz Ambiental";
> = {0.07F, 0.07F, 0.07F, 1.0F};
// color de la luz Difusa
<
string UIName = "Luz difusa";
> = {0.24F ,0.34F, 0.39F, 1.0F};
float c1, c2, c3;
float rango;
// constantes de atenuacin
// rango a evaluar la atenuacin
{
MinFilter = Linear;
MagFilter = Linear;
MipFilter = Linear;
AddressU = Wrap;
AddressV = Wrap;
};
bool atenuado
<
107
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
string UIName = "Atenuado";

> = false;
{
};
{
};
{
};
{
float4x4 mvp = mul(world, mul(view, projection));
salida.Posicion = mul(entrada.Posicion, mvp);
return salida;
}// fin del Vertex Shader MainVS
// Pixel Shader
{
float4 color;
float3 direccionSpot = normalize(posicionLuz - blancoLuz);
float3 direccionLuz = normalize(posicionLuz - entrada.WorldPosition);
float reflexionDifusa = max((dot(direccionLuz, entrada.WorldNormal)), 0.0F);
float4 difusa = colorMaterialDifuso * reflexionDifusa;
// color final
color = difusa;
// datos para
float cosAlfa
float cosTeta
float cosFi =
la atenuacin
= max(dot(direccionSpot, direccionLuz), 0.0F);
= cos(anguloInterno);
cos(anguloExterno);
// el ngulo alfa es mayor al ngulo interno y menor al ngulo externo

if(cosAlfa < cosTeta && cosAlfa > cosFi)
{
float facAteAng = pow((cosAlfa - cosFi) / (cosTeta - cosFi), falloff);
color *= facAteAng;
}
else if(cosAlfa <= cosFi) // el ngulo alfa es mayor al ngulo externo
{
color *= 0.0F;
}// fin del else
// atenuacin respecto a la distancia del foco
if(atenuado)
{
// atenuacin difusa
108
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
float distancia = distance(entrada.WorldPosition,

posicionLuz); // distancia de la fuente al vrtice
float facAteDist;
// Si la distancia entre la fuente y el vrtice se encuentra entre el rango
// ste se ver afectado por la atenuacin, en caso contrario la
// atenuacin ser de cero.
facAteDist = min(1 / (c1 + (c2 * distancia) +
else
facAteDist = 0;
// color final
color *= facAteDist;
}// fin del if
// color final
color += colorMaterialAmbiental;
if(texturizado)
{
}
color.a = 1.0F;
return color;
}// fin del Pixel Shader MainPS
{
pass P0
{
}
}
technique Material
{
pass P0
{
}
}
Estas son las nuevas parte en el pxel shader MainPS, en comparacin con los anteriores ejemplos de
fuentes de iluminacin.
Cabe aclarar que algunas restricciones a los datos de entrada para el shader, se pueden hacer desde la
API, dejando lo ms importante en el shader.
Cree un nuevo proyecto en FX Composer 2.5, para saber cmo, lea Inciando FX Composer de este texto.
Transcriba el Cdigo 7-5 y corrija cualquier error de compilacin si as sucediese. Pruebe con los siguientes
valores en los parmetros del shader:
ngulo interno: 0.01

Blanco de la luz: 0 0 0
Falloff: 0.8
ngulo externo: 0.1
Posicin de la fuente: 0 10 0
Luz ambiental: (al gusto)
Luz difusa: (al gusto)
c1 : 1
c2: 0
c3: 0.001
109
Rango: 20
texturaModelo: (al gusto)
Atenuado: true
Pruebe con el plano ofrecido por FX Composer en la barra de tareas, para poder observar que se crea un
crculo en donde se ilumina por el spot y despus solo es por la luz ambiental. Si con la textura no alcanza a
distinguir muy bien est definicin solo cambie el valor de los colores de los materiales ambiental o difuso,
de preferencia tome un color ms oscuro para el ambiental. Otra manera es ejecutar la tcnica Material del
shader, as que comente la tcnica Texturizado y podr ver algo similar a la Ilustracin 7-26.
Ilustracin 7-26 Fuente Spot
Pruebe con otros modelos y muvalos de lugar para ver que en realidad se trata de una fuente spot.
7.4 Iluminacin especular

La iluminacin especular se puede apreciar en toda superficie brillante, como los plsticos o metales. La
mxima iluminacin se encuentra en un punto llamado highlight generado por la reflexin especular, este
punto de iluminacin regularmente es del color de la fuente.
Otra caracterstica de la iluminacin especular es que el highlight se mueve cuando el observador cambia
de posicin, esto es como si estuviera siguiendo al observador.
Ilustracin 7-27 Reflexin especular
Adems, la luz slo se refleja en la direccin que es la inversa del haz de luz respecto a la normal . La
intensidad de la reflexin expecular depende del ngulo entre el vector de reflexin y el vector de
direccin del observador . Esto indica que el valor mximo de reflectancia se tiene cuando es cero y
decrece cuando aumenta. La cada es dada aproximadamente por:
cos
Donde n es el exponente de reflexin especular del material. El rango de valores que toma n
regularmente es de uno a varios cientos, dependiendo el material.
110
Este trmino manejado por Warnock, supona que la reflexin estaba en la misma posicin que el punto
del observador, por lo que no tena un resultado apropiado, y no fue sino hasta que Phong Bui Tuong
considero al observador y las luces en diferentes posiciones.
La caracterstica que aadi Phong es que la luz reflejada especularmente depende del ngulo de
incidencia . La fraccin de luz reflejada suele asignarse como la constante , coeficiente de reflexin
especular del material, que regularmente vara entre 0 y 1. As el modelo de iluminacin queda completo
con la reflexin especular:
= + , 0 + cos
El clculo del vector de reflexin , puede obtenerse a partir de la Ilustracin 7-28, como la suma del
vector auxiliar ms el vector , conocido como componente vectorial de sobre , donde es un
escalar y es el vector unitario de .
= +
(1)
Ilustracin 7-28 Vector auxiliar
Dado que el vector es el resultado de la resta entre menos el vector de direccin del haz de luz .
=
(2)
El escalar es el componente escalar de sobre , que est dado por la siguiente expresin:

(3)
= ||
Sustituyendo la ecuacin (3) en (2) se tiene:

= || ||
(4)
Una vez sustituyendo las ecuaciones (3) y (4) en (1), el vector de reflexin estar dado por la siguiente
expresin:
=
|| ||
|| ||
= 2

|| ||
Como el mdulo de la normal es igual a uno, el vector estar dado por:

= 2( )
Una vez ms reescribiendo la ecuacin del modelo de iluminacin se tiene en trminos de la normal y el
haz de luz.
= + , 0.0 + max 2 , 0.0
111
La manera de seleccionar el valor adecuado para el exponente de reflexin especular y el coeficiente de

reflexin especular es graficar cos , como se muestra en la Ilustracin 7-29. El exponente hace que la
reflexin sea suave o puntual; el coeficiente especular slo aumenta o disminuye la intensidad de la
reflexin.
1.2
Reflexin especular
1
0.8
0.6
0.4
0.2
0
-2
-1.5
-1
-0.5
0.5
1.5
ngulo
Ilustracin 7-29 Reflexin especular n = 3
Como hasta ahora, se reescribir la ecuacin del modelo de iluminacin para la implementacin del
shader. La intensidad de iluminacin y el coeficiente de reflexin ambiental se sustituyen por el color
ambiental del material; la intensidad de iluminacin de la fuente y el coeficiente de reflexin difusa del
material se sustituye por el color difuso del material; y se aade el color especular del material, dando como
resultado la siguiente expresin:
= + , 0.0
+ 2 , 0.0
Como la reflexin especular es el ltimo modelo de iluminacin que se suma, se reutilizaran los ejemplos
de las fuentes de iluminacin de la reflexin difusa anteriores.
7.4.1
Reflexin especular. Actualizando cdigos de fuentes de iluminacin
En los enlistados de los ejemplos Fuente de Iluminacin Direccional, Cdigo 7-3, Puntal, Cdigo 7-4, y
Spot, Cdigo 7-5, vistos anteriormente se debe agregar las siguientes variables globales para la reflexin
especular.
Cdigo 7-6
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
float ks
<
string UIWidget = "slider";
float UIMin = 0.0F;
float UIMax = 10.0F;
float UIStep = 0.05F;
string UIName = "Coeficiente de reflexin especular";
> = {0.05F};
float n
<
float UIMin = 0.0F;
112
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.

string UIName = "Exponente de reflexin especular";
> = 5.0F;
float4 colorMaterialEspecular
<
string UIName = "Material especular";
> = {1.0F, 1.0F, 1.0F, 1.0F};
float3 posicionCamara
<
string UIName = "Posicin cmara";
>;
bool modIluEsp
<
string UIName = "Modelo Iluminacin Especular";
> = false;
En la declaracin del coeficiente y exponente de reflexin especular, lneas 1 8 y 10 17

respectivamente, se hace uso de una nueva anotacin. sta sirve para hacer aparecer un control TrackBar
horizontal, o Slider, en la GUI de FX Composer, vase ilustracin 7 31.
Ilustracin 7-30 Slider de FX Composer
La declaracin de este control dentro de la anotacin es de tipo string con nombre UIWidget e
inicializado como slider. Estas anotaciones deben escribirse como estn definidas en el Standard
35
Annotations and Semantics (SAS) . Las siguientes anotaciones despus de la declaracin del control son los
parmetros de ste, como es el valor mnimo, mximo y el paso al cual cambiar el slider. Aunque no es
necesario escribir dichas anotaciones a las variables globales, ha sido menester hacerlo en FX Composer
para controlar los valores de una manera ms sencilla.
La variable modIluEsp de tipo bool, lnea 27, es para activar la reflexin especular en el condicional if,
por default estar inhabilitada para disminuir el clculo por pxel. Algunos recomiendan habilitar e
inhabilitar este modelo de iluminacin cundo sea necesario.
En cada uno de los ejemplos Fuentes de Iluminacin se dej un comentario que dice // modelo de
iluminacin especular, enseguida debe escribir el siguiente cdigo para las operaciones de reflexin
especular.
Cdigo 7-7
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
if(modIluEsp)
{
// iluminacin especular
float3 reflexion = normalize(2 * entrada.WorldNormal *
max(dot(direccionLuz, entrada.WorldNormal), 0.0F) - direccionLuz);
float3 direccionCamara = normalize(posicionCamara - entrada.WorldPosition.xyz);
float intensidadEspecular = pow(max(dot(reflexion, direccionCamara), 0.0F), n);
float4 especular = ks * intensidadEspecular * colorMaterialEspecular;
color += especular * reflexionDifusa;
}// fin del if
En la lnea 4, del Cdigo 7-7, se calcula el vector de reflexin especular, slo hay que recordar que para la
fuente direccional se debe multiplicar la direccin de la luz por menos uno.
35
Para mayor informacin acerca de las anotaciones usando SAS consulte la siguiente direccin electrnica:
http://developer.nvidia.com/object/using_sas.html
113
max(dot(-direccionLuz, entrada.WorldNormal), 0.0F) + direccionLuz);
La direccin del observador, representado en las ecuaciones como el vector , es el vector unitario de la
resta entre el vector de posicin de la cmara menos el vector de posicin del pxel, lnea 6.
Por ltimo, se hace uso de la reflexin especular para obtener el modelo de iluminacin completo, lneas
7 10. La multiplicacin de la reflexin difusa por la reflexin especular, lnea 8, limita el brillo a la parte
iluminada por la fuente en cuestin, si se omite dicha operacin el objeto seguira brillando en las partes no
iluminadas.
Vuelva a compilar los shaders en FX Composer y juegue con los valores de la reflexin especular para
obtener un material parecido al mostrado en la ilustracin 7 32.
Ilustracin 7-31 Reflexin especular
7.5 Mltiples fuentes de iluminacin

Tomando como ejemplo el mundo real, la luz proviene de diferentes fuentes de iluminacin como el sol,
el foco, la lmpara de escritorio, la luz del monitor, etctera. La suma de todas esas fuentes provoca
diferentes tipos de resultados sobre los objetos que tienen su propio color. Estos colores propios son colores
de material
Ambiental
Difuso
Especular
Hasta el momento el color de la fuente no afectaba el modelo de iluminacin, y se limitaba a tomar el

color del material para multiplicarlo por la reflexin ambiental, difusa o especular, se puede decir que el
color de la fuente siempre fue blanco y reflejaba el color real del material. Tambin se consider una sola
fuente para iluminar el modelo tridimensional, lo que en la prctica resultara no comn.
En el siguiente ejemplo se aplican los tres tipos de fuentes y de cada una de ellas existe ms de una. Es
decir, existirn n luces direccionales, n puntual y n tipo spot. El nmero de luces de cada tipo ser el mismo
para todas.
El modelo de iluminacin ambiental se aplicar una vez a la geometra, por lo que no se tomar en
cuenta para el clculo de cada luz.
114
7.5.1
Multi-pass rending
Multi pass rendering es el proceso de renderizar diferentes atributos de nuestra escena por separado.
36
A veces los efectos ms complejos necesitan de varias pasadas para obtener el resultado deseado. Al
referirse como pasada, indica que se dibuja ms de una vez, y cada una de ellas contribuye a generar un
efecto ms elaborado y enriquecido.
En este ejemplo que sigue, se crean dos PixelShader. El primero obtiene la iluminacin ambiental y el
segundo hace los clculos necesarios para sumar todas las fuentes de iluminacin al render anterior.
Ilustracin 7-32 Suma de imgenes
En la Ilustracin 7-32 se logra ver que la tcnica de multi pass rendering es la suma de cada uno de los
renderizados, o tambin se puede ver como una sobre posicin de cada uno de ellos.
En la segunda pasada se habilita el Alpha blending para combinar el modelo de iluminacin ambiental
con la suma de las fuentes de iluminacin. Recurdese que para el blending se debe cambiar el modo de
renderizado de la tarjeta grfica, y esto se logra desde XNA o si lo prefieren desde el shader. En este caso se
le dejar a XNA hacer los cambios necesarios para cambiar las propiedades del dibujado.
7.5.2
Ejemplo Multiluces
En este ltimo ejemplo de shaders, se reutiliza parte del cdigo de los anterios programas en HLSL, y se
crea por fin estructuras que representan las fuentes de iluminacin direccional, puntual y de spot. Estas
estructuras permitirn generar varias fuentes de iluminacin, por lo que lo hace un shader de iluminacin
bsico lo ms parecido a lo que el fixed pipeline de DirectX u OpenGL ofrecen.
La estructura de la fuente direccional LuzDireccional, lneas 87 -92, Cdigo 7-8, tiene como campos la
direccin de la fuente, el color y la opcin de encender o apagarla.
La estructutra de la fuente puntual LuzPuntual, lneas 94 102, tiene los campos de posicin de la
fuente, el color, el rango de alcance, las constantes de atenuacin, la opcin de habilitar o inhabilitar la
atenuacin y la posibilidad de encender o apagar la luz.
La fuente de tipo spot representada por la estructura LuzSpot, lneas 104 116, tiene como campos la
posicin de la fuente, el blanco de hacia dnde apunta, el color, el ngulo interno y externo de la fuente; el
exponente de atenuacin de abertura de la fuente, el rango de alcance, las constantes de atenuacin, la
opcin de habilitar o inhabilitar la atenuacin por distancia de la fuente, y la posibilidad de encender o
apagar la luz.
Ntese que no se ocup el tipo de dato booleano en los campos Encender y Atenuar en las estructuras
de las fuentes. Esto debido a que el compilador de shaders de Microsoft, limita a este tipo de dato a un
determinado nmero; lo que vara entre FX Composer y XNA; por lo tanto se han dejado como tipos enteros.
El lmite de operaciones por fuente se lmita por la variable numLuces, lnea 118, que sirve como variable
de escape en los ciclos for.
Los arreglos de estructuras de las fuentes, son representadas por las variables:
36
Traduccin hecha a partir de http://www.3drender.com/light/compositing/index.html
115
direccionales[], lnea 259

puntuales[], lnea 260
spots[], lnea 261
La reservacin de memoria para cada una debe hacerse en tiempo de compilacin, y como se haba
mencionado anteriormente depender de la versin del compilador, por lo que el nmero mximo
permitido podra variar.
El listado presenta un vertex shader, MainVS ,lneas 121 132, que ser suficiente para el multi pass
rendering. Es aqu en donde se harn las transformaciones que hace el fixed pipeline, cosa que en ejemplos
anteriores ya se explic. Vase que no existe una estructura como parmetro en el vertex shader, por lo que
cada variable de entrada desde XNA, se especifica su semntica.
La caraterstica particular de un multi pass rendering, es que se tienen diferentes pixel shaders, para
cada pasada del shader, y rara vez diferentes vertex shaders. En este ejemplo se tienen dos pixel shaders,
MainPSAmbiental, lneas 135 144, y MainPS, lneas 265 - 296. El primero representa el modelo de
iluminacin ambiental y el segundo los modelos de iluminacin difuso o especular con la suma de cada una
de las fuentes.
En el pixel shader MainPSAmbiental, se multiplica el color del material ambiental por la textura si se ha
habilitado la texturizacin, en caso contrario se pasa solo el color.
En el pixel shader MainPS se multiplica el color difuso por la textura, si sta se ha habilitado. Luego se
pasa por un bucle for para calcular cada una de las fuentes que estn encendidas. Esto se logra con tres
condicionales if, cada uno verifica si el campo Encender es diferente de cero, en cada una de las distintas
fuentes. Dependiendo el tipo de fuente se realizan las operaciones correspondientes con ayuda de de tres
funciones: FuenteDireccional, FuentePuntual y FuenteSpot. Cada una de ellas devuelve un color que ser
sumado en una variable local en el MainPS y ese ser el color final.
La funcin FuenteDireccional, lneas 192 199, toma como parmetros la estructura LuzDireccional, la
posicin del vrtice, la normal y el color del material, ste ltimo es el color de la suma del color difuso
multiplicado por el de textura. Como todas las funciones hacen uso de los clculos del modelo de reflexin
Phong, se ha escrito una funcin que devuelve el color de dicho modelo. La funcin, con el mismo nombre
del modelo, lneas 176 189, toma como entradas la direccin de la luz, la posicin del vrtice, la normal, el
color de luz y el color del material. Las operaciones son las necesarias para obtener la reflexin difusa y la
reflexin especular, siempre y cuando est habilitado. Tomando el principio de divide y venceras, se ha
construido una funcin llamada ReflexionEspecular, para hacer legible el programa. La funcin devuelve el
color especular y toma como parmetros la direccin de luz, la posicin del vrtice, la normal y el color de
luz.
Las operaciones que realizan las funciones Phong y ReflexinEspecular, ya se explicaron en los ejemplos
anteriores, por lo que si el lector tiene dudas por favor de regrese a consultarlos los apartados: Iluminacin
difusa e Iluminacin especular.
La funcin FuentePuntual, lneas 201 217, toma como parmetros la estructura LuzPuntual, la posicin
del vrtice, la normal y el color del material. La nica entrada que cambia cuando se llama a la funcin
Phong, es la direccin de luz, vase lnea 205. Adems esta fuente de iluminacin puede atenuarse
dependiendo la distancia que se encuentre el vrtice de la fuente y del campo que habilita dicha operacin,
lneas 210 214. Como la fuente spot tambin puede ser atenuada de esta forma, se ha escrito una funcin
que devuelve un escalar que indica la atenuacin de la luz. En la lneas 147 161, la funcin AtenuarFuente
realiza los clculos necesarios, y ya vistos en ejemplos anteriores, que permiten disminuir la intensidad de
luminancia de la fuente. Las entradas de esta funcin son la posicin del vrtice, la posicin de la luz, el
rango en que se permite la atenucin y las constantes de atenuacin.
La funcin FuenteSpot, lneas 219 258, toma prcticamente el cdigo del shader descrito en el tema
Fuente de iluminacin spot, con la diferencia que separ los clculos necesarios para limitar la iluminacin, y
los clculos del modelo iluminacin Phong.
116
Las tcnicas, lneas 298 -325, Texturizado y Material, ambas tiene dos pasadas llamadas Ambiental y
MultiLuces. La primera llama el vertex shader MainVS y el pixel shader MainPSAmbiental. Esta primera
pasada slo colorea el modelo tridemensional con el color ambiental, y dependiendo de la tcnica habilita o
inhabilita la textura.
En la segunda pasada vuelve a llamar al vertex shader MainVS, pues es necesario realizar el renderizado
una vez ms; y como pixel shader se llama MainPS que permite la suma de varias fuentes de luz en el mismo
pxel.
Cdigo 7-8
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
/*
Multiples luces.
Tipo de fuente: Direccional, Puntual y Spot.
Material clsico.
*/
<
>;
float ks
<
float UIMin = 0.0F;
> = {0.05F};
float n
<
float UIMin = 0.0F;
> = 5.0F;
<
> = {0.07F, 0.07F, 0.07F, 1.0F};
<
string UIName = "Color Material";
> = {0.24F ,0.34F, 0.39F, 1.0F};
<
> = {1.0F, 1.0F, 1.0F, 1.0F};
bool habiEspec
<
117
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
> = false;
{
MinFilter = Linear;
MagFilter = Linear;
MipFilter = Linear;
AddressU = Wrap;
AddressV = Wrap;
};
{
};
{
};
struct LuzDireccional
{
float3 Direccion;
float4 Color;
int Encender;
};
struct LuzPuntual
{
float3 Posicion;
float4 Color;
float Rango;
float C1, C2, C3;
int Atenuar;
int Encender;
};
struct LuzSpot
{
float3 Posicion;
float3 Blanco;
float4 Color;
float AnguloInterno;
float AnguloExterno;
float Falloff;
float Rango;
float C1, C2, C3;
int Atenuar;
int Encender;
};
int numLuces = 4;
// Vertex Shader
VertexShaderSalida MainVS(float3 posicion : POSITION,
float3 normal : NORMAL, float2 coordenadaTextura : TEXCOORD0)
{
salida.Posicion = mul(float4(posicion, 1.0F), mvp);
salida.WorldNormal = mul(normal, world);
salida.WorldPosition = mul(float4(posicion, 1.0F), world);
salida.CoordenadaTextura = coordenadaTextura;
118
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
return salida;
}// fin del vertexshader MainVS
// Pixel Shader que obtiene la iluminacin ambiental, con o sin textura
float4 MainPSAmbiental(PixelShaderEntrada entrada,
uniform bool habiTextura) : COLOR
{
float4 color = colorMaterialAmbiental;
if(habiTextura)
{
color *= tex2D(modeloTexturaMuestra, entrada.CoordenadaTextura);
}
return color;
}// fin del pixelshader MainPSAmbiental
// Funcin que calcula la atenuacin de la distancia de la fuente al objeto
float AtenuarFuente(float3 worldPosicion, float3 posicionLuz, float rango,
float c1, float c2, float c3)
{
float distancia = distance(worldPosicion, posicionLuz);
float atenuacionD = 0;
// si la distancia est dentro del rango se hace el clculo de la
// atenuacin.
{
atenuacionD = min(1 / (c1 + (c2 * distancia) +
}// fin del if
return atenuacionD;
}// fin de la funcin AtenuarFuente
// Funcin que calcula la reflexin especular.
float4 ReflexionEspecular(float3 direccionLuz, float3 worldPosicion,
float3 worldNormal, float4 colorLuz)
{
float3 reflexion = normalize(2 * worldNormal *
max(dot(direccionLuz, worldNormal), 0.0F) - direccionLuz);
float3 direccionCamara = normalize(posicionCamara - worldPosicion);
float reflexionEspecular = pow(max(dot(reflexion, direccionCamara), 0.0F), n);
return (ks * reflexionEspecular) * (colorLuz * colorMaterialEspecular);
}// fin de la funcin ReflexionEspecular
float4 Phong(float3 direccionLuz, float3 worldPosicion, float3 worldNormal,
float4 colorLuz, float4 colorMater)
{
float reflexionDifusa = max(dot(direccionLuz, worldNormal), 0.0F);
float4 phong = reflexionDifusa * (colorLuz * colorMater);
// activacin de la reflexin especular
if(habiEspec)
{
phong += ReflexionEspecular(direccionLuz, worldPosicion,
worldNormal, colorLuz) * colorMater * reflexionDifusa;
}// fin del if
return phong;
}// fin de la funcin Phong
// Funcin que calcula la luz tipo direccional
float4 FuenteDireccional(LuzDireccional luz, float3 worldPosicion,
float3 worldNormal, float4 colorMater)
{
return Phong(-normalize(luz.Direccion), // direccin de luz
worldPosicion,
worldNormal, luz.Color,
colorMater);
}// fin de la funcin FuenteDireccional
119
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
float4 FuentePuntual(LuzPuntual luz, float3 worldPosicion, float3 worldNormal,

float4 colorMater)
{
float4 color = Phong(
normalize(luz.Posicion - worldPosicion),// direccin de luz
worldPosicion,
colorMater);
// atenuar luz
if(luz.Atenuar != 0)
{
color *= AtenuarFuente(worldPosicion, luz.Posicion, luz.Rango,
luz.C1, luz.C2, luz.C3);
}// fin del if
return color;
}// fin de la funcin FuentePuntual
float4 FuenteSpot(LuzSpot luz, float3 worldPosicion, float3 worldNormal,
float4 colorMater)
{
float4 color = 0;
float3 direccionLuz = normalize(luz.Posicion - worldPosicion);
float3 direccionSpot = normalize(luz.Posicion - luz.Blanco);
// calculando cosenos de alfa, teta y fi
float cosAlfa = max(dot(direccionSpot, direccionLuz), 0.0F);
float cosTeta = cos(luz.AnguloInterno);
float cosFi = cos(luz.AnguloExterno);
// atenuacin angular entre 0 y 1
if(cosAlfa < cosTeta && cosAlfa > cosFi)
{
float atenuacionAngular = pow((cosAlfa - cosFi) / (cosTeta - cosFi),
luz.Falloff);
color = atenuacionAngular * Phong(direccionLuz, worldPosicion,
colorMater);
// atenuar fuente
if(luz.Atenuar != 0)
{
}// fin del if
}// fin del if
else if(cosAlfa >= cosFi) // atenuacin angular igual a uno
{
color = Phong(direccionLuz, worldPosicion, worldNormal,
luz.Color, colorMater);
// atenuar fuente
if(luz.Atenuar)
{
}
}// fin del if
return color;
}// fin de la funcin FuenteSpot
LuzDireccional direccionales[2];
LuzPuntual puntuales[2];
LuzSpot spots[2];

{
float4 color = 0;
float4 colorDifuso = colorMaterialDifuso;
if(texturizado)
{
120
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.
296.
297.
298.
299.
300.
301.
302.
303.
304.
305.
306.
307.
308.
309.
310.
311.
312.
313.
314.
315.
316.
317.
318.
319.
320.
321.
322.
323.
324.
325.
colorDifuso *= tex2D(modeloTexturaMuestra, entrada.CoordenadaTextura);

}// fin del if
for(int i = 0; i < numLuces; i++)
{
if(direccionales[i].Encender != 0)
{
color += FuenteDireccional(direccionales[i], entrada.WorldPosition,
entrada.WorldNormal, colorDifuso);
}
if(puntuales[i].Encender != 0)
{
color += FuentePuntual(puntuales[i], entrada.WorldPosition,
}
if(spots[i].Encender != 0)
{
color += FuenteSpot(spots[i], entrada.WorldPosition,
}
}// fin del for
color.a = 1.0F;
return color;
}// fin del pixelShader mainPS
{
pass Ambiental
{
PixelShader = compile ps_3_0 MainPSAmbiental(true);
}
pass MultiLuces
{
}
technique Material
{
pass Ambiental
{
PixelShader = compile ps_3_0 MainPSAmbiental(false);
}
pass MultiLuces
{
}
Cre un nuevo proyecto en FX Composer y transcriba el enlistado anterior para crear un efecto en HLSL.
Compile y aada el nuevo material a un modelo que FX Composer ofrece, de preferencia la tetera o esfera.
En la parte de Parameters: HLSL Profile, se muestran todas las propiedades de entrada del shader. Los
campos de las estructuras de las fuentes de iluminacin no pueden tener anotaciones que habiliten la paleta
de colores o los sliders, por lo tanto hay que escribir el valor numrico con el teclado.
121
Ilustracin 7-33 Multi pass rendering
Desafortunadamente FX Composer no puede hacer correr mltiples pasadas, o por lo menos en algunas
tarjetas grficas, as que toma la ltima que se encuentra en la tcnica. En la Ilustracin 7-33 se muestra el
resultado sin aplicar la pasada Ambiental, con textura y sin textura.
En el siguiente captulo se explicar cmo agregar los shaders creados en este apartado en XNA. Y se deja
al lector estudiar acerca de este lenguaje, pues est fuera del alcance de este texto.
122
8 Cmo agregar un efecto en XNA

En este captulo se muestra cmo cargar un efecto proveniente de un archivo fx, en especfico sern
algunos de los ejemplos vistos anteriormente sobre el lenguaje HLSL, y se espera que el lector pueda cargar
cualquier otro shader.
El ContentManager de XNA realiza la mayor parte del trabajo, sin embargo, la manera en cmo se le
pasarn los datos de XNA a HLSL depender del programador, pues si en el shader no se restringieron sus
variables extern uniform, en C# se pueden limitar; adems se debe tener cuidado en la asignacin de datos.
La pregunta es cmo reconocer los tipos de datos correspondientes del .Net Framework Class
Library(CL) y del Framework de XNA a HLSL? En s, la mayora de los datos comunes o no compuestos como
los enteros, flotantes y boleanos tienen nombres similares entre CL y HLSL. La manera de reconocer los tipos
de datos compuestos o estructuras como float4x4, float3 es haciendo una comparacin manual entre sus
campos y los que constituyen aquellos que pueden parecerse en el Framework de XNA, por lo tanto hay que
conocer los tipos de datos de ambos, lo cual se deja al lector como estudio, y que en ocasiones ser intuitivo
esta asignacin de tipos de datos.
8.1 Efecto ambiental

En este aparatado se muestran dos formas de cargar un efecto proveniente de un archivo fx. El primero
muestra cmo cambiar las instancias de la clase Effect del objeto Model por la instancia Effect asociada al
efecto ambiental; esto permite mandar a llamar el mtodo Draw de la clase ModelMesh, permitiendo una
programacin ms sencilla, pero a costa de cambiar todas las propiedades de material de la instancia
Model.
La segunda forma no cambia las propiedades del material asociadas a la instancia Model. Para poder
dibujar la geometra con el efecto proveniente de un archivo fx, se utiliza el mtodo DrawIndexedPrimitives
de la clase GraphicsDevice.
8.1.1
Clonacin de efecto
En este primer ejemplo se utiliza el mtodo Effect.Clone para copiar los valores de un objeto existente a
otro, por lo que este mtodo arroja una excepcin cuando se tratan de copiar los valores de un objeto nulo,
as que no se recomienda el uso del signo de asignacin, =.
Aclarado el uso del mtodo Clone y el signo de asignacin, cre un nuevo proyecto de XNA en Visual
Studio. En la clase Game1 escriba las siguientes variables de instancia:
Cdigo 8-1
1.
2.
3.
4.
private Model modelo;

private Matrix[] transformaciones;
private Texture2D textura;
Single tiempo;
La declaracin de la variable modelo es para el modelo tridimensional, lnea 1, Cdigo 8-1; que en este
caso fue ElefanteC.fbx y que puede ser cualquiera que tengan a la mano. En seguida se declara un arreglo de
matrices que almacenaran las transformaciones del modelo, lnea 2.
El efecto Ambiental.fx tiene dos tipos de tcnicas, Material y Texturizado, para este ltimo se ha
declarado a textura como tipo Texture2D, lnea 3. La variable tiempo servir como ngulo de rotacin
alrededor del eje y, lnea 4.
Antes de continuar con el cdigo, cre tres carpetas en el Content en el Explorador de soluciones de
Visual Studio, los nombres que se utilizaron para las carpetas fueron: Modelos, Shaders y Texturas.
En cada una de ellas se aadieron el modelo ElefanteC.fbx, el shader Ambiental.fx y la imagen
Omision.png, respectivamente.
123
Una vez que el ContentManager les ha asignado el Asset a cada elemento, en el mtodo LoadContent de
la clase Game1 escriba las siguientes lneas.
Cdigo 8-2
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

{
modelo = Content.Load<Model>(@"Modelos\ElefanteC");
Effect efecto = Content.Load<Effect>(@"Shaders\Ambiental");
textura = Content.Load<Texture2D>(@"Texturas\Omision");
foreach (ModelMeshPart meshPart in mesh.MeshParts)
meshPart.Effect = efecto.Clone(GraphicsDevice);
}
De la lnea 5 a la 7, Cdigo 8-2, el mtodo Load genrico de la clase ContentManager crea las instancias
respectivas a su tipo de dato de entrada, y se los asigna a modelo, efecto y textura. Luego se copian las
matrices de transfomacin del modelo al arreglo transformaciones.
En las lneas 11 a 13, se copian los datos de efecto a la propiedad Effect del ModelMeshpart de cada
ModelMesh del modelo.
Para rotar el modelo alrededor del eje y se ha declarado la variable tiempo, que servir como ngulo. En
el mtodo Update de la clase Game1, se actualizar tiempo cada segundo con el total de tiempo que ha
transcurrido la apliacin desde que inici. En la lnea 6, Cdigo 8-3, se sebe convertir el tipo double a float.
Cdigo 8-3
1.
2.
3.
4.
5.
6.
7.
8.
9.

{
this.Exit();
tiempo = (Single)gameTime.TotalGameTime.TotalSeconds;
}
Por ltimo, en el mtodo Draw se dibuja la geometra como se vio en el Cmo cargar modelos 3D desde
un archivo X y FBX, con la diferencia en que el foreach anidado, lneas 7 a 22, Cdigo 8-4, tiene como
elemento de interacin una instancia Effect.
En la lnea 9 del mtodo Draw, se establece la tcnica del shader con la propiedad CurrentTechnique de
la clase Effect y se obtiene a partir de la coleccin Techniques del objeto effect. Se puede utilizar como
ndice de seleccin un entero, sin embargo, el string con el nombre de la tcnica es ms til para el
mantenimiento del programa.
Despus de seleccionar la tcnica del shader, se establecen los valores de las variables uniform extern
del shader, con la ayuda del mtodo SetValue. La instancia de la clase Effect tiene una coleccin de
parmetros que representan estas variables del shader. La forma de seleccin es por medio de un tipo
entero o un string. Este ltimo se utiliza como preferente, por legibilidad del programa.
37
El mtodo SetValue est sobrecargado 18 veces para aceptar diferentes tipos de datos, sin embargo,
no verifica en tiempo de compilacin la integridad de stos.
37
Para consultar todas las sobrecargas del mtodo consulte la siguiente pgina:
http://msdn.microsoft.com/query/dev10.query?appId=Dev10IDEF1&l=ENUS&k=k(MICROSOFT.XNA.FRAMEWORK.GRAPHICS.EFFECTPARAMETER.SETVALUE);k(DevLang-CSHARP)&rd=true
124
La lnea 10 del mtodo Draw, establece la matriz de mundo a partir del elemento del arreglo
transformaciones y la matriz de rotacin alrededor del eje y. En la lnea 13 se establece la matriz de vista a
partir del mtodo CreateLookAt. Siguiendo con la asignacin del color del material ambiental, lnea 19 20,
se debe convertir el tipo de dato Color por un Vector4, que contiene cuatro elementos de tipo flotante. Por
ltimo, se asigna la textura al shader en la lnea 21.
Cdigo 8-4
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

{
{
foreach (Effect effect in mesh.Effects)
{
effect.CurrentTechnique = effect.Techniques["Material"];
effect.Parameters["world"].SetValue(
transformaciones[mesh.ParentBone.Index] *
Matrix.CreateRotationY(tiempo));
effect.Parameters["view"].SetValue(Matrix.CreateLookAt(
new Vector3(0, 0, 300), Vector3.Zero, Vector3.Up));
effect.Parameters["projection"].SetValue(
Matrix.CreatePerspectiveFieldOfView(
MathHelper.PiOver4, GraphicsDevice.Viewport.AspectRatio,
1.0F, 1000.0F));
effect.Parameters["colorMaterialAmbiental"].SetValue(
Color.Gray.ToVector4());
effect.Parameters["texturaModelo"].SetValue(textura);
}// fin del foreach
mesh.Draw();
}// fin del foreach
}
Hasta ahora no ha sido tan complicada la asingacin de valores al shader, sin embargo, esta manera de
utilizar el efecto no es la ms conveniente, porque si quisiramos pintar este mismo objeto Model con otros
efectos de iluminacin se tendra que clonar una vez ms la instancia Effect del ModelMesh, ocupando
cuatro bucles foreach. En los siguientes ejemplos de este captulo se utiliza una manera ms eficaz pero no
tan sencilla o por lo menos no tan corta.
Corra el programa para ver un elefante, o el modelo tridimensional de su preferencia, pintado de un slo
color, vase Ilustracin 8-1. Cambie la tcnica Material por Texturizacion, en la lnea 9 del mtodo Draw.
Ilustracin 8-1 Integracin de shader en XNA
125
8.1.2
Interfaz para el shader
El subttulo de este apartado no debe confundirse con la palabra reservada interface de C#, es algo ms
general. Es la manera de comunicacin entre XNA y el shader. Y eso es lo que se programara para dibujar la
geometra con el efecto deseado, sin necesidad de cambiar sus propiedades de material.
A partir de este ejemplo y lo queda de este captulo se reutilizarn los enlistados, con el fin de
aprovechar las ventajas de la programacin orientada a objetos.
Comience por crear un nuevo proyecto en Visual Studio de XNA Game. Vuelva a elaborar las tres
carpetas Modelos, Shaders y Texturas en el Content, en la parte del explorador de soluciones. En la carpeta
Modelos, aada cualquier modelo tridimensional que pueda manejar el ContentManager. En la carpeta
Shader vuelva a aadir el efecto Ambiental.fx que se vio en el captulo previo a ste. Asegrese que la
textura que agregue en la carpeta Texturas, sea compatible con los formatos que el ContentManager
controla.
Con un diagrama de clases se puede visualizar mejor el software que se contruir, para las interfaces de
los efectos. En la ilustracin 8 2 se muestran las interfaces IFx, IDifuso e IEspecular. Cada una de ellas
servir para el polimorfismo y herencia de las clases que interacten con el shader.
Ilustracin 8-2 Diagrama de clases. Interfaces
Para crear una interfaz en Visual Studio seleccione el nombre de la solucin en el explorador de
soluciones. Haga clic derecho y seleccione Aadir nuevo elemento. Inmediatemente se abre una ventana de
dilogo para seleccionar una plantilla de cualquiera de las categoras. Seleccione la plantilla Interface de la
categora Cdigo. El nombre que le asigne a cualquier interfaz debe comenzar con la letra i mayscula,
seguida del nombre que la describe.
Una vez creado el archivo de la interfaz IFx escriba el mtodo DrawModelMeshPart, dentro de las llaves
de la interfaz IFx.
public interface IFx
{
/// <summary>
/// Mtodo que dibuja un ModelMeshPart.
/// </summary>
void DrawModelMeshPart(Microsoft.Xna.Framework.Graphics.ModelMeshPart modelMeshPart,
Microsoft.Xna.Framework.Graphics.GraphicsDevice graphicsDevice);
}
Este mtodo dibujar el ModelMeshPart que compone al ModelMesh de la clase Model. Cabe aclarar
que cada ModelMeshPart se distingue de otro por sus diferentes materiales.
126
La interfaz IDifuso, hereda de la interfaz IFx, y aade una propiedad que se llama ColorDifuso. Cre una
nueva interfaz con el mismo nombre Idifuso y escriba las siguientes lneas.
public interface IDifuso : IFx
{
/// <summary>
/// Propiedad que obtiene o establece el color difuso.
/// </summary>
Color ColorDifuso { get; set; }
}
La creacin de esta interfaz es para separar los modelos de iluminacin difusa del especular. Por lo que la
siguiente interfaz es para el especular.
Agregue una interfaz al proyecto con el nombre IEspecular y escriba en ella el siguiente enlistado.
{
/// <summary>
/// Propiedad que obtiene o establece el coeficiente especular.
/// </summary>
Single Ks { get; set; }
/// <summary>
/// Propiedad que obtiene o establece la potencia especular.
/// </summary>
Single N { get; set; }
/// <summary>
/// Propiedad que obtiene o establece el color especular.
/// </summary>
Color ColorEspecular { get; set; }
/// <summary>
/// Propiedad que habilita o inhabilita el modelo especular.
/// </summary>
Boolean HabilitarEspecular { get; set; }
/// <sumary>
/// Propiedad que obtiene o establece la posicin de la cmara.
/// </sumary>
Vector3 PosicionCamara { get; set;}
}
Esta interfaz IEspecular tiene las propiedades del coeficiente especular, la potencia especular, el color
especular, la posicin de cmara y la opcin de habilitar o inhabilitar el modelo de iluminacin especular.
8.1.2.1 Clase FxAmbiental.
La clase FxAmbiental, que a continuacin se describe, hereda de la interfaz IFx, y define el mtodo
DrawModelMeshPart. Adems se definen los campos y propiedades que ayudan a la comunicacin entre
XNA y el efecto Ambiental.fx.
Cre una nueva clase en la solucin, con el nombre FxAmbiental, y en la parte de directivas escriba las
siguientes.
using System;
Dentro del cuerpo de la clase escriba las variables instancia, lneas 3 9, Cdigo 8-5. La nica variable
cuyo modificador de acceso es diferente a private es effect, lnea 9. Esto es porque de esta clase se heredan
127
las siguientes clases para el shader Direccional.fx y MulDirec.fx, este ltimo es una versin reducida del
shader MultiIliminacin visto en el captulo anterior. Vase que cada una de estas variables, excepto
habilitarTextura y effect, corresponden a las variables uniform del shader Ambiental.fx.
En el constructor, lneas 11 16, se obtiene una instancia Effect como parmetro y el cuerpo inicializa el
color ambiental e inhabilita la tcnica de Texturizacion.
Cada una de las propiedades obtiene o establece el valor correspondiente a la variable de instancia de la
clase, y para ser legible las propiedades tienen el mismo nombre que la variables, pero diferencindolas por
tener la primera letra en maysculas.
El descriptor de acceso set de cada propiedad establece el valor a la variable de instancia de la clase,
antes de pasar el dato al mtodo SetValue.
En casi todas las propiedades la asignacin de los datos hacia el efecto es igual al ejemplo anterior,
exceptuando en HabilitarTextura, lnea35 44. El valor de sta es de tipo boleano, sirve como selector entre
las tcnicas. Para ello se utiliza el operador ternario ? :. Si el valor de la variable habilitarTextura es
verdadero, se selecciona el string Texturizacion, en caso contrario ser Material.
El mtodo DrawModelMeshPart utiliza el modificador virtual para que otras clases derivadas de
FxAmbiental puedan cambiar el cuerpo, pero no as la firma. La manera en que se manda a dibujar la
geometra es las misma que se vio en el Vertex Buffer, en donde se envuelve el mtodo
DrawIndexedPrimitives entre los mtodos Begin y End del objeto effect, lneas 103 110. En este caso el
shader Ambiental contiene una pasada y se toma el primer elemento de la coleccin Passes. Todos los
parmetros que necesita este mtodo se obtienen del ModelMeshPart.
Cdigo 8-5
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
public class FxAmbiental : IFx

{
private Matrix view;
private Matrix projection;
private Matrix world;
private Color colorAmbiental;
private Texture2D textura2D;
private Boolean habilitarTextura;
protected Effect effect;
public FxAmbiental(Effect effect)
{
this.effect = effect;
ColorAmbiental = Color.Black;
HabilitarTextura = false;
}
/// <summary>
/// Propiedad que obtiene o establece el color ambiental del material.
/// </summary>
public virtual Color ColorAmbiental
{
get { return colorAmbiental; }
set
{
colorAmbiental = value;
effect.Parameters["colorMaterialAmbiental"].SetValue(
colorAmbiental.ToVector4());
}
}// fin de la propiedad ColorAmbiental
/// <summary>
/// Propiedad que habilita o inhabilita la textura.
/// </summary>
public virtual Boolean HabilitarTextura
{
get { return habilitarTextura; }
set
128
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
{
habilitarTextura = value;
effect.CurrentTechnique = effect.Techniques[
(value) ? "Texturizado" : "Material"];
}
}// fin de la propiedad HabilitarTextura
/// <summary>
/// Propiedad que obtiene o establece la matriz projection.
/// </summary>
public virtual Matrix Projection
{
get { return projection; }
set
{
projection = value;
effect.Parameters["projection"].SetValue(projection);
}
}// fin de la propiedad Projection
/// <summary>
/// Propiedad que obtiene o establece la textura.
/// </summary>
public virtual Texture2D Textura2D
{
get { return textura2D; }
set
{
textura2D = value;
effect.Parameters["texturaModelo"].SetValue(textura2D);
}
}// fin de la propiedad Textura2D
/// <summary>
/// Propiedad que obtiene o establece la matriz view.
/// </summary>
public virtual Matrix View
{
get { return view; }
set
{
view = value;
effect.Parameters["view"].SetValue(view);
}
}// fin de la propiedad View
/// <summary>
/// Propiedad que obtiene o establece la matriz world.
/// </summary>
public virtual Matrix World
{
get { return world; }
set
{
world = value;
effect.Parameters["world"].SetValue(world);
}
}// fin de la propiedad World
#region IFx Members
public virtual void DrawModelMeshPart(ModelMeshPart modelMeshPart,
GraphicsDevice graphicsDevice)
{
effect.Begin();
graphicsDevice.DrawIndexedPrimitives(PrimitiveType.TriangleList,
modelMeshPart.BaseVertex, 0,
modelMeshPart.NumVertices, modelMeshPart.StartIndex,
modelMeshPart.PrimitiveCount);
129
110.
111.
112.
113.
114.
effect.End();
}// fin del mtodo DrawModelMeshPart
#endregion
}// fin de la clase FxAmbiental
Queda claro que la nueva forma de asignar un efecto a la geometra es ms complicada, o ms grande
que la anterior, sin embargo, se obtiene un mejor control de los valores de ste.
La implementacin del modelo de iluminacin ambiental por shader, se har en la clase Game1. Como
primer paso escriba las siguientes variables de instancia de la clase Game1.
Model elefante;
Matrix[] transformaciones;
FxAmbiental fxAmbiental;
Texture2D textura;
Matrix view, projection;
Luego hay que cambiar el tamao del back buffer, esto con la finalidad de seguir algunas de las
recomendaciones que se hace en la documentacin acerca de tamaos de pantalla para ser representados
en cualquier dispositivo visual en el que se conecte el Xbox 360. El tamao recomendado es de 1280 para el
ancho y 720 para el alto.
En el constructor de la clase Game1, despus de la asignacin de la ruta del Content, escriba las
siguientes lneas.
public Game1()
{
graphics.PreferredBackBufferHeight = 720;
graphics.PreferredBackBufferWidth = 1280;
}
La propiedad PreferredBackBufferHeight obtiene o establece

PreferredBackBufferWidth hace lo mismo, pero para el alto del bfer.
el
alto
del
bfer,
En el mtodo Initialize, inicalice las matrices view y projection, como se muestra en el siguiente
enlistado, y que se deja como opcin los valores propuestos aqu, pues es para visualizar toda la geometra
que se dibujar en este ejemplo y los dos ms que le siguen.
{
view = Matrix.CreateLookAt(new Vector3(120.0F, 96.0F, 473.0F),
projection = Matrix.CreatePerspectiveFieldOfView(MathHelper.PiOver4,
1.0F, 1000.0F);
base.Initialize();
}
En el mtodo LoadContent de la clase Game1, se cargan los datos de textura, el modelo trdimensional y
el shader, los cuales no deben ser desconcidos para el lector, pues en anteriores ejemplos se utilizaron.
Luego de leer los datos del archivo Ambiental.fx y asignarlos al objeto fxAmbiental, se modifican las
propiedades ColorAmbiental y Textura2D.
{
130
elefante = Content.Load<Model>(@"Modelos\Elefante");
transformaciones = new Matrix[elefante.Bones.Count];
elefante.CopyAbsoluteBoneTransformsTo(transformaciones);
fxAmbiental = new FxAmbiental(
Content.Load<Effect>(@"Shaders\Ambiental"));
fxAmbiental.ColorAmbiental = Color.Brown;
fxAmbiental.Textura2D = textura;
}
Para concluir con este ejemplo, el mtodo Draw de la clase Game1 retoma parte del primer ejemplo del
Cmo cargar modelos 3D desde un archivo X y FBX, en dnde se dibuja un ModelMeshPart de la coleccin
ModelMesh de la instancia de la clase Model. Sin embargo, en esta ocasin se mandarn a dibujar todos los
ModelMeshPart.
En las lneas 5 y 6, Cdigo 8-6, se establecen las matrices de vista y proyeccin del objeto fxAmbiental.
Sin duda, estas propiedades pueden no estar aqu, pero se ha dejado as porque son algunas de las variables
que pueden cambiar en una aplicacin, por no decir las comunes.
El primer foreach, lneas 8 22, mapea cada elemento de la coleccin Meshes del objeto elefante.
Enseguida se establece el valor de la propiedad World del objeto fxAmbiental con la matriz de
transformacin obtenida del objeto elefante.
Se debe establecer el bfer de ndices en el dispositivo grfico, lnea 12, a partir de la instancia mesh que
el primer foreach utiliza como elemento de mapeo sobre la coleccin Meshes del objeto elefante. La
propiedad IndexBuffer de la clase ModelMesh solo obtiene dicho bfer.
En el foreach anidado, lneas 14 21, se utiliza el objeto meshPart para hacer referencia a cada
elemento de la coleccin MeshPart del objeto mesh que utiliza el primer foreach. ste es menester utilizarlo
para establecer el bfer de vrtices y la declaracin de estos, lneas 16 18, las propiedades VertexBuffer,
StreamOffset, VertexStride y VertexDeclaration son la clave para dicho xito.
Antes de la llave que cierra el foreach anidado se invoca el mtodo DrawModelMeshPart del objeto
fxAmbiental, y cuyos parmetros son el mehsPart y el GraphicsDevice, lnea 20.
Cdigo 8-6
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

{
fxAmbiental.View = view;
fxAmbiental.Projection = projection;
foreach (ModelMesh mesh in elefante.Meshes)
{
fxAmbiental.World = transformaciones[mesh.ParentBone.Index];
GraphicsDevice.Indices = mesh.IndexBuffer;
{
GraphicsDevice.Vertices[0].SetSource(mesh.VertexBuffer,
meshPart.StreamOffset, meshPart.VertexStride);
fxAmbiental.DrawModelMeshPart(meshPart, GraphicsDevice);
}
}
}
131
Ejecute el programa con la tecla F5 y ver algo parecido a la ilustracin 8 -3; corriga cualquier error de
compilacin si es el caso y vuleva a intentar.
Ilustracin 8-3 Integracin de shader en XNA
8.2 Luz direccional

Para este ejemplo se usa el shader que implementa una luz de tipo direccional que se estudi en el
captulo anterior, empero se le agreg todas las variables uniform necesarias para el modelo de iluminacin
especular, como no es el punto de este captulo explicar el siguiente enlistado, se deja como ejercicio
entender su funcionamiento.
Escriba el siguiente cdigo en Fx Composer y luego agrguelo en la carpeta Shaders de la solucin
anterior, en la que se cre la clase FxAmbiental.
Cdigo 8-7
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
/*

Material clsico.
*/
float3 direccionLuz
<
string UIName = "Direccin de Luz";
>;
<
>;
float ks
<
float UIMin = 0.0F;
float UIMax = 1.0F;
string UIName = "Specular";
132
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
> = {0.05F};
float n
<
float UIMin = 0.0F;
string UIName = "Specular pow";
> = 5.0F;
<
> = {0.05F, 0.05F, 0.05F, 1.0F};
<
string UIName = "Material difuso";
> = {0.24F, 0.34F, 0.39F, 1.0F};
<
> = {1.0F, 1.0F, 1.0F, 1.0F};
texture texturaModelo
<
>;
{
MinFilter = Linear;
MagFilter = Linear;
MipFilter = Linear;
AddressU = Wrap;
AddressV = Wrap;
};
{
};
{
};
{
};
bool modIluEsp
<
> = false;
{
133
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.

float4 worldPosition = mul(entrada.Posicion, world);
salida.WorldPosition = worldPosition / worldPosition.w;
return salida;
float4 MainPS(PixelShaderEntrada entrada,
{
float3 dirLuz = normalize(direccionLuz);
float intensidadDifusa = max(dot(-dirLuz, entrada.WorldNormal), 0.0F);
float4 difuso = colorMaterialDifuso * intensidadDifusa;
float4 color;
// color final
color = colorMaterialAmbiental + difuso;
if(modIluEsp)
{
// iluminacin especular
max(dot(-dirLuz, entrada.WorldNormal), 0.0F) + dirLuz);
float3 direccionCamara = normalize(posicionCamara entrada.WorldPosition.xyz);
float intensidadEspecular = pow(max(dot(reflexion,
direccionCamara), 0.0F), n);
float4 especular = ks * intensidadEspecular * colorMaterialEspecular;
color += especular * intensidadDifusa;
}// fin del if
{
}
// color final
color.a = 1.0F;
return color;
}// fin pixel shader MainPS
{
pass P0
{
}
}
technique Material
{
pass P0
{
}
}
La clase FxDireccional es la clase que servir como interfaz entre el shader anterior y XNA. Esta clase
necesita las propiedades de las interfaces IDifuso, IEspecular y las hereda de la clase FxAmbiental; en la
Ilustracin 8-4 se muestra el diagrama de clase. Cre una nueva clase en la solucin anterior, llamada
FxDireccional y escriba el Cdigo 8-8.
134
Ilustracin 8-4 Diagrama de clases. FxDireccional.
Entre las lneas 3 9, se encuentran las variables de instancia que sirven de intermediarios entre los
datos que recibe del usuario de la clase FxDireccional y el shader.
Vea la equivalencia entre estas variables y aquellas a las que se quiere asociar al shader, excepto en
aquellas que se han declarado como estructuras Color, lneas 5 y 6.
En el constructor de la clase, lneas 11 19, se inicializan las variables de instancia a partir de sus
propiedades, esto con la finalidad de darle los valores a cada elemento de la coleccin de Parameters del
efecto. Cada propiedad se encargar de establecer dicho valor a cada variable uniform extern.
Para la propiedad Ks, lneas 26 34, coeficiente especular, no se tiene ninguna restriccin en el
momento de establecer el valor de la variable de instancia ks, que vara entre cero y uno. Esto se ha dejado
as para que se pueda visualizar qu pasa con valores mayores a uno y para valores negativos. Recuerde que
primero se debe asignar el dato a la variable de instancia, y luego sta se le establece al elemento de la
coleccin correspondiente.
La propiedad potencia especular N, lneas 39 47, tampoco restringe el valor que generalmente es entre
1 y 128. El objetivo, al igual que la propiedad Ks, es que se pueda visualizar con valores fuera de lo comn.
Las propiedades ColorEspecular, lneas 52 60, y ColorDifuso, lneas 96 105, tienen que convertir la
estructura Color a una estructura Vector4 con el fin de garantizar la integracin de los datos.
HabilitarEspecular, lneas 66 74, y PosicionCamara, lneas 79 87, solo pasan el valor correspondiente
al elemento de la coleccin Parameters.
La propiedad DireccionLuz, lneas 112 121, evala el valor antes de asignar el dato a la variable
direccionLuz, lnea 117; si el valor es diferente de Vector3.Zero se le asigna a la variable direccionLuz, en
caso contrario se le da un valor por default. Esto garantiza que siempre tendr una direccin.
Como esta clase hereda de la clase FxAmbiental, las propiedades ColorAmbiental, HabilitarTextura,
Projection, Textura2D, View y World deberan de sobrescribirse, debido a que el ndice que se utiliza para
seleccionar el elemento de la coleccin Parameters del objeto Effect podra cambiar. Esto depende del
nombre de las variables uniform extern de los shaders, en caso que no coincida, el error no se detectar en
tiempo de compilacin sino en ejecucin. Sin embargo, en todos los ejemplos de shaders se les dio un
mismo nombre a cada una de las variables para permitir una programacin ms sencilla. La mejor prctica
es agregar el modificador virtual a las propiedades base para poder cambiarlas en las clases que las hereden.
Cdigo 8-8
1.
2.
3.
4.
5.
6.
public class FxDireccional : FxAmbiental, IEspecular, IDifuso

{
private Single ks;
private Single n;
private Color colorDifuso;
private Color colorEspecular;
135
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
private Vector3 direccionLuz;

private Boolean habilitarEspecular;
private Vector3 posicionCamara;
public FxDireccional(Effect effect)
: base(effect)
{
ColorDifuso = Color.WhiteSmoke;
ColorEspecular = Color.WhiteSmoke;
DireccionLuz = new Vector3(-1.0F, -1.0F, -1.0F);
Ks = 20.0F;
N = 128.0F;
}// fin del constructor
#region IEspecular Members
/// <summary>
/// </summary>
public float Ks
{
get { return ks; }
set
{
ks = value;
base.effect.Parameters["ks"].SetValue(ks);
}
}// fin de la propiedad Ks
/// <summary>
/// Propiedad que obtiene o establece la potencia
/// </summary>
public float N
{
get { return n; }
set
{
n = value;
base.effect.Parameters["n"].SetValue(n);
}
}// fin de la propiedad N
/// <summary>
/// Propiedad que obtiene o establece el color especular del material.
/// </summary>
public Color ColorEspecular
{
get { return colorEspecular; }
set
{
colorEspecular = value;
base.effect.Parameters["colorMaterialEspecular"].SetValue(
colorEspecular.ToVector4());
}
}// fin de la propiedad ColorEspecular
/// <summary>
/// Propiedad que habilita o inhabilita el modelo iliminacin especular.
/// </summary>
public Boolean HabilitarEspecular
{
get { return habilitarEspecular; }
set
{
habilitarEspecular = value;
base.effect.Parameters["modIluEsp"].SetValue(habilitarEspecular);
}
}// fin de la propiedad DireccionLuz
/// <summary>
/// Propiedad que obtiene o establece la posicin de la cmara.
136
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
/// </summary>
public Vector3 PosicionCamara
{
get { return posicionCamara; }
set
{
posicionCamara = value;
effect.Parameters["posicionCamara"].SetValue(posicionCamara);
}
}// fin de la propiedad PosicionCamara
#endregion
#region IDifuso Members
/// <summary>
/// Propiedad que obtiene o establece el color difuso del material.
/// </summary>
public Color ColorDifuso
{
get { return colorDifuso; }
set
{
colorDifuso = value;
base.effect.Parameters["colorMaterialDifuso"].SetValue(
colorDifuso.ToVector4());
}
}// fin de la propiedad ColorDifuso
#endregion
/// <summary>
/// Propiedad que obtiene o establece la direccin de luz.
/// </summary>
public Vector3 DireccionLuz
{
get { return direccionLuz; }
set
{
direccionLuz = (value != Vector3.Zero) ? value :
new Vector3(-1.0F, -1.0F, -1.0F);
base.effect.Parameters["direccionLuz"].SetValue(direccionLuz);
}
}// fin de la propiedad DireccionLuz
}// fin de la clase FxDireccional
La implementacin de la clase FxAmbiental se realiza en la clase Game1. Abra el archivo Game1.cs y

escriba dos variables de instancia nuevas.
FxDireccional fxDireccional;
Vector3 posicion;
La variable posicion sirve para establecer el lugar de la cmara en la propiedad PosicionCamara del
objeto fxDireccional.
En el mtodo Initialize se inicializa la estructura posicion para luego drsela al mtodo CreateLookAt
como uno de sus parmetros.
{
posicion = new Vector3(-120.0F, 96.0F, 473.0F);
view = Matrix.CreateLookAt(posicion,
projection = Matrix.CreatePerspectiveFieldOfView(MathHelper.PiOver4,
1.0F, 1000.0F);
137
base.Initialize();
}
En el mtodo LoadContent se crea la instancia fxAmbiental y se inicializan algunas de sus propiedades,

vase el siguiente cdigo.
{
elefante = Content.Load<Model>(@"Modelos\Elefante");
transformaciones = new Matrix[elefante.Bones.Count];
elefante.CopyAbsoluteBoneTransformsTo(transformaciones);
fxAmbiental = new FxAmbiental(
Content.Load<Effect>(@"Shaders\Ambiental"));
fxAmbiental.ColorAmbiental = Color.Brown;
fxAmbiental.Textura2D = textura;
fxDireccional = new FxDireccional(Content.Load<Effect>(@"Shaders\Direccional"));
fxDireccional.Textura2D = textura;
fxDireccional.ColorAmbiental = Color.Black;
fxDireccional.ColorDifuso = new Color(5, 2, 2);
fxDireccional.ColorEspecular = Color.Brown;
fxDireccional.DireccionLuz = new Vector3(0, -1, -1);
fxDireccional.HabilitarEspecular = true;
fxDireccional.HabilitarTextura = true;
fxDireccional.Ks = 10;
fxDireccional.N = 120;
fxDireccional.PosicionCamara = posicion;
}
En el mtodo Draw,Cdigo 8-9, se actualizan las propiedades View, lnea 8; Projection, lnea 9; y World,
lneas 13 y 24; del objeto fxDireccional.
Antes de llamar al mtodo DrawModelMeshPart de la instancia FxDireccional, lnea 25, se traslada la
geometra menos cien unidades sobre el eje x y menos doscientas unidades sobre el eje z. Corra el ejemplo
con la tecla F5 y ver algo similar a la Ilustracin 8-5.
Cdigo 8-9
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

{
fxDireccional.View = fxAmbiental.View;
fxDireccional.Projection = fxAmbiental.Projection;
{
fxDireccional.World = fxAmbiental.World;
{
fxDireccional.World *= Matrix.CreateTranslation(-100, 0, -200);
fxDireccional.DrawModelMeshPart(meshPart, GraphicsDevice);
138
26.
27.
28.
29.
30.
}
}
}
Si ocurre un error de compilacin o de ejecucin revis de nueva cuenta el cdigo, y vuelva intentar.
Ilustracin 8-5 Integracin de los shaders Ambiental y Direccional en XNA
8.3 Efecto multiluces

Para este ltimo ejemplo se utiliza una versin reducida del shader MultiLuces que se vio en el captulo
anterior. Este nuevo shader solo contiene un tipo de fuente: la direccional. Esto es con el fin que se
entienda cmo se crea la clase que comunica los datos de XNA hacia el efecto, y se deja como ejercicio al
lector crear la clase correspondiente para la versin completa de MultiLuces.
En el listado siguiente se muestra la versin reducida de MultiLuces, y se espera que el lector pueda
interpretar con facilidad cada lnea, pues la explicacin ya fue comentada en el captulo anterior.
Abra Fx Composer y cre un nuevo proyecto para escribir las siguientes lneas en un archivo fx.
Cdigo 8-10
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
/*
Multiples luces.
Material clsico.
*/
<
>;
float ks
<
139
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
float UIMin = 0.0F;

> = {0.05F};
float n
<
float UIMin = 0.0F;
> = 5.0F;
<
> = {0.07F, 0.07F, 0.07F, 1.0F};
<
string UIName = "Color Material";
> = {0.24F ,0.34F, 0.39F, 1.0F};
<
> = {1.0F, 1.0F, 1.0F, 1.0F};
bool habiEspec
<
> = false;
{
MinFilter = Linear;
MagFilter = Linear;
MipFilter = Linear;
AddressU = Wrap;
AddressV = Wrap;
};
{
};
{
};
struct LuzDireccional
{
float3 Direccion;
float4 Color;
int Encender;
};
140
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
int numLuces = 4;
VertexShaderSalida MainVS(float3 posicion : POSITION,
float3 normal : NORMAL, float2 coordenadaTextura : TEXCOORD0)
{
salida.Posicion = mul(float4(posicion, 1.0F), mvp);
salida.WorldNormal = mul(normal, world);
salida.WorldPosition = mul(float4(posicion, 1.0F), world);
salida.CoordenadaTextura = coordenadaTextura;
return salida;
}// fin del vertexshader MainVS
float4 MainPSAmbiental(PixelShaderEntrada entrada,
uniform bool habiTextura) : COLOR
{
float4 color = colorMaterialAmbiental;
if(habiTextura)
{
color *= tex2D(modeloTexturaMuestra, entrada.CoordenadaTextura);
}
return color;
}// fin del pixelshader MainPSAmbiental
// Funcin que calcula la reflexin especular.
float4 ReflexionEspecular(float3 direccionLuz, float3 worldPosicion,
float3 worldNormal, float4 colorLuz)
{
float3 reflexion = normalize(2 * worldNormal *
max(dot(direccionLuz, worldNormal), 0.0F) - direccionLuz);
float3 direccionCamara = normalize(posicionCamara - worldPosicion);
float reflexionEspecular = pow(max(dot(reflexion, direccionCamara), 0.0F), n);
return (ks * reflexionEspecular) * (colorLuz * colorMaterialEspecular);
}// fin de la funcin ReflexionEspecular
float4 Phong(float3 direccionLuz, float3 worldPosicion,
float3 worldNormal, float4 colorLuz, float4 colorMater)
{
float reflexionDifusa = max(dot(direccionLuz, worldNormal), 0.0F);
float4 phong = reflexionDifusa * colorLuz * colorMater;
// activacin de la reflexin especular
if(habiEspec)
{
phong += ReflexionEspecular(direccionLuz, worldPosicion,
worldNormal, colorLuz) * colorMater * reflexionDifusa;
}// fin del if
return phong;
}// fin de la funcin Phong
// Funcin que calcula la luz tipo direccional
float4 FuenteDireccional(LuzDireccional luz, float3 worldPosicion,
float3 worldNormal, float4 colorMater)
{
return Phong(-normalize(luz.Direccion), // direccin de luz
worldPosicion,
colorMater);
}// fin de la funcin FuenteDireccional
LuzDireccional direccionales[20];
{
float4 color = 0;
float4 colorDifuso = colorMaterialDifuso;
141
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
if(texturizado)
{
colorDifuso *= tex2D(modeloTexturaMuestra, entrada.CoordenadaTextura);
}// fin del if
for(int i = 0; i < numLuces; i++)
{
if(direccionales[i].Encender != 0)
{
color += FuenteDireccional(direccionales[i], entrada.WorldPosition,
}
}// fin del for
color.a = 1.0F;
return color;
}// fin del pixelShader mainPS
{
pass Ambiental
{
PixelShader = compile ps_3_0 MainPSAmbiental(true);
}
pass MultiLuces
{
}
technique Material
{
pass Ambiental
{
PixelShader = compile ps_3_0 MainPSAmbiental(false);
}
pass MultiLuces
{
}
Continuando con el proyecto de Visual Studio se deben agregar dos clases, llamadas FxMultiluces y
LuzDireccional. La primera representa la clase que comunicar los datos desde XNA hacia el shader, y la
segunda representar los campos de la estructura LuzDireccional del shader.
En la Ilustracin 8-6, se muestra el diagrama de clase para FxMultiluces. sta hereda de la clase
FxAmbiental y de las interfaces IDifuso e IEspecular. Lo que hace pensar que dicha herencia de clase pudo
haberse dado de FxDireccional hacia FxMultiluces. Pero la propiedad DireccionLuz de FxDireccional no se
encuentra como miembro de la clase FxMultiluces, y por eso se consideran como clases diferentes.
142
Ilustracin 8-6 Diagrama de clases. FxMultiluces
Antes de escribir la clase FxMultiluces hay que definir los campos de la clase LuzDireccional que utiliza
FxMultiluces como dependencia.
En las lneas 3 a 6, Cdigo 8-11, se declaran las variables de instancia color, direccin, encender y
estrucutraLuz. Las tres primeras corresponden a la estructura que LuzDireccional del shader Multluces.fx.
Pero si uno observa el campo Encender de dicha estructura en el shader no es del tipo booleano, sino
entera. Para conservar la integridad de los datos, en las propiedades, la asignacin de dichos valores se hace
adecuadamente y dependiendo de la informacin.
La variable estructuraLuz, lnea 6, representa un elemento del parmetro direccionales del shader, ste
es un arreglo de veinte estrucuturas LuzDireccional, as que cada una tiene tres elementos a los cuales se les
puede asignar un valor.
El constructor de la clase LuzDireccional, lneas 8 14, establece la direccin de la luz, el color e
inhabilita la luz. Por default todas las luces estarn apagadas.
Para la propiedad Color, lneas 19 28, se transforma la estructura Color por Vector4. En la propiedad
DireccionLuz se evita que se establezca un valor tipo Vector3.Zero.
En el descriptor de acceso set, lneas 50 55 de la propiedad Encender, se establece el valor a uno si el
valor de la variable encender es true y en caso contrario sera cero.
Cdigo 8-11
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
public class LuzDireccional

{
private Color color;
private Vector3 direccion;
private Boolean encender;
private EffectParameter estructuraLuz;
public LuzDireccional(EffectParameter effectParameter, Vector3 direccion)
{
estructuraLuz = effectParameter;
Direccion = direccion;
Color = Color.WhiteSmoke;
Encender = false;
}
/// <summary>
/// Propiedad que obtiene o establece el color de la luz.
/// </summary>
public Color Color
{
get { return color; }
set
{
color = value;
143
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
estructuraLuz.StructureMembers["Color"].SetValue(
color.ToVector4());
}
}// fin de la propiedad Color
/// <summary>
/// Propiedad que obtiene o establece el vector de direccin de la luz.
/// </summary>
public Vector3 Direccion
{
get { return direccion; }
set
{
direccion = (value != Vector3.Zero) ? value : new Vector3(-1.0F,
-1.0F, -1.0F);
estructuraLuz.StructureMembers["Direccion"].SetValue(direccion);
}
}// fin de la propiedad Direccion
/// <summary>
/// Propiedad que enciende o apaga la luz.
/// </summary>
public Boolean Encender
{
get { return encender; }
set
{
encender = value;
estructuraLuz.StructureMembers["Encender"].SetValue(
(encender) ? 1 : 0);
}
}// fin de la propiedad Encender
}// fin de la clase LuzDireccional
Agregue una nueva clase en la solucin en Visual Studio cuyo nombre sea FxMultiluces, y escriba el
Cdigo 8-12.
Cada una de las variables del efecto tienen su lter ego en las variables de instancia, lneas 3 10. Como
se ha manejado anteriormente no todas las variables corresponden al mismo tipo de dato, sin embargo la
integridad se conserva en las propiedades.
En el constructor se inicializan los colores del material, el coeficiente especular y su potencia; se
inhabilita la textura y se le asigna el parmetro correspondiente al arreglo que tiene las estructuras de la luz
direccional, lnea 21.
La definicin de las propiedades, en su mayora, son las mismas que en la clase FxDireccional, as que
solo se explicara el mtodo DrawModelMeshPart, lneas 131 168
Este shader contiene dos pasadas por tcnica y deben ser llamadas una a una en el mtodo
DrawModelMeshPart de la clase FxAmbiental, para sumar los efectos de ambas pasadas. Para lograr dicho
efecto se debe inhabilitar la escritura sobre el DepthBuffer y habilitar el canal alfa; luego se deben regresar
a un estado anterior, para no afectar a las dems geometras. El cambio debe hacerse solo para la clase
FxMultiLuces, as que se deber reescribir el mtodo DrawModelMeshPart que se hereda de la clase
FxAmbiental, lneas 131 168.
En el mtodo DrawModelMeshPart se hace llamar dos veces el mtodo DrawIndexedPrimitives de la
instancia graphicsDevice, lneas 138 -141, y lneas 158 161, cada una de ellas se encuentra entre los
mtodos Begin y End de cada elemento EffectPass que corresponde a Ambiental y Multiluces del shader.
Despes de llamar por primera vez al mtodo DrawIndexedPrimitives, se habilita la transparencia, lnea
145, y junto con ella todas las propiedades que van de la mano del blending .
Enseguida se llama el mtodo DrawIndexedPrimitives, no sin antes propagar el efecto anterior al
dispositivo grfico antes del renderizado. Para lograr dicho fin, se llama el mtodo CommitChanges, lnea
153.
144
El mtodo CommitChanges, debe llamarse dentro del par de mtodos Begin y End de la pasada actual, y
antes de varios mtodos DrawPrimitives, que sirven como propagadores de los cambios hacia el dispositivo
grfico.
Antes de llamar el mtodo End, lnea 164, se inhabilita el blending para no afectar las goemetrias
posteriores al llamado del mtodo DrawModelMeshPart.
Cdigo 8-12
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
public class FxMultiluces : FxAmbiental, IEspecular, IDifuso

{
private Color colorDifuso;
private Color colorEspecular;
private Boolean habilitarEspecular;
private Single ks;
private Single n;
private Int16 numeroLuces;
private EffectParameter direccionales;
private Vector3 posicionCamara;
public FxMultiluces(Effect effect)
: base(effect)
{
ColorDifuso = Color.Black;
ColorDifuso = Color.WhiteSmoke;
ColorEspecular = Color.WhiteSmoke;
Ks = 10.0F;
N = 20.0F;
HabilitarTextura = false;
direccionales = effect.Parameters["direccionales"];
}
#region IEspecular Members
/// <summary>
/// </summary>
public float Ks
{
get { return ks; }
set
{
ks = value;
base.effect.Parameters["ks"].SetValue(ks);
}
}// fin de la propiedad Ks
/// <summary>
/// Propiedad que obtiene o establece la potencia especular.
/// </summary>
public float N
{
get { return n; }
set
{
n = value;
base.effect.Parameters["n"].SetValue(n);
}
}// fin de la propiedad N
/// <summary>
/// Propiedad que obtiene o establece el color especular.
/// </summary>
public Color ColorEspecular
{
get { return colorEspecular; }
set
{
colorEspecular = value;
base.effect.Parameters["colorMaterialEspecular"].SetValue(
145
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
colorEspecular.ToVector4());
}
}// fin de la propiedad ColorEspecular
/// <summary>
/// Propiedad que habilita o inhabilita el modelo de iluminacin especular.
/// </summary>
public bool HabilitarEspecular
{
get { return habilitarEspecular; }
set
{
habilitarEspecular = value;
effect.Parameters["habiEspec"].SetValue(habilitarEspecular);
}
}// fin de la propiedad HabilitarEspecular
/// <summary>
/// Propiedad que obtiene o establece la posicion de la cmara.
/// </summary>
public Vector3 PosicionCamara
{
get { return posicionCamara; }
set
{
posicionCamara = value;
effect.Parameters["posicionCamara"].SetValue(posicionCamara);
}
}// fin de la propiedad PosicionCamara
#endregion
#region IDifuso Members
/// <summary>
/// Propiedad que obtiene o establece el color difuso.
/// </summary>
public Color ColorDifuso
{
get { return colorDifuso; }
set
{
colorDifuso = value;
base.effect.Parameters["colorMaterialDifuso"].SetValue(
colorDifuso.ToVector4());
}
}// fin de la propiedad ColorDifuso
#endregion
/// <summary>
/// Propiedad que obtiene o establece el nmero de luces.
/// </summary>
public Int16 NumeroLuces
{
get { return numeroLuces; }
set
{
numeroLuces = value;
base.effect.Parameters["numLuces"].SetValue(numeroLuces);
}
}// fin de la propiedad NumeroLuces
/// <summary>
/// Propiedad que obtiene el parmetro de la estructura
/// que corresponde a las luces direccionales.
/// </summary>
public EffectParameter Direccionales { get { return direccionales; } }
public override void DrawModelMeshPart(ModelMeshPart modelMeshPart,
GraphicsDevice graphicsDevice)
146
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
{
effect.Begin();
#region Effect.Begin
effect.CurrentTechnique.Passes["Ambiental"].Begin();
effect.CurrentTechnique.Passes["Ambiental"].End();
// se habilita el blending
graphicsDevice.RenderState.AlphaBlendEnable = true;
graphicsDevice.RenderState.BlendFunction =
BlendFunction.Add;
graphicsDevice.RenderState.DestinationBlend = Blend.One;
graphicsDevice.RenderState.SourceBlend = Blend.One;
effect.CurrentTechnique.Passes["MultiLuces"].Begin();
effect.CommitChanges();
effect.CurrentTechnique.Passes["MultiLuces"].End();
// valor por default de XNA
graphicsDevice.RenderState.AlphaBlendEnable = false;
#endregion
effect.End();
}// fin del mtodo DrawModelMeshPart
}// fin de la clase FxMultiluces
Para implementar esta ltima clase, se debe crear el objeto de la clase Multiluces y las luces de tipo
direccional. En la clase Game1 de la solucin, escriba las siguientes variables de instancia que indican dichos
objetos.
FxMultiluces fxMultiluces;
LuzDireccional[] lucesDireccionales;
Y en el mtodo LoadContent, de la clase Game1, se carga el shader en el constructor de la clase

FxMultiluces, lnea 1, Cdigo 8-13. Luego se inicializan las propiedades del objeto fxMultilices, lneas 2 10.
La creacin de las luces direccionales se hace dentro del mismo mtodo LoadContent, pues su
constructor necesita la direccin de memoria de cada elemento que indica una luz del shader, lneas 12 24.
Luego se inicializan las propiedades de cada fuente de iluminacin, lneas 26 37.
Cdigo 8-13
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
fxMultiluces = new FxMultiluces(Content.Load<Effect>(@"Shaders\MulDirec"));

fxMultiluces.NumeroLuces = 6;
fxMultiluces.Textura2D = textura;
fxMultiluces.HabilitarEspecular = true;
fxMultiluces.HabilitarTextura = true;
fxMultiluces.ColorDifuso = new Color(3, 3, 3);
fxMultiluces.ColorAmbiental = Color.Black;
fxMultiluces.Ks = 10;
fxMultiluces.N = 20;
fxMultiluces.PosicionCamara = posicion;
lucesDireccionales = new LuzDireccional[fxMultiluces.NumeroLuces];
lucesDireccionales[0] = new LuzDireccional(
fxMultiluces.Direccionales.Elements[0], new Vector3(0, -1, 0));
fxMultiluces.Direccionales.Elements[1], new Vector3(0, 1, 0));
147
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.

fxMultiluces.Direccionales.Elements[2], new
Vector3(0, 0, 1));
Vector3(0, 0, -1));
Vector3(1, 0, 0));
Vector3(-1, 0, 0));
lucesDireccionales[0].Encender = true;
lucesDireccionales[0].Color = Color.Green;
lucesDireccionales[1].Color = Color.LawnGreen;
lucesDireccionales[2].Color = Color.Indigo;
lucesDireccionales[3].Color = Color.Brown;
lucesDireccionales[4].Color = Color.Chocolate;
lucesDireccionales[5].Color = Color.LemonChiffon;
Para concluir con este ejemplo, en el mtodo Draw de la clase Game1, Cdigo 8-14, se establecen las
matrices de mundo, lnea 17; vista, lnea 10; y proyeccin, lnea 11; del objeto fxMultiluces. Y se llama al
mtodo DrawModelMeshPart de la instancia fxMultiluces, lnea 32.
Ejecute el programa, y corrija cualquier error de compilacin que surgiese y vuelva a intentarlo, ver algo
parecido a la ilustracin 8 7.
Cdigo 8-14
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.

{
fxDireccional.View = fxAmbiental.View;
fxDireccional.Projection = fxAmbiental.Projection;
fxMultiluces.View = fxAmbiental.View;
fxMultiluces.Projection = fxAmbiental.Projection;
{
fxDireccional.World = fxAmbiental.World;
fxMultiluces.World = fxAmbiental.World;
{
fxDireccional.World *= Matrix.CreateTranslation(-100, 0, -200);
fxDireccional.DrawModelMeshPart(meshPart, GraphicsDevice);
fxMultiluces.World *= Matrix.CreateTranslation(100, 0, 200);
fxMultiluces.DrawModelMeshPart(meshPart, GraphicsDevice);
}
}
}
148
Este ltimo ejemplo demuestra que tan complicado se puede hacer la comunicacin entre los datos de
XNA hacia el shader, adems representa un gran nmero de lneas de cdigo en comparacin con el primer
ejemplo que se vi en este captulo, pero que sin duda es mejor.
Ilustracin 8-7 Integracin del shader Multiluces en XNA
Como ejercicio para el lector se deja crear la clase que comunique los datos desde XNA hacia el shader
MultiLuces que se vio en el apartado Iluminacin, en donde se tienen diferentes fuentes de iluminacin.
149
9 Colisin
Una colisin es una configuracin en la que dos objetos ocupan parte de una misma porcin del espacio
38
al mismo tiempo.
La anterior definicin sobre lo que es colisin en computacin grfica rompe la propiedad de la
impenetrabilidad de la fsica, y es este mismo que se toma en cuenta en los siguientes ejemplos. Los cuales
muestran la impenetrabilidad con diferentes tipos de envolventes de colisin.
Un volumen envolvente es una primitiva simple que encierra a una forma ms compleja y al que se le
39
puede hacer una prueba de interseccin ms rpido en trminos computacionales.
Es decir, toda geometra compleja puede ser sustituida por una geometra ms sencilla que envuelva a la
primera, permitiendo clculos ms sencillos a un costo de la impenetrabilidad. Existen varias envolventes de
colisin como son:
Esfera envolvente (Bounding Sphere, BS)

Caja envolvente alineada con los ejes (Axis Aligned Bounding Box, AABB)
Caja envolvente orientada (Oriented Boundig Box, OBB)
Politopo de Orientacin Discreta (Discrete Orientation Polytope, k-DOP)
En la Ilustracin 9-1 se muestra la figura de Hebe envuelta en una esfera y en una caja. La primera cubre
un mayor volumen que la estatua, lo que no permitira a otra acercarse lo suficiente. La segunda envolvente
esta ms pegada a Hebe, lo que permite a otra acercarse lo suficiente como para no atravesarla.
Ilustracin 9-1 Envolvente de colisin
La seleccin de qu tipo de envolvente es la ms adecuada, es aquella que sea lo ms cercana a las

dimensiones de la figura, tomando en cuenta el costo computacional, pues las pruebas de interseccin que
se hacen con cada envolvente se hace cada vez que se actualiza el dibujo o se atiende una interrupcin.
La manipulacin de la colisin se puede ver en tres pasos:
Deteccin de colisin
Determinacin de colisin
Repuesta a la colisin
La deteccin de colisin es un valor lgico que indica si dos o ms objetos han colisionado. Para conocer
si existe o no se determina la colisin con los clculos de las intersecciones. Y por ltimo se toman acciones
en respuesta a la colisin.
38
39
Deteccin de Colisiones mediante Recubrimientos Simpliciales. D. Juan Jos Jimenz Delgado. 2006 Universidad de Granada. p. 11.
dem p. 20
150
Este texto no mostrar todas las envolventes de colisin, ni tampoco todas las combinaciones que
puedan existir entre cada una de ellas para determinar una, esto sale del alcance del texto. XNA ofrece
algunos mtodos que devuelven un valor lgico cuando sucede una colisin. Sin embargo, no ofrece tipos de
acciones que se deben llevar a cabo una vez detectada, esto depende del problema.
Es por eso, que en los siguientes cuatro ejemplos se muestra el uso de dichos mtodos de deteccin, de
determinacin y respuesta; estos dos ltimos son implementaciones que el autor determin, pero no
indican que sean las mejores.
En cada ejemplo se manejan modelos tridimensionales con un solo ModelMesh; quedara como ejercicio
para el lector, crear el programa que pueda manejar ms de un ModelMesh para las colisiones.
9.1 Bounding Sphere vs. Bounding Sphere

La envolvente de colisin Bounding Sphere (BS) es una esfera que encierra a la geometra principal. Esta
envolvente ofrece dos propiedades para los clculos: radio y centro. XNA ya ofrece mtodos que calculan la
envolvente a partir de los vectores de posicin de los vrtices y a partir de otras envolventes. Por otra parte
ofrece mtodos que indican el valor lgico si encuentra una colisin con otra envolvente. A partir de los
ejemplos se har mencin de cada uno de estos mtodos.
Para este primer ejemplo, se hace mover una figura por medio del teclado o el gamepad, para hacerlo
colisionar contra otra figura. Cada una estar envuelta en una esfera.
Una vez determinada la colisin, se realizan clculos para hacer retroceder la envolvente y aparentar un
choque, es decir, solo se detendr en la direccin del movimiento cuando exista colisin.
Para mostrar en tiempo real los cambios numricos que sufren las propiedades de las envolventes de
colisin se dibujar con un SpriteFont en pantalla, las propiedades de cada envolvente.
Comience por crear un nuevo proyecto en Visual Studio y seleccione la plantilla de Windows Game (3.1).
Agregue una nueva clase llamada Texto, Cdigo 9-1, La clase Texto ayudar a dibujar los valores numricos
de cada envolvente. Las tres variables de instancia, lneas 9 11, sirven para dibujar el string en pantalla,
cada una de ellas se explic en el Texto. La parte importante de la clase es el mtodo Draw, lneas 20 26, el
cual recibe un string llamado mensaje y el color para la fuente, lnea 20. Despus de mandar a dibujar el
texto, se habilita el DephBuffer, lnea 25, porque en la llamada al mtodo DrawString, lnea 23, se inhabilita
el bfer.
Cdigo 9-1
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
using System;
{
public class Texto
{
GraphicsDevice graphicsDevice;
SpriteFont spriteFont;
public Texto(SpriteFont spriteFont, GraphicsDevice graphicsDevice)
{
this.graphicsDevice = graphicsDevice;
spriteBatch = new SpriteBatch(graphicsDevice);
this.spriteFont = spriteFont;
public void Draw(String mensaje, Color color)
{
spriteBatch.DrawString(spriteFont, mensaje, Vector2.Zero, color);
spriteBatch.End();
151
25.
26.
27.
28.
graphicsDevice.RenderState.DepthBufferEnable = true;
}// fin de la clase Texto
}// fin del namespace
La Ilustracin 9-2 es un diagrama UML que muestra dos clases: ModeloEstatico y ModeloDinamico, este
ltimo hereda del primero. Para los ejemplos siguientes se seguir utilizando este diagrama de clases. La
primera clase obtiene la envolvente de colisin de esfera, pinta el modelo tridimensional del archivo fbx o x
y regresa el nombre de la figura, el centro y el radio de la esfera.
La clase ModeloEstatico, Cdigo 9-2, tiene cuatro variables de instancia: modelo, lnea 9, que representa
el modelo obtenido a partir de un archivo fbx o x; el arreglo transformaciones, lnea 10, guarda todas las
matrices de transformacin del modelo; boundingSphere, lnea 11, representa la envolvente de colisin
esfera; y nombre es un string que guarda el nombre de la figura 3D.
Ilustracin 9-2 Diagrama de clase. Modelos esttico y dinmicos.
El constructor, lneas 14 26, toma como parmetro un objeto Model e inicializa el arreglo de
transformaciones, lneas 17 18. Cada objeto ModelMesh del Model contiene su propia envolvente de
esfera; adems se sabe que el modelo del archivo contiene un solo ModelMesh, as que solo se le asigna a la
variable boundingSphere, lnea 19. La esfera de colisin debe ser transformada por medio de una de matriz
del modelo que indica la posicin correcta y tamao del radio de la envolvente. El objeto boundingSphere
tiene un mtodo llamado Transform que sirve para trasladar o escalar el BS, lneas 21 23. El mtodo
Transform tiene dos sobrecargas, la primera toma una matriz como parmetro y devuelve un BS; la segunda
sobrecarga toma dos parmetros de entrada, el primero es la matriz de transformacin como referencia, y la
segunda es el BS como salida.
public void Transform (ref Matrix matrix, out BoundingSphere result)
Para extraer el nombre de la figura, se asigna la propiedad Name, del primer ModelMesh del modelo a la
variable nombre, lnea 25.
La propiedad EnvolventeEsfera, lnea 31, obtiene la BoundingSphere para hacer pruebas de colisin. El
mtodo Draw, lneas 33 49, dibuja el Model extrado del archivo del modelo; este mismo mtodo se vio en
el Cmo cargar modelos 3D desde un archivo X y FBX.
Por ltimo, el mtodo ToString, lneas 55 61, devuelve un string con el nombre del primer ModelMesh
del modelo 3D, el centro y radio de la esfera de colisin.
Cdigo 9-2
1.
2.
3.
4.
5.
6.
7.
8.
9.
using System;
{
public class ModeloEstatico
{
152
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.

protected BoundingSphere boundingSphere;
string nombre;
public ModeloEstatico(Model modelo)
{
this.modelo = modelo;
boundingSphere = modelo.Meshes[0].BoundingSphere;
// traslacin del centro de la envolvente
boundingSphere.Transform(
ref transformaciones[modelo.Meshes[0].ParentBone.Index],
out boundingSphere);
nombre = modelo.Meshes[0].Name;
/// <summary>
/// Propiedad que obtiene la envolvente esfera.
/// </summary>
public BoundingSphere EnvolventeEsfera { get { return boundingSphere; } }
public virtual void Draw(ref Matrix world, ref Matrix view,
ref Matrix projection)
{
{
foreach (BasicEffect basicEffect in mesh.Effects)
{
basicEffect.World = transformaciones[mesh.ParentBone.Index]
* world;
basicEffect.View = view;
basicEffect.Projection = projection;
basicEffect.PreferPerPixelLighting = true;
}// fin del foreach
mesh.Draw();
}// fin del foreach
/// <summary>
/// Propiedad que devuelve informacin de la envolvente esfera.
/// </summary>
/// <returns></returns>
public override string ToString()
{
return string.Format("{0}\nBoundingSphere.Center {1}\nRadio {2}",
nombre,
boundingSphere.Center.ToString(),
boundingSphere.Radius);
}// fin del mtodo ToString
}// fin de la clase ModeloEstatico
La clase ModeloDinamico, Error! No se encuentra el origen de la referencia., traslada la geometra con

ayuda de las teclas de navegacin o el gamepad. En caso de encontrar una colisin en contra de una
envolvente de esfera, el movimiento del objeto se detendr en esa direccin de desplazamiento, evitando
que se traslapen las figuras.
En esta clase se utilizan dos matrices de traslacin, lneas 11 12, la primera sirve para trasladar todo el
modelo tridimensional y la segunda matriz es para trasladar el centro de la esfera. La distancia mxima que
puede desplazarse la figura ser dada por la constante step, lnea 10.
La Tabla 9-1 enlista las teclas, ejes del stick derecho, y los triggers que se usan para desplazar el objeto
tridimensional.
153
Tabla 9-1
Tecla
GamePad
Up
Down
ThumbSticks.Right.Y
Right
Left
PageUp
PageDown
ThumbSticks.Right.X
Movimiento
Desplazamiento negativo sobre el eje
Z.
Desplazamiento positivo sobre el eje
Z.
X.
X.
Triggers.Right

Y.
Triggers.Left

Y.
El cuerpo del constructor no contiene ninguna inicializacin, lneas 14 17, tan solo se pasa el parmetro
modelo al constructor de la clase base.
La actualizacin de la informacin del desplazamiento se genera en el mtodo Update, lneas 19 81. La
primera parte corresponde al teclado, lneas 21 52, en donde, en cada cuerpo del condicional if se crea la
matriz de traslacin para cambiar el centro de la envolvente de esfera. Enseguida se llama al mtodo
DetenerMovimiento que actualiza la posicin de la figura y el de la envolvente. La segunda parte
corresponde al gamepad, lneas 54 80; en la creacin de cada matriz de traslacin se multiplica la
constante step por el cambio en el eje del stick o por el cambio en los triggers, luego se llama al mtodo
DetenerMovimiento.
El mtodo DetenerMovimiento, lneas 87 117, determina si el movimiento de la envolvente del objeto
ModeloDinamico continua o se debe detener. El mtodo recibe una envolvente de esfera de colisin, para
buscar la colisin con su envolvente. En la lnea 90, se traslada la envolvente del objeto ModeloDinamico
con el mtodo Transform.
La instancia del BoundingSphere contiene el mtodo Intersects, lnea 92, que comprueba la colisin
entre la envolvente actual y alguna en especfico, en este caso la del objeto esttico. El mtodo Intersects
40
est sobrecargado para las diferentes envolventes que ofrece XNA.
public bool Intersects (BoundingSphere sphere)
Tambin existe el mtodo Contains, que comprueba si el BoundingSphere actual contiene a la
envolvente dada, y al igual que Intersects, sta tambin se encuetra sobrecargada.
public ContainmentType Contains (BoundingSphere sphere)
Una vez que se ha detectado la interseccin entre las envolventes, se recorre el centro del
BundingSphere del modelo dinmico, lneas 96 -98, a una posicin anterior a la colisin; esto se logra
40
Las diferentes sobrecargas se pueden revisarse en la siguente pgina de Internet:

http://msdn.microsoft.com/query/dev10.query?appId=Dev10IDEF1&l=ESES&k=k(MICROSOFT.XNA.FRAMEWORK.BOUNDINGSPHERE.INTERSECTS)&rd=true
154
multiplicando la matriz de traslacin de la envolvente actual por menos uno y despus multiplandola por el
centro de la esfera actual.
En la Ilustracin 9-3 se muestran dos esferas A y B, la primera representa el modelo dinmico y la
segunda el esttico. El vector representa el vector unitario paralelo a la resta entre los centros y .

= |
(1)
Ilustracin 9-3 Distancia entre dos esferas
El valor de es: la diferencia entre la distancia de los vectores de posicin de los centros de las esferas y
la suma de los radios de stas.
= | | ( + )
(2)
El vector de traslacin para la esfera A estar dada por:
= | | ( + ) |
+
= ( ) 1 |
(3)
(4)
En las lneas 101 105, se calcula el valor de la distancia que falta para que las esferas estn tan cerca
como sea posible, aplicando la ecuacin (4). Tmese en cuenta que la distancia entre dos vectores
cualesquiera, es el mdulo entre la diferencia entre ellos. Por eso se utiliza el mtodo esttico Distance, de
la escructura Vector3.
Se vuelve a crear la matriz de traslacin para el centro de la esfera del modelo dinmico, lnea 106, y se
cambia la posicin de la esfera con el mtodo Transform, lneas 109 110.
Al final del condicional if se multiplica la matriz de transformacin de la esfera por la del modelo
geomtrico, para volvrselo a asignar a este ltimo.
En el mtodo Draw, lneas 126 131, se multiplica la matriz de traslacin de la geometra por la matriz
de mundo, lnea 129, por si hay alguna modificacin desde el exterior sobre la figura. Luego se hace llamar el
155
mtodo Draw de la clase base con la nueva matriz mtxTraslacion, como su primer parmetro; los dems
pasan sin cambio desde la clase hija.
Cdigo 9-3
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
using
using
using
using
System;
Microsoft.Xna.Framework;
Microsoft.Xna.Framework.Input;
Microsoft.Xna.Framework.Graphics;
{
public class ModeloDinamico : ModeloEstatico
{
private const float step = 1.0F;
private Matrix mtxTraslacion = Matrix.Identity;
private Matrix mtxTraslacionCenter;
public ModeloDinamico(Model modelo)
: base(modelo)
{
public void Update(BoundingSphere boudingSphereB)
{
#region Keyboard
{
mtxTraslacionCenter = Matrix.CreateTranslation(0, 0, -step);
DetenerMovimiento(boudingSphereB);
}
{
mtxTraslacionCenter = Matrix.CreateTranslation(0, 0, step);
}
{
mtxTraslacionCenter = Matrix.CreateTranslation(step, 0, 0);
}
{
mtxTraslacionCenter = Matrix.CreateTranslation(-step, 0, 0);
}
if (Keyboard.GetState().IsKeyDown(Keys.PageUp))
{
mtxTraslacionCenter = Matrix.CreateTranslation(0, step, 0);
}
if (Keyboard.GetState().IsKeyDown(Keys.PageDown))
{
mtxTraslacionCenter = Matrix.CreateTranslation(0, -step, 0);
}
#endregion
#region Gamepad
if (GamePad.GetState(PlayerIndex.One).ThumbSticks.Right.Y != 0.0F)
{
mtxTraslacionCenter = Matrix.CreateTranslation(0, 0, -step *
GamePad.GetState(PlayerIndex.One).ThumbSticks.Right.Y);
}
if (GamePad.GetState(PlayerIndex.One).ThumbSticks.Right.X != 0.0F)
{
mtxTraslacionCenter = Matrix.CreateTranslation(step *
GamePad.GetState(PlayerIndex.One).ThumbSticks.Right.X
, 0, 0);
156
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
}
if (GamePad.GetState(PlayerIndex.One).Triggers.Right != 0.0F)
{
mtxTraslacionCenter = Matrix.CreateTranslation(0, step *
GamePad.GetState(PlayerIndex.One).Triggers.Right, 0);
}
if (GamePad.GetState(PlayerIndex.One).Triggers.Left != 0.0F)
{
mtxTraslacionCenter = Matrix.CreateTranslation(0, -step *
GamePad.GetState(PlayerIndex.One).Triggers.Left, 0);
}
#endregion
}// fin del mtodo Update
/// <summary>
/// Mtodo que detiene el movimiento de la BS, si sta intersecta con otra.
/// </summary>
/// <param name="boudingSphereB"></param>
private void DetenerMovimiento(BoundingSphere boundingSphereB)
{
// se traslada el centro de la envolvente del modelo dinmico
boundingSphere.Transform(ref mtxTraslacionCenter, out boundingSphere);
if (boundingSphere.Intersects(boundingSphereB))
{
// se invierte el vector de traslacin para regresar la posicin
// del centro de la esfera, antes de intersecar con boundigSphereB
mtxTraslacionCenter.Translation = -mtxTraslacionCenter.Translation;
boundingSphere.Transform(ref mtxTraslacionCenter,
// se clcula la distancia a recorrer la envolvente de esfera
Vector3 distancia = (boundingSphereB.Center
boundingSphere.Center) *
(1 - (boundingSphere.Radius + boundingSphereB.Radius) /
Vector3.Distance(boundingSphereB.Center,
boundingSphere.Center));
mtxTraslacionCenter = Matrix.CreateTranslation(distancia);
// se actualiza el centro de la esfera
boundingSphere.Transform(ref mtxTraslacionCenter,
}// fin del if
// se multiplica la matriz de traslacin del centro
// de la envolvente de la esfera por la matriz de
// traslacin de la figura
mtxTraslacion *= mtxTraslacionCenter;
}// fin del mtodo DetenerMovimiento
/// <summary>
/// Mtodo que dibuja la geometra.
/// </summary>
/// <param name="world">Matriz de mundo.</param>
/// <param name="view">Matriz de vista.</param>
/// <param name="projection">Matriz de proyeccin.</param>
public override void Draw(ref Matrix world, ref Matrix view,
{
mtxTraslacion *= world;
base.Draw(ref mtxTraslacion, ref view, ref projection);
}// fin del mtodo
}
}
Para la clase Game1, Cdigo 9-4, se necesitan dos modelos que contengan un ModelMesh cada uno, y
un SpriteFont. En este ejemplo se utiliz una esfera y una tetera para representar a los objetos
157
ModeloEstatico y ModeloDinamico, respectivamente, vase Ilustracin 9-4. Cada una de estas figuras se
representar por los objetos modeloEstatico, lnea 20, y modeloDinamico, lnea 21. La variable texto, lnea
23, es para mostrar la informacin de las envolventes de esfera de cada objeto.
En el mtodo Initialize, lneas 33 46, se inicializan las matrices de mundo, vista y proyeccin. En el
mtodo LoadContent, lneas 48 58, se crean las instancias de ModeloEstatico, ModeloDinamico y Texto.
Para actualizar el estado de modeloDinamico se hace llamar su mtodo Update en el mismo de la clase
Game1, lnea 71. El parmetro que toma es la envolvente del modeloEstatico.
Ilustracin 9-4 BS vs BS
Por ltimo, se presenta el mtodo Draw, lneas 76 86, que hace llamar a los mtodos de dibujo de cada
objeto, modeloEstatico, modeloDinamico y texto. El mtodo Draw de texto, lneas 82, toma como primer
parmetro el string devuelto por el mtodo ToString de modeloEstatico, y en la lnea 83 toma el string de
modeloDinamico; para diferenciar a cada uno se le da diferentes colores al mtodo Draw de texto.
Ejecute el programa y pruebe con el gamepad o el teclado el mover el modeloDinamico, ver que la
informacin de sta cambia y al momento de acercarse tanto a la envolvente de modeloEstatico, se
detendr en seco. Esta es una manera de responder al momento de saber que existe una colisin, sin
embargo, no es la nica. Por ejemplo, se pudieron hacer este tipo de acciones al conocer que existe dicha
situacin:
Regresar al punto de inicio el modeloDinamico.

Desaparecer el modeloDinamico.
Rebotar el modeloDinamico.
El modeloDinamico rodea al modeloEstatico.
Etctera.
Cada una de esas acciones le corresponde un modelo matemtico diferente, o bien se puede crear una
fsica de cuerpos rgidos completa. Lo que por desgracia est fuera del alcance de este texto.
158
Cdigo 9-4
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
using
using
using
using
using
using
using
using
using
using
using
using
System;
System.Collections.Generic;
System.Linq;
Microsoft.Xna.Framework.Audio;
Microsoft.Xna.Framework.Content;
Microsoft.Xna.Framework.GamerServices;
Microsoft.Xna.Framework.Media;
Microsoft.Xna.Framework.Net;
Microsoft.Xna.Framework.Storage;
{
{
ModeloEstatico modeloEstatico;
ModeloDinamico modeloDinamico;
Matrix world, view, projection;
Texto texto;
public Game1()
{
}
{
world = Matrix.Identity;
view = Matrix.CreateLookAt(
new Vector3(0, 100, 350),
Vector3.Zero,
Vector3.Up);
projection = Matrix.CreatePerspectiveFieldOfView(
MathHelper.PiOver4,
1.0F, 10000.0F);
base.Initialize();
}
{
modeloEstatico = new ModeloEstatico(
Content.Load<Model>("SphereA"));
modeloDinamico = new ModeloDinamico(
Content.Load<Model>("SphereB"));
texto = new Texto(Content.Load<SpriteFont>("Arial"), GraphicsDevice);
}
{
// TODO: Unload any non ContentManager content here
}
{
if (GamePad.GetState(PlayerIndex.One).Buttons.Back ==
ButtonState.Pressed)
this.Exit();
159
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
modeloDinamico.Update(modeloEstatico.EnvolventeEsfera);
}
{
modeloEstatico.Draw(ref world, ref view, ref projection);
modeloDinamico.Draw(ref world, ref view, ref projection);
texto.Draw(modeloEstatico.ToString(), Color.Brown);
texto.Draw("\n\n\n" + modeloDinamico.ToString(), Color.Black);
}
}
}
9.2 Axis Aligned Bounding Box vs. Axis Aligned Bounding Box
La AABB por sus siglas en ingls, o Caja Envolvente Alineada con los Ejes, cubre la geometra con una caja
alineada a los ejes del mundo. Esto puede causar un inconveniente en el momento de girar la geometra,
porque puede cambiar las dimensiones de la envolvente, vase Ilustracin 9-5.
Ilustracin 9-5 AABB
La AABB se basa en dos puntos en el espacio llamados mximo y mnimo; cada uno representa en sus
coordenadas el valor mximo o mnimo de los vectores de posicin de los vrtices de la geometra. La
obtencin de dichos puntos se puede hacer buscando el menor y mayor valor entre las coordenadas de cada
vrtice de la figura tridimensional.
XNA proporciona mtodos para la obtencin de la envolvente a partir de las posiciones de los vrtices,
de una envolvente de esfera y de dos instancias de BoundingBox especificadas.
Al igual que el ejemplo de Bounding Sphere vs. Bounding Sphere, se har mover la instancia de
ModeloDinamico para mostrar el choque entre dos AABB.
La clase ModeloEstatico, Cdigo 9-5, es muy similar al Cdigo 9-2, a excepcin de la envolvente
BoundingBox, lnea 11, y el mtodo ObtenerAABB, lneas 35 -53. La primera representa un volumen 3D en
forma de caja alineado a los ejes, y el segundo es un mtodo privado que se describe ms adelante.
En la lnea 20 se obtiene la AABB a partir de la informacin del bfer de vrtices del ModelMesh. Cabe
aclarar que cada ModelMesh de un Model tiene su propio bfer, por lo tanto, en este ejemplo slo se ocupa
el primer ModelMesh.
160
El mtodo ObtenerAABB regresa un BoundingBox a partir de un VertexBuffer, que recibe como

parmetro. En las lneas 37 39, se declara un arreglo de VertexPositionNormalTexture para almacenar una
copia de los vrtices del bfer. El tamao de dicho arreglo se obtiene a partir de la divisin entre el tamao
en bytes del bfer y el tamao en bytes del tipo de dato, el resultado es el nmero de vrtices en el bfer. El
tipo de dato debe soportar toda la informacin almacenada en el bfer, de no ser as, una excepcin en
tiempo de ejecucin resultar.
La informacin almacenada en el bfer de vrtices no se puede modificar, pero si se puede leer; para ello
se hace una copia de los datos, con el mtodo VertexBuffer.GetData, lneas 40 41.
public void GetData<T> (T[] data)
Este mtodo es genrico y est sobrecargado tres veces. Las estructuras definidas por XNA, para los
vrtices son lo ms apropiados para su uso. El arreglo debe ser lo suficientemente grande para hacer la
copia y no provocar una excepcin en tiempo de ejecucin.
Una vez que se tiene la copia de los vrtices se debe extraer los vectores de posicin, el arreglo puntos,
lnea 43, es de tipo Vector3 y es de la misma dimensin que el arreglo de vrtices.
En el ciclo for, lneas 44 49, se itera a travs del arreglo de vrtices, vertexPositionNormalTexture,
para extraer la posicin y multiplicarla por la matriz de transformaciones que se obtiene del modelo, lneas
46 48; y almacenarla en el elemento correspondiente al arreglo puntos.
El mtodo esttico BoundingBox.CreateFromPoints, lnea 52, crea el BoundingBox a partir de un grupo
41
de puntos. Este mtodo tambin acepta un List como entrada, pues ocupa una interfaz IEnumerable.
public static BoundingBox CreateFromPoints (IEnumerable<Vector3> points)
Cdigo 9-5
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
41
using System;
{
{
protected BoundingBox boundingBox;
string nombre;
{
boundingBox = ObtenerAABB(modelo.Meshes[0].VertexBuffer);
/// <summary>
/// Propiedad que obtiene la AABB.
/// </summary>
public BoundingBox EnvolventeCaja { get { return boundingBox; } }
///
///
///
///
///
<summary>
Mtodo que obtiene la AABB.
</summary>
<param name="vertexBuffer">Bfer de vrtices.</param>
<returns></returns>
Representa una lista de objetos.
161
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
private BoundingBox ObtenerAABB(VertexBuffer vertexBuffer)

{
VertexPositionNormalTexture[] vertexPositionNormalTexture =
new VertexPositionNormalTexture[vertexBuffer.SizeInBytes
/ VertexPositionNormalTexture.SizeInBytes];
vertexBuffer.GetData<VertexPositionNormalTexture>(
vertexPositionNormalTexture);
// se copian las posiciones de los puntos en un arreglo de Vector3
Vector3[] puntos = new Vector3[vertexPositionNormalTexture.Length];
for (int i = 0; i < vertexPositionNormalTexture.Length; i++)
{
puntos[i] = Vector3.Transform(
vertexPositionNormalTexture[i].Position,
transformaciones[modelo.Meshes[0].ParentBone.Index]);
}// fin del for
// se crea el BoundinBox a partir de un arreglo de puntos
return BoundingBox.CreateFromPoints(puntos);
}// fin del mtodo ObtenerAABB
{
{
{
* world;
}// fin del foreach
mesh.Draw();
}// fin del foreach
{
return string.Format("{0}\nBoundingBox.Min {1}\nBoundingBox.Max {2}",
nombre, boundingBox.Min, boundingBox.Max);
}// fin de la clase ModeloEstatico
}// fin del namespace TutorialX13
Al igual que en el ejemplo de Bounding Sphere vs. Bounding Sphere, se tiene una clase ModeloDinamico
que cambia la posicin del modelo tridimensional, con el teclado o el gamepad. La asignacin de acciones
para el teclado y los elementos del control del Xbox son los mismos que en el subtema anterior.
En el Cdigo 9-6 la variable de instancia mtxTraslacionPuntos, lnea 11, sirve como una matriz de
transformacin para los puntos mximo y minmo del AABB. La variable direccion, lnea12, es un numerador
que presenta las seis posibles traslaciones, la definicin de dicha numeracin se presenta en el El mtodo
Draw, lneas 171 176, no sufre ningn cambio con relacin al visto en el Cdigo 9-3.
Cdigo 9-7.
El mtodo Update, lneas 19 98, en cada condicional if se establece la direccin de hacia donde se
mueve la figura, se crea la matrix de traslacin y se hace llamar al mtodo DetenerMovimiento.
Como en el subtema anterior, se hace mover primero los puntos de la AABB a travs de la matriz
mtxTraslacionPuntos, concebida en el mtodo Update, para conocer si existe colisin entre cajas. En caso
de que exista, se hace retroceder la caja a una posicin anterior y se calcula una distancia lo suficientemente
cercana entre los lmites de las cajas. Luego se hace mover los puntos, esa distancia, y por ltimo se
multiplica la matriz de traslacin de puntos por la matriz de traslacin de la figura y el resultado es asignado
a esta ltima. Si no existiera dicha colisin, solo se hace este ltimo paso.
162
El mtodo DetenerMovimiento, lneas 104 163, calcula las matrices de traslacin para la figura
tridimensional y para los puntos de la AABB, que en realidad siempre est empujando la envolvente de caja
a una posicin prudente para que no exista interseccin. En la primera parte de este mtodo se multiplican
los puntos mximo y mnimo, de la AABB del objeto ModeloDinamico, por la matriz mtxTraslacionPuntos,
lneas 117 120. Enseguida se busca la existencia de una interseccin entre las envolventes del modelo
esttico, boundingBoxB, y el dinmico, boundingBox, lnea 112. Si el mtodo Intersects devuelve un valor
verdadero, se comienza por retroceder los puntos del boundingBox a un estado anterior, esto se logra
multiplicando la matriz de mtxTraslacionPuntos por menos uno, lnea 115, para luego aplicarlo sobre los
puntos Min y Max de boundingBox, lneas 117 120.
Se crea una variable de tipo flotante llamada dist, lnea 124, que sirve como margen de error para evitar
que la distancia entre los lmites de las AABB sea cero, permitiendo que se acerque tanto como sea posible
para mover el boundingBox en otra direccin.
En la instruccin de control switch, lneas 125 154, se selecciona la direccin en la que se pretende
mover el modelo dinmico. Esta seleccin sirve para realizar la operacin correcta entre los puntos mximo
y mnimo de las AABB de cada objeto. Por ejemplo, en la Ilustracin 9-6, se tienen dos cajas. A representa el
modelo dinmico y B es el modelo esttico. Los puntos naranjas indican los puntos mximos, y los verdes
son los puntos mnimos de cada envolvente. La caja A se mueve en direccin de z positivo, lo que indica que
su direccin es hacia atrs, y la distancia a recorrer A hacia B es el valor absoluto de la resta entre el
componente z del punto mnimo de B menos el componente z del punto mximo de A. Este mismo
razonamiento se aplica en cada posible movimiento de la envolvente A.
= | |
(1)
Ilustracin 9-6 Distancia entre AABBs
Sin embargo, al hacer la distancia d cero, el mtodo Intersects del BoundingBox seguir arrogando un
valor verdadero, an si el movimiento siguiente no provoque una colisin. Es por eso que se agrega una
constante de error a la ecuacin 1. Esta constante debe ser muy pequea, para no ser percibida en el dibujo
final.
= | | +
(2)
Continuando con el enlistado, dentro del primer case, lnea 127, se clcua la distancia con la ecuacin 2,
lnea 128, enseguida se crea la matriz de traslacin de los puntos, lnea 129. En cada caso se debe utilizar
una ecuacin diferente para obtener la distancia correcta a recorrer la figura y la envolvente. Al final del
swtich se calculan las nuevas posiciones de los puntos del boundingBox, lneas 156 159.
163
Independientemente, si el cuerpo del condicional if es alcanzado o no, se multiplica la matriz de

traslacin de los puntos, mtxTraslacionPuntos, por la matriz de traslacin de la figura, mtxTraslacion y el
resultado es guardado en esta ltima, lnea 162.
Cdigo 9-6
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
using System;
using Microsoft.Xna.Framework.Input;
{
public class ModeloDinamico : ModeloEstatico
{
private const float step = 1.0F;
private Matrix mtxTraslacion = Matrix.Identity;
private Matrix mtxTraslacionPuntos;
private Direccion direccion;
public ModeloDinamico(Microsoft.Xna.Framework.Graphics.Model modelo)
: base(modelo)
{
public void Update(BoundingBox boundingBoxB)
{
#region Keyboard
{
direccion = Direccion.Adelante;
mtxTraslacionPuntos = Matrix.CreateTranslation(0, 0, -step);
DetenerMovimiento(boundingBoxB);
}
{
direccion = Direccion.Atras;
mtxTraslacionPuntos = Matrix.CreateTranslation(0, 0, step);
}
{
direccion = Direccion.Derecha;
mtxTraslacionPuntos = Matrix.CreateTranslation(step, 0, 0);
}
{
direccion = Direccion.Izquierda;
mtxTraslacionPuntos = Matrix.CreateTranslation(-step, 0, 0);
}
if (Keyboard.GetState().IsKeyDown(Keys.PageUp))
{
direccion = Direccion.Arriba;
mtxTraslacionPuntos = Matrix.CreateTranslation(0, step, 0);
}
if (Keyboard.GetState().IsKeyDown(Keys.PageDown))
{
direccion = Direccion.Abajo;
mtxTraslacionPuntos = Matrix.CreateTranslation(0, -step, 0);
}
#endregion
#region Gamepad
if (GamePad.GetState(PlayerIndex.One).ThumbSticks.Right.Y < 0)
{
direccion = Direccion.Atras;
mtxTraslacionPuntos = Matrix.CreateTranslation(0, 0, step);
164
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
}
if (GamePad.GetState(PlayerIndex.One).ThumbSticks.Right.Y > 0)
{
direccion = Direccion.Adelante;
mtxTraslacionPuntos = Matrix.CreateTranslation(0, 0, -step);
}
if (GamePad.GetState(PlayerIndex.One).ThumbSticks.Right.X < 0)
{
direccion = Direccion.Izquierda;
mtxTraslacionPuntos = Matrix.CreateTranslation(-step, 0, 0);
}
if (GamePad.GetState(PlayerIndex.One).ThumbSticks.Right.X > 0)
{
direccion = Direccion.Derecha;
mtxTraslacionPuntos = Matrix.CreateTranslation(step, 0, 0);
}
if (GamePad.GetState(PlayerIndex.One).Triggers.Right != 0)
{
direccion = Direccion.Arriba;
mtxTraslacionPuntos = Matrix.CreateTranslation(0, step, 0);
}
if (GamePad.GetState(PlayerIndex.One).Triggers.Left != 0)
{
direccion = Direccion.Abajo;
mtxTraslacionPuntos = Matrix.CreateTranslation(0, -step, 0);
}
#endregion
/// <summary>
/// Mtodo que detiene el movimiento de la BS, si sta intersecta con otra.
/// </summary>
/// <param name="boudingSphereB"></param>
private void DetenerMovimiento(BoundingBox boundingBoxB)
{
// se trasladan los puntos Min y Max de BoundingBox
Vector3.Transform(ref boundingBox.Min, ref mtxTraslacionPuntos,
out boundingBox.Min);
Vector3.Transform(ref boundingBox.Max, ref mtxTraslacionPuntos,
out boundingBox.Max);
if (boundingBox.Intersects(boundingBoxB))
{
// se regresan los puntos a una posicin anterior
mtxTraslacionPuntos.Translation = -mtxTraslacionPuntos.Translation;
// se calcula la distancia que falta para que
// las envolventes estn tan cerca
// como para no intersecarse
float dist = -0.01F;
switch (direccion)
{
case Direccion.Atras:
dist += Math.Abs(boundingBoxB.Min.Z - boundingBox.Max.Z);
mtxTraslacionPuntos = Matrix.CreateTranslation(0, 0, dist);
break;
case Direccion.Adelante:
dist += Math.Abs(boundingBox.Min.Z - boundingBoxB.Max.Z);
mtxTraslacionPuntos = Matrix.CreateTranslation(
0, 0, -dist);
break;
165
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
case Direccion.Derecha:
dist += Math.Abs(boundingBoxB.Min.X - boundingBox.Max.X);
mtxTraslacionPuntos = Matrix.CreateTranslation(dist, 0, 0);
break;
case Direccion.Izquierda:
dist += Math.Abs(boundingBox.Min.X - boundingBoxB.Max.X);
-dist, 0, 0);
break;
case Direccion.Abajo:
dist += Math.Abs(boundingBox.Min.Y - boundingBoxB.Max.Y);
0, -dist, 0);
break;
case Direccion.Arriba:
dist += Math.Abs(boundingBoxB.Min.Y - boundingBox.Max.Y);
mtxTraslacionPuntos = Matrix.CreateTranslation(0, dist, 0);
break;
};
// se trasladan los puntos a la nueva posicin
}// fin del if
mtxTraslacion *= mtxTraslacionPuntos;
}// fin del mtodo DetenerMovimiento
/// <summary>
/// Mtodo que dibuja la geometra.
/// </summary>
/// <param name="world">Matriz de mundo.</param>
/// <param name="view">Matriz de vista.</param>
/// <param name="projection">Matriz de proyeccin.</param>
public override void Draw(ref Matrix world, ref Matrix view,
{
mtxTraslacion *= world;
base.Draw(ref mtxTraslacion, ref view, ref projection);
}// fin del mtodo
}// fin de la clase
El mtodo Draw, lneas 171 176, no sufre ningn cambio con relacin al visto en el Cdigo 9-3.
Cdigo 9-7
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
using System;
{
public enum Direccion
{
Adelante,
Atras,
Abajo,
Arriba,
Derecha,
Izquierda,
}
}
Para probar la colisin entre las AABBs se reutiliza el Cdigo 9-4, con un ligero cambio en la llamada del
mtodo Update, lnea 71; pues esta vez se pasa como parmetro una BoundingBox.
modeloDinamico.Update(modeloEstatico.EnvolventeCaja);
166
Corra la aplicacin y corrija cualquier error en tiempo de ejecucin que pudiera suceder. En la Ilustracin
9-7 se muestran dos figuras de elefante colisionando.
Ilustracin 9-7 AABB vs. AABB
9.3 Ray vs. Boundign Sphere

A pesar que las envolventes de colisin ayudan en gran medida a conocer si dos o ms figuras impactan,
reduciendo los clculos y tiempos para la computadora; a veces existen cosas pequeas que bien podran
ser abstradas como partcula, permitiendo un mejor desempeo computacional que si se hubieran
manejado como esfera u otra envolvente. Por ejemplo:
La deteccin de una colisin de un proyectil en contra de un objeto se puede calcular omitiendo el
tamao, la friccin, el peso, temperatura y dems factores que podran alterar su trayectoria, antes de
chocar. Lo que nos queda como estudio es la posicin a partir de la cual se lanza y la direccin que toma.
El rayo es un ente que parte de un punto en el espacio e indica una trayectoria a partir de un vector de
direccin. Ray es la estructura que XNA ofrece para el rayo.
Rayo no es considerado como un volumen de envolvente, pues no existe el conjunto de vrtices al cual
cubrir. Sin embargo, se pueden tener pruebas de interseccin entre el rayo y las envolventes.
En el siguiente ejemplo se muestra un sprite como mira, para orientar la vista y poder seleccionar algn
elemento rodeado por una BS. Cuando la mira est apuntando a alguna envolvente de esfera, cambiar su
color original a rojo, indicando que puede ser seleccionada. La figura elegida cambiar su color ambiental
negro por rojo, despus de un segundo, retornar a su color original. El movimiento de la cmara se har a
travs del gamepad.
9.3.1
Cmara libre
Los movimientos de la cmara libre no tienen alguna restriccin, permitiendo cualquier observacin en
cualquier punto, en cualquier modo de orientacin. La cmara puede trasladarse sobre sus propios ejes y
rotar alrededor de ellos. Los ejes de la cmara que se manejan en el ejemplo son: Up, Binormal y Direccin,
vase Ilustracin 9-8. El primero permite tener una nocin de donde es arriba y abajo; el segundo es
perpendicular a Up y Direccin. El ltimo, es resultado de la resta entre el vector de observacin y la
posicin de la cmara.
167
Ilustracin 9-8 Vectores de la cmara
En la clase CamaraLibre, Cdigo 9-8, las variables de instancia posicion, objetivo y up, lnea 9, son las
necesarias para obtener la matriz de vista mtxVista, lnea 10, con el mtodo CreateLookAt. La variable
playerIndex, lnea 11, es para seleccionar al jugador que controla la cmara, por medio del gamepad. Los
ejes binormal, lnea 12, y direccin, lnea 13, estn representados por las variables de su mismo nombre, y
que ayudaran a calcular las transformaciones sobre la matriz de vista. La traslacin y rotacin de la cmara
estarn dadas por las matrices mtxTraslacion, lnea 14, y mtxRotacion, lnea 15. La sensibilidad, lnea 16,
denota que tan rpido puede girar la cmara al cambio sobre el stick o triggers del gamepad. La variable
pasoMaximo, lnea 17, le da un valor mximo a los cambios sobre el stick, para trasladar la cmara. La
ltima variable de instancia, invertirVista, lnea 18, permite cambiar el sentido en que gira la cmara sobre
el eje binormal.
El constructor debe recibir los vectores que definen la matriz de vista, el valor de la variable de slo
lectura, pasoMaximo; y el nmero del jugador. En el cuerpo del constructor se inicializan algunas variables
de instancia, lneas 32 38, y se hace llamar al mtodo Inicializar, lneas 72 80. En este ltimo, se calculan
los ejes de la cmara y la matriz de vista.
El clculo del vector direccin est dada por:
= | |
(1)
Donde es el vector de observacin y es el vector de posicin de la cmara. El operador est

sobrecargado para las estructuras que definen un vector, lnea 75, y matrices. Adems estas estructuras
contienen mtodos que completan las operaciones sobre los vectores o matrices; el mtodo Normalize,
lnea 76, crea un vector unitario.
El vector unitario binormal es el resultado de la normalizacin del producto cruz entre los vectores
direccin y objetivo, tmese en cuenta que el producto cruz no cumple con la propiedad de conmutacin.
=
(2)
Donde es el vector direccin y es el vector de observacin. El mtodo esttico Cross, lnea 77,
obtiene el producto cruz. Estos mtodos sobre los vectores o matrices, tienen sobrecargas que permiten
42
de valores a sus parmetros y es cuestin del desarrollador elegir
seleccionar el tipo de paso
adecuadamente cul es el mejor.
42
Existen dos formas de pasar los valores a un mtodo: por valor o por referencia. El paso por valor hace una copia de la informacin
evitando alterar la fuente.
168
Al final del mtodo Inicializar se crea la matriz de vista, lnea 79, unque no es necesario normalizar el
vector up para el mtodo CreateLookAt, si lo ser para los clculos de rotacin.
La propiedad MtxVista, lnea 45, obtiene el valor de la matriz de vista, parte importante para el render;
la propiedad Direccion, lnea 50, obtiene el vector de direccin de la cmara, ste sirve para definir el rayo;
la propiedad Posicion, lnea 55, obtiene el vector de posicin de la cmara, tambin importante para crear
un rayo. La nica propiedad que obtiene o establece valores es Sensibilidad, lneas 61 70, permitiendo
cambiar fuera de la instancia la rapidez con que puede cambiar el giro de la cmara sobre sus ejes. La
Sensibilidad es el ngulo, expresado en radianes, restringido entre uno a diez grados, en caso que el valor a
establecer se encuentre fuera de este rango, se le asigna un grado.
El mtodo AdelanteAtras, lneas 82 89, hace avanzar la cmara sobre su eje direccin positivamente o
negativamente, dependiendo del signo del parmetro de entrada. En el cuerpo de ste, se crea la matriz de
traslacin, lnea 84, a partir del vector de direccin y los escalares pasoMaximo y paso. Enseguida se
multiplica la matriz por los vectores posicin y objetivo, lneas 86 87, para luego crear la matriz de vista,
lnea 88.
Para hacer avanzar la cmara en direccin positivo o negativo sobre el eje binormal, el mtodo
DerechaIzquierda, lneas 91 97, utiliza la mismas operaciones que el mtodo AdelanteAtras, pero
utilizando el vector binormal como eje de traslacin, lnea 93.
Los giros de la cmara se hacen alrededor de sus ejes, y a cada uno le corresponde un mtodo cuyo
nombre corresponde a las distintas superficies de control de un avin, vase Ilustracin 9-9.
Ilustracin 9-9 Superficies de control del avin
El mtodo Guiada, lneas 99 108, hace rotar la cmara alrededor del vector Up, cambiando los ejes
direccin y up; el parmetro de entrada, as como en los otros dos mtodos de giro, es una variable de tipo
flotante que representa el ngulo de cambio. El ngulo es multiplicado por la propiedad Sensibilidad, y el
valor obtenido se almacena en la variable angulo, lnea 101. Luego se crea la matriz de rotacin
mtxRotacion con el mtodo Matrix.CreateFromAxesAngle, lnea 102. Este mtodo crea una matriz que gira
alrededor de un vector arbitrario, por lo tanto su parmetros son el vector y el escalar como ngulo. Una vez
obtenido la matriz de rotacin, se les multiplica a los vectores de direccin y up para girarlos, lneas 103
104. Ahora que se han actualizado los ejes de la cmara, es momento de cambiar el vector objetivo de la
matriz de vista, lnea 105; a partir de la ecuacin (1) se obtiene el valor de dicho vector.
= +
(3)
Ntese que el vector objetivo no es un vector unitario, por eso se ha omitido la normalizacin.
El paso por referencia no hace una copia del valor, sino apunta a la direccin sobre la cual se encuentra la informacin, evitando
redundancia, lo que permite cambiar el valor de la fuente.
Los mtodos cuyos parmetros son estructuras, por default pasan por valor, a menos que se indique lo contrario por medio de las
palabras clave out o ref.
169
Al final, se actualiza la matriz de vista, creando una nueva con Matriz.CreateLookAt, lnea 106.
El siguiente mtodo, Inclinacin, gira la cmara alrededor del vector binormal, afectando los ejes
direccin y up. Las operaciones son las mismas que en el mtodo Guiada, se crea la matriz de rotacin
alrededor del eje binormal, lnea112, se multiplica la matriz por los vectores de direccin y up, lneas 113
114; se actualiza el vector objetivo, lnea 115; y se crea una nueva matriz de vista, lnea 116.
El mtodo Balanceo gira la cmara alrededor del eje direccin, afectando los vectores binormal y up. As
que primero se crea la matriz de rotacin alrededor del vector direccin, lnea 122, se multiplica esta matriz
por los vectores binormal y up, lneas 123 124; y se actualiza la matriz de vista, lnea 125.
En la Tabla 9-2 se muestra la asignacin de movimientos en el gamepad para describir el mtodo
Update, lneas 128 158.
Tabla 9-2
Gamepad
Momiviento
ThumbSticks.Right.X
Guiada
ThumbSticks.Right.Y
Inclinacin
ThumbSticks.Left.X
DerechaIzquierda
ThumbSticks.Left.Y
ArribaAbajo
Triggers.Right
Balanceo
Triggers.Left
Balanceo
El mtodo Update no se describir a detalle, pues una vez descrita la tabla anterior, es muy fcil
implementarla; a excepcin del uso del ThumbSticks.Richt.Y, donde el uso de un condicional if anidado,
lneas 136 140, verifica en qu sentido se debe hacer el cambio de la cmara para mirar hacia arriba o
hacia abajo. Si el valor de la propiedad InvertirVista es verdadero, el cambio sobre el ThumbSticks.Right.Y
se multiplicar por menos uno y se le pasar como parmetro al mtodo privado Inclinacin; en caso
contrario el valor del ThumbSitck no se alterar.
Cdigo 9-8
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
using System;
{
public class CamaraLibre
{
private Vector3 posicion, objetivo, up;
private Matrix mtxVista;
private PlayerIndex playerIndex;
private Vector3 binormal;
private Vector3 direccion;
private Matrix mtxTraslacion;
private Matrix mtxRotacion;
private Single sensibilidad;
private readonly Single pasoMaximo;
public Boolean InvertirVista;
/// <summary>
/// Constructor
170
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
/// </summary>
/// <param name="position">Posicin de la cmara.</param>
/// <param name="objetivo">Objetivo de la cmara.</param>
/// <param name="up">Vector Up de la cmara.</param>
/// <param name="pasoMaximo">Paso mximo al que se
/// movera la cmara.</param>
/// <param name="playerIndex">Nmero de jugador.</param>
public CamaraLibre(Vector3 posicion, Vector3 objetivo,
Vector3 up, Single pasoMaximo, PlayerIndex playerIndex)
{
this.posicion = posicion;
this.objetivo = objetivo;
this.up = up;
this.playerIndex = playerIndex;
this.pasoMaximo = pasoMaximo;
Sensibilidad = 1.0F;
InvertirVista = true;
Inicializar();
/// <summary>
/// Propiedad que obtiene la matriz de vista.
/// </summary>
public Matrix MtxVista { get { return mtxVista; } }
/// <summary>
/// Propiedad que obtiene la direccin de la cmara.
/// </summary>
public Vector3 Direccion { get { return direccion; } }
/// <summary>
/// Propiedad que obtiene la posicin de la cmara.
/// </summary>
public Vector3 Posicion { get { return posicion; } }
/// <summary>
/// Propiedad que obtiene o establece la sensibilidad
/// de giro de la cmara.
/// </summary>
public Single Sensibilidad
{
get { return sensibilidad; }
set
{
sensibilidad = MathHelper.ToRadians(
(value >= 1 && value <= 10) ?
value : 1.0F);
}
}// fin de la propiedad Sensibilidad
private void Inicializar()
{
up.Normalize();
direccion = objetivo - posicion;
direccion.Normalize();
Vector3.Cross(ref direccion, ref up, out binormal);
binormal.Normalize();
mtxVista = Matrix.CreateLookAt(posicion, objetivo, up);
}// fin del mtodo Inicializar
private void AdelanteAtras(Single paso)
{
mtxTraslacion = Matrix.CreateTranslation(pasoMaximo * paso *
direccion);
Vector3.Transform(ref posicion, ref mtxTraslacion, out posicion);
Vector3.Transform(ref objetivo, ref mtxTraslacion, out objetivo);
}// fin del mtodo AdelanteAtras
private void DerechaIzquierda(Single paso)
{
171
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
mtxTraslacion = Matrix.CreateTranslation(pasoMaximo * paso * binormal);

Vector3.Transform(ref posicion, ref mtxTraslacion, out posicion);
Vector3.Transform(ref objetivo, ref mtxTraslacion, out objetivo);
}// fin del mtodo DerechaIzquierda
private void Guiada(Single angulo)
{
angulo *= Sensibilidad;
mtxRotacion = Matrix.CreateFromAxisAngle(up, angulo);
Vector3.Transform(ref direccion, ref mtxRotacion, out direccion);
Vector3.Transform(ref binormal, ref mtxRotacion, out binormal);
objetivo = posicion + direccion;
}// fin del mtodo
private void Inclinacion(Single angulo)
{
mtxRotacion = Matrix.CreateFromAxisAngle(binormal, angulo);
Vector3.Transform(ref direccion, ref mtxRotacion, out direccion);
Vector3.Transform(ref up, ref mtxRotacion, out up);
objetivo = posicion + direccion;
}// fin del mtodo
private void Balanceo(Single angulo)
{
mtxRotacion = Matrix.CreateFromAxisAngle(direccion, angulo);
Vector3.Transform(ref binormal, ref mtxRotacion, out binormal);
Vector3.Transform(ref up, ref mtxRotacion, out up);
}// fin del mtodo
public void Update()
{
if (GamePad.GetState(playerIndex).ThumbSticks.Right.X != 0)
{
Guiada(-GamePad.GetState(playerIndex).ThumbSticks.Right.X);
}
if (GamePad.GetState(playerIndex).ThumbSticks.Right.Y != 0)
{
if(InvertirVista)
Inclinacion(
-GamePad.GetState(playerIndex).ThumbSticks.Right.Y);
else
Inclinacion(GamePad.GetState(playerIndex).ThumbSticks.Right.Y);
}
if (GamePad.GetState(playerIndex).ThumbSticks.Left.X != 0)
{
DerechaIzquierda(GamePad.GetState(playerIndex).ThumbSticks.Left.X);
}
if (GamePad.GetState(playerIndex).ThumbSticks.Left.Y != 0)
{
AdelanteAtras(GamePad.GetState(playerIndex).ThumbSticks.Left.Y);
}
if (GamePad.GetState(playerIndex).Triggers.Right != 0)
{
Balanceo(GamePad.GetState(playerIndex).Triggers.Right);
}
if (GamePad.GetState(playerIndex).Triggers.Left != 0)
{
Balanceo(-GamePad.GetState(playerIndex).Triggers.Left);
}
}// fin de la clase
172
9.3.2
La clase Mira
La clase Mira representa un sprite que es dibujado en medio del viewport, Cdigo 9-9, y cambia de
textura cada vez que ha encontrado un BS con el que colisiona un rayo.
El graphicsDevice, lnea 9, sirve para obtener las dimensiones del viewport y poder crear el spriteBatch,
lnea 10; la texturas A y B, lnea 11, sern los dos posibles sprites a dibujar; la variable rectangulo, lnea 12,
constituye las dimensiones del sprite; y la variable preparado, lnea 13, selecciona qu textura se dibujar.
El constructor, lneas 15 26, tiene como parmetros las dos texturas, el ancho y alto para definir el
rectngulo; y el graphicsDevice. Dentro del cuerpo se incializan y se crean las variables de instancia. El
constructor Rectangle, lneas 23 26, pide el valor en entero de la coordenada x de la posicin de la esquina
superior izquierda del rectngulo, en el viewport; el valor en entero de la coordenada y de la misma esquina,
el ancho y alto del rectngulo. As que para centrar el rectngulo en el viewport se le resta al ancho del
viewport el ancho del rectngulo y se le divide entre dos, y lo mismo sucede para el alto; recurdese que los
valores deben ser enteros, y la conversin explicita de float a int, lneas 24 25, es obligatoria.
El mtodo Update actualiza el valor de la variable preparado, a partir de la colisin entre un rayo y una
envolvente de esfera. Sus parmetros son el rayo y un arreglo de objetos ModeloEstatico de donde se
obtienen las BS.
Para seleccionar cada BS se hace pasar el arreglo de ModeloEstatico por un bucle foreach, lneas 30 39,
y a cada uno se le hace la prueba de interseccin, Ray vs. BS, lnea 32; la prueba regresa un
43
Nullable <float>, esto indica que el elemento puede ser del tipo de dato T, en este caso float, o puede ser
null. En caso que la prueba haya encontrado una interseccin, el mtodo regresa la distancia del punto de
posicin del rayo a la envolvente, en caso contrario regresa un null. El mtodo Ray.Intersects est
sobrecargado para aceptar otras envolventes.
public Nullable<float> Intersects (BoundingSphere sphere)
El condicional if, lnea 32, selecciona cualquier valor diferente de null, para cambiar el estado del
booleano, preparado, a verdadero y salir del ciclo foreach con la instruccin break; en caso contrario se le
asigna el valor falso a la variable preparado.
El mtodo Update se hace llamar desde fuera de la clase, y no est sujeto a alguna interrupcin de una
entrada estndar o el gamepad, as que siempre que se llame a este mtodo se har recorrer el arreglo de
ModeloEstatico para buscar la condicin para cambiar la textura. La llamada a este mtodo, pudo hacerse
dentro del mtodo Draw de esta misma clase, pero se ha dejado as para seguir con la separacin de tareas
entre los mtodos Draw y Update de la clase Game.
Con el mtodo Draw, lneas 42 51, se dibuja el sprite seleccionado por el booleano, lneas 46 49, al
final del mtodo spriteBath.End se cambia la propiedad DepthBufferEnable a verdadero, lnea 50, ya que el
mtodo spriteBatch.Draw lo cambia.
Cdigo 9-9
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
43
using System;
{
public class Mira
{
GraphicsDevice graphicsDevice;
Texture2D texturaA, texturaB;
Rectangle rectangulo;
Boolean preparado;
http://msdn.microsoft.com/es-es/library/b3h38hb0.aspx
173
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
public Mira(Texture2D texturaA, Texture2D texturaB, Int32 ancho,

Int32 alto, GraphicsDevice graphicsDevice)
{
this.graphicsDevice = graphicsDevice;
spriteBatch = new SpriteBatch(graphicsDevice);
this.texturaA = texturaA;
this.texturaB = texturaB;
// se crea el rectangulo y se posiciona al centro de la pantalla
rectangulo = new Rectangle(
(int)(graphicsDevice.Viewport.Width - ancho) / 2,
(int)(graphicsDevice.Viewport.Height - alto) / 2, ancho, alto);
public void Draw()

{
if(preparado)
spriteBatch.Draw(texturaB, rectangulo, Color.White);
else
spriteBatch.Draw(texturaA, rectangulo, Color.White);
spriteBatch.End();
graphicsDevice.RenderState.DepthBufferEnable = true;
}// fin de la clase
9.3.3
La clase Proyectil
public void Update(Ray rayo, ModeloEstatico[] modelosEstaticos)

{
foreach (ModeloEstatico modelo in modelosEstaticos)
{
if (rayo.Intersects(modelo.EnvolventeEsfera) != null)
{
preparado = true;
break;
}
else
preparado = false;
}// fin del foreach
La clase Proyectil, Cdigo 9-10, busca impactar un rayo con alguna envolvente de esfera, cada vez que se
presiona el botn A del gamepad.
PlayterIndex, lnea 9, es para conocer qu jugador ha disparado el proyectil, y distancia, lnea 10, es para
conocer el blanco con el que se ha impactado primero. Al constructor solo se le hace pasar el playerIndex
para inicializar la variable de instancia del mismo nombre.
Update, lneas 17 22, es el mtodo en donde se busca impactar el proyectil con alguna BS que se
encuentre en su paso. Para eso necesita datos del exterior, como la posicin de dnde se hizo el disparo, la
direccin del mvil y un arreglo de objetos ModeloEstatico, para hacer la bsqueda.
Cada vez que se presiona el botn A del Gamepad se llama al mtodo Impactar, lneas 30 35, el cual ya
recibe un rayo y el arreglo de modelos como parmetros. La variable de tipo Nullable<Int32>, lneas 32, es
para conocer el ndice del arreglo en donde se ha impactado el proyectil. El mtodo privado Indice regresa
dicho valor, a partir del rayo y el arreglo. Una vez encontrado el ndice, se cambia la propiedad Seleccionado
del modelo, lnea 34, a verdadero.
Un proyectil no puede impactar a ms de un modelo, por eso la distancia mnima entre la posicin del
disparo y la envolvente debe ser la mnima entre aquellos que puede intersecar. La variable distMIn, lnea
46, representa dicha situacin; unaVez es para conocer que al menos se ha encontrado una distancia de la
prueba Intersects e indice indica el valor encontrado del arreglo.
En el bucle for, lneas 50 59, se hace la prueba Intersects del objeto ray a cada una de las envolventes,
lnea 52, el valor arrojado por el mtodo se alojar en distancia. El primer if, lnea 54, selecciona cualquier
174
valor diferente de null, o sea cualquier colisin hallada. En el primer if anidado, lnea 56, se le asigna a
distMin del valor en flotate de la prueba de interseccin, es importante que el valor de la variable distancia
no sea null, porque arrojara un error en tiempo de ejecucin; luego se cambia la variable unaVez a falso,
lnea 59, y a indice se le asigna el nmero del elemento con el que encontr colisin, lnea 60. Para evitar la
prueba del segundo if anidado, se hace uso de la instruccin continue, lnea 61, para seguir con la siguiente
iteracin del bucle for.
En el segundo if anidado, lneas 63 67, se hace la comparacin entre la distancia mnima y la distancia
actual encontrada, lnea 63; en caso que sta ltima sea menor, se cambia el valor de la distancia mnima
por la actual, lnea 65, y el nmero del ndice se actualiza por el del elemento con el que se colision, lnea
66.
Al final del ciclo for, se regresa el nmero del ndice del arreglo con el que se tiene una distancia mnima,
en comparacin con otra con la que se haya encontrado.
Cdigo 9-10
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
using System;
{
public class Proyectil
{
PlayerIndex playerIndex;
Nullable<Single> distancia;
public Proyectil(PlayerIndex playerIndex)
{
this.playerIndex = playerIndex;
public void Update(Vector3 posicion, Vector3 direccion,
ModeloEstatico[] modeloEstatico)
{
if (GamePad.GetState(playerIndex).Buttons.A == ButtonState.Pressed)
Impactar(new Ray(posicion, direccion), modeloEstatico);
/// <summary>
/// Mtodo que selecciona el modelo esttico
/// sobre el que se ha impactado la bala.
/// </summary>
/// <param name="rayo"></param>
/// <param name="modeloEstatico"></param>
private void Impactar(Ray rayo, ModeloEstatico[] modeloEstatico)
{
Int32? i = Indice(rayo, modeloEstatico);
if (i != null)
modeloEstatico[i.Value].Seleccionado = true;
}// fin del mtodo
/// <summary>
/// Mtodo que devuelve el ndice del modelo esttico
/// con el que se ha impactado la bala.
/// </summary>
/// <param name="rayo"></param>
/// <param name="modelos"></param>
/// <returns></returns>
private Nullable<Int32> Indice(Ray rayo, ModeloEstatico[] modelos)
{
Single distMin = 0.0F;
bool unaVez = true;
Int32? indice = null;
for (Int32 i = 0; i < modelos.Length; i++)
{
175
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
distancia = rayo.Intersects(modelos[i].EnvolventeEsfera);
// signifa que existe una interseccin
if (distancia != null)
{
if (unaVez)
{
distMin = distancia.Value;
unaVez = false;
indice = i;
continue;
}
if (distMin > distancia.Value)
{
distMin = distancia.Value;
indice = i;
}
}// fin del if
}// fin del for
return indice;
}// fin del mtodo Indice
}// fin de la clase

9.3.4
La clase ModeloEstatico

{
return string.Format("Distancia: {0}", distancia);
La clase ModeloEstatico, Cdigo 9-11, se ha aumentado el nmero de lneas de cdigo, al visto en

Bounding Sphere vs. Bounding Sphere, Cdigo 9-2. Por lo tanto solo aquellas nuevas lneas se explicaran.
ColorAmbiental es una variable de instancia pblica, lnea 13, que ayudar a cambiar el color ambiental
del shader predeterminado de XNA. El booleano Seleccionado, lnea 14, es para indicar que la instancia del
ModeloEstatico ha sido seleccionado para cambiar el color ambiental. Al ser seleccionado la instancia, el
cambio de color ambiental dura un tiempo determinado por la variable de instancia Tiempo, lnea 15.
El nico cambio en el constructor, es en la inicializacin de la variable ColorAmbiental al color negro,
lnea 29.
En el mtodo Draw, lneas 37 54, se agrego el cambio del color ambiental, lnea 50, para hacerlo
actualizar cada vez que se ha seleccionado la instancia; la propiedad AmbientLightColor es de tipo Vector3
por lo que el ColorAmbiental debe convertirse explisitamente a este tipo de dato con el mtodo ToVector3.
Se ha agregado el mtodo Update con el parmero gameTime para regresar el color ambiental de rojo a
negro, cada vez que ha pasado un segundo despus de ser seleccionado. En el primer if, lneas 58 62, la
variable de instancia Seleccionado permite cambiar el color ambiental de negro a rojo e iniciando la suma
de tiempo transcurrido a partir de la primera vez que el programa entra en el cuerpo de este condicional. Si
el tiempo es mayor a un segundo, en el segundo if, lneas 63 68, se cambia el color ambiental a negro, la
variable tiempo se inicia en cero y la variable de instancia Seleccionado toma el valor de falso, para no
continuar con la suma del tiempo.
Cdigo 9-11
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
using System;
{
{
176
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
protected BoundingSphere boundingSphere;

private String nombre;
public Color ColorAmbiental;
public bool Seleccionado;
private Single tiempo;
{
boundingSphere = modelo.Meshes[0].BoundingSphere;
// traslacin del centro de la envolvente
boundingSphere.Transform(
ref transformaciones[modelo.Meshes[0].ParentBone.Index],
/// <summary>
/// Propiedad que obtiene la envolvente de esfera.
/// </summary>
public BoundingSphere EnvolventeEsfera { get { return boundingSphere; } }
{
{
{
* world;
basicEffect.AmbientLightColor = ColorAmbiental.ToVector3();
}// fin del foreach
mesh.Draw();
}// fin del foreach
public void Update(GameTime gameTime)
{
if (Seleccionado)
{
ColorAmbiental = Color.Red;
tiempo += (Single)gameTime.ElapsedGameTime.TotalSeconds;
}
if ((tiempo) > 1.0)
{
tiempo = 0;
Seleccionado = false;
}
{
return string.Format("{0}\nBoundingSphere.Center {1}\nRadio {2}",
nombre,
boundingSphere.Center.ToString(),
boundingSphere.Radius);
}// fin de la clase
177
9.3.5
Implementacin
Ya para concluir este captulo, en la clase Game1, Cdigo 9-12, se implementan las clases descritas
anteriormente.
En las variables de instancia, se ha agregado la cmara libre, lneas 15; la mira, lnea 16; y el proyectil,
lnea 17.
Dentro del mtodo Initialize, lneas 24 41, se crea la cmara, lnea 34, y se inicializa la sensibilidad de
rotacin a tres unidades, lnea 37. A la matriz view, lnea 38, se le asigna el valor de la propiedad MtxVista
de la cmara. El proyectil tambin se crea en la este mtodo, Initialize, lnea 39.
Los modelos estticos y la mira deben crearse en el mtodo LoadContent, lneas 43 56, por tener
parmetros que el ContenManager maneja.
En el mtodo Update se hacen llamar a los mtodos de actualizacin de: la cmara, de cada elemento
del arreglo de modelos estticos, del proyectil y de la mira. Vase que la bala y la mira, dependen de la
cmara, por lo tanto, deben ir despus sta.
En el mtodo Draw, lneas 77 87, se actualiza la matriz view con la propiedad MtxVista de la cmara, y
luego se llaman los mtodos de dibujado de cada modelo esttico y de la mira.
Cdigo 9-12
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
using
using
using
using
using
System;
Microsoft.Xna.Framework.Content;
{
{
ModeloEstatico[] modelosEsticos;
Matrix world, view, projection;
CamaraLibre camara;
Mira mira;
Proyectil bala;
public Game1()
{
}
{
world = Matrix.Identity;
projection = Matrix.CreatePerspectiveFieldOfView(
MathHelper.PiOver4,
1.0F, 10000.0F);
camara = new CamaraLibre(new Vector3(0, 10, 350),
new Vector3(0, 10, 0), Vector3.Up, 4.0F,
PlayerIndex.One);
camara.Sensibilidad = 3.0F;
view = camara.MtxVista;
bala = new Proyectil(PlayerIndex.One);
base.Initialize();
}
{
178
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.

modelosEsticos = new ModeloEstatico[2];
modelosEsticos[0] = new ModeloEstatico(Content.Load<Model>("EsferaD"));
modelosEsticos[1] = new ModeloEstatico(
Content.Load<Model>("ElefanteA"));
mira = new Mira(
Content.Load<Texture2D>("Mira"),
Content.Load<Texture2D>("Mira2"),
10, 10, GraphicsDevice);
}
{
}
{
if (GamePad.GetState(PlayerIndex.One).Buttons.Back ==
ButtonState.Pressed)
this.Exit();
camara.Update();
modelosEsticos[0].Update(gameTime);
modelosEsticos[1].Update(gameTime);
bala.Update(camara.Posicion, camara.Direccion, modelosEsticos);
mira.Update(new Ray(camara.Posicion, camara.Direccion),
modelosEsticos);
}
{
view = camara.MtxVista;
modelosEsticos[0].Draw(ref world, ref view, ref projection);
modelosEsticos[1].Draw(ref world, ref view, ref projection);
mira.Draw();
}
}
}
Ejecute el programa y corrija cualquier error que pudiera encontrarse, e intente de nuevo. En la
Ilustracin 9-10 se muestra la figura del elefante antes y despus de ser cambiado su color ambiental.
Ilustracin 9-10 Cambio de color ambiental
En la Ilustracin 9-11 se trato de mostrar que el cambio de color solo afecta a la figura que se encuentre
ms cerca de la posicin de la cmara, de donde se ha disparado el proyectil.
179
Ilustracin 9-11 La colisin existe para el elemento ms cercano a la cmara
180
181
10 Bibliografa
1. St-Lauret, Sebastien. The complete effect and HLSL guide. Estados Unidos de Amrica : Paradoxal,
2005. ISBN 0-9766132-1-2.
2. Solis Ubaldo, Rodolfo. Geometra Analtica. Mxico : Limusa, 1992. ISBN 968-837-162-9.
3. Solar Gonzlez, Eduardo. lgebra Lineal. Mxico : Limusa, 2003. ISBN 968-18-5365-2.
4. Landa Cosio, Niclas Arrioja. DirectX programacin de grficoas 3D. Buenos Aires, Argentina :
Users.code, 2006. ISBN 987-1347-04-9.
5. Jimnez Delgado, Juan Jos. Deteccin de Colisiones mediante Recubrimientos Simpliciales. Granada,
Espaa : Universidad de Granada, 2006.
6. Deitel M., Harvey y Deitel J., Paul. Cmo programar C#. Mxico : Pearson Educacin de Mxico, 2007.
ISBN 978-970-26-1056-4.
7. The Competitive Intelligence Unit. [En lnea] [Citado el: 16 de enero de 2011.] http://www.theciu.net/ciu_0k/pdf/CIU-Mercado%20de%20Videojuegos%20Mexico%20v01.pdf.
8. El Economista. El Economista. [En lnea] http://eleconomista.com.mx/tecnociencia/2010/10/22/sergamer-cuesta-6818-mexico.
9. Universidad de Oviedo. srg. [En lnea] http://www.srg.es/files/apendice_tuberia_programable.pdf.
10. NVIDIA. nVidia. [En lnea] nVidia Corporation, 2011.
http://www.nvidia.es/object/IO_20020107_6675.html.
11. MSDN. msdn. [En lnea] Microsoft Corporation, 2011. http://msdn.microsoft.com/esmx/library/bb203925.aspx.
12. . msdn. [En lnea] Microsoft Corporation, 2011. http://msdn.microsoft.com/eses/library/bb447756.aspx.
13. . msdn. [En lnea] Microsoft Corporation, 2011. http://msdn.microsoft.com/eses/library/b3h38hb0.aspx .
14. . msdn. [En lnea] Microsoft Corporation, 2011.
http://msdn.microsoft.com/query/dev10.query?appId=Dev10IDEF1&l=ESES&k=k(MICROSOFT.XNA.FRAMEWORK.BOUNDINGSPHERE.INTERSECTS)&rd=true.
15. . msdn. [En lnea] Microsoft Corporation, 2011.
http://msdn.microsoft.com/query/dev10.query?appId=Dev10IDEF1&l=ENUS&k=k(MICROSOFT.XNA.FRAMEWORK.GRAPHICS.EFFECTPARAMETER.SETVALUE);k(DevLangCSHARP)&rd=true.
16. . msdn. [En lnea] Microsoft Corporation, 2011. http://msdn.microsoft.com/enus/library/ff471376(v=VS.85).aspx.
17. . msdn. [En lnea] Microsoft Coporation, 2011. ttp://msdn.microsoft.com/enus/library/bb173347(v=VS.85).aspx.
18. . msdn. [En lnea] Microsoft Corporation, 2011. http://msdn.microsoft.com/enus/library/bb509626(v=VS.85).aspx.
19. . msdn. [En lnea] Microsoft Corporation, 2011. http://msdn.microsoft.com/enus/library/bb509644(VS.85).aspx.
20. . msdn. [En lnea] Microsoft Corporation, 2011. http://msdn.microsoft.com/enus/library/ff471376(v=VS.85).aspx.
182

24. . msdn. [En lnea] Microsoft Corporation, 2011. http://msdn.microsoft.com/enus/library/microsoft.xna.framework.graphics.blendfunction.aspx.
25. . msdn. [En lnea] Microsoft Corporation, 2011. http://msdn.microsoft.com/enus/library/microsoft.xna.framework.graphics.renderstate.blendfactor.aspx .
26. . msdn. [En lnea] Microsoft Corporation, 2011. http://msdn.microsoft.com/enus/library/microsoft.xna.framework.graphics.blend.aspx.
27. . msdn. [En lnea] Microsoft Corporation, 2011. ttp://msdn.microsoft.com/enus/library/bb174837(VS.85).aspx.
28. . msdn. [En lnea] Microsoft Corporation, 2011. http://msdn.microsoft.com/enus/library/4z4t9ed1(VS.71).aspx.
29. . msdn. [En lnea] Microsoft Corporation, 2011. http://msdn.microsoft.com/enus/library/bb447759.aspx.
30. . msdn. [En lnea] Microsoft Corporation, 2011. http://msdn.microsoft.com/enus/library/microsoft.xna.framework.content.contentmanager.aspx.
32. . msdn. [En lnea] Microsoft Corporation, 2011. http://msdn.microsoft.com/eses/library/microsoft.windowsmobile.directx.direct3d.texturefilter(VS.85).aspx.
33. . msdn. [En lnea] Microsoft Corporation, 2011. http://msdn.microsoft.com/eses/library/microsoft.windowsmobile.directx.direct3d.texturefilter(VS.85).aspx.
34. . msdn. [En lnea] Microsoft Corporation, 2011. http://msdn.microsoft.com/enus/library/microsoft.xna.framework.graphics.texturefilter.aspx.
35. . msdn. [En lnea] Microsoft Corporation, 2011. http://msdn.microsoft.com/enus/library/microsoft.xna.framework.graphics.surfaceformat.aspx.
36. . msdn. [En lnea] Microsoft Corporation, 2011. http://msdn.microsoft.com/enus/library/microsoft.xna.framework.game_members.aspx.
38. . msdn. [En lnea] Microsoft Corporation, 2011. http://msdn.microsoft.com/eses/library/system.aspx.
39. Nvidia. Developer zone. [En lnea] nVidia, 2008. http://developer.nvidia.com/object/using_sas.html.
40. 3dRender. 3dRender.com. [En lnea] 2006. http://www.3drender.com/light/compositing/index.html.
41. The Game Development Wiki. [En lnea]
http://wiki.gamedev.net/index.php/D3DBook:%28Lighting%29_Direct_Light_Sources.
183
11 Glosario
Depth Buffer: es un bfer que es de la misma anchura y altura como su render target. Este bfer registra
la profundidad de cada pxel que es renderizado. Cuando un pxel es renderizado una segunda vez, como
cuando un objeto es renderizado detrs de otro, el Depth Buffer toma cualquier valor anterior de
profundidad, o lo reemplaza por el valor de profundidad del segundo pxel. Qu profundidad es preservada y
qu profundidad es descartada depender de la funcin de profundidad seleccionada. Por ejemplo, si
CompareFunction.LessEqual es la funcin actual, los valores de profundidad son menores o iguales al valor
actual son preservados. Cualquier valor mayor al valor de profundidad actual es descartado. Esto se le llama
depth test. El depth test se produce cada vez que el pxel es renderizado. Cuando un pxel pasa el depth test,
ese color es escrito en el render target y esa profundidad es escrita en el depth buffer.
La profundidad de un pxel se determina basndose en el tamao de las matrices de vista y proyeccin
seleccionadas para renderizar. Un pxel que toca el plano near de la proyeccin tiene una profundidad 0. Un
pxel que toca el plano far de la proyeccin tiene una profundidad 1. Como cada uno de los objetos en la
escena es renderizado, normalmente los pxeles que estn cerca de la cmara se mantendrn, ya que esos
objetos bloquean la visin de los objetos detrs de ellos.
El depth buffer puede contener bits de stencil, por esta razn se le llama a menudo depth-stencil buffer.
El formato de profundidad describe la composicin del depth buffer. El depth buffer siempre es de 32 bits,
pero esos bits pueden ser arreglados en diferentes maneras, similar a cmo pueden variar los formatos de
textura. Un comn formato de profundidad es Depth32, donde todos los 32 bits son reservados para la
informacin de profundidad. Otro formato comn es DepthFormat.Depth24Stencil8, donde los 24 bits son
reservados para los clculos de profundidad y 8 bits son usados para el stencil buffer.
DepthFormat.Depth24Stencil8Single es un formato inusual donde los 24 bits del depth buffer son dispuestos
44
como un valor de punto flotante.
Renderizado: es la representacin final de la imagen, a la que han eliminado las partes ocultas y se le han
aplicado modelos de iluminacin.
Render Target: Es un bfer donde la tarjeta de video dibuja los pxeles de una escena siendo ste
45
renderizado por un Effect Class.
Shader: procedimiento de sombreado e iluminacin personalizado que permite al artista o programador
46
especificar el renderizado de un vrtice o un pxel.
Sprite: Es un bitmap 2D que es dibujado directamente sin usar las transformaciones del pipeline, luces o
47
efectos.
Stencil Buffer: Es similar al depth buffer. De hecho, ste ocupa parte del depth buffer. El stencil buffer
permite a los programadores establecer una funcin de stencil que probar el valor de referencia stencil, un
valor global, contra el valor en el stencil buffer cada momento que el pxel es renderizado.
El resultado del test stencil determina si el valor del color del pxel es escrito en la target render, y si el
48
valor de profundidad de ese pxel es escrito en el depth buffer.
Viewport: Es un rectngulo que define cmo se representa una escena 3D en una venta 2D.
49
44
Traduccin hecha a partir de la siguiente direccin: http://msdn.microsoft.com/en-us/library/bb976071.aspx

46
http://www.srg.es/files/apendice_tuberia_programable.pdf
47
http://msdn.microsoft.com/en-us/library/bb203919.aspx
48
49
http://msdn.microsoft.com/es-es/library/microsoft.windowsmobile.directx.direct3d.viewport(VS.90).aspx
45
184

Manual para Programar en XNA 3 1

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual para Programar en XNA 3 1

Cargado por

Copyright:

Formatos disponibles

XNA Game Studio 3.

Diseo del manual de XNA en espaol.................................................................................................. 5

A quin va dirigido el manual de programacin en XNA .............................................................. 5

Parte II Manual ............................................................................................................................................. 8

Vertex Buffer ......................................................................................................................................... 9

Modos de Culling ........................................................................................................................ 24

Creando objeto 3D .............................................................................................................................. 28

Control 360 ................................................................................................................................. 32

Plano con textura........................................................................................................................ 42

Modos de direccionamiento ....................................................................................................... 48

Cmo cargar modelos 3D desde un archivo X y FBX ........................................................................... 61

Formatos de archivos ................................................................................................................. 61

La clase Model ............................................................................................................................ 61

Iluminacin ambiental ................................................................................................................ 75

HLSL. Modelo de iluminacin ambiental ................................................................................ 75

HLSL. Modelo de iluminacin ambiental con textura ............................................................ 86

Aadiendo nuevo efecto en FX Composer ............................................................................. 90

Fuente de iluminacin direccional ......................................................................................... 93

Fuente de iluminacin puntual .............................................................................................. 97

Fuente de iluminacin spot .................................................................................................. 103

Iluminacin especular ............................................................................................................... 110

Multi-pass rending ............................................................................................................... 115

Ejemplo Multiluces ............................................................................................................... 115

Cmo agregar un efecto en XNA ....................................................................................................... 123

Sprite Font Texture ..................................................................................................................... 57

Efecto ambiental....................................................................................................................... 123

Clonacin de efecto.............................................................................................................. 123

Interfaz para el shader ......................................................................................................... 126

Luz direccional .......................................................................................................................... 132

Efecto multiluces ...................................................................................................................... 139

Colisin .............................................................................................................................................. 150

Bounding Sphere vs. Bounding Sphere ..................................................................................... 151

Ray vs. Boundign Sphere .......................................................................................................... 167

Cmara libre ......................................................................................................................... 167

La clase Mira ......................................................................................................................... 173

La clase Proyectil .................................................................................................................. 174

La clase ModeloEstatico ....................................................................................................... 176

Implementacin ................................................................................................................... 178

Bibliografa .................................................................................................................................... 182

Glosario ......................................................................................................................................... 184

1 Diseo del manual de XNA en espaol

1.2 A quin va dirigido el manual de programacin en XNA

Lenguaje de programacin C#.

Tabla de requisitos tomada de la siguiente direccin: http://msdn.microsoft.com/es-mx/library/bb203925.aspx

Ilustracin 1-1 Ventana de dilogo: Nuevo proyecto

Para mayor informacin acerca del vertex buffer consulte: http://msdn.microsoft.com/en-us/library/bb198836.aspx

Ilustracin 1-2 Programa predefinido

Para mayor informacin acerca de System visite la siguiente direccin: http://msdn.microsoft.com/es-es/library/system.aspx

VertexDeclaration es la clase que representa la declaracin de un vrtice, debido a que existen

VertexPositionColor. Esctructura personalizada que contiene posicin y color.

Es un Vector3, por lo que representa la posicin del vrtice en coordeanas x, y ,z.

Es el color del vrtice representado por los colores R,G,B.

readonly VertexPositionColor[] vertices =

En el constructor, de la clase Game1, se inicializa el dispositivo grfico y algunas propiedades de la

Es el ttulo de la ventana, por default el ttulo es el nombre que se le di a la

Permite mximizar o redimensionar el tamao de la venta.

La declaracin de VertexDeclaration necesita de dos parmetros; el primero es el dispositivo grfico en

Es el dispositivo grfico asociado con el vertex buffer.

Es el nmero de bytes alojados en el vertex buffer.

Es la opcin que identifica el comportamiento del vertex buffer.

Para inicializar el efecto bsico que proporciona XNA se utiliza:

public BasicEffect (GraphicsDevice device, EffectPool effectPool)

Es el dispositivo grfico que crear el efecto.