WebGL y SceneJS

Antes de seguir con el desarrollo de ejemplos se revisará la biblioteca SceneJS, que facilitará bastante el trabajo de diseño y programación WebGL.

SceneJS - Biblioteca 3D de código abierto, basada en WebGL

Entre las diversas bibliotecas de código abierto para WebGL que podemos usar, tenemos:

• Three.js
• GLGE
• CubicVR

Se usará la biblioteca SceneJS, desarrollada por @xeolabs.

Características de SceneJS

• Escena gráfica declarativa basada en JSON
• Biblioteca extensible de efectos y shaders. Acceso completo a las capacidades de los shaders de WebGL
• Física multihebra
• Importación desde formatos .OBJ, .3DS y .MD2
• Optimización (LOD, instanciación, escalamiento de resoluciones, etc.)
• Selección (objetos, regiones, etc.)
• Iluminación (ambiental, direccional, puntos)
• Cámaras
• Geometría (triángulos, lineas, puntos, plano, cajas, cilindros, esferas, texto, etc.)
• Texturas (color, reflexión, animación, etc.)
• Biblioteca de objetos (skyboxes, city, tank, earth)

Instalación de SceneJS

1. Bajar la biblioteca SceneJS (archivo scenejs.zip) desde la siguiente dirección:
   https://github.com/xeolabs/scenejs/releases/tag/v4.2.0
2. Descomprimir el zip y copiar todo el contenido de la carpeta scenejs en el servidor web. Idealmente copiar la carpeta en la raiz del servidor.

Configuración de SceneJS

A continuación vamos a construir una escena, en este caso un cilindro

//Incluir los plugins
SceneJS.setConfigs({
    pluginPath:"../scenejs/plugins"
});    

//Definir la escena
SceneJS.createScene({
        nodes:[
               {
                type:"cameras/orbit",
                yaw:30,
                pitch:-30,
                zoom:200,
                zoomSensitivity:10.0,
                nodes:[
                       {
                        type:"material",
                        color:{ r:0.0, g:0.0, b:1.0 },
                        nodes:[
                               {
                                type:"geometry/cylinder",
                                radiusTop:20, // Default 20
                                radiusBottom:20, // Default 20
                                height:100, // Default 100
                                radialSegments:24, // Default 8
                                heightSegments:1, // Default 1
                                openEnded:false // Default false
                               }
                              ]
                       }
                      ]
                }
               ]
});

Plugins

Un cubo

Veamos el caso del siguiente cubo:

//Incluir los plugins
SceneJS.setConfigs({
    pluginPath:"../scenejs/plugins"
});

//Definir escena
var scene = SceneJS.createScene({
    nodes:[
            {type: "cameras/trackball",
             eye: { x: 4, y: 4, z: -4.0 },
             nodes:[
                    {type:"material",
                     color: { r: 1.0, g: 0.0, b: 0.0 },    
                     nodes:[
                            {type:"geometry/box"
                            }
                           ]            
                    }
                   ]
            }
           ]
});

Ahora crearemos un cubo que gira:

//Incluir los plugins
SceneJS.setConfigs({
    pluginPath:"../scenejs/plugins"
});

//Definir escena
var scene = SceneJS.createScene({
    nodes:[
        {
            type:"material",
            color: { r: 0.0, g: 1.0, b: 0.0 },

            nodes:[
                {
                    type: "rotate",
                    id: "myRotate",
                    y: 1.0,
                    angle: 0,

                    nodes: [
                        {
                            type:"geometry/box",
                        }
                    ]
                }
            ]
        }
    ]
});    

scene.getNode("myRotate", function(myRotate) {

    var angle = 0;

    scene.on("tick",
        function() {
            myRotate.setAngle(angle += 0.5);
        });
});

← | Home | →