viernes, 4 de octubre de 2013

JSARtoolkit: Realidad Aumentada para la Web

9:58     No comments
JSARtoolkit es la nueva librería que nos da la posibilidad de desarrollar Realidad Aumentada con JavaScript y proyectarla mediante un archivo de Flash (swf).

Yusuke Kawasaki, el creador, presentó JSARtoolkit en el 2009 y desde la fecha no ha realizado ninguna actualización. Es por eso que la librería aún está en fase alpha, ¡pero no es impedimento para nosotros! Podemos intentar realizar algunos experimentos en el foro de la comunidad. Necesitamos muchas ideas y unos cuantos desarrolladores con ganas de estropear, arreglar y complementar códigos.




Postdata: Perdonen la resolución de mi cámara)

Luego de la publicación de este post crearé un hilo de conversación en el foro para los interesados en realizar experimentos con JavaScript. Para que tengan una idea de lo complicado que es el asunto (relativamente fácil) les dejo los códigos que trabajé para visualizar las letras:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<script type="text/javascript" src="../js/swfobject.js"></script>
<script type="text/javascript" src="../js/jsar.js"></script>
<script type="text/javascript"><!--
 
    var jsar;
    var MARKER_CODE  = [ '../code/hiro.pat', '../code/emiliusvgs.pat', ];
    var MARKER_TITLE = [ 'Aumentality', "Emiliusvgs" ];
 
    function ondetected ( result ) {
        jsar.clearHTML();
        if ( ! result.detected ) return;
 
        var base = jsar.getHTML();
        for( var i=0; i<result.markers.length; i++ ) {
            var marker = result.markers[i];
 
 
            var div = document.createElement( 'div' );
            div.style.fontFamily = 'Verdana';
            div.style.position   = 'absolute';
 
            div.style.color = "green";
 
            var minx = marker.getLeft();
            var miny = marker.getTop();
            var maxy = marker.getBottom();
            var size = Math.floor( (maxy - miny) / 6 );
            div.style.left     = (minx+size*1)+'px';
            div.style.top      = (miny+size*1)+'px';
            div.style.fontSize = (size*1)+'px';
 
 
            var title = MARKER_TITLE[marker.codeid];
            var txt = document.createTextNode( title );
            div.appendChild( txt );
            base.appendChild( div );
        }
    }
 
    function init () {
        jsar = new JSAR( 'jsar_here' );
        jsar.drawMarkerRect = false;
        jsar.onDetected = ondetected;
        jsar.onLost     = ondetected;
        jsar.captureX   = 320;
        jsar.captureY   = 240;
        jsar.displayX   = 640;
        jsar.displayY   = 480;
        jsar.init();
        jsar.setMarker( MARKER_CODE );
    }
 
    window.onload = init;
--></script>
Fuente: http://blog.aumentality.com/tutoriales/jsartoolkit-realidad-aumentada-para-la-web/

0 comentarios :

Publicar un comentario

Suscribirse a: Enviar comentarios ( Atom )