spite / shadereditorextension Goto Github PK

test web site: https://dev-sandbox.pixotronics.com/webgi/0.5.5/demos/core~viewer.html?m=pixo://gltf/sofia.glb
my chrome version is v105.0.5195.52
shader editor version is v1.0.17

To reproduce:

1. Open https://www.khronos.org/registry/webgl/sdk/demos/google/san-angeles/
2. Open the Developer Tools and the Shader Editor; reload the page
3. Note that the three programs have different sources
4. Reload the page

Expected:
The programs' sources continue to display correctly.

Actual:
All three programs seem to have the same sources.

It probably has to do with replacing gl_FragColor.rgb *= vec3( 1., 0., 1. ); in the last step of the fragment shader, but I can't figure out a way that:

a) works with any structure of shader - probably requires some interesting regExp
b) won't interfere with the shader source update mechanism (how to distinguish user-type changs from that change) - may be creating a parallel shader for that?

If there is an #extension statement in a shader (like for example in Three.js when normal maps are used in a material) an error line "extension is not supported" is inserted into the shader code and it cannot be compiled. The issue here is that the shader runs just fine so that error message seems to be incorrect or based on the configuration of the editor.

You can test it with this demo - Program #3 is a shader that uses the derivatives and has the line
#extension GL_OES_standard_derivatives : enable
in it: http://threejs.org/examples/webgl_materials_normalmap.html

This becomes really difficult if you want to see the changes 'fullscreen' , and than go back to working on the sharder

I think is so useful tool. It is not a bug. Just a note.
It does not get the shaders from react fiber projects.

Chrome 44.0.2359.0 (Official Build) canary (64-bit), OS X 10.9.5, Retina Display MacBook Pro

To reproduce:

1. Open https://www.khronos.org/registry/webgl/sdk/demos/google/san-angeles/
2. Open DevTools, open shader editor, reload
3. Click "Program 1"

Expect the demo to continue rendering correctly.

Instead, the lighting is disabled and the objects render black. See attached screenshot.

Is it supported?
http://toji.github.io/webgl2-particles/
When clicking on reload in the shader editor no gui appears with Vivaldi (Chrome 56).

Doesn't seem to be able to locate the right tab to send message to?

At the end of the injected function, there's a call to

window.postMessage( { source: 'WebGLShaderEditor', method: 'init' }, '*');

which doesn't seem to work. That message would signal that the WebGLRenderingContext has been hooked, and that everything is ready to start getting events, so the UI should be visible, or at least a message that says "Waiting for programs to be created..."

That doesn't work, so now I'm using the first "addProgram" message to signal that there's activity.

The extension doesn't seem to detect shaders on THREE.InstancedMesh . Am I missing something or is this the case?

When I click button to reload and activate shader editor on a webGL page, I'm seeing this title and it doesn't load the shader screen.

There's enough features and interactions and the extension begins to need some documentation or tutorial. Ideally, visual: snapshots with explanation of each feature and/or video support.

What's the method to detect that the page in the current inspected tab has browsed to a new page, or it has been reloaded by the user (and not by the injector)?

Tried chrome.webNavigation.onCommitted, chrome.tabs.onUpdated without success.

When I press Ctrl+F on a shader editor to search a text, from inspector's inspector console I see an error, apparently CodeMirror.connect is missed and some module of codemirror is not included here to do the functionality.

No longer works in current chrome.

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:

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.

1. Open https://www.shadertoy.com/view/MsjSW3
2. Highlight a shader
3. The demo stops.

I don't know about its reason, maybe it would be reasonable to provide highlighting feature not by default set on feature? http://madebyevan.com/webgl-water/ causes severe kernel issues on my system so not highlighting at the first place would be nice I think.

This is just a suggestion but if you can fix https://www.shadertoy.com/view/MsjSW3 issue, I think making highlighting optional (my suggestion) would not that much reasonable.

Is there a simple way I can tag my shaders, so that the UI knows what each one is? (I.e. sticking some sort of comment at the top of the source, so it can show "Main", "Post Process", "Overlay", etc rather than "Program 0", "Program 1", "Program 2")

http://david.li/flow - doesn't even load the UI, even though it's calling createProgram
http://xnajs.com/examples/02/ - does load the UI, but doesn't apply changes. Probably it has to do with how the same source code is used in both shaders

After a quick look into the source I figured the solution of hooking into the methods of the WebGLRenderingContext prototype might not work for contexts created in foreign execution contexts, namely inside an iframe and exported to the main JS context. One possible workaround I can think of is to check the DOM for canvas elements and then set up a mutation observer to check for canvas elements added to the main DOM. That won't work for a canvas inside an iframe and offscreen rendering contexts though.

But calling getContext on a canvas of a foreign exceution context should always give you the proper foreign rendering context as far as I know.

As a hook into the program info I suggest useProgram in any case, because that would catch already compiled programs without refreshig the page and is usually called during rendering.To query the attached shaders you could use gl.getProgramParameter( programRef, gl.ATTACHED_SHADERS ) to get the shader references and then gl.getShaderSource( shaderRef ) and all other relevant states.

In case of simple scenes with only one program you can get that in any case by querying gl.getParameter( gl.CURRENT_PROGRAM ) first. So you would ge those already linked and used before you could reach them.

If the canvas doesn't leave the iframe or prevents writes on the prototpe nothing really helps, but that'd still make your implementation a bit more robust for most cases. Hope it helps.

Not sure why the extension fails on this page https://ebraminio.github.io/extra/WebGL1.html can you have a look? Maybe because use of global variable or early running the code? Thanks