diff --git a/src/App.tsx b/src/App.tsx index 179cd9f..160cda9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -17,56 +17,97 @@ function downloadFile(filename: string, content: string, type: string): void { URL.revokeObjectURL(url); } -type ShaderPass = { +type EffectItem = { id: string; name: string; - fragment: string; - locked?: boolean; + templateName: string; + params: EffectParams; + shaderDraft: string; + shaderApplied: string; }; -const initialPasses: ShaderPass[] = templates.map((t) => ({ - id: t.name, - name: t.name, - fragment: buildShader(t, t.defaultParams), - locked: true -})); +function makeEffect(templateName: string, serial: number): EffectItem { + const template = templateMap.get(templateName) ?? templates[0]; + const shader = buildShader(template, template.defaultParams); + return { + id: `effect-${Date.now()}-${Math.floor(Math.random() * 10000)}`, + name: `effect_${serial}`, + templateName: template.name, + params: { ...template.defaultParams }, + shaderDraft: shader, + shaderApplied: shader + }; +} export default function App() { - const defaultTemplate = templates[0]; - const [templateName, setTemplateName] = useState(templates[0].name); + const [effects, setEffects] = useState([makeEffect(templates[0].name, 1)]); + const [activeEffectId, setActiveEffectId] = useState(""); const [prompt, setPrompt] = useState("hot fire"); - const [passes, setPasses] = useState(initialPasses); - const [activePassId, setActivePassId] = useState(initialPasses[0].id); - const [params, setParams] = useState(defaultTemplate.defaultParams); - const [uniforms, setUniforms] = useState(() => createUniforms(defaultTemplate.defaultParams)); - const [appliedShader, setAppliedShader] = useState(initialPasses[0].fragment); const [isPlaying, setIsPlaying] = useState(true); const previewWrapRef = useRef(null); - const template = templateMap.get(templateName) ?? templates[0]; - const activePass = useMemo( - () => passes.find((p) => p.id === activePassId) ?? passes[0], - [passes, activePassId] - ); + const activeEffect = useMemo(() => { + const direct = effects.find((effect) => effect.id === activeEffectId); + return direct ?? effects[0]; + }, [effects, activeEffectId]); + + const [uniforms, setUniforms] = useState(() => createUniforms(effects[0].params)); useEffect(() => { - updateUniformValues(uniforms, isPlaying ? params : { ...params, speed: 0 }); - }, [uniforms, params, isPlaying]); + if (!activeEffectId && effects[0]) { + setActiveEffectId(effects[0].id); + } + }, [activeEffectId, effects]); - const onParamChange = (key: keyof EffectParams, value: number) => { - const next = { ...params, [key]: value }; - setParams(next); + useEffect(() => { + if (activeEffect) { + setUniforms(createUniforms(activeEffect.params)); + } + }, [activeEffect?.id]); + + useEffect(() => { + if (!activeEffect) { + return; + } + updateUniformValues(uniforms, isPlaying ? activeEffect.params : { ...activeEffect.params, speed: 0 }); + }, [uniforms, activeEffect, isPlaying]); + + const updateActiveEffect = (updater: (current: EffectItem) => EffectItem) => { + setEffects((prev) => prev.map((effect) => (effect.id === activeEffect.id ? updater(effect) : effect))); }; - const onTemplateSelect = (name: string) => { - const selected = templateMap.get(name); + const onCreateEffect = () => { + const next = makeEffect(templates[0].name, effects.length + 1); + setEffects((prev) => [...prev, next]); + setActiveEffectId(next.id); + setUniforms(createUniforms(next.params)); + }; + + const onDeleteEffect = () => { + if (!activeEffect || effects.length <= 1) { + return; + } + const currentIndex = effects.findIndex((effect) => effect.id === activeEffect.id); + const nextEffects = effects.filter((effect) => effect.id !== activeEffect.id); + const fallback = nextEffects[Math.max(0, currentIndex - 1)] ?? nextEffects[0]; + setEffects(nextEffects); + setActiveEffectId(fallback.id); + setUniforms(createUniforms(fallback.params)); + }; + + const onSelectTemplate = (templateName: string) => { + const selected = templateMap.get(templateName); if (!selected) { return; } - setTemplateName(name); - setActivePassId(selected.name); - setAppliedShader(passes.find((p) => p.id === selected.name)?.fragment ?? appliedShader); - setParams(selected.defaultParams); + const nextShader = buildShader(selected, selected.defaultParams); + updateActiveEffect((current) => ({ + ...current, + templateName: selected.name, + params: { ...selected.defaultParams }, + shaderDraft: nextShader, + shaderApplied: nextShader + })); setUniforms(createUniforms(selected.defaultParams)); }; @@ -76,68 +117,43 @@ export default function App() { if (!selected) { return; } - setTemplateName(selected.name); - setActivePassId(selected.name); - setAppliedShader(passes.find((p) => p.id === selected.name)?.fragment ?? appliedShader); - setParams(result.params); + const nextShader = buildShader(selected, result.params); + updateActiveEffect((current) => ({ + ...current, + templateName: selected.name, + params: { ...result.params }, + shaderDraft: nextShader, + shaderApplied: nextShader + })); setUniforms(createUniforms(result.params)); }; - const onActiveShaderChange = (value: string) => { - setPasses((prev) => prev.map((p) => (p.id === activePass.id ? { ...p, fragment: value } : p))); + const onParamChange = (key: keyof EffectParams, value: number) => { + updateActiveEffect((current) => ({ + ...current, + params: { ...current.params, [key]: value } + })); }; const onApplyShader = () => { - setAppliedShader(activePass.fragment); - }; - - const onAddShader = () => { - const customCount = passes.filter((p) => p.id.startsWith("custom-")).length + 1; - const id = `custom-${Date.now()}`; - const next: ShaderPass = { - id, - name: `custom_${customCount}`, - fragment: activePass.fragment - }; - setPasses((prev) => [...prev, next]); - setActivePassId(id); - setAppliedShader(next.fragment); - }; - - const onDeleteShader = () => { - if (!activePass || activePass.locked || passes.length <= 1) { - return; - } - const index = passes.findIndex((p) => p.id === activePass.id); - const nextPasses = passes.filter((p) => p.id !== activePass.id); - const fallback = nextPasses[Math.max(0, index - 1)]; - setPasses(nextPasses); - setActivePassId(fallback.id); - setAppliedShader(fallback.fragment); - }; - - const onTogglePlay = () => { - setIsPlaying((prev) => !prev); - }; - - const onFullscreen = () => { - previewWrapRef.current?.requestFullscreen?.(); + updateActiveEffect((current) => ({ ...current, shaderApplied: current.shaderDraft })); }; const onExport = () => { - downloadFile("fragment.glsl", appliedShader, "text/plain;charset=utf-8"); + downloadFile("fragment.glsl", activeEffect.shaderApplied, "text/plain;charset=utf-8"); downloadFile("vertex.glsl", baseVertexShader, "text/plain;charset=utf-8"); downloadFile( "material.json", JSON.stringify( { type: "ShaderMaterial", - template: activePass.name, + effect: activeEffect.name, + template: activeEffect.templateName, uniforms: { u_time: 0, - u_speed: params.speed, - u_scale: params.scale, - u_intensity: params.intensity + u_speed: activeEffect.params.speed, + u_scale: activeEffect.params.scale, + u_intensity: activeEffect.params.intensity } }, null, @@ -147,23 +163,30 @@ export default function App() { ); }; + const onFullscreen = () => { + previewWrapRef.current?.requestFullscreen?.(); + }; + return (

AI VFX Shader Tool

-

按 Shadertoy 结构重排：预览 + 交互 + Shader 可新增/编辑。

- +
- Active: {activePass.name} + Active Effect: {activeEffect.name}
-
-
- {passes.map((pass) => ( +
+ {effects.map((effect) => ( ))} - - +
+ + +
+ +
+ + + +
+ 1727 chars + +
+ +
+ + + + + + +
+
+ +
+

Filter
Wrap
iChannel0
+ +

Filter
Wrap
iChannel1
+ +

Filter
Wrap
iChannel2
+ +

Filter
Wrap
iChannel3
+ +
+ + + + +
+
+ 评论 (17)
+
+ Sign in to post a comment.

+
+ +
arsenru87, 2026-02-09
cool
sagieL, 2026-02-08
really cool!
proste_j4nek, 2025-10-28
good
wrocha, 2025-09-17
This is so cool, I'm just amazed by this thank you for sharing!
abc123josh, 2025-08-27
One of the simpler ways to make an octagram like yours is to recognize it as two overlapping boxes. One of them is rotated by 45 degrees, and the union operator can be used. However, this method is bound in the interior.
Joaozin003, 2025-08-19
average tetrio qp2 experience
ath500, 2025-07-26
Mesmerizing kaleidoscopic symmetry and detail—it feels like looking into a crystalline universe.
ProSureString, 2025-06-25
love this!
saidwho12, 2025-05-21
Beautiful !!!
JasonD, 2025-03-14
Very cool!
eeverestt, 2025-02-18
amazing
OnemoreBottle, 2024-11-24
amazing
codecontemplator, 2024-09-22
very cool
DjEddieOG, 2024-05-22
eddx
newcolator, 2023-08-11
Beautiful!
Shane, 2022-04-25
Pretty.
jeyko, 2020-01-28
very nice, reminds me of some lsdlive shaders
+
+
+ + + + + + + + + + + + + + + + +
+ + + + + + + + + + + +
+ +
+
Select input for iChannel0
+
+
+ +
+
+
+ +
+
+ + +
1961 Commercial
by shadertoy

640 x 480, 29 fps +3 channels, uint8 +29 seconds
Britney Spears
by shadertoy

352 x 288, 25 fps +3 channels, uint8 +180 seconds
Claude Van Damme
by shadertoy

640 x 386, 30 fps +3 channels, uint8 +139 seconds
Google Logo
by shadertoy

640 x 320, 29 fps +3 channels, uint8 +34 seconds


+ + + +
+
+
+ + + + + + + +
+
+
GLSL帮助
+
+
+
+
+ + 此帮助只覆盖与Shadertoy相关的GLSL ES部分。完整的规范请看 GLSL ES规范
+
+

Language:

+
+
    +
  • Version: WebGL 2.0
    • +
  • Arithmetic: ( ) + - ! * / %
    • +
  • Logical/Relatonal: ~ < > <= >= == != && ||
    • +
  • Bit Operators: & ^ | << >>
    • +
  • Comments: // /* */
    • +
  • Types: void bool int uint float vec2 vec3 vec4 bvec2 bvec3 bvec4 ivec2 ivec3 ivec4 uvec2 uvec3 uvec4 mat2 mat3 mat4 mat?x? sampler2D, sampler3D, samplerCube
    • +
  • Format: float a = 1.0; int b = 1; uint i = 1U; int i = 0x1;
    • +
  • Function Parameter Qualifiers: [none], in, out, inout
    • +
  • Global Variable Qualifiers: const
    • +
  • Vector Components: .xyzw .rgba .stpq
    • +
  • Flow Control: if else for return break continue switch/case
    • +
  • Output: vec4 fragColor
    • +
  • Input: vec2 fragCoord
    • +
  • Preprocessor: #define #undef #if #ifdef #ifndef #else #elif #endif #error #pragma #line
    • +
+ +
+

Built-in Functions:

+
+ + + + + +
+
    +
  • ftype radians (ftype degrees)
    • +
  • ftype degrees (ftype radians)
    • +
  • ftype sin (ftype angle)
    • +
  • ftype cos (ftype angle)
    • +
  • ftype tan (ftype angle)
    • +
  • ftype asin (ftype x)
    • +
  • ftype acos (ftype x)
    • +
  • ftype atan (ftype y, ftype x)
    • +
  • ftype atan (ftype y_over_x)
    • +
  • ftype sinh (ftype x)
    • +
  • ftype cosh (ftype x)
    • +
  • ftype tanh (ftype x)
    • +
  • ftype asinh (ftype x)
    • +
  • ftype acosh (ftype x)
    • +
  • ftype atanh f(type x)
    • +
+
    +
  • ftype pow (ftype x, ftype y)
    • +
  • ftype exp (ftype x)
    • +
  • ftype log (ftype x)
    • +
  • ftype exp2 (ftype x)
    • +
  • ftype log2 (ftype x)
    • +
  • ftype sqrt (ftype x)
    • +
  • ftype inversesqrt (ftype x)
    • +
+
    +
  • type abs (type x)
    • +
  • type sign (type x)
    • +
  • ftype floor (ftype x)
    • +
  • ftype ceil (ftype x)
    • +
  • ftype trunc (type x)
    • +
  • ftype fract (ftype x)
    • +
  • ftype mod (ftype x, ftype y)
    • +
  • ftype modf (ftype x, out ftype i)
    • +
  • type min (type x, type y)
    • +
  • type max (type x, type y)
    • +
  • type clamp (type x, type minV, type maxV)
    • +
  • ftype mix (ftype x, ftype y, ftype a)
    • +
  • type step (type edge, type x)
    • +
  • ftype smoothstep (ftype a, ftype b, ftype x)
    • +
+
    +
  • float length (vec x)
    • +
  • float distance (vec p0, vec p1)
    • +
  • float dot (vec x, vec y)
    • +
  • vec3 cross (vec3 x, vec3 y)
    • +
  • vec normalize (vec x)
    • +
  • vec faceforward (vec N, vec I, vec Nref)
    • +
  • vec reflect (vec I, vec N)
    • +
  • vec refract (vec I, vec N, float eta)
    • +
  • float determinant(mat? m)
    • +
  • mat?x? outerProduct(vec c, vec r)
    • +
  • mat?x? matrixCompMult (mat?x? x, mat?x? y)
    • +
  • mat? inverse (mat? inverse)
    • +
  • mat?x? transpose (mat?x? inverse)
    • +
+ 		+
    +
  • vec4 texture( sampler , vec coord [, float bias])
    • +
  • vec4 textureLod( sampler, vec coord, float lod)
    • +
  • vec4 textureLodOffset( sampler sampler, vec coord, float lod, ivec offset)
    • +
  • vec4 textureGrad( sampler , vec coord, vec2 dPdx, vec2 dPdy)
    • +
  • vec4 textureGradOffset sampler , vec coord, vec dPdx, vec dPdy, vec offset)
    • +
  • vec4 textureProj( sampler , vec coord [, float bias])
    • +
  • vec4 textureProjLod( sampler , vec coord, float lod)
    • +
  • vec4 textureProjLodOffset( sampler , vec coord, float lod, vec? offset)
    • +
  • vec4 textureProjGrad( sampler , vec coord, vec2 dPdx, vec2 dPdy)
    • +
  • vec4 texelFetch( sampler , ivec coord, int lod)
    • +
  • vec4 texelFetchOffset( sampler, ivec coord, int lod, ivec offset )
    • +
  • ivec textureSize( sampler , int lod)
    • +
+
    +
  • ftype dFdx (ftype x)
    • +
  • ftype dFdy (ftype x)
    • +
  • ftype fwidth (ftype p)
    • +
+
    +
  • btype isnan (ftype x)
    • +
  • btype isinf (ftype x)
    • +
  • ftype intBitsToFloat (itype v)
    • +
  • ftype uintBitsToFloat (utype v)
    • +
  • itype floatBitsToInt (ftype v)
    • +
  • utype floatBitsToUint (ftype v)
    • +
  • uint packSnorm2x16 (vec2 v)
    • +
  • uint packUnorm2x16 (vec2 v)
    • +
  • vec2 unpackSnorm2x16 (uint p)
    • +
  • vec2 unpackUnorm2x16 (uint p)
    • +
+
    +
  • bvec lessThan (vec x, vec y)
    • +
  • bvec lessThanEqual (vec x, vec y)
    • +
  • bvec greaterThan (vec x, vec y)
    • +
  • bvec greaterThanEqual (vec x, vec y)
    • +
  • bvec equal (type x, type y)
    • +
  • bvec notEqual (type x, type y)
    • +
  • bool any (bvec x)
    • +
  • bool all (bvec x)
    • +
  • bvec not (bvec x)
    • +
+
+
+

How-to

+
+
    +
  • Use structs: struct myDataType { float occlusion; vec3 color; }; myDataType myData = myDataType(0.7, vec3(1.0, 2.0, 3.0));
    • +
  • Initialize arrays: float[] x = float[] (0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6);
    • +
  • Do conversions: int a = 3; float b = float(a);
    • +
  • Do component swizzling: vec4 a = vec4(1.0,2.0,3.0,4.0); vec4 b = a.zyyw;
    • +
  • Access matrix components: mat4 m; m[1] = vec4(2.0); m[0][0] = 1.0; m[2][3] = 2.0;
    • +
+
+

Be careful!

+
+
    +
  • the f suffix for floating pont numbers: 1.0f is illegal in GLSL. You must use 1.0
    • +
  • saturate(): saturate(x) doesn't exist in GLSL. Use clamp(x,0.0,1.0) instead
    • +
  • pow/sqrt: please don't feed sqrt() and pow() with negative numbers. Add an abs() or max(0.0,) to the argument
    • +
  • mod: please don't do mod(x,0.0). This is undefined in some platforms
    • +
  • variables: initialize your variables! Don't assume they'll be set to zero by default
    • +
  • functions: don't call your functions the same name as any of your variables
    • +
+
+

Shadertoy Inputs

+
+ + + + + + + + + + + + +
vec3iResolutionimage/bufferThe viewport resolution (z is pixel aspect ratio, usually 1.0)
floatiTimeimage/sound/bufferCurrent time in seconds
floatiTimeDeltaimage/bufferTime it takes to render a frame, in seconds
intiFrameimage/bufferCurrent frame
floatiFrameRateimage/bufferNumber of frames rendered per second
floatiChannelTime[4]image/bufferTime for channel (if video or sound), in seconds
vec3iChannelResolution[4]image/buffer/soundInput texture resolution for each channel
vec4iMouseimage/bufferxy = current pixel coords (if LMB is down). zw = click pixel
sampler2DiChannel{i}image/buffer/soundSampler for input textures i
vec4iDateimage/buffer/soundYear, month, day, time in seconds in .xyzw
floatiSampleRateimage/buffer/soundThe sound sample rate (typically 44100)
+
+

Shadertoy Outputs

+
+ Image shaders: fragColor is used as output channel. It is not, for now, mandatory but recommended to leave the alpha channel to 1.0.
+
+ Sound shaders: the mainSound() function returns a vec2 containing the left and right (stereo) sound channel wave data. +
+
+
+ +
+
+
+ + +
+
+
Share your shader
+
+
+
+
+
+
+
Yes
+
No
+
+
+
+
+ + + + +
+ +
+
BBCode Help
+
+
+ +
+
+

Codes:

+
+ You can format your comments by using standard BBCode. The following tags are implemented in Shadertoy: +
+
+ + + + + + + + +
Bold[b]this text goes in bold[/b]
Italic[i]this text goes in italic[/i]
Images[img]url_to_image[/img]
Url[url]http://www.shadertoy.com[/url]
Url[url=http://www.shadertoy.com]Shadertoy[/url]
Code[code]fixed-width text[/code]
Video[video]http://www.youtube.com/watch?v=0ifChJ0nJfM[/video]
+
+

Emoticons:

+
+ + + + + + + +
:)
:(
:D
:love:
:octopus:
:octopusballoon:
+
+

Symbols:

+
+ + + + + + + + + + +
:alpha:α
:beta:β
:delta:Δ
:epsilon:ε
:nabla:∇
:square:²
:cube:³
:limit:≐
+
+
+
+
+ + + +
+
+
Share your shader
+
+
+
+
+ Direct link:
+
+ Just copy and paste this URL below:
+
+ Embed:
+
+
+
+
+ + + + + +
+ +
+
Add to playlist
+
+
+ +
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/test/x.html b/test/x.html new file mode 100644 index 0000000..e69de29 diff --git a/test/x2.html b/test/x2.html new file mode 100644 index 0000000..62b274f --- /dev/null +++ b/test/x2.html @@ -0,0 +1 @@ + diff --git a/test/x3.html b/test/x3.html new file mode 100644 index 0000000..4e53385 --- /dev/null +++ b/test/x3.html @@ -0,0 +1,22806 @@ + + + Octagrams + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/test/x4.html b/test/x4.html new file mode 100644 index 0000000..d7e6f43 --- /dev/null +++ b/test/x4.html @@ -0,0 +1,24326 @@ + + + Octagrams + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + +
+ +
+ +
No WebGL available :(
+
+
+
+
+
+
+
222.52
+
47.9 fps
+
840 x 473
+
+
+ +
+
+
+
+
+
+ +
+ +
+
+
Octagrams
+
+
+
+
+ + + + + + + + 545 +
+ +
+ Views: 514317, Tags: +
+
+ 创建自 whisky_shusuky 内 2020-01-28 +
+
+ +
+
+
+ +
Inspired by arabesque. + https://cineshader.com/editor
+ +
+
+ + + +
+ +
+
+
+
+
+
+ 着色器输入 +
+ 
uniform vec3      iResolution;           // viewport resolution (in pixels)
uniform float     iTime;                 // shader playback time (in seconds)
uniform float     iTimeDelta;            // render time (in seconds)
uniform float     iFrameRate;            // shader frame rate
uniform int       iFrame;                // shader playback frame
uniform float     iChannelTime[4];       // channel playback time (in seconds)
uniform vec3      iChannelResolution[4]; // channel resolution (in pixels)
uniform vec4      iMouse;                // mouse pixel coords. xy: current (if MLB down), zw: click
uniform samplerXX iChannel0..3;          // input channel. XX = 2D/Cube
uniform vec4      iDate;                 // (year, month, day, time in seconds)
uniform float     iSampleRate;           // sound sample rate (i.e., 44100)
+
+
+ +
+ +
+ + + +
+ 1727 chars + +
+ +
+ + + + + + +
+
+ +
+

Filter
Wrap
iChannel0
+ +

Filter
Wrap
iChannel1
+ +

Filter
Wrap
iChannel2
+ +

Filter
Wrap
iChannel3
+ +
+
+ + + +
+
+ 评论 (17)
+
+ Sign in to post a comment.

+
+ +
arsenru87, 2026-02-09
cool
sagieL, 2026-02-08
really cool!
proste_j4nek, 2025-10-28
good
wrocha, 2025-09-17
This is so cool, I'm just amazed by this thank you for sharing!
abc123josh, 2025-08-27
One of the simpler ways to make an octagram like yours is to recognize it as two overlapping boxes. One of them is rotated by 45 degrees, and the union operator can be used. However, this method is bound in the interior.
Joaozin003, 2025-08-19
average tetrio qp2 experience
ath500, 2025-07-26
Mesmerizing kaleidoscopic symmetry and detail—it feels like looking into a crystalline universe.
ProSureString, 2025-06-25
love this!
saidwho12, 2025-05-21
Beautiful !!!
JasonD, 2025-03-14
Very cool!
eeverestt, 2025-02-18
amazing
OnemoreBottle, 2024-11-24
amazing
codecontemplator, 2024-09-22
very cool
DjEddieOG, 2024-05-22
eddx
newcolator, 2023-08-11
Beautiful!
Shane, 2022-04-25
Pretty.
jeyko, 2020-01-28
very nice, reminds me of some lsdlive shaders
+
+
+ +
+ +
+ + + + + + + + + + + + +
+ + + + + + + + + + + +
+ +
+
Select input for iChannel0
+
+
+ +
+
+
+ +
+
+ + + + +
Grey Noise3D
by shadertoy

32 x 32 x 32 + 1 channels, uint8
RGBA Noise3D
by shadertoy

32 x 32 x 32 + 4 channels, uint8


+ +
+
+
+ + + + + + + +
+
+
GLSL帮助
+
+
+
+
+ + 此帮助只覆盖与Shadertoy相关的GLSL ES部分。完整的规范请看 GLSL ES规范
+
+

Language:

+
+
    +
  • Version: WebGL 2.0
    • +
  • Arithmetic: ( ) + - ! * / %
    • +
  • Logical/Relatonal: ~ < > <= >= == != && ||
    • +
  • Bit Operators: & ^ | << >>
    • +
  • Comments: // /* */
    • +
  • Types: void bool int uint float vec2 vec3 vec4 bvec2 bvec3 bvec4 ivec2 ivec3 ivec4 uvec2 uvec3 uvec4 mat2 mat3 mat4 mat?x? sampler2D, sampler3D, samplerCube
    • +
  • Format: float a = 1.0; int b = 1; uint i = 1U; int i = 0x1;
    • +
  • Function Parameter Qualifiers: [none], in, out, inout
    • +
  • Global Variable Qualifiers: const
    • +
  • Vector Components: .xyzw .rgba .stpq
    • +
  • Flow Control: if else for return break continue switch/case
    • +
  • Output: vec4 fragColor
    • +
  • Input: vec2 fragCoord
    • +
  • Preprocessor: #define #undef #if #ifdef #ifndef #else #elif #endif #error #pragma #line
    • +
+ +
+

Built-in Functions:

+
+ + + + + +
+
    +
  • ftype radians (ftype degrees)
    • +
  • ftype degrees (ftype radians)
    • +
  • ftype sin (ftype angle)
    • +
  • ftype cos (ftype angle)
    • +
  • ftype tan (ftype angle)
    • +
  • ftype asin (ftype x)
    • +
  • ftype acos (ftype x)
    • +
  • ftype atan (ftype y, ftype x)
    • +
  • ftype atan (ftype y_over_x)
    • +
  • ftype sinh (ftype x)
    • +
  • ftype cosh (ftype x)
    • +
  • ftype tanh (ftype x)
    • +
  • ftype asinh (ftype x)
    • +
  • ftype acosh (ftype x)
    • +
  • ftype atanh f(type x)
    • +
+
    +
  • ftype pow (ftype x, ftype y)
    • +
  • ftype exp (ftype x)
    • +
  • ftype log (ftype x)
    • +
  • ftype exp2 (ftype x)
    • +
  • ftype log2 (ftype x)
    • +
  • ftype sqrt (ftype x)
    • +
  • ftype inversesqrt (ftype x)
    • +
+
    +
  • type abs (type x)
    • +
  • type sign (type x)
    • +
  • ftype floor (ftype x)
    • +
  • ftype ceil (ftype x)
    • +
  • ftype trunc (type x)
    • +
  • ftype fract (ftype x)
    • +
  • ftype mod (ftype x, ftype y)
    • +
  • ftype modf (ftype x, out ftype i)
    • +
  • type min (type x, type y)
    • +
  • type max (type x, type y)
    • +
  • type clamp (type x, type minV, type maxV)
    • +
  • ftype mix (ftype x, ftype y, ftype a)
    • +
  • type step (type edge, type x)
    • +
  • ftype smoothstep (ftype a, ftype b, ftype x)
    • +
+
    +
  • float length (vec x)
    • +
  • float distance (vec p0, vec p1)
    • +
  • float dot (vec x, vec y)
    • +
  • vec3 cross (vec3 x, vec3 y)
    • +
  • vec normalize (vec x)
    • +
  • vec faceforward (vec N, vec I, vec Nref)
    • +
  • vec reflect (vec I, vec N)
    • +
  • vec refract (vec I, vec N, float eta)
    • +
  • float determinant(mat? m)
    • +
  • mat?x? outerProduct(vec c, vec r)
    • +
  • mat?x? matrixCompMult (mat?x? x, mat?x? y)
    • +
  • mat? inverse (mat? inverse)
    • +
  • mat?x? transpose (mat?x? inverse)
    • +
+ 		+
    +
  • vec4 texture( sampler , vec coord [, float bias])
    • +
  • vec4 textureLod( sampler, vec coord, float lod)
    • +
  • vec4 textureLodOffset( sampler sampler, vec coord, float lod, ivec offset)
    • +
  • vec4 textureGrad( sampler , vec coord, vec2 dPdx, vec2 dPdy)
    • +
  • vec4 textureGradOffset sampler , vec coord, vec dPdx, vec dPdy, vec offset)
    • +
  • vec4 textureProj( sampler , vec coord [, float bias])
    • +
  • vec4 textureProjLod( sampler , vec coord, float lod)
    • +
  • vec4 textureProjLodOffset( sampler , vec coord, float lod, vec? offset)
    • +
  • vec4 textureProjGrad( sampler , vec coord, vec2 dPdx, vec2 dPdy)
    • +
  • vec4 texelFetch( sampler , ivec coord, int lod)
    • +
  • vec4 texelFetchOffset( sampler, ivec coord, int lod, ivec offset )
    • +
  • ivec textureSize( sampler , int lod)
    • +
+
    +
  • ftype dFdx (ftype x)
    • +
  • ftype dFdy (ftype x)
    • +
  • ftype fwidth (ftype p)
    • +
+
    +
  • btype isnan (ftype x)
    • +
  • btype isinf (ftype x)
    • +
  • ftype intBitsToFloat (itype v)
    • +
  • ftype uintBitsToFloat (utype v)
    • +
  • itype floatBitsToInt (ftype v)
    • +
  • utype floatBitsToUint (ftype v)
    • +
  • uint packSnorm2x16 (vec2 v)
    • +
  • uint packUnorm2x16 (vec2 v)
    • +
  • vec2 unpackSnorm2x16 (uint p)
    • +
  • vec2 unpackUnorm2x16 (uint p)
    • +
+
    +
  • bvec lessThan (vec x, vec y)
    • +
  • bvec lessThanEqual (vec x, vec y)
    • +
  • bvec greaterThan (vec x, vec y)
    • +
  • bvec greaterThanEqual (vec x, vec y)
    • +
  • bvec equal (type x, type y)
    • +
  • bvec notEqual (type x, type y)
    • +
  • bool any (bvec x)
    • +
  • bool all (bvec x)
    • +
  • bvec not (bvec x)
    • +
+
+
+

How-to

+
+
    +
  • Use structs: struct myDataType { float occlusion; vec3 color; }; myDataType myData = myDataType(0.7, vec3(1.0, 2.0, 3.0));
    • +
  • Initialize arrays: float[] x = float[] (0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6);
    • +
  • Do conversions: int a = 3; float b = float(a);
    • +
  • Do component swizzling: vec4 a = vec4(1.0,2.0,3.0,4.0); vec4 b = a.zyyw;
    • +
  • Access matrix components: mat4 m; m[1] = vec4(2.0); m[0][0] = 1.0; m[2][3] = 2.0;
    • +
+
+

Be careful!

+
+
    +
  • the f suffix for floating pont numbers: 1.0f is illegal in GLSL. You must use 1.0
    • +
  • saturate(): saturate(x) doesn't exist in GLSL. Use clamp(x,0.0,1.0) instead
    • +
  • pow/sqrt: please don't feed sqrt() and pow() with negative numbers. Add an abs() or max(0.0,) to the argument
    • +
  • mod: please don't do mod(x,0.0). This is undefined in some platforms
    • +
  • variables: initialize your variables! Don't assume they'll be set to zero by default
    • +
  • functions: don't call your functions the same name as any of your variables
    • +
+
+

Shadertoy Inputs

+
+ + + + + + + + + + + + +
vec3iResolutionimage/bufferThe viewport resolution (z is pixel aspect ratio, usually 1.0)
floatiTimeimage/sound/bufferCurrent time in seconds
floatiTimeDeltaimage/bufferTime it takes to render a frame, in seconds
intiFrameimage/bufferCurrent frame
floatiFrameRateimage/bufferNumber of frames rendered per second
floatiChannelTime[4]image/bufferTime for channel (if video or sound), in seconds
vec3iChannelResolution[4]image/buffer/soundInput texture resolution for each channel
vec4iMouseimage/bufferxy = current pixel coords (if LMB is down). zw = click pixel
sampler2DiChannel{i}image/buffer/soundSampler for input textures i
vec4iDateimage/buffer/soundYear, month, day, time in seconds in .xyzw
floatiSampleRateimage/buffer/soundThe sound sample rate (typically 44100)
+
+

Shadertoy Outputs

+
+ Image shaders: fragColor is used as output channel. It is not, for now, mandatory but recommended to leave the alpha channel to 1.0.
+
+ Sound shaders: the mainSound() function returns a vec2 containing the left and right (stereo) sound channel wave data. +
+
+
+ +
+
+
+ + +
+
+
Share your shader
+
+
+
+
+
+
+
Yes
+
No
+
+
+
+
+ + + + +
+ +
+
BBCode Help
+
+
+ +
+
+

Codes:

+
+ You can format your comments by using standard BBCode. The following tags are implemented in Shadertoy: +
+
+ + + + + + + + +
Bold[b]this text goes in bold[/b]
Italic[i]this text goes in italic[/i]
Images[img]url_to_image[/img]
Url[url]http://www.shadertoy.com[/url]
Url[url=http://www.shadertoy.com]Shadertoy[/url]
Code[code]fixed-width text[/code]
Video[video]http://www.youtube.com/watch?v=0ifChJ0nJfM[/video]
+
+

Emoticons:

+
+ + + + + + + +
:)
:(
:D
:love:
:octopus:
:octopusballoon:
+
+

Symbols:

+
+ + + + + + + + + + +
:alpha:α
:beta:β
:delta:Δ
:epsilon:ε
:nabla:∇
:square:²
:cube:³
:limit:≐
+
+
+
+
+ + + +
+
+
Share your shader
+
+
+
+
+ Direct link:
+
+ Just copy and paste this URL below:
+
+ Embed:
+
+
+
+
+ + + + + +
+ +
+
Add to playlist
+
+
+ +
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/test/x5.html b/test/x5.html new file mode 100644 index 0000000..e69de29