jump to navigation

(Almost) Full Circle March 25, 2010

Posted 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:

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.


No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Get every new post delivered to your Inbox.

%d bloggers like this: