Shader Web

A static web app that makes writing GLSL shaders more enjoyable!

• think ShaderToy with a better shader editing experience, but without the online features

live demo: https://shaderweb.netlify.app

Feature	Shader Web	ShaderToy
Real-Time Shader Rendering	✅	✅
Custom Canvas Resolution	✅
Web-Based Editor	✅	✅
GLSL Syntax Highlighting	✅	✅
Editor Tabs	✅	✅
Editor Keybindings (Vim, Emacs, ...)	✅
Editor Themes	✅
Autocompletion	✅
#include Preprocessor	✅
Export and import from disk as zip files	✅
Shader Inputs (iResolution, iTime, ...)	✅	✅
Multi-Pass Rendering	✅	✅
Custom Buffer Dimensions	✅
Tweak Uniform Values with UI widgets	✅
Website dark/light theme	✅
Keyboard Input as Texture	✅	✅
Fullscreen Canvas	⌚	✅
Screenshot and recordings	⌚	✅
Sound Input		✅
Online Features (Comment, Explore, ...)		✅

Screenshots:

---

Running the App Locally

To build and run shader web on your local machine, follow the steps below:

Before you begin, make sure you have the following installed on your machine:

• Node.js (version 14.x or higher)
• npm (Node Package Manager, typically installed with Node.js)
• Git (for cloning the repository)

First, clone your GitHub repository to your local machine using Git.

Once the repository is cloned, navigate to the project directory:

Install the necessary dependencies for your project using npm:

npm install

To start the development server and run your app locally:

npm start

This will start the app in development mode, and you should see the app running in your default browser at http://localhost:3000/.

---

TODOs and Finished Tasks

Detailed list, for the dev's reference

• frag shader rendering on a quad
• select shader file from local disk
• unify and prettify the ui
• interactive uniform ui components
  • color picker
  • slider + input for numbers
  • checkbox for bool
  • fold-able component
  • dropdown
  • image/texture component
• iResolution uniform
• I/O
  • iMouse uniform
  • keyboard texture input
• shader compilation error message
• animation control
  • pause and resume
  • speed
  • restart
• download config
• responsive design ui
• manually specify viewport dimension
• online editor (ace)
  • glsl syntax highlighting
  • vim mode
    • switch between different keybindings
  • themes
  • font-sizes
  • toggle line number and other editor settings
  • load a default template
  • pass code to shader
  • export file
• save file and settings on browser
  • reset editor settings only, reset shader source, reset config
• button to toggle visibility of a panel
  • vertical title of hidden panels
• icons
• animate compile status message
• access the previous frame as a uniform (also the dimension)
• create uniform components from ui (instead of writing the config by hand)
  • modify
  • delete
  • create
  • reorder
• tabs in editors
  • scrolling tab bar
  • delete
  • add (empty, template)
  • edit (rename)
  • reorder
• import preprocessor directive
• keyboard shortcuts (compile, set dimension)
  • compile shortcut
  • editor shortcut -- find
  • help -- list all shortcuts
  • tooltips
• multi-pass rendering
  • frontend to create buffer shader file
  • abstract render pass and texture
  • save and pass previous frame of buffer
  • post render pass
  • improve shader status for multiple passes
  • generic buffers pass
• more compatible with shadertoy
  • main function
  • iResolution use vec2
  • use WebGL2 + GLSL 300 es
  • hide built-in code/inputs like shadertoy
• more templates/libraries
  • state store and read from framebuffer (vec3 <=> other types)
  • noises
  • sdfs
  • keycodes
• screenshot
• performance -- show fps
• export and import shaders
  • import
  • fix uniforms import and export
  • incorporate config file
  • export with options (files in a zip, preprocessed file)
  • import from shadertoy
  • export to shadertoy
• true pause (stop rendering the next frame)
• embed
• pass uniforms not only to the main shader
• better shader error messages
• make some modal buttons work
  • edit uniform reset
• confirm before reset
• error message shows line number
• editor syntax highlighting for new glsl version
• save the name for export later, when importing
• error message shows correct line number and file, before preprocessing
  • show error in editor gutter using annotations
• update logs
• persistent editor settings

Bugs and Issues:

• add a uniform in a folder component => error
• some keyboard shortcuts in editor
• buffer -- no iResolution (can't deal with iMouse), perhaps / iMouse by resolution?
• buffer -- need to manually define uniform sampler iUniformName
• buffer -- iPreviousFrame doesn't make sense
• export -- chrome doesn't let choose where the file is saved