{"id":21155919,"url":"https://github.com/dfranx/vscode-shadered","last_synced_at":"2025-09-07T20:34:28.737Z","repository":{"id":113373363,"uuid":"368667965","full_name":"dfranx/vscode-shadered","owner":"dfranx","description":"VS Code extension that adds the ability to debug and preview shaders","archived":false,"fork":false,"pushed_at":"2021-05-20T14:29:33.000Z","size":7492,"stargazers_count":92,"open_issues_count":4,"forks_count":10,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-06-06T17:53:55.528Z","etag":null,"topics":["debugger","glsl","hlsl","shaders","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=dfranx.shadered","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dfranx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-05-18T21:14:36.000Z","updated_at":"2024-01-22T18:06:01.000Z","dependencies_parsed_at":"2023-04-19T23:31:51.091Z","dependency_job_id":null,"html_url":"https://github.com/dfranx/vscode-shadered","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dfranx%2Fvscode-shadered","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dfranx%2Fvscode-shadered/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dfranx%2Fvscode-shadered/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dfranx%2Fvscode-shadered/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dfranx","download_url":"https://codeload.github.com/dfranx/vscode-shadered/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225539662,"owners_count":17485367,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["debugger","glsl","hlsl","shaders","vscode","vscode-extension"],"created_at":"2024-11-20T11:32:40.292Z","updated_at":"2024-11-20T11:32:40.744Z","avatar_url":"https://github.com/dfranx.png","language":"TypeScript","funding_links":[],"categories":["ComputerGraphics \u0026\u0026 Shadingv"],"sub_categories":["Google Analytics"],"readme":"This extension lets you debug and preview HLSL \u0026 GLSL shaders in Visual Studio Code. It requires at least **[SHADERed v1.5.3](https://shadered.org)**.\nYou can watch a YouTube video on how to get started with this extension: [https://www.youtube.com/watch?v=3VGN8r88Pkk](https://www.youtube.com/watch?v=3VGN8r88Pkk)\n\n#### Table of Contents\n* [Features](#features)\n* [How to setup](##how-to-setup)\n* [Build](#build)\n\n## Features\n### Debugging HLSL \u0026 GLSL shaders\nWith this extension you can debug both HLSL and GLSL shaders.\nOnce you've opened your project, select a pixel by clicking on it.\nSHADERed will pause the preview and you will be able to pick the shader stage that you'd like to debug.\nYou can debug vertex, pixel, geometry, compute \u0026 tessellation control shaders.\nTo start the actual debugger, click on the \"play\" button. You will now be able to:\n\n* step through your shader line-by-line\n* see variable values\n* run immediate expressions\n* place (conditional) breakpoints\n* add watches\n* etc... \n\n![Debugging a shader in VS Code](https://shadered.org/assets/blog/9/img/debugging_light.gif)\n\nBesides debugging, you can also see your shader's output as you edit the code.\nWhen you save your changes to a file, SHADERed will automatically detect them and recompile the shaders.\n\n![Prototyping shaders in VS Code](https://shadered.org/assets/blog/9/img/preview.gif)\n\n### Watches\nYou can add watches through Visual Studio Code's user interface.\nWatches will tell you the value of your expression.\nThe value will be updated as you step through your shader's code.\nYou can also see list of all variables and their values.\n\n![Watches and variables](https://shadered.org/assets/blog/9/img/watches.png)\n\n### Run immediate expressions\nIf you want to see the result of an expression without having to add it as a watch, you can enter the custom expressions in VS Code's `Debug Console` window.\n\n![Running shader immediate expressions](https://shadered.org/assets/blog/9/img/immediateMode.gif)\n\n### Breakpoints\nYou can add breakpoints to your shaders.\nThe debugger will pause the execution when it hits the breakpoint.\nThese breakpoints can also have a condition (the debugger will only pause when the condition has been met)\n\n![Adding breakpoints to shaders](https://shadered.org/assets/blog/9/img/breakpoints.png)\n\n### Inline values \u0026 hover\nIf you've got the `\"debug.inlineValues\"` option turned on, VS Code will show variable values next to the each line.\nYou can also hover over a variable's name to see it's value.\n\n![Hovering over variables while debugging shaders](https://shadered.org/assets/blog/9/img/hover.png)\n\n### Debugging geometry shaders\nBesides vertex and pixel shaders, you can also debug geometry shaders. A window showing GS output will open when you start the geometry shader debugger.\n\n![Debugging geometry shader in VS Code](https://shadered.org/assets/blog/9/img/debugGS.png)\n\n### Debugging compute shaders\nDebugging compute shaders with this extension is somewhat limited. There's currently no way to start debugging a specific thread (though, this can be done through standalone SHADERed). You can only initiate the CS debugger through the so-called \"suggestions\" (these suggestions are predictions made by SHADERed):\n\n![Debugging compute shader in VS Code](https://shadered.org/assets/blog/9/img/debugCS.png)\n\n## How to setup\nAfter you install the extension, you need to tell VS Code the location of your SHADERed executable (you have to have [SHADERed downloaded](https://shadered.org) for this extension to work!).\nYou can do this by going to the settings (`File` \u0026rarr; `Preferences` \u0026rarr; `Settings`) and searching for \"shadered\".\nA textbox will appear where you have to enter the path to your SHADERed executable.\n\n![Visual Studio Code SHADERed settings](https://shadered.org/assets/blog/9/img/vscode_settings.png)\n\nNow that VS Code knows the location of SHADERed, open a directory/workspace which contains a SHADERed project file (`.sprj`).\nTo start the debugger, either open the `.sprj` file in the text editor or\nadd the `.vscode/launch.json` file to your workspace with the following [code](https://github.com/dfranx/vscode-shadered/blob/master/sampleWorkspace/.vscode/launch.json):\n\n![VS Code project launch.json](https://shadered.org/assets/blog/9/img/launch_json.png)\n\nand then press the F5 key.\nWithout the `launch.json` file, you will always have to change focus to the `.sprj` file in VS Code before you press the F5 key.\n\n## Build\nIf you want to compile this extension by yourself, run these commands:\n```sh\ngit clone https://github.com/dfranx/vscode-shadered.git\ncd vscode-shadered\nnpm install\n```\n\nOpen project's directory with VS Code and hit `F5` key -- a new VS Code window will open and you'll be able to test the extension there.\n\n## LICENSE\nvscode-shadered is licensed under MIT license. See [LICENSE](./LICENSE) for more details.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdfranx%2Fvscode-shadered","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdfranx%2Fvscode-shadered","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdfranx%2Fvscode-shadered/lists"}