racz16 / webgl-glsl-editor Goto Github PK

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!

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

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.

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

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

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

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!

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 ((...)).

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.

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.

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)

e.g.

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

...after this the formatting will be broken

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

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

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

Perusing through the codebase,

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.

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.

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

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

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.

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

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.

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.

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?

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!

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.

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:

Great extension!

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

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.

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

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

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!

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

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?

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

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

Content

round funciton can't match,but it can works