Racer 3D

Requisitos Conceptos de graficación en 3D: Cámara virtual. Iluminación. Representación de cuerpos en 3D (modelado). Materiales. Interacción de la luz con los materiales. Transformaciones en 3D (proyecciones, traslaciones, rotaciones, escalamiento). Proyecciones 3D a 2D. Universidad de Sonora

Requisitos Se pueden eliminar los requisitos que se refieren al modelado, materiales y luz (puntos 2 a 5) usando imágenes (“impostores”). Universidad de Sonora

3D Racer Juego tipo Outrun. Universidad de Sonora

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. Universidad de Sonora

Características Se cuenta con imágenes para el fondo: Universidad de Sonora

Características Y para los objetos (sprites): Universidad de Sonora

Características Y música. Universidad de Sonora

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. Universidad de Sonora

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). Universidad de Sonora

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). Universidad de Sonora

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. Universidad de Sonora

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. Universidad de Sonora

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. Universidad de Sonora

El camino de un punto Fuente: http://archimede.bibl.ulaval.ca/archimede/fichiers/25229/25229_35.png Universidad de Sonora

El camino de un punto Fuente: http://codeincomplete.com/posts/javascript-racer-v1-straight/ Universidad de Sonora

Traslación en 3D Matriz de traslación en 3D: Fuente: http://polymathprogrammer.com/images/blog/200809/translationmatrix.png Universidad de Sonora

Proyección 3D a 2D Principales proyecciones utilizadas en graficación por computadora: Ortográfica. Las líneas paralelas en 3D se mantienen en la proyección en 2D. 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.” Universidad de Sonora

Proyección ortográfica Fuente: https://qph.ec.quoracdn.net/main-qimg-c9029e7f511271971186d3892d23615c-c Universidad de Sonora

Proyección perspectiva Fuente: http://www.real3dtutorials.com/tut00002.php Universidad de Sonora

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 Universidad de Sonora

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 Universidad de Sonora

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). Universidad de Sonora

El camino de un punto Proyección: Dónde d es la distancia entre la cámara y el plano de proyección. Universidad de Sonora

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). Universidad de Sonora

Distancia cámara – plano Dos opciones para calcular la distancia entre la cámara y el plano de proyección: Se puede dejar constante. Se puede definir en función del campo de visión, f. En el segundo caso: Universidad de Sonora

La carretera Se guardan dos puntos por cada segmento. Fuente: http://codeincomplete.com/posts/javascript-racer-v1-straight/ Universidad de Sonora

Dibujar la escena Se pinta el fondo. Se proyecta y escala la carretera y el auto del jugador. Fuente: http://codeincomplete.com/posts/javascript-racer-v1-straight/ Universidad de Sonora

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/ Universidad de Sonora