As I’m doing a lot of work with shaders lately, I feel I’m missing two things:
Error code reports from the browser to refer to the actual shader lines, ( I always try to guess where those errors refer to, as the line numbers don’t match, I even have to comment out parts of the code to find out which part causes the errors even for typos, which is anything but efficient.
Syntax highlighting + assistance optionally.
I’m writing shaders using back-quotes in order to enclose all code and avoid semicolons in every line and pluses and joins. But still I see all code greenish that doesn’t even look like code.
So, is there a way that I can write and import *.glsl files in Three.js - and include those files in a Three.js project? That would enable all kinds of shader-highlighing and assistance plugins in VSCode that don’t work right now -none of them.
About the error reports, I’ve seen an answer here, but I’m not sure how he does this:
Thanks, it took me a while to figure out how to “prefix” the code for that addon:
/* glsl */ should be placed just before the back-quote on a line before the actual code:
No syntax highlighting:
As for the errors reported by the browser, I realized that they were referring to the line-numbers in the quoted code, so problem solved -that was extremely dumb of me
Now next task is to find a solution for autocomplete / intellisence / documentation.
I think that would require actual glsl files and parsing them.
That app looks promising but it’s a completely external and alien environment, not very convenient.
I use some pretty basic tools to write shaders. By basic i mean something common like webpack (but takes a bit of setup). I don’t use glslify and such but i’ve been meaning to look at this.
So the idea is to write “shader” files, like glsl|vert|frag|vs|fs|shader etc, and setup your IDE (i use VSCode) to recognize these as GLSL.
I don’t do anything fancy here, my IDE won’t let me know if there is an undeclared variable for example, but at least i get syntax highlighting. One shader file could be just a declaration of uniforms, another of a function, yet another some inline code.
These can be fetched, but for me it makes more sense to inline them, so webpack takes care of that.
I have this problem: if I place the shaders on the top of a JS file - as I cannot call them from separate files when I use modules, then the above solution does NOT work, no shader language highlighting!