{"id":13555400,"url":"https://github.com/spite/ShaderEditorExtension","last_synced_at":"2025-04-03T08:31:13.247Z","repository":{"id":29963603,"uuid":"33510422","full_name":"spite/ShaderEditorExtension","owner":"spite","description":"Google Chrome DevTools extension to live edit WebGL GLSL shaders","archived":false,"fork":false,"pushed_at":"2017-05-01T15:54:13.000Z","size":5862,"stargazers_count":621,"open_issues_count":12,"forks_count":58,"subscribers_count":33,"default_branch":"master","last_synced_at":"2025-03-29T15:08:15.524Z","etag":null,"topics":["chrome-devtools-extension","glsl","google-chrome","javascript","shader-editor","webgl"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/spite.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-06T23:04:50.000Z","updated_at":"2025-03-13T02:56:45.000Z","dependencies_parsed_at":"2022-08-07T15:00:17.120Z","dependency_job_id":null,"html_url":"https://github.com/spite/ShaderEditorExtension","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spite%2FShaderEditorExtension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spite%2FShaderEditorExtension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spite%2FShaderEditorExtension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spite%2FShaderEditorExtension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spite","download_url":"https://codeload.github.com/spite/ShaderEditorExtension/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246965639,"owners_count":20861904,"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":["chrome-devtools-extension","glsl","google-chrome","javascript","shader-editor","webgl"],"created_at":"2024-08-01T12:03:11.509Z","updated_at":"2025-04-03T08:31:08.226Z","avatar_url":"https://github.com/spite.png","language":"JavaScript","readme":"# WebGL GLSL Shader Editor Extension for Google Chrome\n\nA Chrome DevTools extension to help you edit shaders live in the browser. Very much based on Firefox DevTools Shader Editor. [Here's a video showing it in action](http://www.youtube.com/watch?v=nPcUH3b3pFY)\n\n[Install the extension from the Chrome Store](https://chrome.google.com/webstore/detail/shader-editor/ggeaidddejpbakgafapihjbgdlbbbpob)\n[![npm](/about/ChromeWebStore_Badge_v2_496x150.png)](https://chrome.google.com/webstore/detail/shader-editor/ggeaidddejpbakgafapihjbgdlbbbpob)\n\nTwin project of [Web Audio API Editor Extension for Google Chrome](https://github.com/spite/WebAudioExtension)\n\n![Shader Editor](/about/snapshot.jpg)\n\nSome more info about this project: [Creating a Plug'n Play Live WebGL Shader Editor](http://www.clicktorelease.com/blog/live-webgl-shader-editor)\n\n### How to install ###\n\nFrom the chrome store:\n - [Follow this link and install the extension from the Chrome Store](https://chrome.google.com/webstore/detail/shader-editor/ggeaidddejpbakgafapihjbgdlbbbpob)\n\nLoad the extension from disk directly:\n- Checkout the repo\n- Open Chrome's Extensions page (``Settings / More tools / Extensions``)\n- Enable ``Developer Mode``\n- Click on ``Load unpacked extension`...\n- Select the folder /src in the checked out project\n\nAlternatively, you can pack the extension yourself and load by dropping the .crx file in the Extensions page.\n\n### How to use ###\n\n- Browse to a page with WebGL content (you can find many here http://threejs.org/, here https://www.chromeexperiments.com/webgl or here http://www.webgl.com/)\n- Open DevTools\n- Select the ``Shader Editor`` tab\n- The extension needs to instrument ``WebGLRenderingContext``: if you open DevTools after the page has loaded, hit the ``Reload`` button. If the extension was already running, it automatically instruments the page.\n- If there are calls to ``.createProgram``, the UI will show a list\n- Select a program to see its vertex shader and fragment shader\n- Use the Pretty Print icon to make the code more readable\n- Use the fullscreen button to make the code editor bigger\n- Use the Star icon to apply the GLSL Optimiser\n- Use the check mark icon next to each shader's name to toggle its visiblity\n- Use the Eye icon to disable shader highlighting\n- On the Textures tab, click on a texture to open a File Dialog to use another texture, or drag and drop a file into the texture.\n- On the Setting tab, enable or disable texture monitoring and shader highlighting (for performance reasons)\n\n### TO-DO ###\n\nAs always: forks, pull requests and code critiques are welcome!\n\n- ~~Detect when the page is reloaded or changed [Issue #1](https://github.com/spite/ShaderEditorExtension/issues/1)~~\n- ~~Highlight shaders when hovering over list item [Issue #3](https://github.com/spite/ShaderEditorExtension/issues/3)~~\n- Check why some pages don't load (like http://david.li/flow/) [Issue #4](https://github.com/spite/ShaderEditorExtension/issues/4)\n- Figure out why it doesn't .postMessage the first time it's injected [Issue #5](https://github.com/spite/ShaderEditorExtension/issues/5)\n- Figure out why it doesn't work on Android over remote debugging [Issue #6](https://github.com/spite/ShaderEditorExtension/issues/6)\n\nNice to have:\n\n- Save to disk (?) - Not possible for now with the DevTools API\n- Add uniform tracking to display values fed to the shader\n- ~~Integrating @aras-p + @zz85 [GLSL Optimizer](https://github.com/zz85/glsl-optimizer)~~ [Added](https://github.com/spite/ShaderEditorExtension/commit/cd6c59aef586b1a7d8dfbdbb01e9538fb374a270)\n \n#### Changelog ####\n\n[See detailed change log](CHANGELOG.md)\n\n#### License ####\n\nMIT licensed\n\nCopyright (C) 2015 Jaume Sanchez Elias, http://www.clicktorelease.com","funding_links":[],"categories":["JavaScript","javascript","WebGL"],"sub_categories":["Tools/Debugging"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspite%2FShaderEditorExtension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspite%2FShaderEditorExtension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspite%2FShaderEditorExtension/lists"}