Una de las características más novedosas de HTML5 es su capacidad para usar gráficos tridimensionales.
WebGL es la especificación que se está desarrollando para mostrar sin plugins estos gráficos 3D. Además, WebGL permite renderizar mediante aceleración por hardware.
Estamos hablando de que los navegadores pueden mover aplicaciones similares a videojuegos como Quake o programas como 3DStudio. Parece increíble… pero es una realidad.
Renderizado real con WebGL
En este tutorial haré una introducción a Three.js, una librería Javascript muy similar a Papervision3D o Away3D, para desarrollar de forma ágil y eficaz (sorprende su rendimiento) entornos tridimensionales a tiempo real y animaciones.
Podéis ver el ejemplo completo aquí.
Primeros pasos con Three.js
En primer lugar descargaremos la última versión de Three.js de Github. En el repositorio encontraremos, además de la librería, una treintena de ejemplos espectaculares.
Crearemos un proyecto HTML5 sencillo, con un index.html y una carpeta js, donde copiaremos la librería jQuery (que usaré en ocasiones por comodidad) y la última versión de three.js.
Primero definiremos un div que usaremos de contenedor y le aplicamos un poco de CSS para definir tamaño y color:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf8'>
<title>Experimentos 3D</title>
<style type="text/css">
body{
margin: 0;
}
#escenario{
background: #000;
height: 600px;
position: fixed;
width: 800px;
}
</style>
</head>
<body>
<div id="escenario"></div>
</body>
</html>
E importamos nuestras librerías:
<script type="text/javascript" src='js/jquery-1.8.2.min.js'></script>
<script type="text/javascript" src='js/threelast.js'></script>
A partir de aquí es donde nace la magia.
Primero definiremos nuestro motor de renderizado y nuestra escena. Nuestro render es el que hace que se interpreten y muestren nuestros elementos tridimensionales, nuestras luces, sombras… Para definir un render de WebGL incluiremos en javascript:
var miRender = new THREE.WebGLRenderer();
También crearemos una escena. La escena es el espacio tridimensional “infinito” donde incluiremos nuestros elementos:
var miEscena = new THREE.Scene();
Por último indicamos el tamaño del render y embebemos nuestro render dentro de la capa que creamos en HTML. De esta forma Three.js generará el canvas que mostrará el contenido de nuestra infografía.
//El ancho y alto coinciden con ancho y alto de nuestro
//div contenedor
var ancho = 800,
alto = 600;
//Aplicamos los tamaños.
miRender.setSize(ancho, alto);
//Embebemos
escenario.append(miRender.domElement);
Luces, cámara, ACCIÓN!
Lo siguiente que necesitaremos en nuestra escena es la cámara que nos muestre el contenido. Nuestra cámara tendrá mínimo 4 valores: el ángulo, el ratio de proporción, la distancia focal mínima y la máxima.
//El ángulo definirá la lejanía o cercanía con la que
//veremos nuestros objetos. El ratio es la proporción
//resultante entre ancho y alto. Cerca y lejos definen
//la distancia mínima y la máxima focal que se renderizará.
var angulo = 30,
ratio = ancho / alto,
cerca = 0.1,
lejos = 10000;
//Declaramos la cámara
var miCamara = new THREE.PerspectiveCamera(angulo, ratio, cerca, lejos);
//Definimos la posición de la cámara en coordenadas x, y, z
miCamara.position.x = 300;
miCamara.position.y = 300;
miCamara.position.z = -300;
Por defecto la cámara estará mirando hacia el punto 0,0,0 de coordenadas. Podríamos enfocarla hacia cualquier otro punto usando el método lookAt que veremos más adelante.
Para agrecar la cámara al escenario usaremos el método add:
miEscena.add(miCamara);
Ahora creamos una luz que ilumine nuestros futuros objetos 3D. Existen varios tipos de luces, aunque mi favorita es la SpotLight, ya que es la única que permite usar sombras.
//Declaramos nuestra luz. Esta recibe como parámetro el color.
var luz = new THREE.SpotLight(0xFFFFFF);
//Indicamos una posición para nuestra luz en cada eje.
luz.position.x = 0;
luz.position.y = 200;
luz.position.z = 200;
//Por último la añadimos a la escena
miEscena.add(luz);
Añadiendo objetos
Hasta ahora lo único que hemos logrado es tener un bonito entorno 3D sin mucha utilidad. Deberíamos crear alguna figura básica para contemplar el resultado de nuestro trabajo. Incluiremos un cubo:
//Material es un material del tipo Lambert, con un color
//hexadecimal gris claro. Esta será la textura de nuestro
//objeto
var material = new THREE.MeshLambertMaterial({color: 0xebebeb});
//Nuestros elementos son mallas (mesh) a los que les aplicamos
//estructuras geométricas (en este caso un cubo) y un material
var cubo = new THREE.Mesh(new THREE.CubeGeometry(60, 60, 60), material);
//Posicionamos
cubo.position.x = 0;
cubo.position.y = 50;
cubo.position.z = 0;
//Y añadimos a la escena
miEscena.add(cubo);
Para finalizar nuestro ejemplo, sólo debemos ordenar a nuestro render que visualice lo que hemos creado:
//Con el método lookAt, enfocamos con la cámara al cubo
miCamara.lookAt(cubo.position);
//Aplicamos el método render incluyendo la escena y la cámara que vamos a visualizar
miRender.render(miEscena, miCamara);
Para terminar
Aunque algunos navegadores aún no incluyen soporte a WebGL, está claro que el 3D se va acercando cada vez más al mundo de la web. La posibilidad de usar estos gráficos sin tener que instalar plugins adicionales (como flash, unity o silverlight) es algo realmente bueno.
Podéis ver un ejemplo completo aquí (recomiendo usar Chrome) y no dudéis en consultar cualquier duda en los comentarios o en @ajnavajas
VN:F [1.9.22_1171]
Rating: 8.3/10 (3 votes cast)
.