Archivo de la etiqueta: WebGL

Canvas y WebGL usando Three.js

canvas
Siguiendo con los post de Canvas. Les mostraré un pequeño ejemplo de la utilización de Three.js, una librería de Canvas y WebGL muy sencilla de implementar.
Lo primero como siempre es importarla entre nuestras etiquetas head de nuestro html.
http://ajax.googleapis.com/ajax/libs/threejs/r67/three.min.js
Y creamos un div dentro de las etiquetas body del html con el id basicMoveWithThree donde se creará nuestro canvas. Además yo le especifiqué un ancho y un alto: style=”width: 600px; height: 400px;”.
Pegaré todo el código de este ejemplo y luego lo explicaré. Lo que haremos será crear un cubo con WebGL el cuál rotará sobre su mismo eje. Este es un ejemplo bastante sencillo, la idea es solo mostrar lo fácil que es utilizar esta librería.
[javascript]
window.addEventListener(‘load’, eventWindowLoaded, false);
function eventWindowLoaded(){
basicMoveWithThree();
}
function basicMoveWithThree(){
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(25, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 5;

var renderer = new THREE.WebGLRenderer();
renderer.setSize(600, 400);
renderer.setClearColor(‘#f7f7f7’, 1);
document.getElementById(‘basicMoveWithThree’).appendChild(renderer.domElement);

var geometry = new THREE.BoxGeometry(1,1,1);
var material = new THREE.MeshLambertMaterial({color: ‘blue’});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

var ambientLight = new THREE.AmbientLight(0x000044);
scene.add(ambientLight);

var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);

var angularSpeed = 0.2;
var lastTime = 0;
var render = function(){
var time = (new Date()).getTime();
var timeDiff = time – lastTime;
var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
cube.rotation.x += angleChange;
cube.rotation.y += angleChange;
lastTime = time;
renderer.render(scene, camera);
requestAnimationFrame(render);
};

render();
}
[/javascript]
En la primera parte del código cargo la función que contendrá mi script (esto es rutinario de javascript) y llamo a la función basicMoveWithThree declarada más abajo.
[javascript]
window.addEventListener(‘load’, eventWindowLoaded, false);
function eventWindowLoaded(){
basicMoveWithThree();
}
[/javascript]
Ahora ya la parte entretenida. Lo primero que debo hacer es crear una Escena donde si visualizará mi WebGL y es a esta donde se cargarán todos los elementos que vaya creando más adelante, y a su vez crear una cámara que será la perspectiva con la que veré la escena. Hay 3 tipos de cámaras: Camera, OrthographicCamera y PerspectiveCamera. Para este ejemplo usarémos la última, que recibe 4 parámetros:
– El campo de visión vertital de abajo hacia arriba en grados.
– Relación del aspecto del ancho dividido por la altura.
– Plano cercano.
– Plano lejano.
Y luego determino la posición de la cámara en grados.
[javascript]
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(25, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 5;
[/javascript]
El paso siguiente es determinar la forma en que se renderizará el Canvas o el WebGL (para este caso será con WebGL), el tamaño del canvas, el color de fondo, la profundidad, la sombra, la gama, etc.
Hay 4 formas de renderizar: CanvasRenderer, WebGLRenderer, WebGLRenderTarget y WebGLRenderTargetCube.
Pero para este caso usaremos WebGLRenderer, con un tamaño de 600 de ancho y 400 de alto, y usé el color de fondo de mi blog #f7f7f7 (por defecto es negro).
[javascript]
var renderer = new THREE.WebGLRenderer();
renderer.setSize(600, 400);
renderer.setClearColor(‘#f7f7f7’, 1);
[/javascript]
Junto a crear la forma de renderizar debo especificar donde lo aplicaré, en este caso será a un div con id ‘basicMoveWithThree’.
[javascript]
document.getElementById(‘basicMoveWithThree’).appendChild(renderer.domElement);
[/javascript]
Ahora crearemos el cubo. Debemos especificar el tipo de figura que usaremos, estas pueden ser figuras geométricas o curvas. Geométricas pueden ser: BoxGeometry, CircleGeometry, CubeGeometry, CylinderGeometry, ExtrudeGeometry, IcosahedronGeometry, LatheGeometry, OctahedronGeometry, ParametricGeometry, PlaneGeometry, PolyhedronGeometry, RingGeometry, ShapeGeometry, SphereGeometry, TetrahedronGeometry, TextGeometry, TorusGeometry, TorusKnotGeometry y TubeGeometry.
Y los tipos de curvas pueden ser: ArcCurve, ClosedSplineCurve3, CubicBezierCurve, CubicBezierCurve3, EllipseCurve, LineCurve, LineCurve3, QuadraticBezierCurve, QuadraticBezierCurve3, SplineCurve y SplineCurve3.
Y así ya podemos espeficiar el tipo de material (o superficie) del cuál estará compuesto nuestro cubo. Estos pueden ser: LineBasicMaterial, LineDashedMaterial, Material, MeshBasicMaterial, MeshDepthMaterial, MeshFaceMaterial, MeshLambertMaterial, MeshNormalMaterial, MeshPhongMaterial, PointCloudMaterial, RawShaderMaterial, ShaderMaterial, SpriteCanvasMaterial y SpriteMaterial.
Es importante elegir bien el tipo de material de nuestros objetos ya que esto influirá si aplicamos otros aspectos al escenario como la luz. Para este ejemplo usaré MeshLambertMaterial y le pasaré el color azul como parámetro, la clase MeshLambertMaterial puede recibir varios parámetros como intensidad de la luz o la refracción.
Luego creamos el elemento pasandole el elemento geométrico y el material del cuál estará compuesto, para luego agregarlo al escenario definido anteriormente con la función ‘add’.
[javascript]
var geometry = new THREE.BoxGeometry(1,1,1);
var material = new THREE.MeshLambertMaterial({color: ‘blue’});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
[/javascript]
También podemos trabajar con la luz y su dirección en el escenario. Los tipos de luz que podemos utilizar son: AmbientLight, AreaLight, DirectionalLight, HemisphereLight, Light, PointLight y SpotLight.
Para este ejemplo usaremos AmbientLight recibiendo como parámetro el color de la luz.
[javascript]
var ambientLight = new THREE.AmbientLight(0x000044);
scene.add(ambientLight);
[/javascript]
Y luego especificamos la dirección que tendrá la luz en la escena, también recibiendo el color de la luz.
[javascript]
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
[/javascript]
El paso final es ejecutar la renderización, y especificar los movientos que queramos realizar sobre los objetos que agregamos a la escena. Podemos utilizar la diferencia del tiempo actual para controlar las revoluciones de rotación de los elementos (en mi caso del cubo). Y luego es importante ejecutar requestAnimationFrame(render); para que el Canvas o WebGL se aplique en forma de frames (se vuelva a llamar).
[javascript]
var angularSpeed = 0.2;
var lastTime = 0;
var render = function () {
var time = (new Date()).getTime();
var timeDiff = time – lastTime;
var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
cube.rotation.x += angleChange;
cube.rotation.y += angleChange;
lastTime = time;
renderer.render(scene, camera);
requestAnimationFrame(render);
};
render();
[/javascript]
Y así finalmente nuestro WebGL se vería así!

Recuerden que pueden consultar toda la información de la librería en la página oficial y si tienen alguna observación o mejora del ejemplo no duden en comentarla. Saludos!