Add syntax highlighting for glsl.js files

[dmnsgn]

Do you want to keep the cool kid syntaxes with their backticks ` ` without compromises? Missing your favourite syntax highlighting in your shaders? This PR is for you.

The idea is simple: prefix your template string with a comment specifying its syntax and there you have it.

Before:

After:

Tried and tested in both VSCode and Atom:

VSCode

You just need this extension: https://marketplace.visualstudio.com/items?itemName=bierner.comment-tagged-templates

Atom

Install the following packages:

• https://atom.io/packages/language-glsl
• https://atom.io/packages/language-babel

Set your file grammar to language-babel-extension.
Go to Language Babel settings, look for JavaScript Tagged Template Literal Grammar Extensions and add /* glsl */:source.glsl.

More seriously, I understand this can look like an overhead in the codebase (although that just comments so maybe not) but that might bring back some sanity to the maintainers and contributors when they are trying to update the shader code in their text editors.

Thanks

[mrdoob]

Nice!

[mrdoob]

Thanks!

[mrdoob]

Do you know if Sublime Text supports this? @WestLangley will surely appreciate that 😊

[dmnsgn]

AFAIK not yet. But probably soon using JSCustom syntax package and when the following issue is resolved: Thom1729/Sublime-JS-Custom#49

I guess by using these settings:

{
    "configurations": {
        "My Config": {
            "custom_template_tags": {
                "/* glsl */": "scope:source.glsl"
            }
        }
    }
}

[arodic]

This is excellent! Should the VSC/Atom instructions go somewhere in the documentation?

[looeee]

Looking forward to checking this out after the holidays!

Should the VSC/Atom instructions go somewhere in the documentation?

Probably in the wiki somewhere

[looeee]

I'd like to add this to the wiki, does anyone have a preference for where to put it? Perhaps in this page?

https://github.com/mrdoob/three.js/wiki/How-to-contribute-to-three.js

[Mugen87]

That seems to be a good place 👍

[linbingquan]

@mrdoob How do you think, I wanna to commit this tools in three.js\docs\manual\en\introduction\Useful-links.html#Tools

like: VSCode extension syntax highlighting for glsl.js

[mrdoob]

@linbingquan Sounds good to me 👌

[linbingquan]

@linbingquan Sounds good to me

I made a PR #15522

Result:

comment-tagged-templates - VSCode extension syntax highlighting for tagged template strings, like: glsl.js.

[Thom1729]

FYI, JS Custom now supports this explicitly:

{
    "configurations": {
        "My Config": {
            "custom_templates": {
                "comments": {
                    "glsl": "scope:source.glsl"
                }
            }
        }
    }
}