El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Creando un Visor de Modelos 3D

Siguiente ►
►

En este tema, aprenderemos a crear un visor de modelos 3D utilizando OpenGL. Este proyecto nos permitirá aplicar muchos de los conceptos aprendidos en los módulos anteriores y nos dará una visión práctica de cómo se utilizan en una aplicación del mundo real.

Objetivos del Tema

  • Cargar y renderizar modelos 3D.
  • Implementar controles de cámara para navegar por la escena.
  • Aplicar texturas y materiales a los modelos.
  • Implementar iluminación básica para mejorar la visualización.

Contenido

  1. Preparación del Entorno
  2. Cargando Modelos 3D
  3. Configuración de la Cámara
  4. Aplicación de Texturas y Materiales
  5. Implementación de Iluminación
  6. Ejercicios Prácticos
  7. Conclusión

Preparación del Entorno

Antes de comenzar, asegúrate de tener configurado tu entorno de desarrollo con OpenGL. Si no lo has hecho, revisa el módulo 1, sección 2: Configuración de tu Entorno de Desarrollo.

Cargando Modelos 3D

Para cargar modelos 3D, utilizaremos la librería Assimp (Open Asset Import Library). Esta librería nos permite importar una gran variedad de formatos de modelos 3D.

Instalación de Assimp

  1. Descarga e instala Assimp desde su sitio oficial.
  2. Incluye las librerías y archivos de cabecera en tu proyecto.

Código para Cargar un Modelo 3D

#include <assimp/Importer.hpp>
#include <assimp/scene.h>
#include <assimp/postprocess.h>
#include <iostream>

void loadModel(const std::string& path) {
    Assimp::Importer importer;
    const aiScene* scene = importer.ReadFile(path, aiProcess_Triangulate | aiProcess_FlipUVs);

    if (!scene || scene->mFlags & AI_SCENE_FLAGS_INCOMPLETE || !scene->mRootNode) {
        std::cerr << "ERROR::ASSIMP::" << importer.GetErrorString() << std::endl;
        return;
    }

    processNode(scene->mRootNode, scene);
}

void processNode(aiNode* node, const aiScene* scene) {
    for (unsigned int i = 0; i < node->mNumMeshes; i++) {
        aiMesh* mesh = scene->mMeshes[node->mMeshes[i]];
        processMesh(mesh, scene);
    }

    for (unsigned int i = 0; i < node->mNumChildren; i++) {
        processNode(node->mChildren[i], scene);
    }
}

void processMesh(aiMesh* mesh, const aiScene* scene) {
    // Procesar vértices, normales y coordenadas de textura
    // ...
}

Explicación del Código

  • Assimp::Importer importer;: Crea un importador de Assimp.
  • const aiScene* scene = importer.ReadFile(path, aiProcess_Triangulate | aiProcess_FlipUVs);: Carga el modelo desde el archivo especificado y aplica algunas post-procesamientos como triangulación y volteo de coordenadas UV.
  • processNode(scene->mRootNode, scene);: Procesa el nodo raíz del modelo.

Configuración de la Cámara

Para navegar por la escena, necesitamos implementar una cámara que podamos mover y rotar.

Código para la Cámara

class Camera {
public:
    glm::vec3 Position;
    glm::vec3 Front;
    glm::vec3 Up;
    glm::vec3 Right;
    glm::vec3 WorldUp;

    float Yaw;
    float Pitch;

    Camera(glm::vec3 position, glm::vec3 up, float yaw, float pitch) 
        : Front(glm::vec3(0.0f, 0.0f, -1.0f)), MovementSpeed(SPEED), MouseSensitivity(SENSITIVITY), Zoom(ZOOM) {
        Position = position;
        WorldUp = up;
        Yaw = yaw;
        Pitch = pitch;
        updateCameraVectors();
    }

    glm::mat4 GetViewMatrix() {
        return glm::lookAt(Position, Position + Front, Up);
    }

    void ProcessKeyboard(Camera_Movement direction, float deltaTime) {
        float velocity = MovementSpeed * deltaTime;
        if (direction == FORWARD)
            Position += Front * velocity;
        if (direction == BACKWARD)
            Position -= Front * velocity;
        if (direction == LEFT)
            Position -= Right * velocity;
        if (direction == RIGHT)
            Position += Right * velocity;
    }

    void ProcessMouseMovement(float xoffset, float yoffset, GLboolean constrainPitch = true) {
        xoffset *= MouseSensitivity;
        yoffset *= MouseSensitivity;

        Yaw += xoffset;
        Pitch += yoffset;

        if (constrainPitch) {
            if (Pitch > 89.0f)
                Pitch = 89.0f;
            if (Pitch < -89.0f)
                Pitch = -89.0f;
        }

        updateCameraVectors();
    }

private:
    void updateCameraVectors() {
        glm::vec3 front;
        front.x = cos(glm::radians(Yaw)) * cos(glm::radians(Pitch));
        front.y = sin(glm::radians(Pitch));
        front.z = sin(glm::radians(Yaw)) * cos(glm::radians(Pitch));
        Front = glm::normalize(front);
        Right = glm::normalize(glm::cross(Front, WorldUp));
        Up = glm::normalize(glm::cross(Right, Front));
    }
};

Explicación del Código

  • Camera(glm::vec3 position, glm::vec3 up, float yaw, float pitch): Constructor de la cámara que inicializa la posición, la orientación y otros parámetros.
  • glm::mat4 GetViewMatrix(): Devuelve la matriz de vista de la cámara.
  • void ProcessKeyboard(Camera_Movement direction, float deltaTime): Procesa la entrada del teclado para mover la cámara.
  • void ProcessMouseMovement(float xoffset, float yoffset, GLboolean constrainPitch = true): Procesa la entrada del ratón para rotar la cámara.

Aplicación de Texturas y Materiales

Para mejorar la apariencia de los modelos, aplicaremos texturas y materiales.

Código para Aplicar Texturas

unsigned int loadTexture(const char* path) {
    unsigned int textureID;
    glGenTextures(1, &textureID);

    int width, height, nrComponents;
    unsigned char *data = stbi_load(path, &width, &height, &nrComponents, 0);
    if (data) {
        GLenum format;
        if (nrComponents == 1)
            format = GL_RED;
        else if (nrComponents == 3)
            format = GL_RGB;
        else if (nrComponents == 4)
            format = GL_RGBA;

        glBindTexture(GL_TEXTURE_2D, textureID);
        glTexImage2D(GL_TEXTURE_2D, 0, format, width, height, 0, format, GL_UNSIGNED_BYTE, data);
        glGenerateMipmap(GL_TEXTURE_2D);

        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

        stbi_image_free(data);
    } else {
        std::cerr << "Texture failed to load at path: " << path << std::endl;
        stbi_image_free(data);
    }

    return textureID;
}

Explicación del Código

  • unsigned int loadTexture(const char* path): Carga una textura desde un archivo y la configura en OpenGL.
  • glGenTextures(1, &textureID);: Genera un ID de textura.
  • glBindTexture(GL_TEXTURE_2D, textureID);: Enlaza la textura.
  • glTexImage2D(...): Carga los datos de la textura en OpenGL.
  • glGenerateMipmap(GL_TEXTURE_2D);: Genera mipmaps para la textura.

Implementación de Iluminación

Para mejorar la visualización de los modelos, implementaremos una iluminación básica.

Código para la Iluminación

// Vertex Shader
#version 330 core
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec3 aNormal;
layout (location = 2) in vec2 aTexCoords;

out vec3 FragPos;
out vec3 Normal;
out vec2 TexCoords;

uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;

void main() {
    FragPos = vec3(model * vec4(aPos, 1.0));
    Normal = mat3(transpose(inverse(model))) * aNormal;
    TexCoords = aTexCoords;

    gl_Position = projection * view * vec4(FragPos, 1.0);
}

// Fragment Shader
#version 330 core
out vec4 FragColor;

in vec3 FragPos;
in vec3 Normal;
in vec2 TexCoords;

uniform vec3 lightPos;
uniform vec3 viewPos;
uniform vec3 lightColor;
uniform vec3 objectColor;

uniform sampler2D texture_diffuse1;

void main() {
    // Ambient
    float ambientStrength = 0.1;
    vec3 ambient = ambientStrength * lightColor;

    // Diffuse
    vec3 norm = normalize(Normal);
    vec3 lightDir = normalize(lightPos - FragPos);
    float diff = max(dot(norm, lightDir), 0.0);
    vec3 diffuse = diff * lightColor;

    // Specular
    float specularStrength = 0.5;
    vec3 viewDir = normalize(viewPos - FragPos);
    vec3 reflectDir = reflect(-lightDir, norm);
    float spec = pow(max(dot(viewDir, reflectDir), 0.0), 32);
    vec3 specular = specularStrength * spec * lightColor;

    vec3 result = (ambient + diffuse + specular) * vec3(texture(texture_diffuse1, TexCoords));
    FragColor = vec4(result, 1.0);
}

Explicación del Código

  • vec3 ambient = ambientStrength * lightColor;: Calcula la componente ambiental de la iluminación.
  • vec3 diffuse = diff * lightColor;: Calcula la componente difusa de la iluminación.
  • vec3 specular = specularStrength * spec * lightColor;: Calcula la componente especular de la iluminación.
  • vec3 result = (ambient + diffuse + specular) * vec3(texture(texture_diffuse1, TexCoords));: Combina las componentes de la iluminación con la textura del objeto.

Ejercicios Prácticos

  1. Cargar y Renderizar un Modelo 3D: Utiliza la librería Assimp para cargar un modelo 3D y renderízalo en la pantalla.
  2. Implementar Controles de Cámara: Añade controles de teclado y ratón para mover y rotar la cámara.
  3. Aplicar Texturas: Carga y aplica una textura a tu modelo 3D.
  4. Añadir Iluminación: Implementa una iluminación básica para mejorar la visualización del modelo.

Soluciones

  1. Cargar y Renderizar un Modelo 3D:
    • Sigue el código proporcionado en la sección "Cargando Modelos 3D".
  2. Implementar Controles de Cámara:
    • Utiliza el código de la sección "Configuración de la Cámara".
  3. Aplicar Texturas:
    • Sigue el código proporcionado en la sección "Aplicación de Texturas y Materiales".
  4. Añadir Iluminación:
    • Utiliza el código de la sección "Implementación de Iluminación".

Conclusión

En este tema, hemos aprendido a crear un visor de modelos 3D utilizando OpenGL. Hemos cubierto cómo cargar y renderizar modelos 3D, configurar una cámara para navegar por la escena, aplicar texturas y materiales, e implementar una iluminación básica. Estos conceptos son fundamentales para cualquier aplicación gráfica y te preparan para proyectos más avanzados en el futuro.

En el siguiente tema, exploraremos cómo desarrollar un motor gráfico, donde aplicaremos y expandiremos estos conceptos para crear una herramienta más robusta y flexible.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados