Design-Assets · 7 Tools

WebGL-Shader und Shader-Gradienten

Shader für die Interface-Arbeit: animierte Gradienten, Noise und Grain sowie Playgrounds, um GLSL ohne Build-Schritt zu schreiben. Einige kommen als React-Komponenten, sodass ein bewegter Hintergrund nur einen Import entfernt ist.

Sortieren

thebookofshaders.com

Book of ShadersShaderEin interaktiver, praxisnaher Leitfaden, der dir Schritt für Schritt beibringt, wie man Fragment-Shader schreibt.

compute.toys

compute.toysShaderEine Online-Sandbox, um WGSL-Compute-Shader zu schreiben und mit ihnen zu experimentieren.

shaderfrog.com

ShaderfrogShaderEin node-basierter visueller Editor, um Shader durch Verbinden von Graph-Knoten zu bauen.

shadercn.run

shadercnShaderReact-Shader-Komponenten, die du in Projekte einfügen kannst, aufgebaut auf vgpu und TypeGPU.

shaders.paper.design

Paper ShadersShaderImportfertige Shader, die ohne jegliche Abhängigkeiten für deine Webprojekte kommen.

openshaders.com

OpenShadersShaderEine quelloffene Bibliothek von WebGL-Shadern, die sich direkt in deine Webprojekte einfügen lassen.

orbkit.zzzzshawn.cloud

OrbkitShaderEin WebGL-gestützter Renderer, um animierte Orb-Effekte im Browser zu erstellen.