{"id":24908605,"url":"https://github.com/compulsiveprogramator/pr1-pag","last_synced_at":"2025-03-28T00:42:54.507Z","repository":{"id":258561405,"uuid":"860497423","full_name":"CompulsiveProgramator/pr1-PAG","owner":"CompulsiveProgramator","description":"El proyecto para las practicas en PAG, donde vemos OpenGL y como crear una aplicación gráfica","archived":false,"fork":false,"pushed_at":"2024-12-20T16:31:49.000Z","size":97938,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-02T02:29:59.903Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CompulsiveProgramator.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-20T14:45:44.000Z","updated_at":"2024-12-20T16:31:54.000Z","dependencies_parsed_at":"2024-11-07T19:22:23.463Z","dependency_job_id":"c41824c2-6208-4068-81ae-0a5a078f503e","html_url":"https://github.com/CompulsiveProgramator/pr1-PAG","commit_stats":null,"previous_names":["compulsiveprogramator/pr1-pag"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CompulsiveProgramator%2Fpr1-PAG","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CompulsiveProgramator%2Fpr1-PAG/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CompulsiveProgramator%2Fpr1-PAG/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CompulsiveProgramator%2Fpr1-PAG/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CompulsiveProgramator","download_url":"https://codeload.github.com/CompulsiveProgramator/pr1-PAG/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245949563,"owners_count":20698920,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-02T02:30:12.169Z","updated_at":"2025-03-28T00:42:54.483Z","avatar_url":"https://github.com/CompulsiveProgramator.png","language":"C++","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Prácticas-PAG\n### Autor: Adrián González Almansa\n### Curso 24/25\n## Práctica 3\nHe realizado bastantes cambios para implementar la practica 3, principalmente dentro de la clase Renderer.\nAgregué toda la funcionalidad con los shader programs, como el vertex/fragment shader, el VAO del triangulo, y su VBO e IBO.\nEn UML ahora mismo la aplicación funciona así:\n\n\u003cimg src=\"images/diagramasUML/pr2UML.png\" width=800px\u003e\n\nTanto Renderer como GUI son Singletons, Renderer compila y ejecuta el shader program desde creaShaderProgram() y refrescar(), respectivamente.\nGUI pinta la interfaz de usuario con el metodo refrescar(), y tiene los métodos setColor() y agregarMensajeLog(), para el dibujado de las ventanas de\nImGui.\n\nRespecto a la cuestion planteada al final del 3er guión, del triangulo que se escala al tamaño de la ventana, esto ocurre ya que las coordenadas que damos en el VBO para la posicion\nde cada vértice, son después de hacer la tranformación de proyección en el espacio normalizado. Las coordenadas de ese espacio hay que traducirlas al espacio de viewport (nuestra bonita ventana),\ny esa traducción se hace siguiendo la siguiente formula:\n\n\u003cimg src=\"images/pr3.png\" width=400px\u003e\n\nLuego cuanto mayor sea la ventana de la aplicación mayor serán \"w\" y \"h\", por lo que mayor serán las coordenadas de cada punto, y por ello más grande será el triángulo.\n\n## Práctica 4\nPara esta práctica solo hemos tenido que desacoplar de la clase Renderer el funcionamiento del Shader Program,\ny para ello he creado una clase llamada ShaderProgram que se encarga de ello. Incluye el funcionamiento del \nVertex Shader y del Fragment Shader en su interior, pero en la siguiente práctica desacoplaré esto. El UML con la idea del proyecto actual es el siguiente:\n\n\u003cimg src=\"images/diagramasUML/pr4UML.png\" width=900px\u003e\n\n## Práctica 5\nPara esta práctica hemos tenido que implementar una camara virtual, que se puede mover con el ratón, teclado y con controles\nde ImGui\n\nHe movido los archivos de shaders (tanto vertex como fragment) a una carpeta llamada \"shader_files\", por lo que para usar el programa \"pag03\" hay que hacer lo siguiente:\n\u003cimg src=\"images/imagen_como_usar_ventana_shader_program.png\" width=1080px\u003e\n\nUna vez hecho lo anterior, he creado la clase PAG::Camara que alberga todo el funcionamiento de la camara, y esta clase se comunica con la clase ShaderProgram para \npoder hacer las transformaciones necesarias de visión y perspectiva, en el modelo que se va a dibujar. Desde los callbacks del main se comunica a la cámara de \nla aplicación el movimiento que ha de hacer (dolly, crane, ...), concretamente desde los callbacks para desplazamiento del raton, y para pulsar una tecla, que son\ncursorPosition_callback() y key_callback() respectivamente.\nEsto lo hago ya que así cuando ocurra un evento se notifica automaticamente a la cámara, que es como debe ser\n\nLa idea de comunicar los movimientos a la cámara directamente desde el main, lo veo lo más sencillo de entender y más simple posible\n\nPara las ventanas de la aplicación, he creado una clase abstracta llamada \"Ventana\", y de esta heredan todas las ventanas que he creado con ImGui, siendo la última\nla de gestion de movimiento de cámara, con un simple selector de tipo de movimiento, y botones para actualizarla:\n\n\u003cimg src=\"images/ventana_movimiento_camara.png\"\u003e\n\nLa version actual en un diagrama de clases UML de la aplicación, es la siguiente:\n\n\u003cimg src=\"images/diagramasUML/pr5UML.png\"\u003e\n\n\n## Práctica 6\nVamos a por esta práctica, que consiste en desacoplar del Shader Program el funcionamiento del modelo. Para ello, voy a empezar haciendo una clase PAG::Modelo\nque contenga por supuesto, los datos como vertices, normales, y matriz de modelado que definen al modelo, pero en mi caso lo hace dentro de una clase auxiliar llamada\nPAG::Malla, y por ahora un modelo solo tiene una malla, aunque esto se puede cambiar facilmente.\n\nPara extraer los datos del modelo que queramos en nuestra app uso OBJ_Loader que los saca de archivos .obj. \nEsto lo hago dentro de la clase Modelo, y luego a la clase Malla se pasan estos datos extraidos, para\nque cree el VAO que usará nuestro querido OpenGL para dibujar el modelo. Assimp me dio ciertos fallos leyendo .obj, por eso utilizo esta herramienta\n\nSiguiendo la jerarquía de ventanas de ImGui en mi app, agrego dos ventanas nuevas:\n\u003cimg src=\"images/ventanas_gestion_modelos.png\"\u003e\n\nLa de la izquierda en la imagen es para elegir un modelo dentro de la carpeta \"Modelos3D\", y agregarlo al Shader Program, y la de la derecha\nes para aplicar una transformacion como Traslación, Rotación o Escalado al modelo que seleccionemos de los activos\nen escena\n\nPara usar la aplicación, hemos de seguir los siguientes pasos:\n1. En la ventana de shader program, escoger el shader que deseemos\n2. Luego, seleccionamos un modelo a cargar en la ventana de selección de modelo\n3. Ya podemos ver nuestro modelo!\n\nSi queremos cargar otro modelo, no hay ningún problema, solo tenemos que repetir el paso 2.\n\nLa aplicación en funcionamiento se ve así:\n\u003cimg src=\"images/pag06_estado.png\"\u003e\n\nY el UML actual es el siguiente:\n\u003cimg src=\"images/diagramasUML/pr6UML.png\"\u003e\n\n## Práctica 7\n\nPara esta práctica he tenido que crear una clase Material, que contiene actualmente el color ambiente, difuso y especular del material, así como el exponente especular. Luego, también\nhemos usado una subrutina GLSL, que con código C++ en la clase Shader Program se escoge su implementación, para así pintar el módelo actual con un color u otro.\n\nEl material ahora mismo se asigna por defecto en la creación del modelo, como se ve en el constructor de la clase PAG::Modelo:\n\n\u003cimg src=\"images/crea_modelo.png\"\u003e\n\nEl material tiene asignado unos atributos por defecto, los colores están en formato RGB :\n- Ka = (0.1, 0.0, 0.0)\n- Kd = (1.0, 1.0, 1.0)\n- Ks = (1.0, 0.0, 1.0)\n- exponenteEspecular = 100\n\nPara próximas prácticas se podrán crear materiales distintos, y asignarlos a cada modelo de forma dinámica\n\nLa subrutina solo necesita este código en C++ , que actualmente está en la el método PAG::ShaderProgram::ejecutarSP()\n\u003cimg src=\"images/subrutina_pr7.png\"\u003e\n\nEl UML actual de la app es el siguiente:\n\n\u003cimg src=\"images/diagramasUML/pr7UML.png\"\u003e\n\n## Práctica 8\n\nPara esta práctica solo he tenido que agregar el funcionamiento de la luz. Para ello hice una clase luz PAG::Luz que contiene los atributos de todos\nlos tipos de luz que conocemos:\n- Ambiental\n- Puntual\n- Direccional\n- Focal\n\nDesde la clase PAG::ShaderProgram se tiene un vector con 4 luces, una de cada tipo, y cuando se pinta cada modelo, se hace blending con cada luz. Por supuesto, el fragment\nshader tiene una subrutina para segun el tipo de luz hacer unos calculos u otros ;)\n\nEl UML actual de la aplicación es el siguiente:\n\u003cimg src=\"images/diagramasUML/pr8UML.jpg\"\u003e\n\nY un dinosaurio bien iluminado gracias a las luces agregadas:\n\u003cimg src=\"images/trex-saturado.png\"\u003e\n\n## Práctica 9\n\nPara esta práctica solo he tenido que agregar la funcionalidad de la textura, para ello está la clase PAG::Textura, que se ve como cuelga\nde la clase PAG::Material en el diagrama UML:\n\n\u003cimg src=\"images/diagramasUML/pr9UML.jpg\"\u003e\n\nDentro de esta clase Textura, se lee la imagen con Lode PNG y se almacena dentro para ser consultada por el Shader Program. Luego,\nagrego a la clase Malla un VBO en el layout 2 para las coordenadas de texturas que se leen con OBJ loader.\n\nCon todo lo anterior, se programa la clase Shader Program para que una todo y pase los datos necesarios al vertex/fragment shader,\ny que estos puedan hacer los calculos con la textura y aplicarlos al modelo a pintar!\n\nPara la vaca, podemos ver como se aplica la textura correctamente:\n\n\u003cimg src=\"images/vaca_textura.png\"\u003e\n\nO para el t-rex:\n\u003cimg src=\"images/trex_textura.png\"\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcompulsiveprogramator%2Fpr1-pag","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcompulsiveprogramator%2Fpr1-pag","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcompulsiveprogramator%2Fpr1-pag/lists"}