jump to navigation

Processing.js Got the hint() – Depth Tests April 16, 2010

Posted by Andor Saga in Open Source, Processing.js.
add a comment

Today I successfully implemented two constants for hint() in Processing.js, ENABLE_DEPTH_TEST and DISABLE_DEPTH_TEST. It seems to be working correctly for all browsers:

I’ve been seeing a lot of issue with the Processing smoothing constants which can be mapped to WebGL anti-aliasing, but I’m going to hack around the browser issues to get the code working as best I can.

Advertisements

WebGL Anti-aliasing in Processing.js April 15, 2010

Posted by Andor Saga in Open Source, Processing.js, webgl.
2 comments

I decided to take a short break from implementing rect() along with the transparency to work on Processing.js hints. Processing allows several 3D rendering hints such as:

DISABLE_OPENGL_2X_SMOOTH
ENABLE_OPENGL_4X_SMOOTH
ENABLE_NATIVE_FONTS
DISABLE_DEPTH_TEST
ENABLE_DEPTH_TEST
ENABLE_DEPTH_SORT
DISABLE_DEPTH_SORT
DISABLE_OPENGL_ERROR_REPORT
ENABLE_OPENGL_ERROR_REPORT

I started with smoothing. Processing uses JOGL to get the OpenGL capabilities. It then toggles the sample buffers and creates them.

GLCapabilities capabilities = new GLCapabilities();
if (!hints[DISABLE_OPENGL_2X_SMOOTH]) {
capabilities.setSampleBuffers(true);
capabilities.setNumSamples(2);
}

Like my other tests, I wanted to see the results of Processing before moving on to emulating it in Processing.js. My goal is to somehow map the hint() function of Processing into WebGL commands. I did notice a difference when toggling 2X, but not between 2X and 4X.

I then opened the WebGL spec to see if I could find anything relevant. I did find commands to get the sample buffers, but I also saw this:

ctx = canvas.getContext('webgl', { antialias: true});

I didn’t know this was possible, so I tried it. Turns out that anti-aliasing is enabled by default. I also played with toggling this attribute:

Minefield renders the same way regardless of enabling anti-aliasing. Webkit does what it should, except when explicitly disabling anti-aliasing. In that case, Webkit’s frame rate drops below 1 fps, and I just see flashes of the cube. Not being able to tell if it was disabling AA, I had to get a screenshot. As you can imagine trying to capture a screenshot of that wasn’t fun.

The next things I have to do is create a test case for disabled anti-aliasing in Webkit, file a bug, and look into sample buffers. I already played around with sample buffers a bit. I found when requesting them, both Minefield and Webkit are returning different results (0 and 1 respectively) which could very well be related to Minefield not doing AA.

Tracking down the Transparency Bug April 15, 2010

Posted by Andor Saga in Open Source, Processing.js.
1 comment so far

I’m playing with transparency in Processing.js and I’m trying to find a bug which occurs when rendering transparent rectangles. I was able to isolate the issue a bit today. When rendering with a white background, Minefield spits out a completely incorrect frame:

(clockwise: Webkit, Minefield, Processing)
Notice how off Minefield is. Now when rendering the exact same sketch with a black background:

Much closer to what I would expect. Is this a Minefield issue? It could be, but I’ll need to create a reduced test case without any Processing.js code to prove that.

3D rect() Transparency in Processing.js April 14, 2010

Posted by Andor Saga in Open Source, Processing.js, webgl.
add a comment

In my last couple of blogs, I mentioned I’m working on the rect() function Processing.js. Today I created a test in Processing to make sure I’m on the right track. I drew a bunch of rectangles in a 3D context (using WebGL) and here is the result:

From this I can see if I’m on the right track by comparing against what Pjs renders as I modify my shaders to include blending for transparency. I made this mostly because adding lights into the equation will complicate the shaders even further, so I need to get this working properly before moving on. I haven’t yet looked into Minefield’s issue with transparency, but I hope to do it soon.

Transparency in Processing.js using WebGL April 12, 2010

Posted by Andor Saga in Open Source, Processing.js, webgl.
add a comment

I’m implementing the 3D version of the rect() function in Processing.js. I ran into a strange bug while trying to do transparency in WebGL. Transparency seems to be fine on Webkit, but on Minefield, it’s completely wrong. Below is a same code running on both Minefield and Webkit. It’s supposed to be a green rectangle with 50% transparency.

I even tried running a Pjs script which slowly decrements the alpha value of fill() from [1,0,0,1] to [1,0,0,0]. The color of the rectangle seems to jump from one color to the next (black to green to purple to red). I don’t know what to make of this, it could be a bug in my shaders, but also may be a bug in Minefield.

Processing.js 3D rect() April 12, 2010

Posted by Andor Saga in Open Source, Processing, Processing.js, webgl.
add a comment

I’m implementing the 3D version of the rect() function in Processing.js. So far the results look identical compared to the results from Processing.

My implementation does not re-create the WebGL VBO every time the function is called, but I’m willing to bet this will out perform VBO re-creation. Asydik is working on another implementation, so it will be interesting to compare performance results.