<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Bittia Blog &#187; Programación</title>
	<atom:link href="http://www.bittia.com/blog/category/programacion/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.bittia.com/blog</link>
	<description>Blog oficial del Grupo Bittia</description>
	<lastBuildDate>Fri, 03 Feb 2012 10:38:17 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.3</generator>
		<item>
		<title>Deferred shading. Para amantes de gráficos y videojuegos.</title>
		<link>http://www.bittia.com/blog/2011/02/04/deferred-shading-para-amantes-de-graficos-y-videojuegos/</link>
		<comments>http://www.bittia.com/blog/2011/02/04/deferred-shading-para-amantes-de-graficos-y-videojuegos/#comments</comments>
		<pubDate>Fri, 04 Feb 2011 13:59:45 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Diseño]]></category>
		<category><![CDATA[Programación]]></category>
		<category><![CDATA[deferred shading]]></category>
		<category><![CDATA[Gráficos]]></category>
		<category><![CDATA[videojuegos]]></category>

		<guid isPermaLink="false">http://www.bittia.com/blog/?p=722</guid>
		<description><![CDATA[Por Manuel Peliz Si eres una persona a la que le gustan los videojuegos o simplemente te interesan los gráficos por ordenador en alguna ocasión te habrás encontrado con estas palabrejas en inglés que ni yo mismo entiendo muy bien aún. Es mi intención pues y hasta donde llegan mis limitaciones, explicar un poco qué [...]]]></description>
			<content:encoded><![CDATA[<p><em>Por Manuel Peliz</em></p>
<p>Si eres una persona a la que le gustan los videojuegos o simplemente te interesan los gráficos por ordenador en alguna ocasión te habrás encontrado con estas palabrejas en inglés que ni yo mismo entiendo muy bien aún. Es mi intención pues y hasta donde llegan mis limitaciones, explicar un poco qué significa esto y a ver si algunos se dan cuenta que esto de hacer aparecer cosas por pantalla no es sólo cosa de hacer click en un simple botón.</p>
<p>Pero, ¿qué es el <em><strong>deferred shading</strong></em>? Vamos al grano: a la hora de hacer aparecer nuestras “cosas” por pantalla existen un sinfín de técnicas y aproximaciones de otras técnicas. Una de ellas es el <em>deferred shading</em>, que a su vez puede ser interpretada de otras tantas maneras. Ahí está la diferencia entre juegos o aplicaciones 3d con gráficos malos, buenos e increíbles. No se me mal interprete con que el deferred shading excluya otras técnicas.</p>
<p>Sin meterme en historias de quién fue el inventor del concepto (para eso tenéis la Wikipedia), sí voy a comentar que su empleo llega de la evolución del hardware (tarjetas gráficas más modernas) que permitió su implementación de manera óptima gracias al MRT (<em>multiple render target</em>).</p>
<p>El <em><strong>deferred shading</strong></em> consiste en hacer un dibujado previo por separado de la información que necesitamos para la obtención final de la imagen. A diferencia del <em>forward rendering </em>(dibujamos directamente, uno a uno los objetos por pantalla). Es decir, en lugar de dibujar en pantalla lo que queremos, primero vamos a ir guardando en texturas (imágenes) la información de los objetos por separado y al final de todo el proceso lo combinamos.</p>
<p>Así pues, en un primer paso, se crea el <strong>G-Buffer</strong> que no es más que un grupo de texturas en donde se guarda la información que vamos a necesitar. Como el color, la posición de cada pixel en el espacio, la capacidad de reflejar la luz del material, etc.</p>
<p>En la siguiente foto muestro un ejemplo de un G-Buffer con composición final de una oclusión realizada aquí en BITTIA:</p>
<p style="text-align: left;"><a rel="attachment wp-att-723" href="http://www.bittia.com/blog/2011/02/04/deferred-shading-para-amantes-de-graficos-y-videojuegos/bittia_deferred_shading/"><img class="aligncenter size-full wp-image-723" title="bittia_deferred_shading" src="http://www.bittia.com/blog/wp-content/uploads/2011/02/bittia_deferred_shading.jpg" alt="" width="570" height="523" /></a></p>
<p>Como se puede ver tenemos <strong>3 primeras texturas</strong> (imágenes pequeñas de la parte superior) con diferente información, color, dirección de las normales (dirección a la que mira el pixel) y distancia a la cámara representado en escala de grises. Esto último es como decir la posición x, y, z del pixel en el espacio obtenido mediante cálculos matemáticos que no me voy a poner a explicar. Pues bien, con ellas (en realidad sólo con las dos últimas) podemos generar una especie de sombreado (SSAO) que combinado con el color nos daría más realismo a la escena.</p>
<p>Esto es un simple ejemplo de uso del G-Buffer, será cosa de la imaginación de cada uno o del equipo de desarrollo del juego o aplicación lograr las impresionantes escenas cinematográficas que obtienen en sus costosos y multimillonarios proyectos.</p>
<p>Un punto muy a favor que tiene el <em>deferred shading</em> es a la hora de calcular las luces de la escena, permitiendo tener en un mismo momento cientos (esto tengo que testearlo, aún no me lo creo a excepción de que poseas un super-ordenador, yo lo dejaría en muchas más) de luces dinámicas funcionando mientras que en el <em>forward rendering</em> no es posible.</p>
<p>Como se puede observar el proceso que hemos de realizar a la hora de enseñarte algo por pantalla es muy grande, largo y costoso. Pasa por un montón de manos y NO ES NADA hasta que el último pintor da la última capa. De ahí la importancia en conocer la labor de cada uno de los miembros que intervienen en el proceso.</p>
<p>Documentación empleada:</p>
<p><a href="http://www.guerrilla-games.com/publications/dr_kz2_rsx_dev07.pdf">http://www.guerrilla-games.com/publications/dr_kz2_rsx_dev07.pdf</a></p>
<p><a href="http://cmpmedia.vo.llnwd.net/o1/vault/gdc09/slides/gdc09_insomniac_prelighting.pdf">http://cmpmedia.vo.llnwd.net/o1/vault/gdc09/slides/gdc09_insomniac_prelighting.pdf</a></p>
<p><a href="http://developer.amd.com/gpu_assets/S2008-Filion-McNaughton-StarCraftII.pdf">http://developer.amd.com/gpu_assets/S2008-Filion-McNaughton-StarCraftII.pdf</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.bittia.com/blog/2011/02/04/deferred-shading-para-amantes-de-graficos-y-videojuegos/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>¿Cómo se hizo la máscara del brik?, por Manuel Peliz.</title>
		<link>http://www.bittia.com/blog/2010/04/27/%c2%bfcomo-se-hizo-por-manuel-peliz/</link>
		<comments>http://www.bittia.com/blog/2010/04/27/%c2%bfcomo-se-hizo-por-manuel-peliz/#comments</comments>
		<pubDate>Tue, 27 Apr 2010 06:57:46 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Programación]]></category>

		<guid isPermaLink="false">http://www.bittia.com/blog/?p=288</guid>
		<description><![CDATA[Cómo se hizo la máscara del brick(modelo 3d) en aplicación de realidad aumentada  briksmagikos.es con directx y shader modelo 3… (-“fácil, fácil”-)]]></description>
			<content:encoded><![CDATA[<p>Cuando se hace una aplicación de realidad aumentada nos encontramos con un problema inevitable y que no tiene solución a menos que juguemos con algún que otro truco.</p>
<p>La técnica de realidad aumentada nos permite incorporar objetos tridimensionales en un entorno real, uniendo la realidad con la ficción en la pantalla de nuestro monitor. Pero no es todo tan bonito.</p>
<p>A simple vista, cuando vemos un objeto sobre nuestra mano en un entorno de realidad aumentada da la impresión de que está sobre nuestra mano y es un efecto que, según el caso, puede resultar impresionante, pero el problema aparece cuando, por ejemplo, tenemos una “vaka” que vuela de un lado a otro de lo que nuestra webcam está “observando”.</p>
<p>Hagamos un stop para explicar, muy por encima, el proceso de dibujado en una aplicación de realidad aumentada:</p>
<p>Por un lado tenemos la imagen de la webcam que es lo que se dibuja en primer lugar, es decir, si fuera Photoshop, sería la primera capa de nuestro psd o foto.</p>
<p>Después, tenemos los objetos 3D que hemos de dibujar también y que corresponden a la segunda capa de nuestra foto. ¿Qué significa esto? Pues que siempre, siempre, tendremos los objetos 3D por encima de la imagen de la webcam.</p>
<p>Y e aquí la clave del asunto, nosotros no podemos conocer verdaderamente el entorno tridimensional que rodea a “LaVaka”, pero, dado un objeto conocido y su posición, podemos hacer una máscara de él (en este caso el brick de Central Lechera Asturiana) para simular que un objeto real de la vida misma está por delante de nuestro objeto ireal de la realidad aumentada.</p>
<p>Para muestra un botón:</p>
<p><a rel="attachment wp-att-289" href="http://www.bittia.com/blog/2010/04/27/%c2%bfcomo-se-hizo-por-manuel-peliz/como-se-hizo-briks-0/"><img class="aligncenter size-full wp-image-289" title="como se hizo briks 0" src="http://www.bittia.com/blog/wp-content/uploads/2010/04/como-se-hizo-briks-0.jpg" alt="" width="570" height="429" /></a></p>
<p><a rel="attachment wp-att-290" href="http://www.bittia.com/blog/2010/04/27/%c2%bfcomo-se-hizo-por-manuel-peliz/como-se-hizo-briks-1/"><img class="aligncenter size-full wp-image-290" title="como se hizo briks 1" src="http://www.bittia.com/blog/wp-content/uploads/2010/04/como-se-hizo-briks-1.jpg" alt="" width="570" height="429" /></a></p>
<p>Como se puede ver, no podemos conocer que hay una mesa que “choca” con nuestra compuerta, pero si conocemos la existencia de nuestro brick y que hemos modelado previamente. De este modo podemos hacer nuestra máscara para que “LaVaka” quede oculta en caso de volar por detrás del brick.</p>
<p>Seguro que hay un montón de métodos para hacer esta máscara, pero yo voy a comentar el empleado en este caso, por su facilidad de aplicación y su “escasa” necesidad de emplear líneas de código, además de la aportación que nos da la aceleración gráfica.</p>
<p>Como muchos sabrán, las gráficas nos permiten hacer “miniprogramitas” que van a ser ejecutados cuando dibujamos un pixel por pantalla. Es decir, si yo tengo un brick modelado en 3D con un color o una textura, etc. puedo decirle a la gráfica que cuando dibuje ese pixel concreto del brick antes de ponerlo por pantalla ejecute mi pequeño programita que va a modificar el color de ese pixel.</p>
<p>A ese programa se le llama Shader y es el encargado de modificar el color de ese pixel para sutituirlo por el color que yo le diga. De este modo le digo a la gráfica que cuando dibuje el pixel blanco del brick lo sustituya por el color del pixel de la webcam.</p>
<p>Así pues y con Shader Modelo 3 que tiene una estructura que nos facilita muchísimo la vida, podemos hacer esta máscara sin despeinarnos.</p>
<p>Esta estructura es la VPOS y nos da las coordenadas x e y del pixel que se está dibujando en ese preciso momento, con esa información y un pequeño cáculo de proporciones podemos sustituir la textura original del brick por la imagen de la webcam, de este modo, ya conseguimos el efecto deseado. La definimos de la siguiente manera:</p>
<p><em>struct PS_INPUT<br />
{<br />
float2 coord : VPOS;<br />
};</em></p>
<p>Básicamente el pixel shader es tan simple como esto:</p>
<p>Realizamos el cálculo de proporciones para obtener el pixel que queremos dibujar :</p>
<p>IN.coord.x = IN.coord.x * webcam.x / screen.x;<br />
IN.coord.y = IN.coord.y * webcam.y / screen.y;</p>
<p>Donde coord. es el pixel que se está dibujando y webcam/screen es la proporción entre la resolución de la webcam y el del monitor.</p>
<p>Esta coordenada obtenida tenemos que transformarla a un número entre 0 y 1 que será la que la gráfica entienda, y “cogerlo” de la textura de la webcam.</p>
<p>tex.x = IN.coord.x / 1024;<br />
tex.y = IN.coord.y / 512;</p>
<p>En este caso mi textura es de 1.024&#215;512.</p>
<p>Y sólo queda pedir el color del pixel de la textura que este caso es la imagen de la webcam:</p>
<p>float3 Color = tex2D(baseMap,tex);</p>
<p>y, finalmente, le decimos a la gráfica que dibuje el pixel con el color obtenido.</p>
<p>return float4(Color,1);</p>
]]></content:encoded>
			<wfw:commentRss>http://www.bittia.com/blog/2010/04/27/%c2%bfcomo-se-hizo-por-manuel-peliz/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Sincronizacion vertical (v-sync)                 por Manuel Peliz</title>
		<link>http://www.bittia.com/blog/2009/11/26/sincronizacion-vertical-vsync-por-manuel-peliz/</link>
		<comments>http://www.bittia.com/blog/2009/11/26/sincronizacion-vertical-vsync-por-manuel-peliz/#comments</comments>
		<pubDate>Thu, 26 Nov 2009 08:12:28 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Programación]]></category>

		<guid isPermaLink="false">http://www.bittia.com/blog/?p=53</guid>
		<description><![CDATA[Este concepto desconocido para una gran mayoría y que a muchos jugones les sonará es tremendamente importante para la correcta visualización de cualquier cosa en nuestro monitor, sobre todo con cualquier cosa que se mueva rápido. Para explicar qué es exactamente hay que entender que el monitor de nuestro ordenador no dibuja al instante una [...]]]></description>
			<content:encoded><![CDATA[<p>Este concepto desconocido para una gran mayoría y que a muchos jugones les sonará es tremendamente importante para la correcta visualización de cualquier cosa en nuestro monitor, sobre todo con cualquier cosa que se mueva rápido.</p>
<p>Para explicar qué es exactamente hay que entender que el monitor de nuestro ordenador no dibuja al instante una imagen en pantalla sino que hace un recorrido trocito a trocito hasta que completa la imagen que tiene que mostrar. Es por ello que si estamos dibujando un círculo y el ordenador aún no ha terminado de rellenar la pantalla, éste ha de ser redibujado otra vez sin terminar el ciclo correctamente provocando un pantalleo indeseable en la imagen.</p>
<p><strong>¿Cómo solucionarlo?</strong></p>
<p>Hace unos cuantos años, en la época en que se accedía directamente a la memoria gráfica, la época de esos maravillosos juegos de 256 colores, este tema se solucionaba de varias maneras:</p>
<p>Desde MS-DOS, donde se tenía acceso a todo, registros del ordenador, secciones de memoria&#8230; lo que se solía hacer era un bucle que comprobaba cuando el monitor terminaba de dibujar y, una vez terminado, se continuaba dibujando. Qué tiempos&#8230;</p>
<p>Más tarde se usó el concepto de <em>doblebuffer</em>, que consistía en dibujar todo en una &#8220;segunda&#8221; capa y, después, se copiaba o sustituía por la que usa el monitor para dibujar en pantalla. Actualmente, este concepto es el mismo, con la diferencia de que ya es totalmente abstracto para nosotros y cuando utilizamos algún motor gráfico no nos damos cuenta de lo que en verdad está haciendo para ver la imagen correctamente.</p>
<p>Como tenemos potencia de raster suficiente pues nada, que más da&#8230;</p>
<p>Mi opinión sobre la v-sync es clara, siempre activada a menos que lo que estemos viendo sea lento (donde si se podrá desactivar), como una postal o unas diapositivas etc., pero, en juegos, la única ganacia que podemos obtener es cierta mejora en la fluidez, que no en la imagen, y esa fluidez está relacionada con esos indeseables pantalleos por lo que a mí, personalmente, no me gusta.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.bittia.com/blog/2009/11/26/sincronizacion-vertical-vsync-por-manuel-peliz/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

