Code Smoothie

Blank Output from WebGL

A programming rant follows.

I just spent two hours trying to figure out why my “hello world” triangle in WebGL produced no result. I checked my shader code, as well as the buffer data many times, and they matched the tutorial’s) perfectly. I also happened to be using TWGL, which is a concise wrapper for the JS WebGL API. I suspected that was the culprit, so I searched around the web for a very long time to see if I was missing something. My eyes hurt and my body felt sore. After coming back from a brief break, I discovered these lines from the tutorial:

  // fragment shaders don't have a default precision so we need
  // to pick one. mediump is a good default
  precision mediump float;
WebGL Lesson You must specify the precision in fragment shader code.
Life Lesson Slow and steady wins the race.
Life Lesson #2 Take breaks often, and don’t attempt to program for two hours straight unless you’re in the zone. You’re not in the zone if you’ve worked a long time but haven’t figured out something that seems trivial.