campusvirtual    

Másteres Oficiales de Posgrado Laura Constanza

EVLT | Aulas TIC | Programación Docente | Idioma | Contacta

UMA / CV / Másteres Oficiales de Posgrado / Mis asignaturas en este Centro / Curso académico 2023-2024

/ Máster Universitario en Ingeniería Informática. Pl... / Sistemas Gráficos y Multimedia (2023-24, Todos lo... / Tareas de larga duración

/ Tarea I - Escena multi-cámara usando Viewports / T...

Sistemas Gráficos y Multimedia (2023-24, Todos los grupos)

Tarea I - Escena multi-cámara usando Viewports / Task I - Multi-camera scene using Viewports

El objetivo de esta práctica, realizada usando la librería Three.js, es aprender el uso de la funcionalidad Viewport para renderizar sobre un mismo canvas, de forma
simultanea, las imágenes generadas por varias cámaras distintas. El objetivo de la práctica, concretamente, es obtener un único canvas, dividido en tres zonas claramente
diferenciadas, en las que se renderice la representación de una misma escena generada por tres cámaras distintas, tal como se ilustra en la siguiente figura:

Las especificaciones de la práctica son las siguientes:

1. La escena a representar estará compuesta por tres cubos que, como se observa en la figura, estarán ubicados (en coordenadas de mundo) en la zona de espacio
correspondiente a coordenadas positivas de los ejes x, y y z, y escalonados en orden creciente de profundidad (es decir, en orden creciente de coordenadas x, y, z)
(NOTA: el alumno tiene libertad para elegir los valores concretos de coordenadas para la posición de cada cubo, con la condición de que el posicionamiento obtenido
para los cubos respete el orden y posiciones relativas de los cubos mostradas en la figura).

Los cubos deben utilizar un material diferenciado en cada cara (empleando un array de materiales MeshBasicMaterial), de forma que cada cara del cubo tenga un color
distinto que la identifique; adicionalmente, el cubo intermedio debe tener invertido el esquema de colores con respecto a los otros dos cubos (NOTA: la imagen
ejemplo muestra cubos con colores diferenciados en las caras, pero NO es una referencia a copiar porque hay caras que repiten color).

2. Cada uno de los cubos de la escena debe tener un objeto AxisHelper asociado a su sistema de coordenadas local (usando la jerarquía de objetos Three.js), que deberá
moverse de forma solidaria con el cubo. La escena constará también de un objeto AxisHelper que muestre la posición y orientación de los ejes de coordenadas del
sistema de coordenadas de mundo.
3. En la escena Three.js van a existir tres cámaras distintas:
Una cámara en perspectiva (que llamaremos cámara 1) que mostrará en la parte superior del canvas el contenido total de la escena.

Una segunda cámara en perspectiva (cámara 2) que muestre en el cuarto inferior izquierda del canvas una vista cercana de los tres cubos.
Una cámara ortográfica (cámara 3), situada en exactamente la misma posición y orientación que la cámara 2, y que por tanto va a mostrar en el cuarto inferior
derecha del canvas el resultado de representar con proyección ortográfica exactamente la misma escena que está viendo la cámara 2.

Las cámaras 2 y 3 deben tener asociados objetos CameraHelper que, como se muestra en la figura de ejemplo, permitan visualizar sus respectivos frustums.

4. El canvas donde se renderizarán las tres imágenes tendrá unas dimensiones de 1024 x 768 puntos. Usando los métodos .setViewport y .setScissor del renderer debe
dividirse en tres secciones, cuyas dimensiones serán, respectivamente:
Mitad superior: 1024 x 384 puntos.
Cuarto inferior izquierda: 512 x 384 puntos.

Cuarto inferior derecha: 512 x 384 puntos.

 Téngase en cuenta que estos tamaños deben ser usados en la definición de las cámaras, para obtener las relaciones de aspecto correctas.

(NOTA IMPORTANTE: La renderización debe realizarse obligatoriamente sobre un único canvas, dividido en tres usando Viewports; no se acepatarán soluciones que
rendericen las imágenes sobre tres canvas distintos.
5. La práctica debe incluir un interfaz de usuario dat.GUI que permita mover la posición de la cámara 1.

Forma de entrega: El alumno entregará una carpeta comprimida en zip, de nombre "TareaI", y que deberá contener lo siguiente:

Los ficheros .html y .js del código con la solución.

TODAS LAS LIBRERÍAS NECESARIAS PARA QUE EL CODIGO FUNCIONE
Una memoria en PDF, de longitud mínima tres páginas A4 (con fuente de 12 puntos, margen 2,5 cm, espaciado interlineal 1,5, y que no incluya capturas de pantalla
simplemente para ocupar espacio), en la que se describa cómo se ha solucionado el problema planteado.

Complemento I (voluntario): Añadir al interfaz de usuario la opción de poder mover (simultaneamente y de forma solidaria) también las cámaras 2 y 3.

Complemento II (voluntario): Controlar la posición de la cámara 1 con el control de ratón OrbitControls, adicionalmente al GUI de dat.GUI.

Fecha límite: 25/1/2024, 23:55

The purpose of this exercise, done using the Three.js library, is to learn the use of the Viewport functionality to render on a single canvas, simultaneously, the images
generated by several cameras. The aim of the exercise is, specifically, to obtain a single canvas, split in three clearly differentiated areas, where a single scene will be
rendered by three different cameras, as shown in the above figure.

The specifications of this exercise are these:

1. The scene to be rendered is composed by three cubes which, as seen in the figure, will be positioned (in world coordinates) in the space belonging to all-positive
coordinates in axes x, y and z, laddered in increasing order of depth (NOTE: the student is free to choose the specific values for the coordinates of each cube, if the
placement of the cubes match the requirements of ordering and relative positioning of the cubes, shown in the figure).

The cubes must use a differentiated material for each face (using an array of MeshBasicMaterial materials), so that each face of the cube will have a different color,
which will help to identify it; additionally, the middle cube must have its color pattern inverted from the one used in the other two cubes (NOTE: the example image
shows cubes with varied colors on their faces, but it's not a reference to copy, as these colors are repeated on several faces).
2. Each one of the cubes in the scene must have an AxisHelper object associated to its local coordinate system (using the Three.js object hierarchy), which must move
and rotate solidary to its cube. The scene will have also an AxisHelper object showing the position and orientation of the axis for the world coordinate system.

3. In the Three.js scene there will be three different cameras:

A perspective camera (camera 1), which will show the contents of the whole scene in the canvas' upper half.

A second perspective camera (camera 2), which will show a close view of the three cubes in the lower-left quarter of the canvas.
An ortographic camera (camera 3), placed in exactly the same position and orientation of camera 2, and which will thus show, in the lower-right quarter of the
canvas, the outcome of rendering with an ortographic projection exactly the same scene as seen from camera 2.
Cameras 2 and 3 must have each a CameraHelper object associated; this object, as shown in the example figure, will allow to visualize their respective frustums.

4. The size of the canvas onto which the three images are to be rendered will be 1024 x 768 points. Using the renderer .setViewport and .setScissor methods, it must be
split in three sections, whose dimensions will be, respectively:
Upper half: 1024 x 384 points.
Lower-left quarter: 512 x 384 points.
Lower-right quarter: 512 x 384 points.

Keep in mind that these sizes must be given as parameters to the calls creating the cameras, to get the right aspect ratios.
(IMPORTANT: It is mandatory that the rendering must be performed onto a single canvas, split in three using Viewports; solutions rendering the images on three
different canvas will NOT be accepted).

5. The exercise must include a dat.GUI user interface which will allow moving the position of camera 1.

Delivery: The student will submit a zip-compressed folder, named "TaskI", containing the following files:

The .html and .js files with the code which solves the exercise.
THE WHOLE SET OF LIBRARIES NEEDED FOR THE CODE TO WORK (BUT ONLY THOSE REALLY NEEDED!!)
A PDF memory, with minimal length of three A4 pages (12 points font, 2.5 cm margins, interlineal spacing 1.5, and not including screen captures just for the sake of
filling space), in which the solution to the proposed problem will be described.

Improvement #1 (voluntary): Add to the user interface the option to move (in simultaneous and solidary way) also cameras 2 and 3.

Improvement #2 (voluntary): Control position of camera 1 with the OrbitControls mouse control, additionally to the dat.GUI position control.

Deadline: 25/1/2024, 23:55

Estado de la entrega

Estado de la entrega No entregado

Estado de la Sin calificar

calificación

Visualización / -
entrega

Comentarios sobre
la entrega  Comentarios (0)

Añadir entrega

Todavía no has realizado una entrega

◄ Calificaciones

Saltar a...

Tarea II - Shaders con comportamiento dependiente del objeto /Task II - Shaders with object-dependant behavior ►

Universidad de Málaga · Avda. Cervantes, 2. 29071 MÁLAGA · Tel. 952131000 · info@uma.es

Todos los derechos reservados