¿Que es WebGL?

WebGL es una API multiplataforma destinada a crear gráficos 3D en un navegador web. Esta herramienta está basada en la conocida biblioteca de gráficos OpenGL ES 2.0, además utiliza su mismo lenguaje de sombreado o "shading", GLSL. La API WebGL ha sido desarrollada siguiendo el estándar OpenGL, es decir, si conoces OpenGL, te será muy sencillo adaptarte a esta nueva API para navegadores web.

WebGL
Logo WebGL
Esta nueva tecnología se ejecuta en el elemento Canvas de HTML5, además tiene una completa integración con todas las interfaces DOM (Document Object Model). Al ser una API DOM, podemos utilizar cualquier lenguaje de programación compatible con DOM como javascript o java.

Los propietarios de los navegadores más famosos y utilizados, Google (Chrome), Opera (Opera), Mozilla (Firefox) y Apple (Safari), son miembros del grupo de trabajo del consorcio Khronos para el desarrollo de WebGL, además de muchos otros programadores independientes de aplicaciones 3d.

Las ventajas de esta increíble API son las siguientes:

  • WebGL se basa en un conocido y ampliamente aceptado estándar de gráficos 3D (OpenGL).
  • Compatibilidad con distintos navegadores y plataformas.
  • Al ser una API DOM, es compatible con todos los elementos del estándar HTML.
  • Gráficos 3D acelerados por hardware (CPU y tarjeta gráfica).
  • Al utilizar lenguajes de programación interpretados no es necesario compilar tu código antes de renderizarlo y mostrarlo por pantalla.
Sigue nuestra guía WebGL para aprender a utilizar esta fascinante nueva tecnología.
Leccion 1: Primeros pasos con WebGL (con ejemplos)

Comentarios

  1. Tengo un problema con varios objetos, cargados en webgle. Y al utilizar ray.intersectObjects, no encuentra a varios de ellos. (estan a nivel de camara mas a la derecha). Giran con teclas, se mueven con el mouse. al poner el mouse el intersect los ve en otro sitio. Al presionar CTRL + RUEDA DEL MOUSE (zoom), se arregla. Parece que no ha cargado bien los objetos. Que luego se terminan de cargar con el zoom y termina de cargar los objetos. (Se ubican en la pantalla en una posicion mas a la derecha y cambia al doble de tamaño)
    Video: https://drive.google.com/file/d/0B_oPu5nzzbVUby0yMmxScUp5aE0/view
    Uitilizo para intersectar este codigo (lleno un input con el nombre del objeto):

    var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
    projector.unprojectVector( vector, camera );
    var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
    var intersects = ray.intersectObjects( scene.children );
    if ( intersects.length > 0 )
    {
    if ( intersects[ 0 ].object != INTERSECTED )
    {
    INTERSECTED = intersects[ 0 ].object;
    $("#xxx").val(INTERSECTED.name);
    }
    }
    else // there are no intersections
    {
    INTERSECTED = null;
    }
    No tengo idea como arreglarlo.

    ResponderEliminar

Publicar un comentario

Si tenéis alguna duda o sugerencia, no dudéis en comentar. ;)

Entradas populares de este blog

Autocompletado de codigo en Sublime Text

Compilar y ejecutar JAVA desde Notepad++

Compilar y ejecutar JAVA desde Sublime Text