[SOLVED] Shader Chunks: Any way to see the resulting complete shader code?


I’m currently getting into writing custom shaders for PlayCanvas. Shader chunks seem to be the way to go if I want to keep all the standard shader goodies like shadows.

While I really like the concept of shader chunks, it feels a bit overwhelming to get into it just by looking at the list of chunks without seeing the underlying structure. The standard.js file on the other hand seems a bit too abstract to provide a good entry.

Is there a way to see the resulting standard shader code so I can get an overview over what happens before I dive into the more detailed chunks and the code that generates the result?

Firefox has a shader editor in the dev tools, which shows you all shaders of your current webgl instance.

This makes it quite easy to see the full shader how the engine is using it in the end. You can also use it to quickly test out different code snipperts, without updating your chunks.



1 Like

Hey Martin, thanks for the tip! It sounds really good, but for some reason it doesn’t seem to work for me; it just displays “Waiting for a WebGL context to be created…” both for my project and for PlayCanvas example projects. (It works with other WebGL examples though, e.g. this one. Weird.)

edit: Stranger still - the Chrome Shader editor extension behaves exactly the same. Works fine for this WebGL project, but PlayCanvas projects just display “Waiting for programs to be added…”

edit 2: Puzzle solved! Neither Firefox nor Chrome shader editor support WebGL 2.0. It loads for my PlayCanvas project if I disable “Prefer WebGL 2.0” in the settings.


Ah thats interesting, didnt knew this either.