(Almost) Full Circle March 25, 2010Posted by Andor Salga in Open Source, Processing.js, webgl.
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:
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.