988888 - Add a mode to highlight overdraws

Status: RESOLVED WONTFIX

(DevTools Graveyard :: Canvas Debugger, defect)

Description

[Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8]]

In the canvas debugger, it would be awesome to have a mode where the preview becomes black and each draw just adds a white shape with low opacity (like .2) so that as multiple draws stack on top of each other, that area gets brighter and brighter. This helps developers identify points where they are doing excessive overdraws and helps them potentially speed up their code.

*Not* a good first bug, just a mentored bug for the very brave.

Comment 1

[Akshendra Pratap Singh]

Nick:
I would like to take this on. Any tips?

Comment 2

[Nick Fitzgerald [:fitzgen] [⏰PST; UTC-8]]

I don't really know this code. Victor can mentor you.

Comment 3

[Victor Porof [:vporof][:vp]]

(In reply to Akshendra Pratap Singh from comment #1)

> I would like to take this on. Any tips?

Hey, Akshendra! Thanks for the interest in this bug. Sorry about the long wait, we've all been very busy with the Firefox Developer Edition :)

To fix this bug, you'll need some good knowledge about how the 2D and WebGL canvas contexts work. We'll need to provide support for both, since the canvas debugger should be able to work regardless of which is used. Therefore, we'll need two different implementations in the "backend", that abstract the same interface over the remote debugging protocol. Don't worry, this is easier than it sounds :)

For 2D contexts, I'd say things are relatively easy. To highlight overdraws, starting with a black background, we can perform our own drawing operations on a separate canvas at the same time with the original ones, using a semi-transparent fill that "builds up" with every draw call. The logic for replaying 2D canvas operations is already available here: [0]. Make sure you read the documentation there too.

With WebGL, it's a bit more tricky, but possible nonetheless. The idea is the same as with the 2D context, but we can either:
* use a custom semi-transparent fill pixel shader, but keeping the original vertex shader, or
* use some depth buffer diffing magic
* use a custom blend mode
To me, it sounds like using a custom blend mode is much more implementation-friendly. Using custom shaders is going to be hard to get right and maintain all the correct bindings. Depth buffer render targets and querying might not be supported on all hardware. Therefore, all you'd have to do is set a constant color and alpha source, and an `add` blend equation. You could also set a color mask beforehand, if we know we're only going to draw red, for example.

The frontend implementation is at [1]. And you probably guessed it, the backend is at [2]

To build Firefox from source and start hacking, just follow the simple steps here: [3]

[0] http://dxr.mozilla.org/mozilla-central/source/toolkit/devtools/server/actors/canvas.js?from=canvas.js#586
[1] http://dxr.mozilla.org/mozilla-central/source/browser/devtools/canvasdebugger
[2] dxr.mozilla.org/mozilla-central/source/toolkit/devtools/server/actors/canvas.js
[3] https://wiki.mozilla.org/DevTools/Hacking

Comment 4

[Patrick Brosset <:pbro>]

Mass-closing inactive (2 years+) bugs on unmaintained devtools components.