Processing.js Got the hint() – Depth Tests

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

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

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

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

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()

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.