How can I have shader syntax highlighting in Three.js?

Questions
1

As I’m doing a lot of work with shaders lately, I feel I’m missing two things:

  1. 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.

  2. 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.

scr

  • 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:

2

Put glsl files in seperate files and fetch them, then can get correct line.

I use this for highlighting
https://marketplace.visualstudio.com/items?itemName=bierner.comment-tagged-templates

And this may be the real breakpoint-able glsl debugger, still trying
https://shadered.org/

1 Like
3

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:
scr_1

Syntax highlighting:
scr_s

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 :man_facepalming:

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.

2 Likes
4

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.

5

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!

Is there a solution either a) to highlight glsl code inside Javascript or b) to place the shaders on separate files but somehow call them while using modules?

6

Nevermind, solution found here: Custom shaders and GLSL syntax highlighting

I just installed the VScode extension “glsl-literal” and glsl is highlighted inside a javascript file too!
(none of a bunch of other extensions I tried does this)