racz16/webgl-glsl-editor

WebGL GLSL shader editor extension for Visual Studio Code.

WebGL GLSL Editor

This extension adds language support for GLSL ES 100 (WebGL 1 and OpenGL ES 1.00) and GLSL ES 300 (WebGL 2 and OpenGL ES 3.00). It supports all the WebGL-compatible GLSL extensions too. It supports most of the well-known VS Code language features like syntax highlight, IntelliSense and more, see the details below.

Features

Syntax highlight

The extension colorizes types, builtin types, variables, builtin variables, functions, keywords, qualifiers, operators, preprocessor directives and comments.

Diagnostic

The extension uses glslang, the Khronos Group's reference GLSL compiler to provide diagnostic information (errors and warnings). It also grays out the unused functions, types and variables. Only available in the desktop version.

Offline documentation

The extension uses docs.gl to provide the offline documentation for builtin variables and builtin functions. Only available in the desktop version.

Signature help

The extension can display a signature helper for functions and constructors (except matrix constructors).

Code completion

The extension provides types, variables, functions, constructors, keywords, qualifiers, qualifier parameters, preprocessor directives, macros, and code snippets using IntelliSense, according to the current scope and shader stage. Member variables and vector swizzles are also supported.

Formatting

The extension can format the whole source code and it can format a region of the source code. The formatting is customizable in Settings.

Syntax highlight in HTML scripts and in JavaScript/TypeScript template strings

The extension can colorize GLSL code in HTML scripts if the script's type is x-shader/x-vertex or x-shader/x-fragment.

The extension can colorize GLSL code in JavaScript/TypeScript strings if there is a /*glsl*/ comment before it.

Rename

You can rename types (and constructors), interface blocks, variables and functions.

Highlights

The extension can highlight all the occurrences of the selected type, variable function or constructor.

Hover

The extension can provide useful information or documentation summary if you hover over types, variables, functions or constructors.

Symbols

The extension can provide outline information and breadcrumbs about the types, interface blocks, variables and functions. You can also easily find them by typing a @ into the Command Palette.

Inlay hints

The extension can show function and constructor parameters in the source code with tooltips and links.

Color picker

The extension can display a color picker if you initialize or reassign a vec3 or vec4 variable whose name contains the word color or colour and the assigned expression is a vec3 or vec4 constructor and its parameters are number literals.

Code injection

The extension can inject code into the GLSL files. You can specify the code in Settings.

Show/Peek call hierarchy

The extension can visualize the functions' and constructors' incoming and outgoing calls as a graph.

Go to/Peek declarations

You can find (go to / peek) the declaration of a type, a variable, a function or a constructor.

Go to/Peek definitions

You can find (go to / peek) the definition of a type, a variable, a function or a constructor.

Go to/Peek type definitions

You can find (go to / peek) the type definition of a variable, a function or a constructor.

Go to/Find all/Peek implementations

You can find (go to / find all / peek) the implementation of a function.

Go to/Find all/Peek references

You can find (go to / find all / peek) the references of a type, a variable, a function or a constructor.

Generating preprocessed GLSL source code

You can generate preprocessed GLSL source code by running a command or pressing the button on the top-right corner of the editor. Only available in the desktop version.

Folding

You can collapse or expand code blocks.

Commands for online documentation

You can easily access several online documentations by commands.

Other features

• Indentation
• Brace matching
• Comment toggling
• Autoclosing pairs
• Surrounding pairs
• Default icon for GLSL files

Configuration

• webgl-glsl-editor.diagnostics: Enables/disables displaying errors, warnings and hints.
• webgl-glsl-editor.strictRename: Prevents invalid renames.
• webgl-glsl-editor.alwaysOpenOnlineDoc: Documentation is always opened online in the browser.
• webgl-glsl-editor.alwaysOpenOfflineDocInNewTab: Offline documentation is always opened in a new tab.
• webgl-glsl-editor.format.placeBracesOnSeparateLine: Places the braces on separate lines.
• webgl-glsl-editor.format.placeSpaceAroundUnaryOperators: Places a space between the unary operators and the operands.
• webgl-glsl-editor.format.placeSpacesAroundBinaryOperators: Places spaces around the binary operators.
• webgl-glsl-editor.format.placeSpacesAroundAssignmentOperators: Places spaces around the assignment operators.
• webgl-glsl-editor.format.placeSpacesAroundTernaryOperators: Places spaces around the ternary operators.
• webgl-glsl-editor.format.placeSpaceAfterKeywords: Places a space between keywords and the opening parentheses.
• webgl-glsl-editor.format.placeSpaceAfterFunctionNames: Places a space between function names and the opening parentheses.
• webgl-glsl-editor.format.placeSpaceBeforeCommas: Places a space before commas.
• webgl-glsl-editor.format.placeSpaceAfterCommas: Places a space after commas.
• webgl-glsl-editor.format.placeSpacesAroundDots: Places spaces around dots.
• webgl-glsl-editor.format.placeSpaceBeforeCaseColons: Places a space before colons in cases and defaults.
• webgl-glsl-editor.format.placeSpaceBeforeSemicolonsInFor: Places a space before semicolons in fors.
• webgl-glsl-editor.format.placeSpaceAfterSemicolonsInFor: Places a space after semicolons in fors.
• webgl-glsl-editor.format.placeSpacesInsideParentheses: Places spaces inside parentheses.
• webgl-glsl-editor.format.placeSpacesAroundBraces: Places spaces around braces.
• webgl-glsl-editor.format.placeSpaceBeforeOpeningBrackets: Places a space before opening brackets.
• webgl-glsl-editor.format.placeSpacesInsideBrackets: Places spaces inside brackets.
• webgl-glsl-editor.format.favorFloatingSuffix: The formatter and the color picker favor the floating suffix when applicable.
• webgl-glsl-editor.codeInjection: Enables/disables code injection.
• webgl-glsl-editor.codeInjectionSource: The lines of the injected source code. Only works if Code Injection is enabled.

Builtin Visual Studio Code configuration

There are a lot of features you can enable/disable using builtin VS Code configurations:

• editor.semanticHighlighting.enabled: Semantic highlight
• editor.occurrencesHighlight: Highlights
• editor.hover.enabled: Hover
• editor.inlayHints.enabled: Inlay hints
• editor.colorDecorators: Color picker
• editor.folding: Folding
• editor.autoIndent: Indentation
• editor.bracketPairColorization.enabled: Brace matching
• editor.autoClosingBrackets: Autoclosing pairs
• editor.autoSurround: Surrounding pairs

Notes

• If you open GLSL code embedded in HTML, only the syntax highlight and limited indentation will work

Known Issues

• Preprocessor directives may cause problems
• Incorrect GLSL code (like an if statement without parentheses) may cause problems

You can find the user-provided issues on GitHub. Feel free to add new issues, but please provide some sort of information to I can reproduce the problem.

Release Notes

For more information, see the changelog.

1.3.8

• Making builtin macros available in normal code completion (with values), not only in preprocessor lines
• Adding a tooltip and a link to inlay hints
• Other small changes

1.3.7

• Added default file icons
• Added a button (top-right corner of the editor) to generate preprocessed code
• Extended the syntax highlight to work with strings in .tsx files (thanks George Corney)
• Other small changes and bugfixes

1.3.6

• Added a new configuration to control if you like floating suffixes or not
• Other small changes and bugfixes

1.3.5

• Extending the syntax highlight to work in JavaScript and TypeScript strings
• Other small changes and bugfixes

1.3.4

• Adding a configuration to be able to disable diagnostics
• Adding the possibility of multiline function parameter lists to the formatter
• Other small changes and bugfixes

1.3.3

• Enabled almost all desktop features to the web extension
• Other small changes and bugfixes

1.3.2

• I made a mistake when I published it, don't use this version!

1.3.1

• Added diagnostic support for compound file extensions (thanks RAX7)
• Other small changes

1.3.0

• Inlay hints
• Available as a web extension
• Improved formatting
• Improved syntax highlight
• Improved call hierarchy
• Improved references
• Improved highlight
• Improved brace matching
• Other small changes and bugfixes

1.2.2

• Improved code completion
• Other small changes and bugfixes

1.2.1

• Support for the extensions
• Range formatting
• Generating preprocessed GLSL
• Improved code completion
• Improved syntax highlight
• Improved diagnostic
• Other small changes and bugfixes

1.2.0

• Formatting
• Syntax highlight in HTML scripts
• Code injection
• Improved folding
• Other small changes and bugfixes

1.1.1

• Improved diagnostic
• Other small changes and bugfixes

1.1.0

• Function signature helper
• Call hierarchy
• Color picker
• Generating Shadertoy variables
• Improved syntax highlight
• Improved code completion
• Improved diagnostic
• Other small changes and bugfixes

1.0.1

• Improved syntax highlight
• Other small changes and bugfixes

1.0.0

• Syntax highlight
• Diagnostics
• Offline documentation
• Code completion
• Rename
• Highlights
• Hover
• Symbols
• Go to/Peek declarations
• Go to/Peek definitions
• Go to/Peek type definitions
• Go to/Find all/Peek implementations
• Go to/Find all/Peek references
• Commands for online documentation

Contributions

Special thanks to michaelmcleodnz, RAX7, Matt Curtis, and George Corney for contributing.

More information about the project

If you want to know more about a project structure, how to build, run, package, and much more, read the extension's wiki page.

webgl-glsl-editor's Issues

Customizing the code formater

At the moment the code if formatted with a indent size of 4 spaces. Is it possible to change it to 2?
It would be best if the formatter would follow what's written in the .editorconfig file, for example:

[*]
indent_style = space
indent_size = 2
max_line_length = 120

[Feature Request] Allow specifying semantics to glslangValidator

Just stumbled across this extension and I just wanted to say this is fantastic work. Thank you for this!

My current use case is a desktop application for Vulkan, and I'd like to specify to the compiler I'm using it (e.g., push_constant causes an error which is obviously by design for this extension). The other diagnostics are quite useful, so I'd prefer to not turn them off entirely.

It could even just be a setting allowing the user to specify Vulkan validation with the understanding this is not "core" functionality of the extension -- something like:

{
    "webgl-glsl-editor.validateVulkanExperimental": true  // default: false
}

I realize this has some complications, as -V and -G produce output files, so it might have to use a hacky workaround like -V -o '' and ignore the "failed to open file" error.

I also understand this is a WebGL extension so it's not really the goal to be a "Vulkan" extension. But this option would make the extension quite awesome for users outside of WebGL.

So Close! Crashes rampantly.

I love how it highlighed and formatted my glsl files.

But immediately after formatting, it crashes the "Extension Host"

MacOSX, Visual Code Version: 1.63.2 (Universal

Use of extension within html script?

Is there a possibility to use the Extension for html files that include glsl scripts?

In example I have a script with the type: type="x-shader/x-fragment" and another script with the type type="x-shader/x-vertex" and I would love to use your extension within these files too.

Disable validator from config + validate working #includes?

Hello, thanks for the great extension!

I was looking at past issues and wondering if there could be a simple option to toggle the validation instead of having to rename the shader to .glsl. Maybe a list of file extensions that the user wants to validate. On the same level, maybe there could also be an option to disable inline hints instead of relaying on disabling them globally for vscode.

And digging more into the validator, I was using some shader with #include directives and I could not get them to validate properly. I removed some errors by adding the extension GL_GOOGLE_include_directive to the code injection (really nice feature btw). I still had '#include' : Could not process include directive for header name: utils/structs.glsl etc, so I tried to force the includes with -l in executeValidation (as suggested here). It seems to break the parsing? I put together a very simple test:

//test-import.glsl
struct test {
    int a;
};

//test.frag (no code injection to compare with validator)
precision highp float;

#extension GL_GOOGLE_include_directive : enable
#include "test-import.glsl"

void main() {
    test t;
    t.a = 1;
    vec3 v = vec2(2);
}

There are no warnings, but if I run the validator manually (I copied it in the cwd) I get the correct errors:

C:\...>glslangValidatorWindows.exe -C -l -S frag test.frag
test.frag
ERROR: test.frag:37: '=' :  cannot convert from ' const 2-component vector of float' to ' temp highp 3-component vector of float'
ERROR: 1 compilation errors.  No code generated.

My guess is that when using -l the errors show filename:line: even when there was no extra import. In contrast without -l goes 0:line (yep):

test.frag
ERROR: 0:32: '#include' : Could not process include directive for header name: test-import.glsl
ERROR: 0:35: 'test' : undeclared identifier
ERROR: 0:35: '' :  syntax error, unexpected IDENTIFIER, expecting COMMA or SEMICOLON
ERROR: 3 compilation errors.  No code generated.

I was gonna suggest upgrading to shaderc but the validator seems to be almost the same, same output and basically the same usage too.

Well if at some point I got time in January I might make a PR, for now I will just disable the validator for myself. One question tho, does any other feature depend on the parsing of the validation? Cause errors in imported files might break stuff and I was thinking on just ignoring them for the current file.

cheers!

Diagnotics doesn't work at MacOS

I'm working on Windows10 and Mac(M1 Monterey). but only on Mac, diagnotics doesn't seem to work (all the other functions work well). all my friends have same problems. so I'm guessing it's not from my private things. I love this extension. I'm looking forward to solving this problem. is there something to know to let glslangValidatorMac work well?

if I follow these steps, diagnotics works

1. brew install glslang
2. modify code like below

[Feature]: Can you specify a variable name to set the function "webgl-glsl-editor.diagnostics" to false

Feature details

I am using threejs for project development. When using ShaderMaterial, it is added to the shader code by default at compile time ”attribute vec3 position; uniform mat4 projectionMatrix; uniform mat4 viewMatrix;”Such variable definition.
So I can use these variables when writing shader code without declaring them, but since these variables are not defined in the current documentation "WebGL-GLSL-Editor" will check for errors as follows

If I declare these variables in the file again, although "WebGL-GLSL-Editor" will not check for errors, it will report "variable repeated declaration" when shader is compiled. Is there any way to solve this problem, such as support for specifying variable names to prevent error checking.☺️

#define breaks formatting (in some cases)

e.g.

#define FUN float fun(){return 123.4;}
FUN

...after this the formatting will be broken

Color Picker - Option to not use the 'floating-point suffix'

Please could we get an option for the Color Picker to not return the floating point suffixes?

These 'f' suffixes are not supported in all versions and so I need to manually delete them to get my frag shaders to compile correctly.

An option to simply return e.g. vec4(0.0, 1.0, 0.1, 1.0); instead of vec4(0.0f, 1.0f, 0.1f, 1.0f); would correct this issue for me.

Thanks!

Ignore line feature

Just wanted to say first that this is an AMAZING extension.

I really like the features, built-in documentation and how I was able to inject es 300 to get rid of this problem: mrdoob/three.js#26101 (comment)

I was wondering if there's a way to ignore a specific line though?

In three.js for example, you can have custom defines that are dynamically inserted in runtime. I obviously don't expect those to be reflected for this extension, but being able to ignore defines that don't seem to be present would be a great feature.
Something like

[Bug]: Comments are not indented

The extension's version

1.3.7

VS Code's version

1.84.2

Extension host

Desktop VS Code

Operating system

Windows 10 x64

Description

I'm working with the extension for the first time and the first impression is great, but when I try to auto-format a vertex shader, only the code itself is formatted. Any comments in the code stay untouched.

Before formatting

After formatting

disable inlay hints

Great extension!

Is it possible to disable the inlay hints? To me, it's more irritating than helpful.

[Feature request] Option to break down function arguments to separate lines when formatting

Hi @racz16

I've recently found your extension and I've started using it for my WebGL GLSL shader editing and I'm amazed how good it is.
I do have a feature request, if possible, it would be great if when formatting it can break the function parameter each into separate line if they're more than a small given number or if the function signature is longer than the line character limit (e.g. 120 chars)
This:

vec4 getTerrainColor(
  in vec3 worldPos,
  in vec3 normal,
  in vec3 color,
  in sampler2D topDiffuseMap,
  in sampler2D sideDiffuseMap,
  in vec3 topDiffuse,
  in vec3 sideDiffuse,
  in float upwardsThreshold,
  in float topScale,
  in float sideScale)
{
    // make kinda upwards pointing normals to be upwards after a threshold
  float upwards = abs(normal.y);
  float upwardsThreshold = (1.0 - color.g) * upwardsThreshold;
  float upwardsStep = step(upwardsThreshold, upwards);
....

instead of this:

vec4 getTerrainColor(in vec3 worldPos, in vec3 normal, in vec3 color, in sampler2D topDiffuseMap, in sampler2D sideDiffuseMap, in vec3 topDiffuse, in vec3 sideDiffuse, in float upwardsThreshold, in float topScale, in float sideScale)
{
    // make kinda upwards pointing normals to be upwards after a threshold
  float upwards = abs(normal.y);
  float upwardsThreshold = (1.0 - color.g) * upwardsThreshold;
  float upwardsStep = step(upwardsThreshold, upwards);
...

Current formatting always does the latter.
If this is not a priority or there's not time for it, can you please provide some hints on how and where in the code could this be implemented.
Thank you.

[Feature]: Support a "default" #version in settings

Feature details

It is common to omit #version directive in a shader source file due to provisioning of such lines at shader loading time.

Please add an option to specify a default version line when it's missing in the source.

Thank you for a great addon.

how can i ignore some type checking or add global typings?

I'm using Threejs to build my app. Threejs will auto inject some attribute and uniform vars such as attibute vec3 position. When I comment the position, the extension complains, how to handle this situation?

Diagnostics are broken on MacOS

Hello.

I've installed v1.3.3 of the extension both for VSCodium and VSCode and it ended with [error] Error: write EPIPE in Output > Extension Host.
I'm on Apple Silicon Ventura.
I've solved the problem by replacing glslangValidator with the current version from homebrew.

Possible solution: allow configuring the path to glslangValidator.

Disabling auto formatting for a specific code region

Hi! First of all, thanks for a very useful plugin!

Is it possible to disable auto formatting for a specific section? Similar to

/* eslint-disable */
...
/* eslint-enable */

or

// clang-format off
...
// clang-format on

Sometimes custom indentation makes code much more readable, for example when defining matrices or writing some long calculation with a lot of similar operands.

conflict with <comment translate> plugin

Type: Bug

It will cause the hover translation function of translation plugins to fail.

Extension version: 1.3.5
VS Code version: Code 1.78.2 (b3e4e68a0bc097f0ae7907b217c1119af9e03435, 2023-05-10T14:39:26.248Z)
OS version: Windows_NT x64 10.0.22621
Modes:
Sandboxed: Yes

System Info

Item	Value
CPUs	AMD Ryzen 5 3500U with Radeon Vega Mobile Gfx (8 x 2096)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: disabled_off direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok video_decode: enabled video_encode: enabled vulkan: disabled_off webgl: enabled webgl2: enabled webgpu: enabled
Load (avg)	undefined
Memory (System)	14.94GB (6.59GB free)
Process Argv	--folder-uri file:///d%3A/Desktop/xt3d%20211.149.185.229 --crash-reporter-id 52cd1820-92a0-460c-a10a-618e8b98c1e3
Screen Reader	no
VM	0%

A/B Experiments

vsliv368cf:30146710
vsreu685:30147344
python383cf:30185419
vspor879:30202332
vspor708:30202333
vspor363:30204092
vslsvsres303:30308271
vserr242cf:30382550
pythontb:30283811
vsjup518:30340749
pythonptprofiler:30281270
vsdfh931cf:30280410
vshan820:30294714
vstes263:30335439
vscod805:30301674
binariesv615:30325510
bridge0708:30335490
bridge0723:30353136
cmake_vspar411:30581797
vsaa593:30376534
pythonvs932:30410667
cppdebug:30492333
vsclangdc:30486549
c4g48928:30535728
dsvsc012:30540252
pynewext54:30695312
azure-dev_surveyone:30548225
2e4cg342:30602488
pyind779:30671433
f6dab269:30613381
pythonsymbol12:30671437
showlangstatbar:30737416
vsctsb:30748421
pythonms35:30701012
pythonfmttext:30731395
pythoncmv:30739700
fixshowwlkth:30730052
showsbindicator:30730056
pythongtdpath:30739704

[Bug]: Block indentation not working as expected

The extension's version

v1.3.8

VS Code's version

1.91

Extension host

Desktop VS Code

Operating system

Windows 10 x64

Description

Inside blocks, nothing is indented, see below:

Before saving:

After saving:

I just installed the extension for the first time ever. I also tried after disabling absolutely ALL of my extensions and only keeping yours enabled, same behavior.

how to disable Inlay hints for xxx.glsl files in vscode?

how to disable Inlay hints for xxx.glsl files in vscode?

How to Disable Inlay Hints in WebGL GLSL Editor

Hello,

I have been using WebGL GLSL Editor and I'm finding the Inlay Hints feature to be a bit distracting. Can I modify it in settings.json to disable this feature?

Thank you in advance for your help!

Best regards,

Zaron Chen

Symbols display is breaking in some cases causing disabling other useful features

Hello!
I've discovered that some type defines breaks symbols outlines and most of useful features like hover hints, go to definitions and so on.

This is not working:

But this is ok:

PS. Your extension is awesome!

conflict with ts-shader-loader

when using "ts-shader-loader" in line import statement "@import ./file;" all variables declared above the @ statement are greyed out and receive "variable is never used"

its a great extension and "ts-shader-loader" has best es6 implementation so would be nice for them to work together.

Compatibility with Shader Toy extension

First of all, great extension! I'm really impressed by the completeness and efficiency.

I'm trying to use this extension together with the https://github.com/stevensona/shader-toy extension. The issue is that the shader toy extension, like the Shadertoy website, auto-injects uniforms and the #version directive. In addition, the extension allows custom directives like #iChannel0 "self" to further configure the inputs. All of this means that I cannot use your extension together with the other extension, which is a real shame.

I'm not sure what the best solution here is, but how about the following: If any shadertoy uniform is used but wasn't defined, then the mode is automatically set to "shadertoy" and those uniforms and the version directive get auto-injected before running all the diagnostics etc. In addition, any unknown directives should be removed to avoid compile errors.

[Feature]: Enable other features such as 'offline documentation' and so on, in glsl strings after /*glsl*/ comment.

Feature details

Glsl strings example as below:

export const demoVS = /*glsl*/`#version 300 es
  in vec2 a_position;
  out vec4 color;

  void main() {
    vec4 = vec4(1, 0, 0, 0); 
  }
`

Expect to implement this functionality in glsl string as well as glsl files.

[Bug]: Diagnostics does not show errors / show red lines

The extension's version

1.3.8

VS Code's version

1.92.0

Extension host

Desktop VS Code

Operating system

Windows 11 x64

Description

Hi

Error reporting doesnt work. No matter what is inputted, no red lines / errors are shown. This has been tested on a fresh VSCode install with no other add ons active. Even after compiling the latest version of glslangValidator (11:14.3) and manually replacing yours (8.13.3559) in your extensions directory it didnt make a difference.

Let me know if you need anymore information.

Regards.

Configuration

Is there a way to configure this formatter to output the following:

if (some) {
  doSomething();
}

Currently, it's output the following:

if(some) {
  doSomething();
}

As you can see, there's no space between the keyword (if) and the bracket ((...)).

Can't load textures with a relative path.

Loading the textures directly in fragment works for me with a remote http path, but doesn't with a relative path.

I can load an url in code:
uniform sampler2D u_texture_1; // https://rawgit.com/actarian/plausible-brdf-shader/master/textures/noise/cloud-1.png
or in settings.json file:
"glsl-canvas.textures": { "0": "https://rawgit.com/actarian/plausible-brdf-shader/master/textures/noise/cloud-1.png", }

But I can't load my images in the workspace. I've tried out several options and different vscode workspace hierarchies but no success.

Double color picker

Hello,

I am just starting out with shaders. I'm getting a double color picker when using this extension. When the extension is disabled, only a single color picker renders. Disabling the "Editor: Color Decorators" setting causes both color pickers to disappear.

OS: macOS Ventura 13.6
VS Code: version 1.82.2

Language server breaks down on buffer statements

I'm using the extension to write GLSL code, and I am using a SSBO. In the .frag file, everything before the buffer declaration works as normal, but everything after the buffer declaration completely falls apart. The formatter breaks, the outline doesn't show any symbols after the buffer and intellisense doesn't know about anything after the buffer.

I'm pretty sure I'm not breaking any syntax by having this buffer here, and even if I was it'd be nice if the extension just ignored this part and didn't completely break for the rest of the file.

The buffer declaration:

The code after the buffer declaration:

The outliner before and after:

[Bug]: errors not showing up

The extension's version

1.3.8

VS Code's version

1.88.1

Extension host

Desktop VS Code

Operating system

macOS

Description

Is there any known issues on , as you see the error for not having ; is not highlighted.

My file is named vtkVolumeFS.glsl here is the file

https://github.com/Kitware/vtk-js/blob/master/Sources/Rendering/OpenGL/glsl/vtkVolumeFS.glsl

version: 1.88.1 (Universal)
Commit: e170252f762678dec6ca2cc69aba1570769a5d39
Date: 2024-04-10T17:42:52.765Z (2 wks ago)
Electron: 28.2.8
ElectronBuildId: 27744544
Chromium: 120.0.6099.291
Node.js: 18.18.2
V8: 12.0.267.19-electron.0
OS: Darwin arm64 22.6.0

Emoji in the comments breaks formatter

Hi, first of all, thank you for great extension!

I recently started to learn GLSL and copied one of the code samples from google, syntax highlighting worked great, however weirds thing happened on file format - words across the code were cut off randomly.
After some experiments I figured out that it's caused by an emoji character in the comments

Code_gXWdwaBYP4.mp4

It's not a huge deal, but definitely looks like a bug

'round' : no matching overloaded function found

Content

round funciton can't match,but it can works

Color picker removes .0

if you use the color picker to choose the color #FF0000 it will change the value to be vec4(1f, 0f, 0f, 1f) but it should be vec4(1.0f, 0.0f, 0.0f, 1.0f)

formatter removes newline escapes

e.g.

#define FUN fun(){\
return 123.4\
}

The first newline escape will be kept, however the second one will be removed (I put double escapes here to make '\' symbols visible.)

Diagnostic not triggering for .frag file

As above, everything is working in my .frag file, incl highlighting, formatting, and docs, but linting doesn't.

Perusing through the codebase,

WebGL-GLSL-Editor/src/extension.ts

Lines 49 to 74 in 4cca6dd

	//diagnostic
	for (const editor of window.visibleTextEditors) {
	if (editor.document.languageId === Constants.GLSL) {
	try {
	new GlslDiagnosticProvider().textChanged(editor.document);
	} catch (error) {
	//if i catch the error here, it can't break the activation
	}
	}
	}
	context.subscriptions.push(workspace.onDidOpenTextDocument(event => {
	if (event.languageId === Constants.GLSL) {
	new GlslDiagnosticProvider().textChanged(event);
	}
	}));
	context.subscriptions.push(workspace.onDidCloseTextDocument(event => {
	if (event.languageId === Constants.GLSL) {
	GlslEditor.getDiagnosticCollection().delete(event.uri);
	}
	}));
	context.subscriptions.push(workspace.onDidChangeTextDocument(event => {
	if (event.document.languageId === Constants.GLSL) {
	new GlslDiagnosticProvider().textChanged(event.document);
	}
	}));
	context.subscriptions.push(languages.registerCodeLensProvider(selector, new GlslInjectionErrorProvider()));

looks to be the culprit.

My two theories are:

1. since it's a .frag extension file, the if statement fails and the code for linting never triggers. I'm not sure about this one since linting still doesn't work even after I change the extension to .glsl
2. the GlslDiagnosticProvider() constructor at the top is failing and getting caught, which doesn't do anything

This is a really sick library in every other way, I'd love to get this working.

Support #include

Thanks for a great vs code plugin! Would it be possible to add support for #include of other files, e.g. as in ARB_shading_language_include?

WebGL2 doesn't support said extension, but rolling my own mini-preprocessor would be way better then manual copy & paste duplicate code everywhere.

Alternatively, code injection could be extended to specify a file to inject, rather than just static text. This is not as flexible, but probably easier to do and still very useful.

How to disable inlay hints

Thank you for your efforts because this plugin really help me a lot.
Sometimes i just want to view the pure codes, how can i disable inlay hints in this condition?

Hide method signature preview

Is there any way to hide the method signature preview? vec3(v0: uvp.x, v1: 0.0... I'm talking specifically about the v0: and v1: parts. I am loving this plugin by the way. Cheers!

Disable inlay hints?

Is there an option to disable the inlay hints? They drive me nuts.