SXSW 2012: Leaving Flatland: Getting Started with WebGL

Nicolas Garcia Belmonte (@philogb)

Luz Caballero (@gerbille)

What is WebGL?

WebGL was created by the same people who made OpenGL, which migrated to OpenGL ES (used for mobile devices). People who already know how to use OpenGL can easily adopt their coding skills to the web. It runs on Javascript libraries that have complete wrappers (hooray!).

It can be used on desktops in Opera, Firefox, Chrome, and Safari. In mobile it can be used in Opera and Firefox.

1. Create a canvas element:
<canvas id=”c” width=”100″ height=”100″></canvas>
2. Grab the element:

What can WebGL be used for?

Data visualization, creative coding, art, 3D design environments, music videos, plotting math functions, 3D modeling of objects and space, creating textures, and fast processing of any data. (HTML5 Game)

How does WebGL work?

Vexter Shader > Triangle Assembly > Rasterization > Fragment Shader (Fog effects and lighting effects)

Getting started with WebGL

The main element of a 3D scene are the objects/models. These objects are created out of the vertices dynamically or uploaded from a model created from a 3D software.

Choosing a library:

  • Three.js: Largest and most popular. It has a very large community. You can import from many different formats.
  • PhiloGL: Nicholas created this. It is structured in a way that is more familiar with people who know Javascript. It’s used to do data visualizations.
  • GLGE: Animated textures.
  • J3D

More about PhiloGL

Most people think a WebGL app is a huge app that takes over the entire HTML screen through a canvas. But why? It can just be a simple enhancement to accent other HTML elements.

  • Idiomatic JavaScript: concise and expressive
  • Rich Module System: Core, Math, WebGL, program, Shaders, O3D, Camera, Scene, Event, Fx, IO, Workers, Media
  • Flexible and Performance Focused
  • Complete documentation
Posted in SXSW 2012.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.