tecznotes

Michal Migurski's notebook, listening post, and soapbox. Subscribe to this blog. Check out the rest of my site as well.

Mar 19, 2012 4:00am

tinkering with webgl

With some help from Ryan and Tom, I’ve been wrapping my pea-sized brain around WebGL. I’m doing my usual start-from-the-bottom thing so it’s been a great exercise in understanding a programming paradigm built around static lists and buffers. I’ve worked like this before, but not extensively and not with a render output this smoking fast.

It’s all simple stuff so far, but I’m chasing two ideas: using WebGL for simple 2D output with an added speed bump, and driving it from SVG or the HTML DOM. None of the examples below will work unless you’re using a current WebGL-compliant browser, which for me was Chrome 17.

The elephant is me figuring out the basics of viewport transformations that match pixel positions, image textures, and simple animation passed via vertex buffers:

The monkey is a test to see how many things I can throw around on a screen without sacrificing framerate, as well as some sanity checks on coding style. Turns out, the answer is “lots”. Interesting things happen with this one when you switch to and from its tab; I’m using a basic timeout-based mechanism for the little face particles, and it clearly falls into a regular rhythm.

The unicode patterns (borrowed from Sarah Nahm) are governed by an invisible D3 force layout, and are a test of synchronization between multiple “programs” and driving a visual effect from a geometric layout. Also additive blending for punchiness. Try dragging the boxes:

These are some of the resources I’ve been using to get up to speed:

I’m still not totally comfortable with the programming approach of maintaining collections of static lists in preference to objects and other data structures, and I’ve been avoiding three.js until I can get comfortable with how WebGL works for simple, two-dimensional graphics. No lighting effects or spinny statues quite yet.

July 2015
Su M Tu W Th F Sa
   
 

Recent Entries

  1. writing a new continuous integration service for openaddresses
  2. state of the map 2015
  3. bike ten: schwinn touring, v2
  4. blog all oft-played tracks VI
  5. 2015 fellowship reader
  6. bike ten: schwinn touring
  7. more open address machine
  8. open address machine
  9. making the right job for the tool
  10. the hard part
  11. end the age of gotham-everywhere
  12. on this day
  13. write code
  14. managers are awesome / managers are cool when they’re part of your team
  15. bike eight: french parts
  16. being a client
  17. bike seven: building a cargo bike
  18. blog all video timecodes: how buildings learn, part 3
  19. talk notes, urban airship speaker series
  20. john mcphee on structure

Archives