Ethereal Aquarium · shaders.labcat.nz

Calibrating warp

Lab notes · Experiment 6

This one turned into a proper vibe coding experiment, and honestly it was both funny and useful.

I started with the idea of making an ethereal aquarium. In my head it was all pristine tropical water, colourful fish, and that dreamy “snorkelling in Bora Bora” kind of feeling. In practice, the very first fish the AI produced were so horrible that it became funny. They were technically “fish” only in the sense that someone had typed the word fish into the prompt. It was a good reminder that getting something to vaguely resemble a subject is very different from actually understanding form.

That ended up being the whole lesson of the session. Vibe coding can get you moving quickly, and it can absolutely help you explore, but it does not magically replace craft. We kept trying to steer the result with words like tropical, colourful, aquarium, butterflyfish, ethereal, and so on, but the underlying problem stayed the same: if the structure is weak, the output is weak. You can’t prompt your way past not really knowing how a fish is built, how it moves, or how light should wrap around it.

Along the way we found some genuinely amazing shaders that made the gap very obvious. Luminescence was one of those moments where I just had to stop and admire what was on screen. It has that feeling of depth and life where the forms, motion, light, and atmosphere all belong together. We also found this fish shader, which is on a completely different level from anything vibe coded AI managed to produce in this session. It almost looks real, and I think that is because it is solving the problems in the right order: shape first, then motion, then light, then surface detail.

That was probably the clearest takeaway for me. AI was decent at throwing out fragments, variations, and experiments, but it really struggled once the visual target depended on strong underlying structure. It could generate “shader-ish” things. It could even generate something pleasant. But when I wanted something specific and convincing, especially something organic like tropical fish, the limits showed up fast.

In the end, I gave up on the fish and leaned into jellyfish instead. That was the compromise that finally got the experiment back onto solid ground. The final shader is still worthy of being kept as an experiment. It is not the stunning tropical aquarium I originally had in mind, and it is definitely not on the level of the examples above, but it did become a nice piece in its own right.

So I think this session was valuable for exactly that reason. It showed me that vibe coding is fun, and sometimes it is a great way to play, stumble into ideas, or get a rough direction moving. But it also showed me very clearly why I want to learn shaders properly. If I want to make amazing visuals instead of approximate ones, I need more than vibes. I need the actual craft.

1precision highp float;

3uniform float uTime;

4uniform vec2 uResolution;

6float hash21(vec2 p) {

7 return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);

10float noise21(vec2 p) {

11 vec2 i = floor(p);

12 vec2 f = fract(p);

13 f = f * f * (3.0 - 2.0 * f);

14 float a = hash21(i);

15 float b = hash21(i + vec2(1.0, 0.0));

16 float c = hash21(i + vec2(0.0, 1.0));

17 float d = hash21(i + vec2(1.0, 1.0));

18 return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);

19}

21float fbm(vec2 p) {

22 float value = 0.0;

23 float amp = 0.5;

24 for (int i = 0; i < 4; i++) {

25 value += noise21(p) * amp;

26 p *= 2.0;

27 amp *= 0.5;

28 }

29 return value;

30}

32float softLine(float x, float width) {

33 return smoothstep(width, 0.0, abs(x));

34}

36vec3 jellyfish(vec2 uv, vec2 center, vec2 scale, float time, vec3 tintA, vec3 tintB) {

37 vec2 p = (uv - center) / scale;

38 p.x += 0.08 * sin(time * 1.6 + p.y * 5.0);

40 float hood = exp(-length(vec2(p.x * 1.0, (p.y - 0.08) * 1.8)) * 3.8);

41 hood *= smoothstep(-0.02, 0.42, p.y);

43 float rim = smoothstep(0.08, 0.0, abs(length(vec2(p.x * 0.95, (p.y - 0.06) * 1.6)) - 0.34));

44 rim *= smoothstep(0.02, 0.38, p.y);

46 float inner = 0.5 + 0.5 * sin(atan(p.y - 0.06, p.x) * 6.0 + time * 0.8);

47 inner *= smoothstep(0.35, 0.0, length(vec2(p.x * 1.2, (p.y - 0.08) * 2.0)));

49 float tentacles = 0.0;

50 for (int i = 0; i < 6; i++) {

51 float id = float(i) - 2.5;

52 float sway = 0.08 * sin(time * 2.0 + id * 1.3 + p.y * 5.0);

53 float strandX = p.x - id * 0.08 - sway * smoothstep(-0.1, -1.0, p.y);

54 float strand = softLine(strandX, mix(0.008, 0.03, smoothstep(-1.2, 0.0, p.y)));

55 strand *= smoothstep(0.0, -1.15, p.y);

56 tentacles += strand;

57 }

59 float frill = 0.0;

60 for (int i = 0; i < 4; i++) {

61 float id = float(i) - 1.5;

62 float strandX = p.x - id * 0.05 + 0.03 * sin(time * 1.8 + id * 2.0 + p.y * 10.0);

63 float strand = softLine(strandX, 0.012);

64 strand *= smoothstep(0.0, -0.55, p.y);

65 frill += strand;

66 }

68 float aura = exp(-length(vec2(p.x * 0.8, p.y * 1.4)) * 2.2);

69 vec3 coral = tintA;

70 vec3 cyan = tintB;

71 vec3 violet = mix(tintA, tintB.brg, 0.7);

72 vec3 gold = mix(tintA.rgb, vec3(1.0, 0.86, 0.2), 0.7);

74 float crown = smoothstep(0.45, -0.05, p.y);

75 float belly = smoothstep(-0.75, 0.0, p.y);

76 float side = 0.5 + 0.5 * sin(atan(p.y - 0.06, p.x) * 3.0 + time);

78 vec3 bodyTint = mix(cyan, coral, crown);

79 bodyTint = mix(bodyTint, violet, side * 0.7);

80 vec3 tentacleTint = mix(gold, violet, 0.5 + 0.5 * sin(p.y * 6.0 + time * 1.4));

82 vec3 col = bodyTint * (hood * 0.72 + rim * 0.55);

83 col += mix(bodyTint, cyan, 0.5) * inner * 0.52;

84 col += tentacleTint * tentacles * 0.3;

85 col += mix(coral, gold, belly) * frill * 0.3;

86 col += mix(bodyTint, cyan, 0.5) * aura * 0.18;

88 return col;

89}

91vec3 coral(vec2 uv, float time) {

92 vec3 col = vec3(0.0);

94 float base = smoothstep(-0.78, -0.18, uv.y);

95 float hill = 0.08 * sin(uv.x * 7.0) + 0.05 * sin(uv.x * 13.0 + 1.2);

96 float sand = smoothstep(hill - 0.04, hill - 0.18, uv.y + 0.78);

97 col += vec3(1.0, 0.82, 0.52) * sand * 0.42 * base;

99 for (int i = 0; i < 7; i++) {

100 float id = float(i);

101 float x = -0.82 + id * 0.27;

102 float sway = 0.03 * sin(time * 0.8 + id * 1.9);

103 float stem = softLine(uv.x - x - sway * smoothstep(-0.75, 0.1, uv.y), 0.012 + 0.008 * sin(id));

104 stem *= smoothstep(-0.78, -0.2 + 0.08 * sin(id * 2.0), uv.y);

105 vec3 tint = mix(vec3(1.0, 0.48, 0.34), vec3(1.0, 0.36, 0.78), 0.5 + 0.5 * sin(id * 1.3));

106 col += tint * stem * 0.42;

107 }

108

109 return col;

110}

111

112void main() {

113 vec2 uv = gl_FragCoord.xy / uResolution.xy;

114 vec2 p = uv - 0.5;

115 p.x *= uResolution.x / uResolution.y;

116

117 float time = uTime * 0.45;

118

119 vec3 top = vec3(0.5, 0.96, 0.98);

120 vec3 mid = vec3(0.08, 0.68, 0.88);

121 vec3 deep = vec3(0.02, 0.22, 0.46);

122 vec3 col = mix(deep, mid, smoothstep(-0.75, 0.05, p.y));

123 col = mix(col, top, smoothstep(0.05, 0.55, p.y));

124

125 float haze = fbm(p * 2.0 + vec2(0.0, time * 0.12));

126 col += vec3(0.08, 0.18, 0.12) * haze * 0.12;

127

128 float sun = exp(-length(vec2(p.x * 1.8, p.y - 0.58)) * 5.5);

129 col += vec3(1.0, 0.94, 0.76) * sun * 0.3;

130

131 float caustics = 0.0;

132 caustics += smoothstep(0.88, 1.0, sin(p.x * 16.0 + time * 2.4 + sin(p.y * 8.0)) * sin(p.y * 14.0 - time * 1.8));

133 caustics += smoothstep(0.9, 1.0, sin(p.x * 24.0 - time * 1.6) * sin(p.y * 19.0 + time * 2.1));

134 col += vec3(1.0, 0.96, 0.72) * caustics * smoothstep(0.58, -0.45, p.y) * 0.2;

135

136 col += coral(p, time);

137

138 col += jellyfish(p, vec2(-0.42 + 0.06 * sin(time * 0.7), 0.18 + 0.03 * sin(time * 1.0)), vec2(0.24, 0.28), time, vec3(1.0, 0.28, 0.48), vec3(0.08, 0.96, 1.0));

139 col += jellyfish(p, vec2(0.02 + 0.05 * cos(time * 0.6 + 1.2), 0.08 + 0.04 * sin(time * 1.1 + 0.8)), vec2(0.34, 0.4), time + 0.8, vec3(0.08, 0.88, 1.0), vec3(0.72, 1.0, 0.18));

140 col += jellyfish(p, vec2(0.46 + 0.04 * sin(time * 0.8 + 2.0), 0.24 + 0.03 * cos(time * 1.3)), vec2(0.18, 0.22), time + 1.7, vec3(1.0, 0.8, 0.08), vec3(1.0, 0.2, 0.78));

141 col += jellyfish(p, vec2(-0.1 + 0.03 * sin(time * 0.9 + 2.8), -0.08 + 0.02 * sin(time * 1.5)), vec2(0.14, 0.18), time + 2.4, vec3(0.48, 0.32, 1.0), vec3(1.0, 0.48, 0.12)) * 0.85;

142

143 float particles = 0.0;

144 for (int i = 0; i < 18; i++) {

145 float id = float(i);

146 vec2 drift = vec2(

147 -0.9 + fract(id * 0.173) * 1.8 + 0.03 * sin(time * 0.8 + id * 2.3),

148 -0.7 + fract(id * 0.337 + time * 0.05 + 0.2 * sin(id)) * 1.5

149 );

150 float sparkle = 1.0 - smoothstep(0.0, 0.02 + 0.01 * fract(id * 0.37), length(p - drift));

151 particles += sparkle;

152 }

153 col += vec3(1.0, 0.99, 0.92) * particles * 0.09;

154

155 float vignette = 1.0 - dot(uv - 0.5, uv - 0.5) * 1.6;

156 col *= vignette;

157 col = pow(max(col, 0.0), vec3(0.92));

158

159 gl_FragColor = vec4(col, 1.0);

160}

161