Creación y manipulación de gráficos 2D y 3D

byMilton Rodriguez Lopez -

 1. Gráficos 2D y 3D en C usando OpenGL

OpenGL es una biblioteca potente y estándar para gráficos en C. Este ejemplo demuestra cómo renderizar gráficos básicos 3D (como un cubo rotatorio) y dibujar figuras en 2D.

Código fuente en C:


#include 

// Variables para rotación
float angleX = 0.0f, angleY = 0.0f;

// Inicialización de OpenGL
void initGL() {
    glEnable(GL_DEPTH_TEST); // Habilitar el z-buffer
    glClearColor(0.1f, 0.1f, 0.1f, 1.0f); // Color de fondo
}

// Dibujar un cubo en 3D
void drawCube() {
    glBegin(GL_QUADS);
    glColor3f(1.0f, 0.0f, 0.0f); // Cara roja
    glVertex3f(-0.5f, -0.5f, -0.5f);
    glVertex3f( 0.5f, -0.5f, -0.5f);
    glVertex3f( 0.5f,  0.5f, -0.5f);
    glVertex3f(-0.5f,  0.5f, -0.5f);

    glColor3f(0.0f, 1.0f, 0.0f); // Cara verde
    glVertex3f(-0.5f, -0.5f,  0.5f);
    glVertex3f( 0.5f, -0.5f,  0.5f);
    glVertex3f( 0.5f,  0.5f,  0.5f);
    glVertex3f(-0.5f,  0.5f,  0.5f);

    // Agregar más colores para otras caras...
    glEnd();
}

// Renderizar la escena
void display() {
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // Limpiar buffers
    glLoadIdentity();
    glRotatef(angleX, 1.0f, 0.0f, 0.0f); // Rotación en X
    glRotatef(angleY, 0.0f, 1.0f, 0.0f); // Rotación en Y

    drawCube();
    glutSwapBuffers();
}

// Control de teclas para rotar el cubo
void specialKeys(int key, int x, int y) {
    if (key == GLUT_KEY_RIGHT) angleY += 5.0f;
    if (key == GLUT_KEY_LEFT)  angleY -= 5.0f;
    if (key == GLUT_KEY_UP)    angleX += 5.0f;
    if (key == GLUT_KEY_DOWN)  angleX -= 5.0f;
    glutPostRedisplay();
}

int main(int argc, char** argv) {
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH);
    glutInitWindowSize(800, 600);
    glutCreateWindow("Gráficos 3D en OpenGL");

    initGL();
    glutDisplayFunc(display);
    glutSpecialFunc(specialKeys);
    glutMainLoop();
    return 0;
}

Este ejemplo dibuja un cubo 3D y permite rotarlo mediante teclas. OpenGL es la base para manejar gráficos avanzados en 2D y 3D.

2. HTML/CSS/JavaScript: Gráficos 2D y 3D en Canvas/WebGL

Código fuente HTML/Canvas para gráficos 2D:


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gráficos 2D</title>
    <style>
        canvas {
            border: 1px solid black;
            margin: 20px auto;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas2D" width="500" height="500"></canvas>
    <script>
        const canvas = document.getElementById("canvas2D");
        const ctx = canvas.getContext("2d");

        // Dibujar un degradado circular
        const gradient = ctx.createRadialGradient(250, 250, 50, 250, 250, 250);
        gradient.addColorStop(0, "red");
        gradient.addColorStop(1, "blue");

        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Dibujar un círculo
        ctx.beginPath();
        ctx.arc(250, 250, 100, 0, Math.PI * 2);
        ctx.fillStyle = "rgba(0, 255, 0, 0.5)";
        ctx.fill();
    </script>
</body>
</html>

 Código fuente HTML/WebGL para gráficos 3D:


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gráficos 3D con WebGL</title>
</head>
<body>
    <canvas id="webglCanvas" width="500" height="500"></canvas>
    <script>
        const canvas = document.getElementById("webglCanvas");
        const gl = canvas.getContext("webgl");

        if (!gl) {
            alert("WebGL no es compatible con tu navegador");
        }

        // Configuración básica
        gl.clearColor(0.1, 0.1, 0.1, 1.0); // Color de fondo
        gl.clear(gl.COLOR_BUFFER_BIT);    // Limpiar pantalla

        // Aquí puedes agregar shaders y cargar geometrías 3D...
        console.log("WebGL está inicializado");
    </script>
</body>
</html>

El ejemplo en Canvas permite trabajar con gráficos 2D, mientras que en WebGL, puedes trabajar directamente con gráficos en 3D. WebGL se basa en una API derivada de OpenGL para la web.

Estos códigos demuestran cómo implementar gráficos avanzados en 2D y 3D en C y en la web usando HTML/Canvas/WebGL.

 

 

Creación y manipulación de gráficos en 3D

A continuación, te mostraré ejemplos avanzados de creación y manipulación de gráficos en 3D, y también cómo convertir gráficos 2D en representaciones tridimensionales usando diferentes lenguajes y frameworks. Para este propósito, trabajaremos con WebGL en JavaScript para gráficos en la web y con OpenGL en lenguaje C.

1. Conversión de gráficos 2D a 3D (WebGL)

El siguiente ejemplo utiliza WebGL para convertir puntos 2D (como vértices) en representaciones 3D al añadir una dimensión "z". 

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gráficos 3D con WebGL</title>
    <style>
        canvas {
            width: 600px;
            height: 400px;
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>
    <canvas id="webglCanvas"></canvas>
    <script>
        const canvas = document.getElementById("webglCanvas");
        const gl = canvas.getContext("webgl");

        if (!gl) {
            alert("WebGL no es compatible con tu navegador");
            throw new Error("WebGL no inicializado");
        }

        // Vértices en 2D convertidos a 3D añadiendo coordenada z
        const vertices = new Float32Array([
            // Triángulo en coordenadas 3D
            -0.5, -0.5, 0.0, // Vértice 1
             0.5, -0.5, 0.0, // Vértice 2
             0.0,  0.5, 0.0  // Vértice 3
        ]);

        // Buffer para almacenar los vértices
        const vertexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        // Shader para vértices
        const vertexShaderSource = `
            attribute vec3 coordinates;
            void main(void) {
                gl_Position = vec4(coordinates, 1.0); // Coordenadas 3D
            }
        `;

        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertexShader, vertexShaderSource);
        gl.compileShader(vertexShader);

        // Shader para fragmentos
        const fragmentShaderSource = `
            void main(void) {
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Color rojo
            }
        `;

        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fragmentShader, fragmentShaderSource);
        gl.compileShader(fragmentShader);

        // Programa de shaders
        const shaderProgram = gl.createProgram();
        gl.attachShader(shaderProgram, vertexShader);
        gl.attachShader(shaderProgram, fragmentShader);
        gl.linkProgram(shaderProgram);
        gl.useProgram(shaderProgram);

        // Vincular el buffer con los atributos del shader
        const coordinates = gl.getAttribLocation(shaderProgram, "coordinates");
        gl.vertexAttribPointer(coordinates, 3, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(coordinates);

        // Dibujar el triángulo
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLES, 0, 3);
    </script>
</body>
</html>

Este código utiliza vértices 2D y los convierte en coordenadas 3D al agregar la dimensión z, representando un triángulo rojo en un espacio tridimensional.

2. Manipulación de gráficos en 3D con OpenGL (Lenguaje C)

El siguiente ejemplo en OpenGL muestra cómo renderizar gráficos en 3D, como un cubo rotatorio. 

#include <GL/glut.h>

// Variables de rotación
float rotX = 0.0f, rotY = 0.0f;

void initGL() {
    glEnable(GL_DEPTH_TEST); // Habilitar buffer de profundidad
    glClearColor(0.2f, 0.2f, 0.2f, 1.0f); // Color de fondo
}

void drawCube() {
    glBegin(GL_QUADS);

    // Cara frontal
    glColor3f(1.0f, 0.0f, 0.0f); // Rojo
    glVertex3f(-0.5f, -0.5f, 0.5f);
    glVertex3f( 0.5f, -0.5f, 0.5f);
    glVertex3f( 0.5f,  0.5f, 0.5f);
    glVertex3f(-0.5f,  0.5f, 0.5f);

    // Agregar otras caras (verde, azul, etc.)...

    glEnd();
}

void display() {
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    glLoadIdentity();

    glRotatef(rotX, 1.0f, 0.0f, 0.0f);
    glRotatef(rotY, 0.0f, 1.0f, 0.0f);
    drawCube();

    glutSwapBuffers();
}

void specialKeys(int key, int x, int y) {
    if (key == GLUT_KEY_UP) rotX += 5.0f;
    if (key == GLUT_KEY_DOWN) rotX -= 5.0f;
    if (key == GLUT_KEY_RIGHT) rotY += 5.0f;
    if (key == GLUT_KEY_LEFT) rotY -= 5.0f;
    glutPostRedisplay();
}

int main(int argc, char** argv) {
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH);
    glutInitWindowSize(800, 600);
    glutCreateWindow("Cubo 3D con OpenGL");

    initGL();
    glutDisplayFunc(display);
    glutSpecialFunc(specialKeys);
    glutMainLoop();
    return 0;
}

En este ejemplo, renderizamos un cubo en 3D y permitimos rotarlo con las teclas de dirección.

3. Principios de conversión entre 2D y 3D

La transición de gráficos 2D a 3D implica agregar una nueva dimensión (z) a los puntos en el espacio, convirtiendo objetos planos en volúmenes. Los frameworks como WebGL y OpenGL permiten manipular esta dimensión extra con facilidad.

 

 

 

 

 

Tags

Entradas que pueden interesarte

Destacado

Bootloader Avanzado en Ensamblador

Bootloader Avanzado en Ensamblador Características del Bootloader Se carga en la dirección 0x7C00 (BIOS). ...