actarian / vscode-glsl-canvas

Live WebGL preview of GLSL shaders

💎 vscode-glsl-canvas

The extension opens a live WebGL preview of GLSL shaders within VSCode by providing a Show glslCanvas command.

It use glsl-canvas a modified and improved version of glslCanvas javascript library from Book of Shaders and glslEditor made by Patricio Gonzalez Vivo.

Now supporting WebGL2. just add #version 300 es at the very start of the file.

Now supporting nested includes with relative paths.

Optimized video recording options, with record size and duration. Choose between MediaRecorderApi or CCapture for high quality compression.

---

Run ⌘ ⇧ P on mac os, ctrl ⇧ P on windows.
Then type Show glslCanvas command to display a fullscreen preview of your fragment shader.

---

---

Features

• Both supports WebGL and WebGL2. Automatically create WebGL2 context by adding #version 300 es as the first line of file.
• Integrated support of error handling with lines hilight.
• Drawing modes: flat, box, sphere, torus and mesh with default mesh.
• Mesh loader and parser for .obj format.
• Vertex in fragment with VERTEX macro.
• Multiple buffers with BUFFER macro.
• Play / pause functionality.
• Recording and exporting to .webm video with resolution and duration settings, using MediaRecorder or CCapture for high quality video.
• Activable stats.js performance monitor.
• Custom uniforms.
• Activable gui for changing custom uniforms at runtime.
• Export to html page with live reload.
• Glsl code formatter standard and compact mode.
• Glsl Snippets.

---

Attributes

The attributes provided are a_position, a_normal, a_texcoord, a_color.

Type	Property
vec4	a_position
vec4	a_normal
vec2	a_texcoord
vec4	a_color

---

Uniforms

The uniforms provided are u_resolution, u_time, u_mouse, u_camera and u_trails[10].

Type	Property
vec2	u_resolution
float	u_time
vec2	u_mouse
vec3	u_camera
vec2[10]	u_trails[10]

---

WebGL Extensions

You can include any supported WebGL extension through the glsl-canvas.extensions array option modifying the workspace's settings.json file.

{
    "glsl-canvas.extensions": [
		"EXT_shader_texture_lod"
	]
}

You can then enable the extension in the shader

#extension GL_EXT_shader_texture_lod : enable  

vec3 color = texture2DLodEXT(u_texture, st, 0.0).rgb;

---

WebGL2

For WebGL2 context creation just add #version 300 es at the very start of the file.

no other characters allowed before macro!

#version 300 es

precision mediump float;

---

IO Buffers

You can use shader buffers by requiring definition with #ifdef or defined directly in .glsl code.
Just ask for BUFFER_N definition and a u_bufferN uniform will be created for you:

uniform sampler2D u_buffer0;

#ifdef BUFFER_0

void main() {
    vec4 color = texture2D(u_buffer0, uv, 0.0);
    ...
    gl_FragColor = color;
}

#else

void main() {
    vec4 color = texture2D(u_buffer0, uv, 0.0);
    ...
    gl_FragColor = color;
}

#endif

Playground

---

Textures

You can define the texture channels (u_texture_0, u_texture_1, ...) by modifying the workspace's settings.json file.

{
    "glsl-canvas.textures": {
        "0": "./texture.png",
        "1": "https://rawgit.com/actarian/plausible-brdf-shader/master/textures/noise/cloud-1.png",
        "2": "https://rawgit.com/actarian/plausible-brdf-shader/master/textures/noise/cloud-2.jpg",        
    }
}

As of today VSCode do not support video element or audio element. You can use video texture with the Export to html feature.

---

u_camera

u_camera is a vec3 array with coordinates for an orbital camera positioned at world zero, useful for raymarching.

Playground

---

u_trails[10]

u_trails[10] is a vec2 array with stored inertia mouse positions for mouse trailing effects.

Playground

---

Custom Uniforms

You can also define custom uniforms by modifying the workspace's settings.json file.

{
    "glsl-canvas.uniforms": {
        "u_strength": 1.0
    }
}

Types supported are float, vec2, vec3 and vec4. Vectors structures are converted from arrays of floats. Range values goes from 0.0 to 1.0.

Type	Property
float	"u_float": 1.0,
vec2	"u_vec2": [1.0, 1.0],
vec3	"u_vec3": [1.0, 1.0, 1.0],
vec4	"u_vec4": [1.0, 1.0, 1.0, 1.0],

---

Uniforms Gui

By clicking the option button you can view and modify at runtime uniforms via the dat.gui interface.

---

Export to html

You can export your shader, assets and uniforms to an html page with livereload for testing in browser.

---

Color Picker

Waiting for a more customizable code inset feature, vec3 and vec4 arrays can be modified with the integrated color picker.

---

Including dependent files with #include

You can now include other GLSL code using a traditional #include "file.glsl" macro.

// example
#include "common/uniforms.glsl"
#include "common/functions.glsl"

void main(){

---

Antialias

Enables or disables antialias in the WebGL context.

{
    "glsl-canvas.antialias": false
}

---

Change detection

You can set the timeout change detection option by modifying the workspace's settings.json file.

{
    "glsl-canvas.timeout": 0
}

---

Refresh on save

Enables or disables refreshing the glslCanvas when saving the document.

{
    "glsl-canvas.refreshOnSave": true
}

Refresh on change

Enables or disables refreshing the glslCanvas when changing the document.

{
    "glsl-canvas.refreshOnChange": true
}

---

Use formatter

Enables or disables glsl code formatter.

{
    "glsl-canvas.useFormatter": true
}

---

Use compact formatter

Enables or disables glsl code formatter compact mode.

{
    "glsl-canvas.useCompactFormatter": false
}

---

Install on export

Enables or disables installing the Npm packages on export.

{
    "glsl-canvas.installOnExport": true
}

---

Record duration

Specify automatic recording duration in seconds. Set to 0 to disable this feature.

{
    "glsl-canvas.recordDuration": 10
}

---

Record width

Specify canvas recording width in pixels. Default value is 1024.

{
    "glsl-canvas.recordWidth": 1024
}

---

Record height

Specify canvas recording height in pixels. Default value is 1024.

{
    "glsl-canvas.recordHeight": 1024
}

---

Fragment shader

An example of fragment shader. You can copy paste this code in an empty .glsl file:

precision mediump float;

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

void main() {
    vec2 st = gl_FragCoord.xy / u_resolution.xy;
    st.x *= u_resolution.x / u_resolution.y;

    vec3 color = vec3(0.0);
    color = vec3(st.x, st.y, abs(sin(u_time)));

    gl_FragColor = vec4(color, 1.0);
}

---

Glsl snippets

Snippet	Purpose
glsl.animation	Staggered animations
glsl.modifiers.blend	Blend functions
glsl.modifiers.boolean	Boolean functions
glsl.colors	Colors palette
glsl.coords	Pixel units utility functions
glsl.drawing	Signed distance drawing methods
glsl.ease.back.in	Ease equation back in
glsl.ease.bounce.in	Ease equation bounce in
glsl.ease.circular.in	Ease equation circular in
glsl.ease.cubic.in	Ease equation cubic in
glsl.ease.elastic.in	Ease equation elastic in
glsl.ease.expo.in	Ease equation expo in
glsl.ease.quad.in	Ease equation quad in
glsl.ease.quart.in	Ease equation quart in
glsl.ease.quint.in	Ease equation quint in
glsl.ease.sine.in	Ease equation sine in
glsl.main.new	Main function, uniforms & utils
glsl.core.object	Object struct with distance and color
glsl.shapes.2d.arc	Shape 2D arc
glsl.shapes.2d.circle	Shape 2D circle
glsl.shapes.2d.grid	Shape 2D grid
glsl.shapes.2d.hex	Shape 2D hexagon
glsl.shapes.2d.line	Shape 2D line
glsl.shapes.2d.pie	Shape 2D pie
glsl.shapes.2d.plot	Shape 2D plot
glsl.shapes.2d.poly	Shape 2D poly
glsl.shapes.2d.rect	Shape 2D rect
glsl.shapes.2d.roundrect	Shape 2D roundrect
glsl.shapes.2d.segment	Shape 2D segment
glsl.shapes.2d.spiral	Shape 2D spiral
glsl.shapes.2d.star	Shape 2D star
glsl.modifiers.tile	Tiling function
glsl.units	Pixel unit conversion function

Snippets library documentation and playgrounds here.

---

Requirements

• A graphics card supporting WebGL.

---

Todo

• Glsl 3d snippets.

---

Contributing

Pull requests are welcome and please submit bugs 🐞

Thank you for taking the time to provide feedback and review. This feedback is appreciated and very helpful 🌈

• Github Project Page
• Visual Studio Marketplace

---

Contact

• Luca Zampetti [email protected]
• Follow @actarian on Twitter

---

Release Notes

Changelog here.

vscode-glsl-canvas's Issues

[Question] Setting up IntelliSense

Hi! I just have a quick question about workflow. I'm really new to shaders so please excuse me if this is a dumb question :)

I noticed someone else was setting up intellisense in #10 and wanted to try it out as well. I included glm in my workspace and set my file name to be helloworld.glsl.cpp. In my file I have

#ifdef _WIN32
#include <glm/glm.hpp>
using namespace glm;
#endif

This makes intellisense work, but it has some bad side effects like losing the color picker, and the cpp linter complaining that uniform is not a type name. I'm happy with my setup but it feels a tad hacky.

I'm just curious if this kind of setup is normal, or if maybe I'm missing something obvious.

Is any anti-aliasing enabled by default?

This might just be me imagining things, but does this extension (or VSCode?) apply anti-aliasing to the canvas? I've ported this shadertoy example, and I just feel like when I'm viewing in VSCode I can't tell the difference between the "normal" and "anti-aliased" parts of the image, but when I view it in Shader Toy, I can tell the difference.

#version 300 es

precision highp float;

const int MAX_MARCHING_STEPS = 64;
const float EPSILON = 0.0015;
const float NEAR_CLIP = 0.0;
const float FAR_CLIP = 100.00;
const float PI = 3.14159265359;

uniform vec2 u_resolution;
uniform float u_time;
out vec4 fragColor;

float clampeddot(vec3 a, vec3 b){
    return max(0.,dot(a, b));
}

vec3 lightDirection = vec3(1.0, 1.0, 1.0);

vec2 rotate(vec2 pos, float angle){
    float c = cos(angle);
    float s = sin(angle);
    return mat2(c, s, -s, c) * pos;
} 

float sdBox( vec3 p, vec3 b ){
    vec3 d = abs(p) - b;
    return min(max(d.x,max(d.y,d.z)),0.0) + length(max(d,0.0));
}

float sphere(vec3 pos, float radius){
    return length(pos) - radius;
}

vec3 opRep( vec3 p, vec3 c ){
    return mod(p,c)-0.5*c;
}

float map(vec3 pos){
    pos.xy = rotate(pos.xy, sin(u_time) * PI/2. * 0.03);
    float offset = 0.7;
    float sph = sphere(pos, 15.);
    // just a sphere
    //return sph;

    // domain repetition, more edges, antialias more visible
    pos = opRep(pos, vec3(offset, offset, offset));

    // test boxes
    //return sdBox(pos, vec3(0.1, 0.1, 0.1));

    // test spheres
    return sphere(pos, .2);
}

vec3 computeNormal(vec3 pos){
    vec2 eps = vec2(0.01, 0.);
    return normalize(vec3(
        map(pos + eps.xyy) - map(pos - eps.xyy),
        map(pos + eps.yxy) - map(pos - eps.yxy),
        map(pos + eps.yyx) - map(pos - eps.yyx)
    ));
}

float diffuse(vec3 normal){
    float ambient = 0.2;
    return clamp( clampeddot(normal, lightDirection) * ambient + ambient, 0.0, 1.0 );
}

float specular(vec3 normal, vec3 dir){
    vec3 h = normalize(normal - dir);
    float specularityCoef = 40.;
    return clamp( pow(clampeddot(h, normal), specularityCoef), 0.0, 1.0);
}

mat3 setCamera( in vec3 ro, in vec3 ta, float cr ){
    vec3 cw = normalize(ta-ro);
    vec3 cp = vec3(sin(cr), cos(cr),0.0);
    vec3 cu = normalize( cross(cw,cp) );
    vec3 cv = normalize( cross(cu,cw) );
    return mat3( cu, cv, cw );
}

vec3 getColor(vec3 eye, vec3 dir,float dist){
        vec3 collision = (eye += (dist*0.995) * dir );
        vec3 normal = computeNormal(collision);
        float diffLight = diffuse(normal);
        float specLight = specular(normal, dir);

        return (diffLight + specLight ) * vec3(0.2392, 0.8118, 0.9529);
}

void main()
{
    vec2 uv = 2.0 * gl_FragCoord.xy / u_resolution.xy - 1.0;
    uv.x *= u_resolution.x / u_resolution.y;
    
    vec3 eye = vec3(3.5, 3.0, 15.5);
    vec3 ta = vec3( -0.5, -0.9, 0.5 );
    mat3 camera = setCamera( eye, ta, 0.0 );
    float fov = 0.2;
    vec3 dir = camera * normalize(vec3(uv, fov));

    // bg
    vec3 color = vec3(0.6784, 0.4118, 0.1059);

    float depth = NEAR_CLIP;
    float dist = EPSILON;
    
   // ANTIALIAS VARIABLES
    float pix = 4.0/u_resolution.x; // the size of a pixel
    float od = dist;
    float w = 1.8; // what is this variable for? It is a threshold, but why 1.8 and why w?
    float s = 0.0; // what is this variable for?
    vec4 stack = vec4(-1.0); // here 4 distance values are stored.
    bool grab = true;
    // END ANTIALIAS VARIABLES

    for (int i = 0; i < MAX_MARCHING_STEPS; i++) {
        dist = map(eye + depth * dir);
        // ??
        if (w > 1.0 && (od + dist < s)) {
            s -= w*s;
            w = 1.0;
        } else {
            // ??
            s = dist * w;
        	if (dist <= od) grab = true;
        	else if (grab && stack.w < 0. && od < pix*(depth-od)) {
                // stack.w contains now the new distance
            	stack.w = depth-od;
                // the stack variable get updated and the new distance is pushed in
                stack = stack.wxyz; 
            	grab = false;
        	}
        	if (dist < EPSILON || depth > FAR_CLIP) break;
        }
        od = dist;
        depth += s; 
    }

    if (dist < EPSILON) color = getColor(eye, dir, depth);

    // AA just on the top part of the screen, to see the difference with non AA
    if (uv.y > 0.) {
        for (int i = 0; i < 4; ++i) {
            // if the stored distance is less than 0, abort the loop.
            if (stack[i] < 0.0) break;
            // get the color for the collected distance stack[i]
            // mix it with the color obtained in the previous loop iteration
            dist = map(eye + stack[i]*dir);
            color = mix(getColor(eye, dir, stack[i]), color, clamp(dist/(pix*stack[i]), 0.0, 1.0));
        }
    }
    // separation line
    if (uv.y < 0. && uv.y> -0.01) color = vec3(0.);
    //vec3 debug = vec3(s);
    //vec3 debug = vec3(od);
    //gl_FragColor = vec4(clamp(debug,0.0,1.0) , 1.0);
    
    fragColor = vec4(clamp(color,0.0,1.0) , 1.0);
    // fragColor = vec4(1.);
}

Anyone else experiencing this?

Activate GUI for changing custom uniforms at runtime

After pressing the option button I can see any only the performance window in the upper left corner.
No Open Controls button like the one in your example.
Can you please provide more explanations on how to activate GUI ?
Thanks.

[QUESTION] a basic working vertex & fragment shader errors

now I may just be hitting my head against the wall, but im looking to do minor vertex shader stuff, alongside fragment & trying basic shaders for both is coming up with errors.

im trying different things from different sources, making sure that I have attribute & varying & making sure things are named right.

I have also tried playing with different things, but still running up with errors only on the vertex.

would be great if there was some info. but then again if vertex are not supported, which would be odd, then fair enough. but would be nice to see where my errors can lead to being fixed

thanks & all the best

here is the fragment code - which does not error

#ifdef GL_ES
precision mediump float;
#endif

uniform sampler2D texture0;

varying vec2 texCoord0;

void main(){
	gl_FragColor = texture2D(texture0, texCoord0.st);
}

this is the vertex code - which does error

uniform mat4 projection_matrix;
uniform mat4 modelview_matrix;

attribute vec3 a_Vertex;
attribute vec2 a_TexCoord0;
varying vec2 texCoord0;

void main(){
	vec4 pos = modelview_matrix * vec4(a_Vertex, 0.0);	

	texCoord0 = a_TexCoord0;

	gl_Position = projection_matrix * pos;
}

using a_texcoord causes error

in this simple example:

#ifdef GL_ES
precision highp float;
#endif

uniform vec2 u_resolution;
uniform float u_time;
uniform sampler2D u_texture_1;
varying vec2 a_texcoord;

void main(){
  // float a=length(a_texcoord);
  gl_FragColor=texture2D(u_texture_1,vec2(.0,.0));
}

as soon as I uncomment the first line of the main, I'm getting this error:

Load error: "TypeError: Cannot read property 'replace' of undefined"

Texture samples array does not work

In my workspace settings I have:

{
    "glsl-canvas.textures": {
        "0": "./textures/0.png",
        "1": "./textures/1.png",
        "2": "./textures/2.png",
    }
}

In my shader I use this uniforms:

uniform sampler2D u_tex0;
uniform sampler2D u_tex1;
uniform sampler2D u_tex2;

All the 3 samplers show the same image, "./textures/0.png". It looks like slot 1 and slot 2 are not read, or their content is overwritten by the first texture in glsl-canvas.textures object.

Custom Uniforms Documentation?

I'm pretty new at glsl coding and I have found this extension is incredibly helpful. Thanks!

I'd love to use dat.gui but couldn't figure out how. Could you include an example? I tried to define and declare a uniform, thinking it would appear automatically when I clicked the options icon. Is there more to making it work?

uniform float density;
#define density 0.2

Vertex and fragment shader in one file doesn't work?

Hi,

According to the documentation of glsl-canvas (https://github.com/actarian/glsl-canvas) we should be able to use both vertex and fragment shader code in one glsl file:

#if defined(VERTEX)

attribute vec4 a_position;
attribute vec4 a_normal;
attribute vec2 a_texcoord;
attribute vec4 a_color;

void main(void) {
	v_position = a_position;
	v_position = u_projectionMatrix * u_modelViewMatrix * v_position;
	v_normal = u_normalMatrix * a_normal;
	v_texcoord = a_texcoord;
	v_color = a_color;
	gl_Position = v_position;
}

// fragment shader
#else

void main() {
  ...
}
#endif

Buf when doing this with the glsl-canvas vs code extension this isn't working.

When doing this:

#version 300 es // webgl2

#ifdef GL_ES
precision highp float;
#endif

#if defined(VERTEX)
// ----------------------- VERTEX SHADER ----------------------------------

in vec4 a_position;
in vec4 a_normal;
in vec2 a_texcoord;
in vec4 a_color;

void main(void) {
    v_position = a_position;
    v_normal = a_normal;
    v_color = a_color;
    gl_Position = v_position;
}

#else
// ----------------------- FRAGMENT SHADER ----------------------------------

out vec4 outColor;

void main() {
    vec3 color = vec3(1.0, 0.0, 0.0);
    outColor = vec4(color, 1.0);
}

#endif

The canvas shows a list of errors:

Apart from the vertex shader code the fragment shader code works just fine, so it's not accepting the fact that there's also vertex shader code in there now.

Already the first error in the list 'doesn't make sense'; it tells us that a #version directive must occur before everything else. But when looking at the code it DOES occur before everything else.

So my guess is that internally this extension adds its own vertex shader code before this, causing this #version to not be first anymore and the rest of the code to fail.

If that's the case:
How could we enter custom vertex shader code?
If that's not the case it looks like there's some issue somewhere in the extension preventing us from executing vertex shader code within the same file OR the documentation of the glsl-canvas has an error perhaps.

WebGL 2 problem

First of all, thank you for creating this amazing tool ❤️

I have a problem with WebGL 2 shaders. I tried to compile the following simple shader:

#version 300 es
precision highp float;
        
in vec3 vColor;
out vec4 fragColor;

void main() {
    fragColor = vec4(vColor, 1.0);
}

glslCanvas prints 'glsl-canvas error' without listing any errors. Upon restarting VS Code pop-up emerges with a message 'Load error: "TypeError: Cannot read property 'replace' of undefined"'.

The shader is taken from this page and works perfectly in the Firefox browser. Other WebGL 2 shaders have the same problem. WebGL shaders work properly.

I am using glsl-canvas v0.2.14 with VS Code v1.61.2 on Ubuntu 21.10.

Custom Uniforms Missing Values

Heyo!

I absolutely love this extension and use it constantly. I'd love to be able to use the custom uniforms, but they see to have a lot of value issues. I have my shader on my left panel and glslCanvas on my right panel. If I open up an shader that uses the custom uniforms the values are unset until I click on stats and manually change a uniform. Once I change a uniform we're golden. The second I click back to the code window...the values immediately null out. The custom uniforms also have no default value when entering a shader. Other uniforms like resolution and time work fantastic. I also have "glsl-canvas.timeout": 0 set. Also to note: I don't have these issue with "glsl-canvas.textures".

Awesome work!! I am using this plugin for everyday shader daily's, so please let me know how I can help in any way!

Looking for WebGL Extension Support

Hey team!

I'm looking to use texture2DLodEXT in a shader. I've added:
#extension GL_EXT_shader_texture_lod : enable
#extension GL_OES_standard_derivatives : enable

But, I believe we might need to add:
gl.getExtension('EXT_shader_texture_lod');

to our gl init for this to work. Am I doing something wrong or is this something we could easily add?

Here's the doc:
https://developer.mozilla.org/en-US/docs/Web/API/EXT_shader_texture_lod

Thanks!
Will

[Feature request?] SamplerCube, textureCube

Hi,

I'm having a blast working with this extension so far. Everything seems to be working nicely.
However I'm trying to use a cubemap for a particular fragment but I can't make it work.
Are samplerCube and textureCube even supported ? I found nothing in the doc so far. The shader compile without error, so I guess the functions are found, but the result is a black screen.

uniform samplerCube u_texture_0;
...
vec3 cm = textureCube(u_texture_0, rd).rgb;
...

Thanks!

Please re-open issue: Vertex and fragment shader in one file doesn't work

Unfortunately issue #67 would be solved and should work now according to your post, but when testing with your exact shader code it's not working here. I closed the issue tho as I thought it was fixed. Could you please re-open the issue? Thanks!

Feature request, texture size

Would be possible to have a uniform with the size of a texture? considering that textureSize is not supported in GLES, it could be helpful to have this value. In glslCanvas it is set as u_nameOfTheTextureResolution, https://github.com/patriciogonzalezvivo/glslCanvas/blob/master/src/GlslCanvas.js#L459

so, for example u_tex0Resolution.

Slow update time when changing values

The Book of Shaders Editor is notorious for it's fast update time when changing values
This extension seems to recompile the shader when the editor is in the "Idle" status rather than "on type"; Again, I don't know exactly how you implemented this or if this is a limitation of VSCode itself.

But I believe giving the user options is the best way to go, my suggestion is to create a command (F1) or setting (settings.json) to define when the compiler runs: on type | Idle

I think it would be nice to reach the original editor's speed, I'll take a look at their source code to see how they managed to get such speed.

If I get the time, I'll open a PR myself.

Thanks for the extension!

Breaks when trying to use u_camera

I'm trying to use the camera uniform but the moment I include u_camera somewhere in the fragment shader, glsl-canvas breaks and stops updating altogether.

Here's a very simple example that show the problem:

#ifdef GL_ES
  precision highp float;
#endif

uniform vec3 u_camera;

void main() {
  vec3 c = vec3(u_camera.x, 1.0, 1.0);
  gl_FragColor = vec4(c, 1.0);
}

Cheers!

Texture error "u_texture_0": "./foo.jpg" since v0.2.12

I just updated GLSL Canvas to Version v0.2.12 from v0.2.11 and I now get the error 'Texture error "u_texture_0": "./foo.jpg"

When I downgrade to v0.2.11 everything works just fine

My VSCode Version info

Commit: 08a217c4d27a02a5bcde898fd7981bda5b49391b
Date: 2021-04-07T15:06:02.360Z
Electron: 11.3.0
Chrome: 87.0.4280.141
Node.js: 12.18.3
V8: 8.7.220.31-electron.0
OS: Windows_NT x64 10.0.19041`

my .vsocde/settings.json looks like this

{
"glsl-canvas.textures": {
        "0": "./foo.jpg",
        "1": "./bar.jpg",
        "2": "./foobar.jpg"
    }, 
}

is glsl version 3.0 and higher supported?

out vec4 out_color;
void main() {
	out_color = vec4(1.0);
}

This tells me I need higher version, and then doesn't seem to work when I add #version 300 es. Thanks for your attention.

Saving Video Crashes on Ubuntu 16.04

Thanks for the work!

Just wanted to let you know, saving a webm hangs Visual Studio Code in Ubuntu 16.04.

I can record the video, but once I hit stop and the save dialog box comes up, Visual Studio Code hangs and I have to kill it.

Feature Request: include support such as glslViewer

So, I know the original GLSLCanvas doesn't currently support include's... However, Patricio's glslViewer does. I'm wondering if there's a way we could patch together an include system.

issues with loading textures

Hi,

Not sure if this is an issue or something has changed in later versions, but according to an older issue here: #45 we should be able to load textures from within the settings json relatively to the project root by starting with a dot.

However, when doing this it doesn't work and throws a texture error. So this does not work:

"glsl-canvas.textures": {
        "0": "./src/assets/img/texture.png",
}

However, when doing it like this it IS working though:

"glsl-canvas.textures": {
        "0": "src/assets/img/texture.png",
}

[edit] Okay, I was wrong. It turned out even without dot it doesn't work. I found one texture online that for some reason works, but every other texture I use just fails. No matter if it's served from relative file with or without dot notation, or via http locally or remote, or even when served from https.

VS Code directly recognises the images I use by showing the image in the gutter, but this extension just doesn't seem to work with textures as how it should work. No matter what I try.

Also when switching to Kodelife instead of VS Code with this extension all textures tried immediately work without any issue. So there's definitely nothing wrong with the textures I'm using.

I tried both setting the textures from within the settings.json (inside the project) as well as via the inline comment. Nothing seems to work and texture errors keep appearing.

I give up now. This is taking me way too much time now. Textures don't seem to work on this extension unfortunately. At least not as described.

vscode-glsl-canvas: 0.2.14

WebGL2: IO buffers don't work if u_mouse isn't written somewhere

This code produces a black image :

#version 300 es
precision mediump float;
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform sampler2D u_buffer0;
out vec4 outColor;

#ifdef BUFFER_0
void main() {
	outColor = vec4(1, 0, 0, 1);
}
#else
void main() {
	outColor = vec4(
		texture(u_buffer0, gl_FragCoord.xy / u_resolution.xy).rgb, 1.0
	);
}
#endif

But adding a completely random //u_mouse comment to the code fixes it:

#version 300 es
precision mediump float;
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform sampler2D u_buffer0;
out vec4 outColor;

#ifdef BUFFER_0
//u_mouse
void main() {
	outColor = vec4(1, 0, 0, 1);
}
#else
void main() {
	outColor = vec4(
		texture(u_buffer0, gl_FragCoord.xy / u_resolution.xy).rgb, 1.0
	);
}
#endif

Record button crash

Step to reproduce it:
Make a shader, press the record button.

Result:
A dialog window to save a .webm file appears on screen. But it is not possible to click anywhere, it is not even possible to open a terminal and kill vscode. The GUI is stuck, I have to press the button to shutdown the laptop.

Expected behaviour:
It is possible to select the location where the file is then saved.

I am Linux, popOS.

"Create one" button to create .glsl editor does'nt do anything

I don't really know if this has it's place here but i'll try.
So i'm working with Ubuntu 18.04 and wanted to visualise my webgl canvas in vs code.
I've installed glslCanvas and reloaded my vs code and typed the command "Show glslCanvas" and it opens the window and says there's no active .glsl Editor. The problem is when i click on the button to create one it doesn't do anything. I've tried uninstalling and reinstalling the extension, closing vs code, even rebooting my computer but it doesn't do anything.
As i said i don't really know if this is the right place for that but i haven't found anywhere else.
Thank you for understing.

How to use nearest neighbor interpolation?

When sampling from a 64 x 64 texture (Bayer matrix), I get the below in the preview.

However, I expected a matrix-like texture. Any idea how to switch to nearest neighbor?

GLSL canvas disappears when reordering editor layout

When I want to preserve some horizontal space I move the GLSL canvas underneath my shader code. When I either do this by dragging the canvas tab to the lower/upper half of my editor or do "View" > "Editor Layout" > "Flip Layout", the tab becomes blank. Doing the "Refresh glslCanvas" action doesn't do anything. This used to work in earlier versions of VSCode. I'm not sure which version because it has been a while I've used this plugin.

No reload until uniform u_time is used

Hello

Since the last update, when I create a fragment shader, the preview doesn't update until I insert u_time in my code.

VSCode : 1.24.1
macOS : 10.13.5

Demo:

is it possible to integrate glslify in glsl-canvas?

How to use webgl2 ?

I don't find any information about using WebGl2 with glslCanvas.
Nohting in STackOverflow.
I have read https://webgl2fundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html, but I just got a white result with the following code

#version 300 es

precision mediump float;

out vec4 outColor;  // you can pick any name
uniform vec2 u_resolution;
uniform float u_time;
 
void main() {
    // vec2 st = gl_FragCoord.xy / u_resolution.xy;
    // st.x *= u_resolution.x / u_resolution.y;

   vec3 color = vec3(0.3, 0.2, 0.0);

   outColor = vec4(color, 1.0);
}

If I use gl_FragColor I got a error message ...

What did I Miss ?

Thank's

Constant

All *.cpp files are treated as glsl.

After update to 0.2.2 all cpp files are being treated as glsl. If I downgrade to 0.1.92, everything is fine again.

Undeclared Identifier Basic Example

I just downloaded this extension and when trying to run any example found here (https://actarian.github.io/vscode-glsl-canvas/) I get all sorts of syntax errors. As shown in the image below, can someone help me understand what is going on?

Formatting != operator with the non-compact formatter

The != operator seems to be not correctly formatted when the Use compact formatter option is disabled in settings.

Before formatting

if (0 != 0){}

After

if (0 ! = 0) {}

And there is an error message in the output tab: ERROR line 1 if syntax error

Thank you for this extension!

no command Show glslCanvas available

Installed the extension on Windows 10 1903. Using Ctrl-P and searching for "Show glslCanvas" does not provide any result. Am I missing something about the installation maybe?

Feature Request: Vec3,vec4 Color Picker

I use this plugin every single day for my Glsl daily and just love it. The one thing I'm really missing is the color picker from glslCanvas.....I also love the float sliders, but hey....I just love the color picker more.

Would there be any chance of integrating a color picker?

Docs: example how to load an .obj

Hi

I can't seem to figure out how to load a custom .obj, can we get an example in the docs or playground on how to do this?

Thanks

Texture Error "u_texture_0": "F\image.png"

I added this line to the settings to show the image :

 "glsl-canvas.extensions": [

    ],
    "glsl-canvas.textures": {
        "0": "F:\\image.png",
    }

so the error popped up on VsCode, can you please tell me how to render the image correctly?

//------------------------------------------
#ifdef GL_ES
precision mediump float;
#endif
//------------------------------------------
//------------------------------------------
uniform vec2 u_resolution;
uniform float u_time;
uniform vec2 u_mouse;
uniform sampler2D u_texture_0;
void main(){
    //=============================
    // // Image
    //=============================
    vec2 coord = gl_FragCoord.xy / u_resolution;
    vec3 color = vec3(0.0);

    coord.x += sin(u_time);
    
    gl_FragColor = texture2D(u_texture_0, coord);
}

Can't use local images as textures

Hello,

I've try to use texture but when I define one with a path to my computer, it doesn't show anything.

{
    "glsl-canvas.textures": {
        "0": "./img/a.jpg",
        "1": "/Users/Me/directory/img/b.jpg",
        "2": "https://thebookofshaders.com/15/hokusai.jpg"
    }
}

Textures 0 and 1 doesn't work but 2 is ok.

The settings.json is located on .vscode/settings.json of my project.

VSCode : 1.26.1
macOS : 10.13.6
glsl-canvas : 0.1.91

The non-compact formatter enforces a space at the end of some lines

Hi,

Uncommenting

vscode-glsl-canvas/src/glsl/format.provider.ts

Line 71 in eded300

s = s.replace(/[^\S\n]+$/gm, '');

solves the problem, but I can't tell if it introduces other irregularities.

nested includes

Hey guys, thanks for an awesome tool firstly :)

I wanted to query whether nested includes work? I keep getting a glsl-canvas error when I try nesting includes into files that are being included. Is there a way I can debug on my end to help? I'm looking to make a common lib and to have a lot of smallish functions in their own files.

Thanks again!

glslCanvas error : Index expression must be constant

Hi,

I've found an issue when you want to dynamicly access to an index of an array.

vec2 p[9];

int i = 0;
for (float y = -1.0; y <= 1.0; y++) {
  p[i++] = y; // The error says : Index expression must be constant
}

I test this code with glslViewer and that work well.

VSCode : 1.28.1
macOS : 10.14
glsl-canvas : 0.1.91

Flicker/stutter on update settings.json

Is there a way to avoid this flickering on updating the settings.json? I'm currently updating it from an external script, and it would be nice for prototyping if this can be avoided.

https://youtu.be/YM7vl-MRYrM

u_mouse and u_resolution

Something is off with u_mouse and / or u_resolution on my computer. The shader you linked in issue #2 works fine for me in my browser, but when I try it with the extension in VS Code the dot is restricted to the bottom left quarter of the canvas:

I'm on a macBook Pro with a retina display; could it be a devicePixelRatio issue?

audio & webcam

would it be possible to have audio and webcam textures like ShaderToy ?

[Feature Request] Disable auto-rotate for models

Hi,
I find myself using your tool a lot lately to create shaders for some specific obj. In many instances, I would like to deactivate the auto-rotation and use the camera to look around the geometry. Is there any way to integrate this feature, perhaps in the settings.json options? Thank you so much for your work, your tool is very useful for us at the moment.

is there something wrong about supporting WebGL2.0?

code below gets the message: glsl-canvas error

the render result is blank

#version 300 es

precision mediump float;

out vec4 fragColor;

void main ()
{
    fragColor = vec4(1.0, 0.0, 1.0, 1.0);
}

so what is wrong? i have no idea.

Load error for #include

I just added a simple #include "common.glsl" in my project, but I get an error with VSC:

Load error: "Error: Network request failed for url vscode-resource:/e:/shaders/common.glsl"

The path and filenames are correct.
I'm on Windows 10 with VSC 1.50.1

After resizing, u_mouse uniform reports wrong values

When I show the glslCanvas u_mouse uniform reports the correct values. When I resize the canvas window, or the whole vscode window, the u_mouse uniform reports incorrect values.

I'm using this plugin on OS X 10.12.6, 15" inch macbook with retina screen (2.0 devicePixelRatio). VS Code version is 1.20.1.

Incorrect color

I've noticed that the color is incorrect for me. A simple shader that renders solid red is not completely red in the rendered output. See the difference between the canvas and the color picker? Is there some sort of color space transformation going on here?

v_position in screen space?

Hi everyone! Thanks for the extension!! I've been using it to learn GLSL and enjoying it a lot =)

A question I have is if the in vec4 v_position variable is provided in screen space, rather in local, modelview or in the camera coordinate systems. I would expect it to be in modelview, but it seems to be given in camera space (recorded a quick video). If it is in camera space, is there another incoming variable I can use to get the interpolated fragment position before the camera transformation?

Thanks a lot!

The shader in the video is:

#version 300 es
precision mediump float;

in vec4 v_position;
out vec4 fragcolor;

void main() {
    fragcolor = v_position;
}

v_position.mp4

Undeclared Identifier error with WebGL2

To Repro

test.frag

#version 300 es

#ifdef GL_ES
precision mediump float;
#endif

void main() {
    gl_FragColor = vec4(0.0);
}

Actual

Expected

A black screen.