In their shadertoys, programmers have to handle everything, and redo everything from scratch every time. For repetitive basic utilitary features like GUI or font display it can thus be very boring, so that many just don’t embed any GUI and users have to tweak defines.
Fortunately, various community members have publish useful base elements that you can reuse !
( PS: coders, please do add the tag “gui” to your utilitary shaders: for now it gathers very little ! )
Bags of features:
- Image may be NSFW.
Clik here to view.
Super Shader GUI 98 : Windows98 inside !
Windows (move, iconify, scroll), sliders, checkbox, color picker.
- Image may be NSFW.
Clik here to view. Physically Based Shading :
(open) menus & submenus, buttons, sliders, boxes selector (here, index color).
- Image may be NSFW.
Clik here to view. UI easy to integrate :
Display label+value, slider (included in label), color picker.
- Image may be NSFW.
Clik here to view. Sculpt tool , Image may be NSFW.
Clik here to view. Interactive pottery :
Labels, sliders, checkbox, boxes selectors, keys.
- Image may be NSFW.
Clik here to view. iResolution, iMouse, iDate, etc :
Display text and numbers, keyboard, draw lines, blend, hashs, date …
- Image may be NSFW.
Clik here to view. Distance field outline mask :
Sliders, numbers, point picker…
- Image may be NSFW.
Clik here to view. digits/sliders/kbd widgets – 2 : Sliders, checkbox, keyboard, digit-display
Isolated features:
Sliders & widgets :
- all (tag) : https://www.shadertoy.com/results?query=widgets
- Image may be NSFW.
Clik here to view. 2D Canvas with UI : Sliders with value.
- Image may be NSFW.
Clik here to view. Shader UI Toolkit : Sliders and checkbox.
- Image may be NSFW.
Clik here to view. digits/sliders/kbd widgets – 2 : Sliders, checkbox.
- Image may be NSFW.
Clik here to view. checkboxes, buttons
- Image may be NSFW.
Clik here to view. Window manager : Basic windows (move-resize).
- Image may be NSFW.
Clik here to view. knobs
- Image may be NSFW.
Clik here to view. other knobs
color picker :
- Image may be NSFW.
Clik here to view. minidemo #2: Continuous UI : color picker.
Mouse management:
- Image may be NSFW.
Clik here to view. pick & pan objects: 3 methods : pick, select region, select by framing, using the new (nov,2020) mouse events. - Image may be NSFW.
Clik here to view. Pan zoom control : Mouse pan (with inertia).
- Image may be NSFW.
Clik here to view. Reusable drag and drop : Drag & drop.
Keyboard management:
- Image may be NSFW.
Clik here to view. iResolution, iMouse, iDate, etc : (includes special keycodes reminder Image may be NSFW.
Clik here to view. )
- Image may be NSFW.
Clik here to view. Key group toggles (utils) : key group toggles (for exclusive choice selector) - Image may be NSFW.
Clik here to view. 13 knot rope / arithmetic rope : memorizing independent states 0-39 associated to key 0-9 + shift, ctrl or alt.
Text & int/float numbers display:
- all (tag) : https://www.shadertoy.com/results?query=fonts
- more (including unrelated) : https://www.shadertoy.com/results?query=font
- Image may be NSFW.
Clik here to view. iResolution, iMouse, iDate, etc : Text (immediate & optimized deferred mode), int4, float4.4
Specials:
- Image may be NSFW.
Clik here to view. Message: sound in #2 : Sound shaders with no image: message it in the icon or people won’t know ! - More message types.
- Image may be NSFW.
Clik here to view.![]()
Material Menu : Live previews menu.
- Image may be NSFW.
Clik here to view.![]()
Editable grid of values : ( for crosswords, Sudoku, Suguru …)
- Image may be NSFW.
Clik here to view.![]()
Bit Pattern Editor
- Image may be NSFW.
Clik here to view.![]()
Compatibility test / enforce : Check compatibility issues or enforce compatibility.
Graphics:
- Image may be NSFW.
Clik here to view.![]()
iResolution, iMouse, iDate, etc : Draw antialiased lines (round or square), blend, disk, circle.
- Image may be NSFW.
Clik here to view.![]()
Graph explorer.
- Image may be NSFW.
Clik here to view.![]()
2D Vector Field Flow : Draw arrows in fields.
- Image may be NSFW.
Clik here to view.![]()
Photoshop Blends Branchless : All blending modes.
- Image may be NSFW.
Clik here to view.![]()
Mode 7 WASD Walkaround : basic ASWD move on 3D terrain.
( No longer compiling: replace vec2 BUFF_RES with #define ).
Remark: coders, do account for non-Qwerty keyboards: replace or add arrows ! (codes 37-40)
- Image may be NSFW.
Clik here to view.![]()
Raymarching Sample Code : Basic ray-tracing sample code ( camera rotations, etc).
- Missing ! : Some easy-to-reuse code for 2D and/or 3D walk-through.
–> Which shader would you advise ?