28 puntos por kciter1 2024-05-07 | 3 comentarios | Compartir por WhatsApp

Explica el pipeline de renderizado 3D mientras implementa un renderizador 3D ASCII

El resultado de este artículo puede verse, además de en la entrada del blog, en los siguientes enlaces
GitHub: https://github.com/kciter/ascii-3d-renderer.js
Chromatic: https://6637eb83d047d2bb1b3cfe67-bdnazvfsel.chromatic.com/?path=/story…

  • ¿Es posible hacer que ASCII se vea como 3D?
    • ASCII es similar a píxeles ampliados en blanco y negro
    • Se puede ajustar el brillo según la densidad de los caracteres
  • ¿Cómo se convierten coordenadas 3D en coordenadas 2D?
    • En general, se avanza mediante procesamiento de vértices, rasterización y procesamiento de fragmentos
    • A las coordenadas 3D se les llama vértices, y se refiere a los "puntos" ubicados en el espacio 3D
    • Como con un solo vértice no se puede representar un objeto, se agrupan varios vértices para representarlo
    • La unidad mínima para representar un objeto se llama polígono
  • Procesamiento de vértices
    • Al proceso de transformar vértices se le llama procesamiento de vértices
    • Se realiza en el orden de transformación de mundo, transformación de vista y transformación de proyección
    • Cada transformación se calcula usando matrices
    • La transformación de mundo consiste en colocar en el espacio 3D los vértices contenidos en un archivo de modelo 3D
    • La transformación de vista consiste en colocar la cámara y calcular desde qué coordenadas y desde qué punto de vista se observa el objeto
    • La transformación de proyección es el cálculo para expresar la perspectiva. Normalmente se usa proyección en perspectiva.
    • Mediante la transformación de proyección es posible convertir a coordenadas del espacio 2D
  • Rasterización
    • Proceso de convertir coordenadas del espacio 2D en coordenadas de píxel
    • Pasa por clipping, división en perspectiva, eliminación de caras traseras, transformación de viewport y scan conversion
    • En este artículo, esas tareas se implementan combinándolas de forma adecuada
  • Procesamiento de fragmentos
    • Proceso de manejar las coordenadas ya convertidas en píxeles
    • En un renderizador 3D común se realizan posprocesos como operaciones de shader
    • En este artículo solo se aplica el resultado del cálculo de iluminación
  • Como la parte de implementación es casi todo código fuente, se omite en el resumen

3 comentarios

 
cosine20 2024-05-09

Lo leí con gusto. Me trajo muy buenos recuerdos de la clase de gráficos por computadora que tomé en la universidad.

 
toaonly 2024-05-08

Lo leí con gusto. Me impresionó que hayas trabajado considerando incluso la posición de la cámara.

 
thesol9 2024-05-07

Hasta una explicación del pipeline básico de renderizado
Fue un contenido muy entretenido.