Brauche ich C oder Grafik-Programmiererfahrung?

GLSL ist eine kleine C-ähnliche Sprache: Schleifen, Bedingungen, Float-Mathematik. Wer mit C, Java oder JavaScript gearbeitet hat, findet sich rasch zurecht. Die voreingestellten Shader sind kommentiert; Werte anpassen reicht meist, um ohne GPU-Erfahrung loszulegen.

Mein Shader kompiliert, aber die Vorschau bleibt schwarz. Warum?

Typische Gründe: in `gl_FragColor` außerhalb der Main-Funktion schreiben, `vec3` statt `vec4` zurückgeben oder eine Division durch Null in einer Noise-Funktion. Öffne die Browser-Konsole; WebGL gibt nützliche Warnungen aus, auch wenn die Kompilierung formal klappt.

Kann ich eine Textur samplen oder ein eigenes Bild hochladen?

Ja. Klicke in der Vorschauleiste auf Bild hochladen, um ein beliebiges PNG oder JPG als `sampler2D u_texture` zu binden. Ein begleitender Float namens `u_hasTexture` springt auf 1.0, sobald das Bild geladen ist, sodass dein Shader entscheiden kann, ob eine Textur verfügbar ist — das gleiche Muster, das Shadertoy für seine Channel Inputs nutzt.

Welche WebGL-Version wird verwendet?

WebGL 1 mit GLSL ES 1.0. Heißt: `varying` statt `in/out`, `gl_FragColor` statt benannter Ausgabe, keine Integer-Texturen. Shader für WebGL 2 oder Desktop-OpenGL 3+ brauchen kleine Syntax-Anpassungen, damit sie hier laufen.

Wird irgendetwas an einen Server geschickt?

Nein. Kompilieren und Rendern laufen auf deiner GPU im Browser. Der Shader-Code verlässt die Seite nicht; schließt du den Tab ohne Kopie, ist er weg.

WebGL-Shader-Spielwiese

GLSL-Shader in Echtzeit schreiben und vorschauen

AutoTempo1.0x0 FPS

Voreinstellung

precision mediump float;

uniform float u_time;
uniform vec2 u_resolution;
uniform vec2 u_mouse;

void main() {
  vec2 uv = gl_FragCoord.xy / u_resolution;
  vec2 m = u_mouse / u_resolution;

  // Animated gradient with mouse interaction
  float d = distance(uv, m);
  float wave = sin(uv.x * 10.0 + u_time * 2.0) * 0.5 + 0.5;
  float pulse = smoothstep(0.4, 0.0, d);

  vec3 col1 = vec3(1.0, 0.45, 0.2);  // orange
  vec3 col2 = vec3(0.85, 0.3, 0.5);  // rose
  vec3 col3 = vec3(0.2, 0.1, 0.05);  // dark

  vec3 color = mix(col3, col1, wave * uv.y);
  color = mix(color, col2, pulse * 0.8);
  color += 0.05 * sin(u_time + uv.xyx * 20.0);

  gl_FragColor = vec4(color, 1.0);
}

Uniforms

float u_time

vec2 u_resolution

vec2 u_mouse

int u_frame

sampler2D u_texture

float u_hasTexture

sampler2D u_noise

Lade ein Bild hoch, um es an u_texture zu binden. u_hasTexture ist 1.0, wenn ein Bild geladen ist, sonst 0.0.

u_noise ist eine eingebaute, kachelbare 256×256-Noise-Textur — sample sie für organische Muster, ohne Hash-Funktionen zu schreiben. u_frame zählt die seit der letzten Kompilierung gerenderten Frames.

Was ist WebGL-Shader-Spielwiese?

Schreibe GLSL-Vertex- und Fragment-Shader und sieh das gerenderte Ergebnis sofort per WebGL. Keine lokale Installation nötig. Nutze es zum Erlernen der Shader-Programmierung, zum Prototyping von Effekten oder zum Ausprobieren von GPU-beschleunigter Grafik.

Eingebaut sind die Uniforms `u_time` für Animation, `u_resolution` für die Bildgröße, `u_mouse` für die Cursorposition, `u_frame` für die Anzahl gerenderter Frames und eine fertige, kachelbare Noise-Textur `sampler2D u_noise`. Lade ein beliebiges Bild hoch, um es als `sampler2D u_texture` zu binden — der Fragment-Shader kann es dann direkt samplen. Dazu kommen zehn Voreinstellungen (Gradient Wave, Plasma, Circle SDF, Noise Tunnel, Mandelbrot, Ray March Sphere, Metaballs, Voronoi, Starfield, Worley Cells), ein Schieberegler für das Animationstempo, eine Live-FPS-Anzeige, ein Auto-Compile-Schalter, eine Pause-Taste, die die Zeitachse einfriert, ein teilbarer Link, der den kompletten Quellcode mitnimmt, und ein PNG-Export des aktuellen Frames.

Anleitung

Schreibe oder füge deinen GLSL-Fragment-Shader-Code in den Editor ein. Ein Standard-Shader ist bereits geladen.
Die Live-Vorschau aktualisiert sich beim Tippen. Eingebaute Uniforms umfassen Zeit, Auflösung und Mausposition.
Exportiere deinen Shader als PNG-Screenshot oder kopiere den Code, um ihn in eigenen WebGL-Projekten zu verwenden.

Wann verwenden

GLSL-Syntax lernen, ohne lokal ein C++- oder Three.js-Projekt aufzusetzen.
Einen Fragment-Shader-Effekt prototypisieren, bevor er in eine Game-Engine oder Website wandert.
Standbilder animierter Hintergründe für Portfolios, Folien oder Social-Posts erzeugen.

Ergebnis

Ein Spieleentwickler, der einen Wasserripple-Effekt prototypisiert, schreibt einen Fragment-Shader mit Sinuswellen und dem Zeit-Uniform. Das Vorschaufenster zeigt das animierte Ergebnis live an.

Häufige Fragen

Brauche ich C oder Grafik-Programmiererfahrung?: GLSL ist eine kleine C-ähnliche Sprache: Schleifen, Bedingungen, Float-Mathematik. Wer mit C, Java oder JavaScript gearbeitet hat, findet sich rasch zurecht. Die voreingestellten Shader sind kommentiert; Werte anpassen reicht meist, um ohne GPU-Erfahrung loszulegen.
Mein Shader kompiliert, aber die Vorschau bleibt schwarz. Warum?: Typische Gründe: in `gl_FragColor` außerhalb der Main-Funktion schreiben, `vec3` statt `vec4` zurückgeben oder eine Division durch Null in einer Noise-Funktion. Öffne die Browser-Konsole; WebGL gibt nützliche Warnungen aus, auch wenn die Kompilierung formal klappt.
Kann ich eine Textur samplen oder ein eigenes Bild hochladen?: Ja. Klicke in der Vorschauleiste auf Bild hochladen, um ein beliebiges PNG oder JPG als `sampler2D u_texture` zu binden. Ein begleitender Float namens `u_hasTexture` springt auf 1.0, sobald das Bild geladen ist, sodass dein Shader entscheiden kann, ob eine Textur verfügbar ist — das gleiche Muster, das Shadertoy für seine Channel Inputs nutzt.
Welche WebGL-Version wird verwendet?: WebGL 1 mit GLSL ES 1.0. Heißt: `varying` statt `in/out`, `gl_FragColor` statt benannter Ausgabe, keine Integer-Texturen. Shader für WebGL 2 oder Desktop-OpenGL 3+ brauchen kleine Syntax-Anpassungen, damit sie hier laufen.
Wird irgendetwas an einen Server geschickt?: Nein. Kompilieren und Rendern laufen auf deiner GPU im Browser. Der Shader-Code verlässt die Seite nicht; schließt du den Tab ohne Kopie, ist er weg.

WebGL-Shader-Spielwiese

Was ist WebGL-Shader-Spielwiese?

Anleitung

Wann verwenden

Ergebnis

Häufige Fragen

Ähnliche Tools

3D-Box-/Verpackungsmockup

3D-Streudiagramm

3D-Geländebetrachter

3D-Produktpräsentation

3D-Textersteller

360-Grad-Bildbetrachter

WebGL-Shader-Spielwiese