Gráficos con Canvas, Three.js y 3D con A-Frame

Dibujar en el navegador va mucho más allá de HTML y CSS

El navegador también puede trabajar con gráficos directamente. Para eso existen tecnologías como Canvas, Three.js y A-Frame, pero cada una trabaja a un nivel diferente.

1. Canvas

<canvas> es un elemento de HTML que proporciona una superficie de dibujo controlada mediante JavaScript.

Puede utilizarse para representar gráficos 2D mediante la API de Canvas y también sirve como superficie sobre la que otras tecnologías pueden renderizar contenido.

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

ctx.fillRect(20, 20, 100, 50);

Aquí no existe un elemento HTML separado para cada figura. JavaScript controla directamente el contexto de dibujo.

2. Three.js

Three.js es una biblioteca de JavaScript para trabajar con gráficos 3D en el navegador, normalmente utilizando WebGL como API de renderizado.

En lugar de dibujar manualmente cada elemento, Three.js proporciona una estructura para trabajar con conceptos como:

• Escenas.
• Cámaras.
• Geometrías.
• Materiales.
• Luces.
• Objetos 3D.
• Renderizadores.

El flujo básico puede verse así:

Scene
  +
Camera
  +
Mesh
  +
Light
  ->
Renderer
  ->
Canvas

Por ejemplo, un cubo en Three.js no es simplemente un rectángulo dibujado en pantalla. Tiene geometría, material, posición y una relación con la cámara dentro de una escena tridimensional.

3. A-Frame

A-Frame es un framework para construir experiencias 3D y de realidad virtual utilizando HTML y componentes.

Una escena básica puede declararse directamente en el marcado:

<a-scene>
  <a-box position="0 0 -5"></a-box>
</a-scene>

A-Frame utiliza una arquitectura basada en entidades y componentes para representar objetos y comportamientos dentro de la escena.

4. La diferencia importante

No son tres nombres para hacer exactamente lo mismo.

Canvas  -> superficie y API de dibujo
Three.js -> biblioteca para gráficos 3D
A-Frame  -> framework declarativo para experiencias 3D

Canvas trabaja directamente con una superficie de dibujo. Three.js proporciona abstracciones para construir escenas 3D. A-Frame permite describir una escena mediante HTML y componentes.

Consideraciones

Canvas es una de las bases para renderizar gráficos en el navegador. Three.js se encarga de gran parte de la complejidad necesaria para trabajar con escenas 3D. A-Frame lleva ese trabajo hacia una estructura declarativa basada en HTML y componentes.

La diferencia está en el nivel de abstracción. Canvas te da la superficie de dibujo. Three.js te da una arquitectura para trabajar con gráficos 3D. A-Frame añade una forma declarativa de construir esas escenas.

© Arturo Juárez Monroy