|
1 | 1 | # Example: ShaderToy Server |
2 | 2 |
|
| 3 | + |
| 4 | + |
3 | 5 | A demo MCP App that renders [ShaderToy](https://www.shadertoy.com/)-compatible GLSL fragment shaders in real-time using WebGL 2.0 and [ShaderToyLite.js](https://github.com/nickoala/ShaderToyLite). |
4 | 6 |
|
5 | 7 | <table> |
@@ -50,7 +52,10 @@ _Tool input:_ |
50 | 52 |
|
51 | 53 | ```json |
52 | 54 | { |
53 | | - "fragmentShader": "void mainImage(out vec4 fragColor, in vec2 fragCoord) {\n vec2 uv = fragCoord / iResolution.xy;\n fragColor = vec4(uv, 0.5 + 0.5*sin(iTime), 1.0);\n}" |
| 55 | + "fragmentShader": "void mainImage(out vec4 fragColor, in vec2 fragCoord) { |
| 56 | + vec2 uv = fragCoord / iResolution.xy; |
| 57 | + fragColor = vec4(uv, 0.5 + 0.5*sin(iTime), 1.0); |
| 58 | +}" |
54 | 59 | } |
55 | 60 | ``` |
56 | 61 |
|
@@ -79,7 +84,22 @@ _Tool input:_ |
79 | 84 |
|
80 | 85 | ```json |
81 | 86 | { |
82 | | - "fragmentShader": "void mainImage(out vec4 fragColor, in vec2 fragCoord) {\n vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;\n float segments = 6.0;\n float zoom = 1.0 + 0.3 * sin(iTime * 0.2);\n float angle = atan(uv.y, uv.x) + iTime * 0.3;\n float r = length(uv) * zoom;\n angle = mod(angle, 6.28 / segments);\n angle = abs(angle - 3.14 / segments);\n vec2 p = vec2(cos(angle), sin(angle)) * r;\n p += iTime * 0.1;\n float v = sin(p.x * 10.0) * sin(p.y * 10.0);\n v += sin(length(p) * 15.0 - iTime * 2.0);\n v += sin(p.x * 5.0 + p.y * 7.0 + iTime);\n vec3 col = 0.5 + 0.5 * cos(v * 2.0 + vec3(0.0, 2.0, 4.0) + iTime);\n fragColor = vec4(col, 1.0);\n}" |
| 87 | + "fragmentShader": "void mainImage(out vec4 fragColor, in vec2 fragCoord) { |
| 88 | + vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y; |
| 89 | + float segments = 6.0; |
| 90 | + float zoom = 1.0 + 0.3 * sin(iTime * 0.2); |
| 91 | + float angle = atan(uv.y, uv.x) + iTime * 0.3; |
| 92 | + float r = length(uv) * zoom; |
| 93 | + angle = mod(angle, 6.28 / segments); |
| 94 | + angle = abs(angle - 3.14 / segments); |
| 95 | + vec2 p = vec2(cos(angle), sin(angle)) * r; |
| 96 | + p += iTime * 0.1; |
| 97 | + float v = sin(p.x * 10.0) * sin(p.y * 10.0); |
| 98 | + v += sin(length(p) * 15.0 - iTime * 2.0); |
| 99 | + v += sin(p.x * 5.0 + p.y * 7.0 + iTime); |
| 100 | + vec3 col = 0.5 + 0.5 * cos(v * 2.0 + vec3(0.0, 2.0, 4.0) + iTime); |
| 101 | + fragColor = vec4(col, 1.0); |
| 102 | +}" |
83 | 103 | } |
84 | 104 | ``` |
85 | 105 |
|
@@ -108,7 +128,22 @@ _Tool input:_ |
108 | 128 |
|
109 | 129 | ```json |
110 | 130 | { |
111 | | - "fragmentShader": "void mainImage(out vec4 fragColor, in vec2 fragCoord) {\n vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y * 2.5;\n vec2 mouse = (iMouse.xy / iResolution.xy - 0.5) * 2.0;\n vec2 c = mouse;\n vec2 z = uv;\n float iter = 0.0;\n for (int i = 0; i < 100; i++) {\n z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;\n if (dot(z, z) > 4.0) break;\n iter++;\n }\n float t = iter / 100.0;\n vec3 col = 0.5 + 0.5 * cos(3.0 + t * 6.28 * 2.0 + vec3(0.0, 0.6, 1.0));\n if (iter == 100.0) col = vec3(0.0);\n fragColor = vec4(col, 1.0);\n}" |
| 131 | + "fragmentShader": "void mainImage(out vec4 fragColor, in vec2 fragCoord) { |
| 132 | + vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y * 2.5; |
| 133 | + vec2 mouse = (iMouse.xy / iResolution.xy - 0.5) * 2.0; |
| 134 | + vec2 c = mouse; |
| 135 | + vec2 z = uv; |
| 136 | + float iter = 0.0; |
| 137 | + for (int i = 0; i < 100; i++) { |
| 138 | + z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c; |
| 139 | + if (dot(z, z) > 4.0) break; |
| 140 | + iter++; |
| 141 | + } |
| 142 | + float t = iter / 100.0; |
| 143 | + vec3 col = 0.5 + 0.5 * cos(3.0 + t * 6.28 * 2.0 + vec3(0.0, 0.6, 1.0)); |
| 144 | + if (iter == 100.0) col = vec3(0.0); |
| 145 | + fragColor = vec4(col, 1.0); |
| 146 | +}" |
112 | 147 | } |
113 | 148 | ``` |
114 | 149 |
|
|
0 commit comments