(Almost) Full Circle

Months ago, before I began working on Processing.js, I created a simple Processing sketch to get used to the syntax and then I blogged about it. When writing the sketch, I tried to use as many functions I could. Spheres, points, transformations, lights, materials, text, etc. Most of those functions we have already ported over to Pjs along with many, many others.

Today I went back to that first Processing sketch and threw the source in my Pjs Web IDE. I admit, I did have to remove a couple functions which we’re still working on (text, noise), but the final demo is pretty damn close to what I first wrote:

If you have a WebGL-enabled browser, you can run the live demo.

Vertex V.S. Fragment

While working on lights and materials, I was reminded how much per-vertex lighting sucks compared to per-fragment lighting. Especially with spotlights, you can get some awful artifacts. If you look closely at the screenshot above, you’ll see the shiny part isn’t all that smooth. That’s because our shaders are emulating the fixed-function pipeline, which Processing uses. But since we are using WebGL, we have option of writing shaders to do per-fragment. This can be GPU-intensive, but it’s something we should think about.