search

spite / ShaderEditorExtension

Google Chrome DevTools extension to live edit WebGL GLSL shaders
MIT License
619 stars 58 forks source link

Firefox support #21

Open captainbrosset opened 7 years ago

captainbrosset commented 7 years ago

I just stumbled upon this tool, looks great!

I'm part of the Firefox DevTools team. A few years ago, we added a Shader Editor tool to Firefox as you probably know. So when I found your extension, I was very interested. I'd like to know how you envision the future of your extension. It would be amazing if this could work in Firefox so we could join forces rather than support 2 separate tools.

Our team hasn't had a lot of time outside of maintaining our core tools (inspector, debugger, console, ...) to support things like the Shader Editor (same for our WebAudio tool, or Canvas inspector). It's been basically unmaintained for a couple of years. Our plan was to move it to a separate repo on GitHub, and have it be an extension so that people can add it to their DevTools if they want, but it's not part of the built-in DevTools. Also, moving it out there on GitHub would give it a better chance at being a community-drive project. Right now, the tool lives in Mozilla's Mercurial repo, and doesn't get a lot of attention.

Plus, in the most recent Firefox (Nightly, version 54 I believe), we added enough Web-Extension API support for your extension to actually start up and show some content!

Look, this is in Firefox:

capture capture2

Once the main panels have loaded, there seems to a bug where hovering over program names almost freezes Firefox and changes the way the shaders render. But overall, it looks pretty promising.

spite commented 7 years ago

That's great news! I've been waiting for panels support for a while, since this conversation on twitter https://twitter.com/jryans/status/798566112841478144

The extension needs a bit of an update. I've learnt a lot about DevTools and how to instrument Canvas since I wrote it, and I have a few ideas to implement.

(In this particular case of Evan's water, if you hover over one of the shaders that create the positions texture, the 0xff00ff value that is used to highlight the output makes the rest of the shaders go into overdrive.)

It would definitely be interesting to have the extensions working over Web Extensions API! There's the WebGL Shader Editor, the WebVR API emulation, and I also started a Web Audio one like Firefox's.

ibesora commented 7 years ago

Is this still something wanted? I could try to have a look at it

spite commented 7 years ago

It could probably be easily adjusted to work with the Web Extensions API (some objects don't have the same in FF and Chrome). Since the new version of the extension might take a longer while, @ibesora if you want to take a look, that'd be awesome

ebraminio commented 6 years ago

Have a look at https://crbug.com/367739 I guess it would be interesting if a unified shader editor could be developed based on this extension and installed by default on both Firefox and Chrome!

All parties can bring something on the table, #10 shader titles from this extension, rock solidness of Mozilla's shader editor and WebGL2, definition of new extension API for Chrome by Chromium team to possibly help on cases like #22.

makc commented 6 years ago

rock solidness of Mozilla's shader editor

I'd say, it works about 70% of the time, the other 30 your edits have no effect and/or break the page.

What makes it funny is that if "red on hover" thing works just fine at the same time (as it mostly does, initially), there must be no valid reason for your edits to cause failure.

spite commented 6 years ago

There's been discussions to make an open-source shader editor based on Web Extensions a common tool for the different browsers. I'd love to work on that, I simply don't have bandwidth right now for it.