Entradas

Mostrando las entradas etiquetadas como Guia WebGL

Autocompletado para WebGL

Imagen
Al no ser aun un estándar, webgl cuenta con poca compatibilidad con los IDEs de desarrollo, provocando que nuestro querido efecto de autocompletado de funciones y atributos no esté presente en ninguno de ellos. Para solventar esto, se me ocurrió trastear con el autocompletado de Netbeans, para conseguir que este ayudara a completar el nombre de las funciones y atributos de la biblioteca de gráficos WebGL, que como ya sabréis, suelen ser nombres muy largos y en inglés, además son como uno 150 entre funciones y atributos, así que sería muy difícil aprenderlos todos de memoria. Lo primero que debemos saber es que esto funciona en Netbeans 7.2 y posteriores , puede que en anteriores versiones también, pero no lo he probado. Una vez tengamos nuestro IDE instalado, cosa que aconsejo ya que es verdaderamente bueno para desarrollo web , necesitamos descargar un archivo javascript llamado webglMin.js (Está al final de la entrada) , en cual debemos añadir a nue...
Publicar un comentario
Seguir leyendo »

Leccion 2: Introduccion a los shaders en WebGL

Imagen
Los shaders son a grandes rasgos, pequeños programas que se ejecutan en la tarjeta gráfica para representar todos y cada uno de los píxeles que compondrán la escena final en 3D. En concreto tenemos dos tipos de shaders: Vertex shader (VS): Se trata de una función de procesamiento gráfico, que se encarga de manipular y representar los vertex (vértices) en un plano 3D, se encarga por ejemplo de calcular el color, la textura o la posición en la escena de ese punto. Fragment shader (FS) o Pixel shader (PS): De forma parecida al VS, estos son funciones o pequeños programitas que manipulan los fragments (algo así como píxeles con datos adicionales como color, iluminacion, etc). GLSL el lenguaje para shaders
3 comentarios
Seguir leyendo »

Leccion 1: Primeros pasos con WebGL (con ejemplos)

Imagen
En esta entrada aprenderemos los primeros pasos que debemos dar antes de poder dibujar algo en el canvas utilizando WebGL. De esta manera y sin más dilación, si ya leíste la entrada anterior  ¿Que es WebGL?  y tienes una idea más o menos clara de lo que es WebGL y las tecnologías que utilizaremos, empezamos. Lo primero que necesitamos para empezar con WebGL es iniciar nuestro archivo HTML el cual nos servirá para prácticamente todas las lecciones que hagamos. <!DOCTYPE html> <html> <head> <title>Guia WebGL</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> //Codigo javascript </script> </head> <body> <canvas id="canvas"></canvas> </body> </html>
2 comentarios
Seguir leyendo »

¿Que es WebGL?

Imagen
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. 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 .
1 comentario
Seguir leyendo »