En el mundo del desarrollo web existe una gran corriente que busca dejar de lado los más usados lenguajes de programación y trabajar enteramente con elementos novedosos como es el caso de el html5 , javascript del lado del servidor y WEBGL. Toda esta intención de renovar los parámetros produce que diversos proyectos de innovación.
Realidad Aumentada con Javascript
Hace unos años atrás busqué cómo hacer realidad aumentada para web y sin flash o actionscript 3 y encontré JSARtoolkit (Javascript Augmented Reality) Este prototipo era algo limitado porque al final si usaba el flash player para poder compilar el elemento. Hace unas semanas me enteré que JSARtoolkit había avanzado en su código fuente y ya era realmente un producto de realidad aumentada con base 100% javascript.
Aca les traigo un poco de mi avance:
Antes de leer el código es bueno advertirles que es una exploración propia y primitiva hacia el propio proyecto de javascript. Solo intento mostrarles cómo trabajo con este lenguaje.
- Lo primero que debemos hacer es descargar el código fuente de Github o al menos el archivo javascript
- Usaremos WEBGL de la mano de la librería de javascript Three para mostrar elementos 3d en navegadores. Esta librería es lo máximo.
- Lo primero que haremos es iniciar el html de la web.
<html><head>
<script src=»JSARToolKit.js»></script>
<script src=»Three.js»></script>
<script>
- Comencemos a usar los atributos de video y audio que vienen con el html5 y que ahora la mayoría de navegadores soporta.
var video = document.createElement(‘video’);
video.width = 640;
video.height = 480;var getUserMedia = function(t, onsuccess, onerror) {
if (navigator.getUserMedia) {
return navigator.getUserMedia(t, onsuccess, onerror);
} else if (navigator.webkitGetUserMedia) {
return navigator.webkitGetUserMedia(t, onsuccess, onerror);
} else if (navigator.mozGetUserMedia) {
return navigator.mozGetUserMedia(t, onsuccess, onerror);
} else if (navigator.msGetUserMedia) {
return navigator.msGetUserMedia(t, onsuccess, onerror);
} else {
//onerror(new Error(«No getUserMedia implementation found.»));
alert(«no webcam»);
}
};var URL = window.URL || window.webkitURL;
var createObjectURL = URL.createObjectURL || webkitURL.createObjectURL;
if (!createObjectURL) {
throw new Error(«URL.createObjectURL not found.»);
}getUserMedia({‘video’: true},
function(stream) {
var url = createObjectURL(stream);
video.src = url;
},
function(error) {
alert(«Couldn’t access webcam.»);
}
);
- Ahora insertamos el proceso de jsartoolkit y su configuración simple.
var raster = new NyARRgbRaster_Canvas2D(canvas);
var param = new FLARParam(320,240);var detector = new FLARMultiIdMarkerDetector(param, 120);
detector.setContinueMode(true);
param.copyCameraMatrix(display.camera.perspectiveMatrix, 10, 10000);
- Ahora toca aprender el tema de webgl con Three.js
- Antes de continuar con la segunda parte toca aprender webgl a profundidad.
- Aca podemos aprender webgl
I dont know, how old is your post, but man, its amazing!!!!, thk U a lot for this tutorial!