17 3d racer - universidad de sonoraeuler.mat.uson.mx/~havillam/android/slides/17 3d racer.pdf2d, es...

Requisitos� Conceptos de graficación en 3D:

1. Cámara virtual.

2. Iluminación.

3. Representación de cuerpos en 3D (modelado).

4. Materiales.

5. Interacción de la luz con los materiales.

6. Transformaciones en 3D (proyecciones, traslaciones, rotaciones, escalamiento).

7. Proyecciones 3D a 2D.

Universidad de Sonora 2

Requisitos� Se pueden eliminar los requisitos que se refieren al

modelado, materiales y luz (puntos 2 a 5) usando imágenes (“impostores”).


3D Racer� Juego tipo Outrun.


Características� Sensación 3D.

� Carretera con curvas.

� El auto del conductor se controla con el sensor de gravedad.

� El auto acelera automáticamente y se frena al chocar con otros autos o si se sale de la carretera.

� No está completo: no hay forma de ganar ni de perder, no hay un número de vueltas, etc.


Características� Se cuenta con imágenes para el fondo:


Características� Y para los objetos (sprites):


Características� Y música.


Sistemas de coordenadas� Por conveniencia se manejan los siguientes

sistemas de coordenadas:

� Sistema de coordenadas del mundo.

� Sistema de coordenadas de la cámara.

� Sistema de coordenadas de dispositivo (o del plano de proyección).

� Sistema de coordenadas de la pantalla.


Coordenadas del mundo.� 3D, es decir, con 3 ejes: x, y, z.

� El origen es un punto arbitrario.

� La cámara virtual y típicamente los objetos se definen en este sistema.

� La cámara se define con dos puntos, el look-from y el look-at, y un vector up que apunta hacia “arriba.”

� Por ejemplo, la cámara puede estar (look-from) en (0, 0, -1) y mirando (look-at) a (0, 0, 0) con un vector de up de (0, 1, 0).


Coordenadas de la cámara� 3D, es decir, con 3 ejes: x, y, z.

� El origen está dado por la posición (look-from) de la cámara.

� Uno de los ejes, típicamente z, está alineado con el vector formado por look-from y look-at.

� Hay una pantalla virtual (plano) frente a la cámara.

� Si la cámara está en el origen (0, 0, 0), el centro de la pantalla puede estar en (0, 0, 1).


Coordenadas de proyección� 2D, es decir, con dos ejes: x, y.

� Los puntos (x, y) están en el plano de proyección que está situado frente a la cámara.

� El origen está en el centro del plano.

� x va de -1 a 1.

� y va de -1 a 1.


Coordenadas de la pantalla� 2D, es decir, con dos ejes: x, y.

� El origen está en la parte superior izquierda.

� Es dependiente del tamaño de la pantalla usada para desplegar la imagen en la computadora.

� x va de 0 al ancho de la pantalla en pixeles.

� y va de 0 al alto de la pantalla en pixeles.

� Cada punto (x, y) especifica un pixel.


El camino de un punto� Se define un punto (xw, yw, zw) en coordenadas del

mundo.

� Se traslada a coordenadas de la cámara: (xc, yc, zc).

� Se proyecta a coordenadas de dispositivo (o del plano de proyección): (xp, yp).

� Se escala a coordenadas de la pantalla: (xs, ys).

� Si es necesario al punto (xs, ys) se le asigna color y transparencia y se dibuja en la pantalla.


El camino de un punto

Fuente: http://archimede.bibl.ulaval.ca/archimede/fichiers/25229/25229_35.png


El camino de un punto

Fuente: http://codeincomplete.com/posts/javascript-racer-v1-straight/


Traslación en 3D� Matriz de traslación en 3D:

Fuente: http://polymathprogrammer.com/images/blog/200809/translationmatrix.png


Proyección 3D a 2D� Principales proyecciones utilizadas en graficación

por computadora:

1. Ortográfica. Las líneas paralelas en 3D se mantienen en la proyección en 2D.

2. Perspectiva. Las líneas paralelas verticales en 3D se unen en un punto en el horizonte (el punto de fuga) en la proyección en 2D.

� El juego usa proyección perspectiva por ser más “natural.”


Proyección ortográfica

Fuente: https://qph.ec.quoracdn.net/main-qimg-c9029e7f511271971186d3892d23615c-c


Proyección perspectiva

Fuente: http://www.real3dtutorials.com/tut00002.php


Proyección perspectiva� Matriz de proyección perspectiva:

� Dónde D es la distancia entre la cámara virtual y el plano de proyección.

Fuente: http://www.cs.princeton.edu/courses/archive/fall99/cs426/lectures/view/img029.gif


Escalamiento� Matriz de escalamiento en 2D:

� Dónde sx y sy son los factores de escala en x y y, respectivamente.

Fuente: https://www.willamette.edu/~gorr/classes/GeneralGraphics/Transforms/transforms2d.htm


El camino de un punto� Dado un punto (xw, yw, zw) en coordenadas del

mundo.

� Traslación:

� Dónde la posición de la cámara (punto look-from) es (c.x, c.y, c.z).


.

.

.

c w

c w

c w

x x c x

y y c y

z z c z

= +

= +

= +

El camino de un punto� Proyección:

� Dónde d es la distancia entre la cámara y el plano de proyección.


p c

c

p c

c

dx x

z

dy y

z

= ×

= ×

El camino de un punto� Escalamiento:

� Dónde w es el ancho y h el alto en pixeles del área de dibujo (canvas en Android).


2 2

2 2

s p

s p

w wx x

h hy y

= + ×

= − ×

Distancia cámara – plano� Dos opciones para calcular la distancia entre la

cámara y el plano de proyección:

a) Se puede dejar constante.

b) Se puede definir en función del campo de visión, f.

� En el segundo caso:


1

tan( / 2)d

f=

La carretera� Se guardan dos puntos por cada segmento.



Dibujar la escena� Se pinta el fondo.

� Se proyecta y escala la carretera y el auto del jugador.



Ligas� Para hacer la carretera con curvas leer este tutorial:

http://www.extentofthejam.com/pseudo/

� Juego completo en JavaScript: http://codeincomplete.com/posts/javascript-racer/


17 3d racer - universidad de sonoraeuler.mat.uson.mx/~havillam/android/slides/17 3d racer.pdf2d, es...

Documents