Shadertoy Unofficial Plugin

A browser extension designed to supercharge the shader development and playback experience on Shadertoy.com.

---

Installation

Web Stores

Browser	Store Link
Google Chrome	Chrome Web Store
Mozilla Firefox	Firefox Add-ons (AMO)
Microsoft Edge	Edge Add-ons

Manual Installation (Unpacked / ZIP)

Download the latest release zip package from the Releases page.

Click to expand manual installation instructions

Google Chrome / Chromium / Brave / Opera

1. Download and extract the latest extension release ZIP.
2. Navigate to chrome://extensions/ in your browser.
3. Enable Developer mode toggle in the top-right corner.
4. Click Load unpacked and select the unzipped directory (or drag and drop).

Mozilla Firefox

1. Download and extract the latest extension release ZIP.
2. Navigate to about:debugging#/runtime/this-firefox.
3. Click Load Temporary Add-on….
4. Select manifest.json from the unpacked folder.

Microsoft Edge

1. Download and extract the latest extension release ZIP.
2. Navigate to edge://extensions/.
3. Enable Developer mode toggle.
4. Click Load unpacked and select the unzipped directory.

---

Features

🎮 Player & Canvas Controls

• Custom Resolution Multiplier: Adjust resolution dynamically via hotkeys (ALT + 1..9 to downscale, ALT + SHIFT + 1..9 to upscale/supersample).
• Pixelated / Smooth Rendering Modes: Toggle canvas filtering mode directly from the extension popup.
• iTime Playback Controls: Interactive slider for iTime and media channel seeking, plus loop interval ranges.
• iMouse Simulator: Four interactive sliders to manipulate iMouse.xyzw coordinates for testing and parameter tuning.
• Fullscreen Playback & Fullscreen Edit Mode: Smooth canvas handling with dedicated shortcut triggers.
• Capture HQ Screenshot & Video Recording: Fast high-res screenshot capture (SHIFT + CTRL + S) and deterministic, frame-accurate offline video recording with selectable framerates (50, 60, 120, 144, 240 FPS) powered by WebCodecs & webm-muxer (ALT + SHIFT + R).

🛠️ Code Editor & Shader Tools

• Monaco Editor GLSL IntelliSense & Autocomplete: Full autocompletion for GLSL built-in functions, keywords, vector swizzles, ShaderToy uniforms, and snippets (CTRL + M or ., # triggers).
• Go to Definition & Symbol Navigation: Jump directly to definitions (F12 or CTRL + Click) for user-defined functions, structs, #define macros, and variables; quick outline symbol search via CTRL + SHIFT + O.
• Rich Hover Tooltips & Signatures: Hover over any built-in GLSL function or user-defined function, struct, macro, or variable to inspect full GLSL signatures, descriptions, and parameter types across passes (including the Common tab).
• Signature Help & Parameter Hints: Interactive parameter hints showing the active argument while typing function calls (( and ,).
• Live Diagnostics & Compilation Error Squiggles: On-the-fly background syntax and type checking with inline squiggles and tooltips before compiling.
• Custom Parameters Block: Inject external images/textures and customize canvas resolutions via a JSON comment block in the Common tab. Read Custom Parameters Documentation.
• Interactive Color Picker: Direct color picking for vec3 declarations containing RGB float values.
• BBCode Helper Buttons: Quick formatting toolbar for shader descriptions and comments.
• Fork Any Shader: Fork any public shader directly with one click.
• Save as New Draft: Duplicate owned shaders into fresh drafts without overwriting the original.

⏱️ Profiling & Data Management

• GPU Render Timers: High-precision WebGL2 render timing via EXT_disjoint_timer_query_webgl2.
• Render Call Multiplier: Multi-pass execution control for stress testing and benchmark comparisons.
• Export & Import Shaders: Export shaders as single JSON or complete ZIP archives (including readme.txt); import JSON shader files.
• Auto Shader Previews: Automatic local shader thumbnail generator.

👤 Profile & Navigation

• Alternative Profile Page: Modern grid layout grouping your shaders by status with high-resolution previews.
• Open Recent: Fast access dropdown to recently viewed personal shaders.
• Rich Links: Automatically activates links in shader descriptions and comments even without BBCode tags.

---

Keyboard Shortcuts

[!NOTE] On macOS, use CMD instead of ALT.

Canvas & Player (Click canvas first)

Shortcut	Action	Description
ALT + 1 .. 9	Decrease Resolution	Divides canvas resolution by the number pressed (e.g., 2 → 50%, 8 → 12.5%).
ALT + SHIFT + 1 .. 9	Increase Resolution	Multiplies canvas resolution for high-detail / supersampling.
ALT + → / ←	Forward / Rewind	Advances or rewinds shader playback time.
ALT + ↑ / ↓	Pause / Restart	Pauses time uniform or restarts shader from frame 0.
SHIFT + CTRL + Enter	Fullscreen Edit	Toggles fullscreen editing mode.
SHIFT + CTRL + S	Take HQ Screenshot	Captures current frame in high resolution.
ALT + SHIFT + R	Record Video	Starts/stops deterministic canvas video recording.

Code Editor

Shortcut / Trigger	Action	Description
CTRL + M	Code Completion	Triggers GLSL autocomplete suggestions.
F12 or CTRL + Click	Go to Definition	Jumps to definition of function, struct, macro, or variable.
CTRL + SHIFT + O	Symbol Outline	Opens Quick Open symbol outline search in current file.
Hover over symbol	Hover Tooltips	Displays GLSL signature, documentation, and parameter types.
Type ( or ,	Parameter Hints	Displays active function signature and highlights current parameter.
Cursor on vec3(r, g, b)	Color Picker	Pops up an inline visual color picker.

---

Screenshots

Controls & iMouse Sliders	iTime Range & Looping

Code Completion	Interactive Color Picker

Alternative Profile Layout	Extension Popup & Settings

BBCode Comment Buttons	Custom Parameter Textures

Monaco Editor additional, shadertoy specific features

---

Contributing & Reporting Issues

• Bug reports, feedback, and feature suggestions are welcome via GitHub Issues.
• Please open an issue discussing your proposed changes before submitting a pull request.
• Review PRIVACY-POLICY.md for details on permissions and privacy.

---

Credits & Contributors

• Author: Patryk Falba (Patu)
• Contributors:
  • movAX13h
  • cxw42
  • Ethan Lowenthal
  • Ahsen Khan
  • GPU render timing based on shadertoy_gpu_timing.user.js by Andrei Drexler
  • Video muxing powered by webm-muxer by Vanilagy

---

Support

If you find this extension helpful in your shader workflow, consider buying a coffee or a beer! ☕🍺

---

Changelog

Detailed release history and version notes can be found in CHANGELOG.md.