@firecms/neat 0.7.1 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/NeatGradient.d.ts +186 -55
- package/dist/NeatGradient.js +900 -65
- package/dist/NeatGradient.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.es.js +1400 -610
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +411 -339
- package/dist/index.umd.js.map +1 -1
- package/dist/math.d.ts +32 -1
- package/dist/math.js +319 -24
- package/dist/math.js.map +1 -1
- package/dist/shaders.d.ts +2 -2
- package/dist/shaders.js +271 -42
- package/dist/shaders.js.map +1 -1
- package/dist/types.d.ts +40 -0
- package/package.json +1 -1
- package/src/NeatGradient.ts +1044 -131
- package/src/index.ts +1 -0
- package/src/math.ts +373 -28
- package/src/shaders.ts +271 -42
- package/src/types.ts +56 -0
package/dist/index.umd.js
CHANGED
|
@@ -1,177 +1,275 @@
|
|
|
1
|
-
(function(
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
if (u_flow_enabled > 0.5) {
|
|
25
|
-
if (u_flow_ease > 0.0 || u_flow_distortion_a > 0.0) {
|
|
26
|
-
vec2 ppp = -1.0 + 2.0 * baseUv;
|
|
27
|
-
ppp += 0.1 * cos((1.5 * u_flow_scale) * ppp.yx + 1.1 * u_time + vec2(0.1, 1.1));
|
|
28
|
-
ppp += 0.1 * cos((2.3 * u_flow_scale) * ppp.yx + 1.3 * u_time + vec2(3.2, 3.4));
|
|
29
|
-
ppp += 0.1 * cos((2.2 * u_flow_scale) * ppp.yx + 1.7 * u_time + vec2(1.8, 5.2));
|
|
30
|
-
ppp += u_flow_distortion_a * cos((u_flow_distortion_b * u_flow_scale) * ppp.yx + 1.4 * u_time + vec2(6.3, 3.9));
|
|
31
|
-
|
|
32
|
-
float r = length(ppp);
|
|
33
|
-
flowUv = mix(baseUv, vec2(baseUv.x * (1.0 - u_flow_ease) + r * u_flow_ease, baseUv.y), u_flow_ease);
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
// Pass the standard flow UV to fragment shader (for texture)
|
|
38
|
-
vFlowUv = flowUv;
|
|
39
|
-
|
|
40
|
-
// 3. COLOR MIXING
|
|
41
|
-
// We take the computed flow UVs and apply the color offset
|
|
42
|
-
// Scale by plane height to match wave offset speed (world space vs UV space)
|
|
43
|
-
vec3 color = u_colors[0].color;
|
|
44
|
-
// ...
|
|
45
|
-
vec2 adjustedUv = flowUv;
|
|
46
|
-
adjustedUv.y += colorOffset / u_plane_height; // Scroll the color mixing pattern
|
|
47
|
-
|
|
48
|
-
vec2 noise_cord = adjustedUv * u_color_pressure;
|
|
49
|
-
const float minNoise = .0;
|
|
50
|
-
const float maxNoise = .9;
|
|
51
|
-
|
|
52
|
-
for (int i = 1; i < 6; i++) {
|
|
53
|
-
if (i < u_colors_count) {
|
|
54
|
-
if (u_colors[i].is_active > 0.5) {
|
|
55
|
-
float noiseFlow = (1. + float(i)) / 30.;
|
|
56
|
-
float noiseSpeed = (1. + float(i)) * 0.11;
|
|
57
|
-
float noiseSeed = 13. + float(i) * 7.;
|
|
58
|
-
|
|
59
|
-
float noise = snoise(
|
|
60
|
-
vec3(
|
|
61
|
-
noise_cord.x * u_color_pressure.x + u_time * noiseFlow * 2.,
|
|
62
|
-
noise_cord.y * u_color_pressure.y,
|
|
63
|
-
u_time * noiseSpeed
|
|
64
|
-
) + noiseSeed
|
|
65
|
-
) - (.1 * float(i)) + (.5 * u_color_blending);
|
|
66
|
-
|
|
67
|
-
noise = clamp(noise, minNoise, maxNoise + float(i) * 0.02);
|
|
68
|
-
color = mix(color, u_colors[i].color, smoothstep(0.0, u_color_blending, noise));
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
v_color = color;
|
|
74
|
-
|
|
75
|
-
// 4. VERTEX POSITION
|
|
76
|
-
vec3 newPosition = position + normal * v_displacement_amount * u_wave_amplitude;
|
|
77
|
-
gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
|
|
78
|
-
v_new_position = gl_Position;
|
|
1
|
+
(function(k,V){typeof exports=="object"&&typeof module<"u"?V(exports):typeof define=="function"&&define.amd?define(["exports"],V):(k=typeof globalThis<"u"?globalThis:k||self,V(k.neat={}))})(this,function(k){"use strict";const V=`void main() {
|
|
2
|
+
vUv = uv;
|
|
3
|
+
vPosition = position;
|
|
4
|
+
float waveOffset = -u_y_offset * u_y_offset_wave_multiplier;
|
|
5
|
+
float colorOffset = -u_y_offset * u_y_offset_color_multiplier;
|
|
6
|
+
float flowOffset = -u_y_offset * u_y_offset_flow_multiplier;
|
|
7
|
+
v_displacement_amount = cnoise( vec3(
|
|
8
|
+
u_wave_frequency_x * position.x + u_time,
|
|
9
|
+
u_wave_frequency_y * (position.y + waveOffset) + u_time,
|
|
10
|
+
u_time
|
|
11
|
+
));
|
|
12
|
+
vec2 baseUv = vUv;
|
|
13
|
+
baseUv.y += flowOffset / u_plane_height;
|
|
14
|
+
vec2 flowUv = baseUv;
|
|
15
|
+
if (u_flow_enabled > 0.5) {
|
|
16
|
+
if (u_flow_ease > 0.0 || u_flow_distortion_a > 0.0) {
|
|
17
|
+
vec2 ppp = -1.0 + 2.0 * baseUv;
|
|
18
|
+
ppp += 0.1 * cos((1.5 * u_flow_scale) * ppp.yx + 1.1 * u_time + vec2(0.1, 1.1));
|
|
19
|
+
ppp += 0.1 * cos((2.3 * u_flow_scale) * ppp.yx + 1.3 * u_time + vec2(3.2, 3.4));
|
|
20
|
+
ppp += 0.1 * cos((2.2 * u_flow_scale) * ppp.yx + 1.7 * u_time + vec2(1.8, 5.2));
|
|
21
|
+
ppp += u_flow_distortion_a * cos((u_flow_distortion_b * u_flow_scale) * ppp.yx + 1.4 * u_time + vec2(6.3, 3.9));
|
|
22
|
+
float r = length(ppp);
|
|
23
|
+
flowUv = mix(baseUv, vec2(baseUv.x * (1.0 - u_flow_ease) + r * u_flow_ease, baseUv.y), u_flow_ease);
|
|
79
24
|
}
|
|
80
|
-
`,te=`float random(vec2 p) {
|
|
81
|
-
return fract(sin(dot(p, vec2(12.9898,78.233))) * 43758.5453);
|
|
82
25
|
}
|
|
83
|
-
|
|
26
|
+
vFlowUv = flowUv;
|
|
27
|
+
vec3 color = u_colors[0].color;
|
|
28
|
+
vec3 distortedPos = position;
|
|
29
|
+
if (u_shape_type > 0.5) {
|
|
30
|
+
if (u_flow_enabled > 0.5) {
|
|
31
|
+
if (u_flow_ease > 0.0 || u_flow_distortion_a > 0.0) {
|
|
32
|
+
vec3 ppp = position / 25.0;
|
|
33
|
+
ppp.xyz += 0.1 * cos((1.5 * u_flow_scale) * ppp.yxz + 1.1 * u_time + vec3(0.1, 1.1, 2.1));
|
|
34
|
+
ppp.xyz += 0.1 * cos((2.3 * u_flow_scale) * ppp.zxy + 1.3 * u_time + vec3(3.2, 3.4, 1.2));
|
|
35
|
+
ppp.xyz += 0.1 * cos((2.2 * u_flow_scale) * ppp.yxz + 1.7 * u_time + vec3(1.8, 5.2, 3.1));
|
|
36
|
+
ppp.xyz += u_flow_distortion_a * cos((u_flow_distortion_b * u_flow_scale) * ppp.zxy + 1.4 * u_time + vec3(6.3, 3.9, 4.5));
|
|
37
|
+
float r = length(ppp);
|
|
38
|
+
distortedPos = mix(position, vec3(
|
|
39
|
+
position.x * (1.0 - u_flow_ease) + r * u_flow_ease * 25.0,
|
|
40
|
+
position.y,
|
|
41
|
+
position.z * (1.0 - u_flow_ease) + r * u_flow_ease * 25.0
|
|
42
|
+
), u_flow_ease);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
vec3 noise_cord;
|
|
47
|
+
if (u_shape_type > 0.5) {
|
|
48
|
+
noise_cord = vec3(distortedPos.x / 50.0, (distortedPos.y + colorOffset) / 50.0, distortedPos.z / 50.0);
|
|
49
|
+
} else {
|
|
50
|
+
vec2 adjustedUv = flowUv;
|
|
51
|
+
adjustedUv.y += colorOffset / u_plane_height;
|
|
52
|
+
noise_cord = vec3(adjustedUv, 0.0);
|
|
53
|
+
}
|
|
54
|
+
const float minNoise = .0;
|
|
55
|
+
const float maxNoise = .9;
|
|
56
|
+
for (int i = 1; i < 6; i++) {
|
|
57
|
+
if (i < u_colors_count) {
|
|
58
|
+
if (u_colors[i].is_active > 0.5) {
|
|
59
|
+
float noiseFlow = (1. + float(i)) / 30.;
|
|
60
|
+
float noiseSpeed = (1. + float(i)) * 0.11;
|
|
61
|
+
float noiseSeed = 13. + float(i) * 7.;
|
|
62
|
+
float noise_z = u_time * noiseSpeed;
|
|
63
|
+
if (u_shape_type > 0.5) {
|
|
64
|
+
noise_z = noise_cord.z * u_color_pressure.x * u_color_pressure.x + u_time * noiseSpeed;
|
|
65
|
+
}
|
|
66
|
+
float noise = snoise(
|
|
67
|
+
vec3(
|
|
68
|
+
noise_cord.x * u_color_pressure.x * u_color_pressure.x + u_time * noiseFlow * 2.,
|
|
69
|
+
noise_cord.y * u_color_pressure.y * u_color_pressure.y,
|
|
70
|
+
noise_z
|
|
71
|
+
) + noiseSeed
|
|
72
|
+
) - (.1 * float(i)) + (.5 * u_color_blending);
|
|
73
|
+
noise = clamp(noise, minNoise, maxNoise + float(i) * 0.02);
|
|
74
|
+
color = mix(color, u_colors[i].color, smoothstep(0.0, u_color_blending, noise));
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
v_color = color;
|
|
79
|
+
vec3 newPosition = position + normal * v_displacement_amount * u_wave_amplitude;
|
|
80
|
+
vec4 mvPosition = modelViewMatrix * vec4(newPosition, 1.0);
|
|
81
|
+
vViewPosition = mvPosition.xyz;
|
|
82
|
+
vNormal = normalize((modelViewMatrix * vec4(normal, 0.0)).xyz);
|
|
83
|
+
gl_Position = projectionMatrix * mvPosition;
|
|
84
|
+
v_new_position = gl_Position;
|
|
85
|
+
}`,me=`float random(vec2 p) {
|
|
86
|
+
return fract(sin(dot(p, vec2(12.9898,78.233))) * 43758.5453);
|
|
87
|
+
}
|
|
84
88
|
float fbm(vec3 x) {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
89
|
+
float value = 0.0;
|
|
90
|
+
float amplitude = 0.5;
|
|
91
|
+
float frequency = 1.0;
|
|
92
|
+
for (int i = 0; i < 4; i++) {
|
|
93
|
+
value += amplitude * snoise(x * frequency);
|
|
94
|
+
frequency *= 2.0;
|
|
95
|
+
amplitude *= 0.5;
|
|
96
|
+
}
|
|
97
|
+
return value;
|
|
98
|
+
}
|
|
99
|
+
vec3 hsl2rgb(float h, float s, float l) {
|
|
100
|
+
vec3 rgb = clamp(abs(mod(h * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);
|
|
101
|
+
return l + s * (rgb - 0.5) * (1.0 - abs(2.0 * l - 1.0));
|
|
94
102
|
}
|
|
95
|
-
|
|
96
103
|
void main() {
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
texUv *= 1.5; // Tiling scale
|
|
121
|
-
|
|
122
|
-
vec4 texSample = texture2D(u_procedural_texture, texUv);
|
|
123
|
-
baseColor = texSample.rgb;
|
|
124
|
-
} else {
|
|
125
|
-
baseColor = v_color;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
vec3 color = baseColor;
|
|
129
|
-
|
|
130
|
-
// Post-processing
|
|
131
|
-
color += v_displacement_amount * u_highlights;
|
|
132
|
-
// Replace pow() with direct multiplication to avoid negative base undefined behavior in GLSL
|
|
133
|
-
float shadowFactor = 1.0 - v_displacement_amount;
|
|
134
|
-
color -= shadowFactor * shadowFactor * u_shadows;
|
|
135
|
-
color = saturation(color, 1.0 + u_saturation);
|
|
136
|
-
color = color * u_brightness;
|
|
137
|
-
|
|
138
|
-
// Grain
|
|
139
|
-
vec2 noiseCoords = gl_FragCoord.xy / u_grain_scale;
|
|
140
|
-
float grain = 0.0;
|
|
141
|
-
|
|
142
|
-
// Completely bypass expensive noise generation if grain is disabled
|
|
143
|
-
if (u_grain_intensity > 0.0) {
|
|
144
|
-
if (u_grain_speed != 0.0) {
|
|
145
|
-
grain = fbm(vec3(noiseCoords, u_time * u_grain_speed));
|
|
146
|
-
} else {
|
|
147
|
-
grain = fbm(vec3(noiseCoords, 0.0));
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
grain = grain * 0.5 + 0.5;
|
|
151
|
-
grain -= 0.5;
|
|
152
|
-
grain = (grain > u_grain_sparsity) ? grain : 0.0;
|
|
153
|
-
grain *= u_grain_intensity;
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
color += vec3(grain);
|
|
157
|
-
|
|
158
|
-
gl_FragColor = vec4(color, 1.0);
|
|
104
|
+
vec2 finalUv = vFlowUv;
|
|
105
|
+
vec3 baseColor;
|
|
106
|
+
float texAlpha = 1.0;
|
|
107
|
+
if (u_enable_procedural_texture > 0.5) {
|
|
108
|
+
if (u_shape_type > 0.5) {
|
|
109
|
+
float parallaxFactor = 0.25;
|
|
110
|
+
float scrollOffset = (u_y_offset * u_y_offset_color_multiplier) * parallaxFactor;
|
|
111
|
+
vec3 scrolledPos = vPosition;
|
|
112
|
+
scrolledPos.y -= scrollOffset;
|
|
113
|
+
vec3 p = (scrolledPos * 1.5) / 50.0;
|
|
114
|
+
vec2 uvX = p.yz + vec2(0.5);
|
|
115
|
+
vec2 uvY = p.zx + vec2(0.5);
|
|
116
|
+
vec2 uvZ = p.xy + vec2(0.5);
|
|
117
|
+
vec4 colX = texture2D(u_procedural_texture, fract(uvX));
|
|
118
|
+
vec4 colY = texture2D(u_procedural_texture, fract(uvY));
|
|
119
|
+
vec4 colZ = texture2D(u_procedural_texture, fract(uvZ));
|
|
120
|
+
vec3 n = normalize(vNormal);
|
|
121
|
+
vec3 blendWeights = abs(n);
|
|
122
|
+
blendWeights = blendWeights / (blendWeights.x + blendWeights.y + blendWeights.z + 0.0001);
|
|
123
|
+
vec4 texSample = colX * blendWeights.x + colY * blendWeights.y + colZ * blendWeights.z;
|
|
124
|
+
baseColor = texSample.rgb;
|
|
125
|
+
if (u_transparent_texture_void > 0.5) {
|
|
126
|
+
texAlpha = texSample.a;
|
|
159
127
|
}
|
|
160
|
-
|
|
161
|
-
|
|
128
|
+
} else {
|
|
129
|
+
vec2 ppp = -1.0 + 2.0 * finalUv;
|
|
130
|
+
ppp += 0.1 * cos((1.5 * u_flow_scale) * ppp.yx + 1.1 * u_time + vec2(0.1, 1.1));
|
|
131
|
+
ppp += 0.1 * cos((2.3 * u_flow_scale) * ppp.yx + 1.3 * u_time + vec2(3.2, 3.4));
|
|
132
|
+
ppp += 0.1 * cos((2.2 * u_flow_scale) * ppp.yx + 1.7 * u_time + vec2(1.8, 5.2));
|
|
133
|
+
ppp += u_flow_distortion_a * cos((u_flow_distortion_b * u_flow_scale) * ppp.yx + 1.4 * u_time + vec2(6.3, 3.9));
|
|
134
|
+
float r = length(ppp);
|
|
135
|
+
float vx = (finalUv.x * u_texture_ease) + (r * (1.0 - u_texture_ease));
|
|
136
|
+
float vy = (finalUv.y * u_texture_ease) + (0.0 * (1.0 - u_texture_ease));
|
|
137
|
+
vec2 texUv = vec2(vx, vy);
|
|
138
|
+
float parallaxFactor = 0.25;
|
|
139
|
+
texUv.y -= (u_y_offset * u_y_offset_color_multiplier / u_plane_height) * parallaxFactor;
|
|
140
|
+
texUv *= 1.5;
|
|
141
|
+
vec4 texSample = texture2D(u_procedural_texture, fract(texUv));
|
|
142
|
+
baseColor = texSample.rgb;
|
|
143
|
+
if (u_transparent_texture_void > 0.5) {
|
|
144
|
+
texAlpha = texSample.a;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
} else {
|
|
148
|
+
baseColor = v_color;
|
|
149
|
+
}
|
|
150
|
+
vec3 color = baseColor;
|
|
151
|
+
if (u_domain_warp_enabled > 0.5) {
|
|
152
|
+
vec3 p;
|
|
153
|
+
if (u_shape_type > 0.5) {
|
|
154
|
+
p = vec3((vPosition / 50.0 + vec3(0.5)) * u_domain_warp_scale);
|
|
155
|
+
p.z += u_time * 0.15;
|
|
156
|
+
} else {
|
|
157
|
+
p = vec3(finalUv * u_domain_warp_scale, u_time * 0.15);
|
|
158
|
+
}
|
|
159
|
+
vec2 q = vec2(fbm(p), fbm(p + vec3(5.2, 1.3, 0.0)));
|
|
160
|
+
float f = fbm(p + vec3(4.0 * q, 0.0));
|
|
161
|
+
vec3 warpColor = color * (1.0 + f * 0.8 * u_domain_warp_intensity);
|
|
162
|
+
float pattern = clamp(f * f * f + 0.6 * f * f + 0.5 * f, 0.0, 1.0);
|
|
163
|
+
color = mix(color, warpColor * (0.6 + pattern * 0.8), u_domain_warp_intensity * 0.7);
|
|
164
|
+
}
|
|
165
|
+
vec3 normal = normalize(vNormal);
|
|
166
|
+
vec3 viewDir = vec3(0.0, 0.0, 1.0);
|
|
167
|
+
float ndotv = dot(normal, viewDir);
|
|
168
|
+
if (u_shape_type > 0.5 && u_shape_type < 3.5) {
|
|
169
|
+
if (ndotv < 0.0) {
|
|
170
|
+
discard;
|
|
171
|
+
}
|
|
172
|
+
} else {
|
|
173
|
+
if (ndotv < 0.0) {
|
|
174
|
+
normal = -normal;
|
|
175
|
+
ndotv = -ndotv;
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
vec3 lightDir = normalize(vec3(1.0, 1.0, 1.0));
|
|
179
|
+
float diffuse = max(dot(normal, lightDir), 0.0);
|
|
180
|
+
vec3 halfDir = normalize(lightDir + viewDir);
|
|
181
|
+
float specular = pow(max(dot(normal, halfDir), 0.0), 32.0);
|
|
182
|
+
if (u_shape_type <= 0.5) {
|
|
183
|
+
color += v_displacement_amount * u_highlights;
|
|
184
|
+
float heightShadow = 1.0 - v_displacement_amount;
|
|
185
|
+
color -= heightShadow * heightShadow * u_shadows;
|
|
186
|
+
} else {
|
|
187
|
+
color += specular * u_highlights;
|
|
188
|
+
color += v_displacement_amount * u_highlights * 0.5;
|
|
189
|
+
float heightShadow = 1.0 - v_displacement_amount;
|
|
190
|
+
color -= heightShadow * heightShadow * u_shadows * 0.5;
|
|
191
|
+
color -= (1.0 - diffuse) * u_shadows * 0.5;
|
|
192
|
+
}
|
|
193
|
+
color = saturation(color, 1.0 + u_saturation);
|
|
194
|
+
color = color * u_brightness;
|
|
195
|
+
if (u_iridescence_enabled > 0.5) {
|
|
196
|
+
float hue = fract(v_displacement_amount * 0.5 + 0.5 + u_time * u_iridescence_speed * 0.05);
|
|
197
|
+
vec3 iriColor = hsl2rgb(hue, 0.8, 0.6);
|
|
198
|
+
color = mix(color, iriColor, u_iridescence_intensity * abs(v_displacement_amount) * 0.6);
|
|
199
|
+
}
|
|
200
|
+
if (u_fresnel_enabled > 0.5) {
|
|
201
|
+
float slope = 1.0 - abs(v_displacement_amount);
|
|
202
|
+
float fresnel = pow(max(slope, 0.0), u_fresnel_power);
|
|
203
|
+
color += u_fresnel_color * fresnel * u_fresnel_intensity;
|
|
204
|
+
}
|
|
205
|
+
if (u_vignette_intensity > 0.0) {
|
|
206
|
+
vec2 vigUv = vUv;
|
|
207
|
+
if (u_shape_type > 0.5) {
|
|
208
|
+
vigUv = (v_new_position.xy / v_new_position.w) * 0.5 + vec2(0.5);
|
|
209
|
+
}
|
|
210
|
+
float dist = length(vigUv - vec2(0.5));
|
|
211
|
+
float vig = smoothstep(u_vignette_radius, u_vignette_radius * 0.3, dist);
|
|
212
|
+
color *= mix(1.0, vig, u_vignette_intensity);
|
|
213
|
+
}
|
|
214
|
+
if (u_bloom_intensity > 0.0) {
|
|
215
|
+
float luma = dot(color, vec3(0.2126, 0.7152, 0.0722));
|
|
216
|
+
float bloomMask = smoothstep(u_bloom_threshold, 1.0, luma);
|
|
217
|
+
color += color * bloomMask * u_bloom_intensity;
|
|
218
|
+
}
|
|
219
|
+
if (u_chromatic_aberration > 0.0) {
|
|
220
|
+
float caAmount = u_chromatic_aberration * 0.008;
|
|
221
|
+
vec2 caUv = vUv;
|
|
222
|
+
if (u_shape_type > 0.5) {
|
|
223
|
+
caUv = (v_new_position.xy / v_new_position.w) * 0.5 + vec2(0.5);
|
|
224
|
+
}
|
|
225
|
+
float dist = length(caUv - vec2(0.5));
|
|
226
|
+
float rShift = v_displacement_amount + caAmount * dist;
|
|
227
|
+
float bShift = v_displacement_amount - caAmount * dist;
|
|
228
|
+
color.r *= 1.0 + rShift * caAmount * 10.0;
|
|
229
|
+
color.b *= 1.0 - bShift * caAmount * 10.0;
|
|
230
|
+
}
|
|
231
|
+
float grain = 0.0;
|
|
232
|
+
if (u_grain_intensity > 0.0) {
|
|
233
|
+
vec2 noiseCoords = gl_FragCoord.xy / u_grain_scale;
|
|
234
|
+
if (u_grain_speed != 0.0 || u_shape_type <= 0.5) {
|
|
235
|
+
grain = fbm(vec3(noiseCoords, u_time * u_grain_speed));
|
|
236
|
+
} else {
|
|
237
|
+
grain = random(noiseCoords) - 0.5;
|
|
238
|
+
}
|
|
239
|
+
grain = grain * 0.5 + 0.5;
|
|
240
|
+
grain -= 0.5;
|
|
241
|
+
grain = (grain > u_grain_sparsity) ? grain : 0.0;
|
|
242
|
+
grain *= u_grain_intensity;
|
|
243
|
+
}
|
|
244
|
+
color += vec3(grain);
|
|
245
|
+
float edgeAlpha = 1.0;
|
|
246
|
+
if (u_shape_type > 0.5) {
|
|
247
|
+
edgeAlpha = smoothstep(0.0, u_silhouette_fade, ndotv);
|
|
248
|
+
}
|
|
249
|
+
if (u_shape_type == 3.0) {
|
|
250
|
+
float vFade = smoothstep(0.0, u_cylinder_fade, vUv.y) * smoothstep(1.0, 1.0 - u_cylinder_fade, vUv.y);
|
|
251
|
+
edgeAlpha *= vFade;
|
|
252
|
+
} else if (u_shape_type == 4.0) {
|
|
253
|
+
float uFade = smoothstep(0.0, u_ribbon_fade, vUv.x) * smoothstep(1.0, 1.0 - u_ribbon_fade, vUv.x);
|
|
254
|
+
float vFade = smoothstep(0.0, u_ribbon_fade, vUv.y) * smoothstep(1.0, 1.0 - u_ribbon_fade, vUv.y);
|
|
255
|
+
edgeAlpha *= uFade * vFade;
|
|
256
|
+
}
|
|
257
|
+
edgeAlpha *= texAlpha;
|
|
258
|
+
gl_FragColor = vec4(color, edgeAlpha);
|
|
259
|
+
}`;function pe(){return`precision highp float;
|
|
162
260
|
attribute vec3 position;
|
|
163
261
|
attribute vec3 normal;
|
|
164
262
|
attribute vec2 uv;
|
|
165
|
-
|
|
166
263
|
uniform mat4 modelViewMatrix;
|
|
167
264
|
uniform mat4 projectionMatrix;
|
|
168
|
-
|
|
169
265
|
varying vec2 vUv;
|
|
170
266
|
varying vec2 vFlowUv;
|
|
171
267
|
varying vec4 v_new_position;
|
|
172
268
|
varying vec3 v_color;
|
|
173
269
|
varying float v_displacement_amount;
|
|
174
|
-
|
|
270
|
+
varying vec3 vViewPosition;
|
|
271
|
+
varying vec3 vNormal;
|
|
272
|
+
varying vec3 vPosition;
|
|
175
273
|
uniform float u_time;
|
|
176
274
|
uniform vec2 u_resolution;
|
|
177
275
|
uniform vec2 u_color_pressure;
|
|
@@ -181,229 +279,203 @@ uniform float u_wave_amplitude;
|
|
|
181
279
|
uniform float u_plane_width;
|
|
182
280
|
uniform float u_plane_height;
|
|
183
281
|
uniform float u_color_blending;
|
|
184
|
-
|
|
185
282
|
uniform int u_colors_count;
|
|
186
283
|
struct ColorStop {
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
284
|
+
float is_active;
|
|
285
|
+
vec3 color;
|
|
286
|
+
float influence;
|
|
190
287
|
};
|
|
191
288
|
uniform ColorStop u_colors[6];
|
|
192
|
-
|
|
193
289
|
uniform float u_y_offset;
|
|
194
290
|
uniform float u_y_offset_wave_multiplier;
|
|
195
291
|
uniform float u_y_offset_color_multiplier;
|
|
196
292
|
uniform float u_y_offset_flow_multiplier;
|
|
197
|
-
|
|
198
|
-
// Flow field uniforms
|
|
199
293
|
uniform float u_flow_distortion_a;
|
|
200
294
|
uniform float u_flow_distortion_b;
|
|
201
295
|
uniform float u_flow_scale;
|
|
202
296
|
uniform float u_flow_ease;
|
|
203
297
|
uniform float u_flow_enabled;
|
|
204
|
-
|
|
205
|
-
|
|
298
|
+
uniform float u_fresnel_enabled;
|
|
299
|
+
uniform float u_fresnel_power;
|
|
300
|
+
uniform float u_fresnel_intensity;
|
|
301
|
+
uniform vec3 u_fresnel_color;
|
|
302
|
+
uniform float u_shape_type;`}function ge(){return`precision highp float;
|
|
206
303
|
varying vec2 vUv;
|
|
207
304
|
varying vec2 vFlowUv;
|
|
305
|
+
varying vec4 v_new_position;
|
|
208
306
|
varying vec3 v_color;
|
|
209
307
|
varying float v_displacement_amount;
|
|
210
|
-
|
|
308
|
+
varying vec3 vViewPosition;
|
|
309
|
+
varying vec3 vNormal;
|
|
310
|
+
varying vec3 vPosition;
|
|
211
311
|
uniform float u_time;
|
|
312
|
+
uniform vec2 u_resolution;
|
|
212
313
|
uniform float u_plane_height;
|
|
213
|
-
|
|
214
314
|
uniform float u_shadows;
|
|
215
315
|
uniform float u_highlights;
|
|
216
316
|
uniform float u_saturation;
|
|
217
317
|
uniform float u_brightness;
|
|
218
|
-
uniform float u_grain_intensity;
|
|
219
|
-
uniform float u_grain_sparsity;
|
|
220
|
-
uniform float u_grain_scale;
|
|
221
|
-
uniform float u_grain_speed;
|
|
222
|
-
|
|
318
|
+
uniform float u_grain_intensity;
|
|
319
|
+
uniform float u_grain_sparsity;
|
|
320
|
+
uniform float u_grain_scale;
|
|
321
|
+
uniform float u_grain_speed;
|
|
223
322
|
uniform float u_y_offset;
|
|
224
323
|
uniform float u_y_offset_color_multiplier;
|
|
225
|
-
|
|
226
|
-
// Flow field uniforms
|
|
227
324
|
uniform float u_flow_distortion_a;
|
|
228
325
|
uniform float u_flow_distortion_b;
|
|
229
326
|
uniform float u_flow_scale;
|
|
230
|
-
|
|
231
|
-
// Procedural texture uniforms
|
|
232
327
|
uniform sampler2D u_procedural_texture;
|
|
233
328
|
uniform float u_enable_procedural_texture;
|
|
234
329
|
uniform float u_texture_ease;
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
330
|
+
uniform float u_domain_warp_enabled;
|
|
331
|
+
uniform float u_domain_warp_intensity;
|
|
332
|
+
uniform float u_domain_warp_scale;
|
|
333
|
+
uniform float u_vignette_intensity;
|
|
334
|
+
uniform float u_vignette_radius;
|
|
335
|
+
uniform float u_fresnel_enabled;
|
|
336
|
+
uniform float u_fresnel_power;
|
|
337
|
+
uniform float u_fresnel_intensity;
|
|
338
|
+
uniform vec3 u_fresnel_color;
|
|
339
|
+
uniform float u_iridescence_enabled;
|
|
340
|
+
uniform float u_iridescence_intensity;
|
|
341
|
+
uniform float u_iridescence_speed;
|
|
342
|
+
uniform float u_bloom_intensity;
|
|
343
|
+
uniform float u_bloom_threshold;
|
|
344
|
+
uniform float u_chromatic_aberration;
|
|
345
|
+
uniform float u_shape_type;
|
|
346
|
+
uniform float u_transparent_texture_void;
|
|
347
|
+
uniform float u_silhouette_fade;
|
|
348
|
+
uniform float u_cylinder_fade;
|
|
349
|
+
uniform float u_ribbon_fade;`}function Q(){return`vec4 permute(vec4 x) {
|
|
350
|
+
return floor(fract(sin(x) * 43758.5453123) * 289.0);
|
|
240
351
|
}
|
|
241
|
-
|
|
242
|
-
// Taylor Inverse Sqrt
|
|
243
352
|
vec4 taylorInvSqrt(vec4 r) {
|
|
244
|
-
|
|
353
|
+
return 1.79284291400159 - 0.85373472095314 * r;
|
|
245
354
|
}
|
|
246
|
-
|
|
247
|
-
// Fade function
|
|
248
355
|
vec3 fade(vec3 t) {
|
|
249
|
-
|
|
356
|
+
return t*t*t*(t*(t*6.0-15.0)+10.0);
|
|
250
357
|
}
|
|
251
|
-
|
|
252
|
-
// 3D Simplex Noise
|
|
253
358
|
float snoise(vec3 v) {
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
|
|
298
|
-
vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
|
|
299
|
-
|
|
300
|
-
vec3 p0 = vec3(a0.xy,h.x);
|
|
301
|
-
vec3 p1 = vec3(a0.zw,h.y);
|
|
302
|
-
vec3 p2 = vec3(a1.xy,h.z);
|
|
303
|
-
vec3 p3 = vec3(a1.zw,h.w);
|
|
304
|
-
|
|
305
|
-
// Normalise gradients
|
|
306
|
-
vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
|
|
307
|
-
p0 *= norm.x;
|
|
308
|
-
p1 *= norm.y;
|
|
309
|
-
p2 *= norm.z;
|
|
310
|
-
p3 *= norm.w;
|
|
311
|
-
|
|
312
|
-
// Mix final noise value
|
|
313
|
-
vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
|
|
314
|
-
m = m * m;
|
|
315
|
-
return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
|
|
316
|
-
dot(p2,x2), dot(p3,x3) ) );
|
|
359
|
+
const vec2 C = vec2(1.0/6.0, 1.0/3.0) ;
|
|
360
|
+
const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
|
|
361
|
+
vec3 i = floor(v + dot(v, C.yyy) );
|
|
362
|
+
vec3 x0 = v - i + dot(i, C.xxx) ;
|
|
363
|
+
vec3 g = step(x0.yzx, x0.xyz);
|
|
364
|
+
vec3 l = 1.0 - g;
|
|
365
|
+
vec3 i1 = min( g.xyz, l.zxy );
|
|
366
|
+
vec3 i2 = max( g.xyz, l.zxy );
|
|
367
|
+
vec3 x1 = x0 - i1 + C.xxx;
|
|
368
|
+
vec3 x2 = x0 - i2 + C.yyy;
|
|
369
|
+
vec3 x3 = x0 - D.yyy;
|
|
370
|
+
vec4 p = permute( permute( permute(
|
|
371
|
+
i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
|
|
372
|
+
+ i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
|
|
373
|
+
+ i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
|
|
374
|
+
float n_ = 0.142857142857;
|
|
375
|
+
vec3 ns = n_ * D.wyz - D.xzx;
|
|
376
|
+
vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
|
|
377
|
+
vec4 x_ = floor(j * ns.z);
|
|
378
|
+
vec4 y_ = floor(j - 7.0 * x_ );
|
|
379
|
+
vec4 x = x_ *ns.x + ns.yyyy;
|
|
380
|
+
vec4 y = y_ *ns.x + ns.yyyy;
|
|
381
|
+
vec4 h = 1.0 - abs(x) - abs(y);
|
|
382
|
+
vec4 b0 = vec4( x.xy, y.xy );
|
|
383
|
+
vec4 b1 = vec4( x.zw, y.zw );
|
|
384
|
+
vec4 s0 = floor(b0)*2.0 + 1.0;
|
|
385
|
+
vec4 s1 = floor(b1)*2.0 + 1.0;
|
|
386
|
+
vec4 sh = -step(h, vec4(0.0));
|
|
387
|
+
vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
|
|
388
|
+
vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
|
|
389
|
+
vec3 p0 = vec3(a0.xy,h.x);
|
|
390
|
+
vec3 p1 = vec3(a0.zw,h.y);
|
|
391
|
+
vec3 p2 = vec3(a1.xy,h.z);
|
|
392
|
+
vec3 p3 = vec3(a1.zw,h.w);
|
|
393
|
+
vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
|
|
394
|
+
p0 *= norm.x;
|
|
395
|
+
p1 *= norm.y;
|
|
396
|
+
p2 *= norm.z;
|
|
397
|
+
p3 *= norm.w;
|
|
398
|
+
vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
|
|
399
|
+
m = m * m;
|
|
400
|
+
return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
|
|
401
|
+
dot(p2,x2), dot(p3,x3) ) );
|
|
317
402
|
}
|
|
318
|
-
|
|
319
|
-
// Classic Perlin noise
|
|
320
403
|
float cnoise(vec3 P)
|
|
321
404
|
{
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
|
|
384
|
-
float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
|
|
385
|
-
return 2.2 * n_xyz;
|
|
386
|
-
}
|
|
387
|
-
`}function V(){return`
|
|
388
|
-
vec3 saturation(vec3 rgb, float adjustment) {
|
|
389
|
-
const vec3 W = vec3(0.2125, 0.7154, 0.0721);
|
|
390
|
-
vec3 intensity = vec3(dot(rgb, W));
|
|
391
|
-
return mix(intensity, rgb, adjustment);
|
|
392
|
-
}
|
|
393
|
-
`}class G{elements;constructor(){this.elements=new Float32Array([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1])}translate(e,i,o){return this.elements[12]+=this.elements[0]*e+this.elements[4]*i+this.elements[8]*o,this.elements[13]+=this.elements[1]*e+this.elements[5]*i+this.elements[9]*o,this.elements[14]+=this.elements[2]*e+this.elements[6]*i+this.elements[10]*o,this.elements[15]+=this.elements[3]*e+this.elements[7]*i+this.elements[11]*o,this}rotateX(e){const i=Math.cos(e),o=Math.sin(e),t=this.elements[4],b=this.elements[5],y=this.elements[6],n=this.elements[7],p=this.elements[8],v=this.elements[9],T=this.elements[10],x=this.elements[11];return this.elements[4]=i*t+o*p,this.elements[5]=i*b+o*v,this.elements[6]=i*y+o*T,this.elements[7]=i*n+o*x,this.elements[8]=i*p-o*t,this.elements[9]=i*v-o*b,this.elements[10]=i*T-o*y,this.elements[11]=i*x-o*n,this}}class oe{left;right;top;bottom;near;far;position;projectionMatrix;constructor(e,i,o,t,b,y){this.left=e,this.right=i,this.top=o,this.bottom=t,this.near=b,this.far=y,this.position=[0,0,0],this.projectionMatrix=new G,this.updateProjectionMatrix()}updateProjectionMatrix(){const e=1/(this.right-this.left),i=1/(this.top-this.bottom),o=1/(this.far-this.near),t=(this.right+this.left)*e,b=(this.top+this.bottom)*i,y=(this.far+this.near)*o;this.projectionMatrix.elements=new Float32Array([2*e,0,0,0,0,2*i,0,0,0,0,-2*o,0,-t,-b,-y,1])}}function j(a,e,i,o=50,t=50){const n=e*i/1e6*o*t/1.5,p=e/i,v=Math.sqrt(n*p),T=n/v;let x=-o/2,h=Math.min((x+v)/1.5,o/2),w=t/4,R=Math.max((w-T)/2,-t/4);if(p<1){const E=p;x=x*E,h=h*E;const g=1.05;x=x*g,h=h*g,w=w*g,R=R*g}a.left=x,a.right=h,a.top=w,a.bottom=R,a.near=-100,a.far=1e3,a.updateProjectionMatrix()}function se(a,e,i,o){const t=a/2,b=e/2,y=Math.floor(i),n=Math.floor(o),p=y+1,v=n+1,T=a/y,x=e/n,h=[],w=[],R=[],E=[];for(let c=0;c<v;c++){const l=c*x-b;for(let m=0;m<p;m++){const s=m*T-t;w.push(s,-l,0),R.push(0,0,1),E.push(m/y),E.push(1-c/n)}}for(let c=0;c<n;c++)for(let l=0;l<y;l++){const m=l+p*c,s=l+p*(c+1),f=l+1+p*(c+1),_=l+1+p*c;h.push(m,s,_),h.push(s,f,_)}const g=w.length/3>65535,A=[];for(let c=0;c<h.length;c+=3){const l=h[c],m=h[c+1],s=h[c+2];A.push(l,m,m,s,s,l)}return{position:new Float32Array(w),normal:new Float32Array(R),uv:new Float32Array(E),index:g?new Uint32Array(h):new Uint16Array(h),wireframeIndex:g?new Uint32Array(A):new Uint16Array(A)}}console.info(`%c\u{1F308} Neat Gradients%c
|
|
405
|
+
vec3 Pi0 = floor(P);
|
|
406
|
+
vec3 Pi1 = Pi0 + vec3(1.0);
|
|
407
|
+
vec3 Pf0 = fract(P);
|
|
408
|
+
vec3 Pf1 = Pf0 - vec3(1.0);
|
|
409
|
+
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
|
|
410
|
+
vec4 iy = vec4(Pi0.yy, Pi1.yy);
|
|
411
|
+
vec4 iz0 = Pi0.zzzz;
|
|
412
|
+
vec4 iz1 = Pi1.zzzz;
|
|
413
|
+
vec4 ixy = permute(permute(ix) + iy);
|
|
414
|
+
vec4 ixy0 = permute(ixy + iz0);
|
|
415
|
+
vec4 ixy1 = permute(ixy + iz1);
|
|
416
|
+
vec4 gx0 = ixy0 * (1.0 / 7.0);
|
|
417
|
+
vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
|
|
418
|
+
gx0 = fract(gx0);
|
|
419
|
+
vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
|
|
420
|
+
vec4 sz0 = step(gz0, vec4(0.0));
|
|
421
|
+
gx0 -= sz0 * (step(0.0, gx0) - 0.5);
|
|
422
|
+
gy0 -= sz0 * (step(0.0, gy0) - 0.5);
|
|
423
|
+
vec4 gx1 = ixy1 * (1.0 / 7.0);
|
|
424
|
+
vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
|
|
425
|
+
gx1 = fract(gx1);
|
|
426
|
+
vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
|
|
427
|
+
vec4 sz1 = step(gz1, vec4(0.0));
|
|
428
|
+
gx1 -= sz1 * (step(0.0, gx1) - 0.5);
|
|
429
|
+
gy1 -= sz1 * (step(0.0, gy1) - 0.5);
|
|
430
|
+
vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
|
|
431
|
+
vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
|
|
432
|
+
vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
|
|
433
|
+
vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
|
|
434
|
+
vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
|
|
435
|
+
vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
|
|
436
|
+
vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
|
|
437
|
+
vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
|
|
438
|
+
vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
|
|
439
|
+
g000 *= norm0.x;
|
|
440
|
+
g010 *= norm0.y;
|
|
441
|
+
g100 *= norm0.z;
|
|
442
|
+
g110 *= norm0.w;
|
|
443
|
+
vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
|
|
444
|
+
g001 *= norm1.x;
|
|
445
|
+
g011 *= norm1.y;
|
|
446
|
+
g101 *= norm1.z;
|
|
447
|
+
g111 *= norm1.w;
|
|
448
|
+
float n000 = dot(g000, Pf0);
|
|
449
|
+
float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
|
|
450
|
+
float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
|
|
451
|
+
float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
|
|
452
|
+
float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
|
|
453
|
+
float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
|
|
454
|
+
float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
|
|
455
|
+
float n111 = dot(g111, Pf1);
|
|
456
|
+
vec3 fade_xyz = fade(Pf0);
|
|
457
|
+
vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
|
|
458
|
+
vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
|
|
459
|
+
float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
|
|
460
|
+
return 2.2 * n_xyz;
|
|
461
|
+
}`}function ee(){return`vec3 saturation(vec3 rgb, float adjustment) {
|
|
462
|
+
const vec3 W = vec3(0.2125, 0.7154, 0.0721);
|
|
463
|
+
vec3 intensity = vec3(dot(rgb, W));
|
|
464
|
+
return mix(intensity, rgb, adjustment);
|
|
465
|
+
}`}class te{elements;constructor(){this.elements=new Float32Array([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1])}translate(e,i,r){return this.elements[12]+=this.elements[0]*e+this.elements[4]*i+this.elements[8]*r,this.elements[13]+=this.elements[1]*e+this.elements[5]*i+this.elements[9]*r,this.elements[14]+=this.elements[2]*e+this.elements[6]*i+this.elements[10]*r,this.elements[15]+=this.elements[3]*e+this.elements[7]*i+this.elements[11]*r,this}rotateX(e){const i=Math.cos(e),r=Math.sin(e),t=this.elements[4],y=this.elements[5],x=this.elements[6],o=this.elements[7],l=this.elements[8],_=this.elements[9],b=this.elements[10],a=this.elements[11];return this.elements[4]=i*t+r*l,this.elements[5]=i*y+r*_,this.elements[6]=i*x+r*b,this.elements[7]=i*o+r*a,this.elements[8]=i*l-r*t,this.elements[9]=i*_-r*y,this.elements[10]=i*b-r*x,this.elements[11]=i*a-r*o,this}rotateY(e){const i=Math.cos(e),r=Math.sin(e),t=this.elements[0],y=this.elements[1],x=this.elements[2],o=this.elements[3],l=this.elements[8],_=this.elements[9],b=this.elements[10],a=this.elements[11];return this.elements[0]=i*t-r*l,this.elements[1]=i*y-r*_,this.elements[2]=i*x-r*b,this.elements[3]=i*o-r*a,this.elements[8]=r*t+i*l,this.elements[9]=r*y+i*_,this.elements[10]=r*x+i*b,this.elements[11]=r*o+i*a,this}rotateZ(e){const i=Math.cos(e),r=Math.sin(e),t=this.elements[0],y=this.elements[1],x=this.elements[2],o=this.elements[3],l=this.elements[4],_=this.elements[5],b=this.elements[6],a=this.elements[7];return this.elements[0]=i*t+r*l,this.elements[1]=i*y+r*_,this.elements[2]=i*x+r*b,this.elements[3]=i*o+r*a,this.elements[4]=-r*t+i*l,this.elements[5]=-r*y+i*_,this.elements[6]=-r*x+i*b,this.elements[7]=-r*o+i*a,this}}class ye{left;right;top;bottom;near;far;position;projectionMatrix;zoom;constructor(e,i,r,t,y,x){this.left=e,this.right=i,this.top=r,this.bottom=t,this.near=y,this.far=x,this.position=[0,0,0],this.zoom=1,this.projectionMatrix=new te,this.updateProjectionMatrix()}updateProjectionMatrix(){const e=1/(this.right-this.left),i=1/(this.top-this.bottom),r=1/(this.far-this.near),t=(this.right+this.left)*e,y=(this.top+this.bottom)*i,x=(this.far+this.near)*r;this.projectionMatrix.elements=new Float32Array([2*e,0,0,0,0,2*i,0,0,0,0,-2*r,0,-t,-y,-x,1])}}function G(s,e,i,r=50,t=50,y="plane",x=1){s.zoom=x;const o=e/i;if(y==="plane"){const b=e*i/1e6*r*t/1.5,a=Math.sqrt(b*o),h=b/a;let p=-r/2,c=Math.min((p+a)/1.5,r/2),f=t/4,R=Math.max((f-h)/2,-t/4);if(o<1){const g=o;p=p*g,c=c*g;const v=1.05;p=p*v,c=c*v,f=f*v,R=R*v}s.left=p,s.right=c,s.top=f,s.bottom=R}else{let l=25;if(y==="sphere"?l=30:y==="torus"?l=35:y==="cylinder"&&(l=30),o>=1)s.left=-l*o,s.right=l*o,s.top=l,s.bottom=-l;else{s.left=-l,s.right=l,s.top=l/o,s.bottom=-l/o;const _=1.05;s.left*=_,s.right*=_,s.top*=_,s.bottom*=_}}s.left/=x,s.right/=x,s.top/=x,s.bottom/=x,s.near=-100,s.far=1e3,s.updateProjectionMatrix()}function ie(s,e,i,r){const t=s/2,y=e/2,x=Math.floor(i),o=Math.floor(r),l=x+1,_=o+1,b=s/x,a=e/o,h=[],p=[],c=[],f=[];for(let v=0;v<_;v++){const w=v*a-y;for(let u=0;u<l;u++){const T=u*b-t;p.push(T,-w,0),c.push(0,0,1),f.push(u/x),f.push(1-v/o)}}for(let v=0;v<o;v++)for(let w=0;w<x;w++){const u=w+l*v,T=w+l*(v+1),A=w+1+l*(v+1),M=w+1+l*v;h.push(u,T,M),h.push(T,A,M)}const R=p.length/3>65535,g=[];for(let v=0;v<h.length;v+=3){const w=h[v],u=h[v+1],T=h[v+2];g.push(w,u,u,T,T,w)}return{position:new Float32Array(p),normal:new Float32Array(c),uv:new Float32Array(f),index:R?new Uint32Array(h):new Uint16Array(h),wireframeIndex:R?new Uint32Array(g):new Uint16Array(g)}}function oe(s,e,i){const r=[],t=[],y=[],x=[],o=Math.floor(e),l=Math.floor(i);for(let a=0;a<=l;a++){const h=a/l,p=h*Math.PI;for(let c=0;c<=o;c++){const f=c/o,R=f*Math.PI*2,g=-s*Math.sin(p)*Math.cos(R),v=s*Math.cos(p),w=s*Math.sin(p)*Math.sin(R);r.push(g,v,w);const u=Math.sqrt(g*g+v*v+w*w);t.push(g/u,v/u,w/u),y.push(f,1-h)}}for(let a=0;a<l;a++)for(let h=0;h<o;h++){const p=h+(o+1)*a,c=h+(o+1)*(a+1),f=h+1+(o+1)*(a+1),R=h+1+(o+1)*a;x.push(p,c,R),x.push(c,f,R)}const _=r.length/3>65535,b=[];for(let a=0;a<x.length;a+=3){const h=x[a],p=x[a+1],c=x[a+2];b.push(h,p,p,c,c,h)}return{position:new Float32Array(r),normal:new Float32Array(t),uv:new Float32Array(y),index:_?new Uint32Array(x):new Uint16Array(x),wireframeIndex:_?new Uint32Array(b):new Uint16Array(b)}}function re(s,e,i,r){const t=[],y=[],x=[],o=[],l=Math.floor(i),_=Math.floor(r);for(let h=0;h<=l;h++){const p=h/l*Math.PI*2;for(let c=0;c<=_;c++){const f=c/_*Math.PI*2,R=(s+e*Math.cos(p))*Math.cos(f),g=(s+e*Math.cos(p))*Math.sin(f),v=e*Math.sin(p);t.push(R,g,v);const w=s*Math.cos(f),u=s*Math.sin(f),T=R-w,A=g-u,M=v,m=Math.sqrt(T*T+A*A+M*M);y.push(T/m,A/m,M/m),x.push(c/_,h/l)}}for(let h=1;h<=l;h++)for(let p=1;p<=_;p++){const c=(_+1)*h+p-1,f=(_+1)*(h-1)+p-1,R=(_+1)*(h-1)+p,g=(_+1)*h+p;o.push(c,f,g),o.push(f,R,g)}const b=t.length/3>65535,a=[];for(let h=0;h<o.length;h+=3){const p=o[h],c=o[h+1],f=o[h+2];a.push(p,c,c,f,f,p)}return{position:new Float32Array(t),normal:new Float32Array(y),uv:new Float32Array(x),index:b?new Uint32Array(o):new Uint16Array(o),wireframeIndex:b?new Uint32Array(a):new Uint16Array(a)}}function se(s,e,i,r,t){const y=[],x=[],o=[],l=[],_=Math.floor(r),b=Math.floor(t),a=i/2;for(let c=0;c<=b;c++){const f=c/b,R=f*i-a,g=f*(e-s)+s;for(let v=0;v<=_;v++){const w=v/_,u=w*Math.PI*2,T=Math.sin(u),A=Math.cos(u);y.push(g*T,-R,g*A),x.push(T,0,A),o.push(w,1-f)}}for(let c=0;c<b;c++)for(let f=0;f<_;f++){const R=f+(_+1)*c,g=f+(_+1)*(c+1),v=f+1+(_+1)*(c+1),w=f+1+(_+1)*c;l.push(R,g,w),l.push(g,v,w)}const h=y.length/3>65535,p=[];for(let c=0;c<l.length;c+=3){const f=l[c],R=l[c+1],g=l[c+2];p.push(f,R,R,g,g,f)}return{position:new Float32Array(y),normal:new Float32Array(x),uv:new Float32Array(o),index:h?new Uint32Array(l):new Uint16Array(l),wireframeIndex:h?new Uint32Array(p):new Uint16Array(p)}}function ne(s,e,i,r,t,y){const x=s/2,o=e/2,l=Math.floor(i),_=Math.floor(r),b=l+1,a=_+1,h=s/l,p=e/_,c=[],f=[],R=[],g=[];for(let u=0;u<a;u++){const T=u*p-o;for(let A=0;A<b;A++){const M=A*h-x;let m=M,F=T,D=0,z=0,C=0,P=1;if(Math.abs(t)>.001){const E=s/t,S=M/E;m=E*Math.sin(S),D=E*(1-Math.cos(S)),z=Math.sin(S),P=Math.cos(S)}if(Math.abs(y)>.001){const E=T/e*y,S=Math.cos(E),U=Math.sin(E),B=m*S-D*U,W=m*U+D*S;m=B,D=W;const I=z*S-P*U,Y=z*U+P*S;z=I,P=Y}c.push(m,-F,D),f.push(z,C,P),R.push(A/l),R.push(1-u/_)}}for(let u=0;u<_;u++)for(let T=0;T<l;T++){const A=T+b*u,M=T+b*(u+1),m=T+1+b*(u+1),F=T+1+b*u;g.push(A,M,F),g.push(M,m,F)}const v=c.length/3>65535,w=[];for(let u=0;u<g.length;u+=3){const T=g[u],A=g[u+1],M=g[u+2];w.push(T,A,A,M,M,T)}return{position:new Float32Array(c),normal:new Float32Array(f),uv:new Float32Array(R),index:v?new Uint32Array(g):new Uint16Array(g),wireframeIndex:v?new Uint32Array(w):new Uint16Array(w)}}console.info(`%c\u{1F308} Neat Gradients%c
|
|
394
466
|
|
|
395
467
|
Licensed under MIT + The Commons Clause.
|
|
396
468
|
Free for personal and commercial use.
|
|
397
469
|
Selling this software or its derivatives is strictly prohibited.
|
|
398
|
-
https://neat.firecms.co`,"font-weight: bold; font-size: 14px; color: #FF5772;","color: inherit;");const Y=50,H=80,O=6,ne=fe();class ae{_ref;_speed=-1;_horizontalPressure=-1;_verticalPressure=-1;_waveFrequencyX=-1;_waveFrequencyY=-1;_waveAmplitude=-1;_shadows=-1;_highlights=-1;_saturation=-1;_brightness=-1;_grainScale=-1;_grainIntensity=-1;_grainSparsity=-1;_grainSpeed=-1;_colorBlending=-1;_colors=[];_wireframe=!1;_backgroundColor="#FFFFFF";_backgroundColorRgb=[1,1,1];_backgroundAlpha=1;_flowDistortionA=0;_flowDistortionB=0;_flowScale=1;_flowEase=0;_flowEnabled=!0;glState;_enableProceduralTexture=!1;_textureVoidLikelihood=.45;_textureVoidWidthMin=200;_textureVoidWidthMax=486;_textureBandDensity=2.15;_textureColorBlending=.01;_textureSeed=333;_textureEase=.5;_proceduralTexture=null;_proceduralBackgroundColor="#000000";_textureShapeTriangles=20;_textureShapeCircles=15;_textureShapeBars=15;_textureShapeSquiggles=10;requestRef=-1;sizeObserver;_initialized=!1;_linkElement=null;_cachedColorRgb=[];_yOffset=0;_yOffsetWaveMultiplier=.004;_yOffsetColorMultiplier=.004;_yOffsetFlowMultiplier=.004;_resizeTimeoutId=null;_textureNeedsUpdate=!1;_linkCheckCounter=0;_colorsChanged=!0;_uniformsDirty=!0;_textureDirty=!0;constructor(e){const{ref:i,speed:o=4,horizontalPressure:t=3,verticalPressure:b=3,waveFrequencyX:y=5,waveFrequencyY:n=5,waveAmplitude:p=3,colors:v,highlights:T=4,shadows:x=4,colorSaturation:h=0,colorBrightness:w=1,colorBlending:R=5,grainScale:E=2,grainIntensity:g=.55,grainSparsity:A=0,grainSpeed:c=.1,wireframe:l=!1,backgroundColor:m="#FFFFFF",backgroundAlpha:s=1,resolution:f=1,seed:_,yOffset:d=0,yOffsetWaveMultiplier:P=4,yOffsetColorMultiplier:C=4,yOffsetFlowMultiplier:U=4,flowDistortionA:B=0,flowDistortionB:k=0,flowScale:X=1,flowEase:D=0,flowEnabled:S=!0,enableProceduralTexture:I=!1,textureVoidLikelihood:he=.45,textureVoidWidthMin:de=200,textureVoidWidthMax:me=486,textureBandDensity:pe=2.15,textureColorBlending:ge=.01,textureSeed:xe=333,textureEase:ye=.5,proceduralBackgroundColor:ve="#000000",textureShapeTriangles:we=20,textureShapeCircles:Se=15,textureShapeBars:be=15,textureShapeSquiggles:Ee=10}=e;this._ref=i,this.destroy=this.destroy.bind(this),this._initScene=this._initScene.bind(this),this.speed=o,this.horizontalPressure=t,this.verticalPressure=b,this.waveFrequencyX=y,this.waveFrequencyY=n,this.waveAmplitude=p,this.colorBlending=R,this.grainScale=E,this.grainIntensity=g,this.grainSparsity=A,this.grainSpeed=c,this.colors=v,this.shadows=x,this.highlights=T,this.colorSaturation=h,this.colorBrightness=w,this.wireframe=l,this.backgroundColor=m,this.backgroundAlpha=s,this.yOffset=d,this.yOffsetWaveMultiplier=P,this.yOffsetColorMultiplier=C,this.yOffsetFlowMultiplier=U,this.flowDistortionA=B,this.flowDistortionB=k,this.flowScale=X,this.flowEase=D,this.flowEnabled=S,this.enableProceduralTexture=I,this.textureVoidLikelihood=he,this.textureVoidWidthMin=de,this.textureVoidWidthMax=me,this.textureBandDensity=pe,this.textureColorBlending=ge,this.textureSeed=xe,this.textureEase=ye,this._proceduralBackgroundColor=ve,this._textureShapeTriangles=we,this._textureShapeCircles=Se,this._textureShapeBars=be,this._textureShapeSquiggles=Ee,this.glState=this._initScene(f),_e();let K=_!==void 0?_:ue(),Z=performance.now();const J=()=>{const{gl:r,program:N,locations:u,indexCount:L,indexType:W}=this.glState;if(this._linkCheckCounter++,this._linkCheckCounter>=300&&(this._linkCheckCounter=0,(!this._linkElement||!document.contains(this._linkElement))&&(this._linkElement=le(i))),this._initialized){const Q=performance.now();if(K+=(Q-Z)/1e3*this._speed,Z=Q,r.useProgram(N),r.uniform1f(u.uniforms.u_time,K),this._uniformsDirty&&(r.uniform2f(u.uniforms.u_resolution,this._ref.clientWidth,this._ref.clientHeight),r.uniform2f(u.uniforms.u_color_pressure,this._horizontalPressure,this._verticalPressure),r.uniform1f(u.uniforms.u_wave_frequency_x,this._waveFrequencyX),r.uniform1f(u.uniforms.u_wave_frequency_y,this._waveFrequencyY),r.uniform1f(u.uniforms.u_wave_amplitude,this._waveAmplitude),r.uniform1f(u.uniforms.u_color_blending,this._colorBlending),r.uniform1f(u.uniforms.u_shadows,this._shadows),r.uniform1f(u.uniforms.u_highlights,this._highlights),r.uniform1f(u.uniforms.u_saturation,this._saturation),r.uniform1f(u.uniforms.u_brightness,this._brightness),r.uniform1f(u.uniforms.u_grain_intensity,this._grainIntensity),r.uniform1f(u.uniforms.u_grain_sparsity,this._grainSparsity),r.uniform1f(u.uniforms.u_grain_speed,this._grainSpeed),r.uniform1f(u.uniforms.u_grain_scale,this._grainScale),r.uniform1f(u.uniforms.u_y_offset,this._yOffset),r.uniform1f(u.uniforms.u_y_offset_wave_multiplier,this._yOffsetWaveMultiplier),r.uniform1f(u.uniforms.u_y_offset_color_multiplier,this._yOffsetColorMultiplier),r.uniform1f(u.uniforms.u_y_offset_flow_multiplier,this._yOffsetFlowMultiplier),r.uniform1f(u.uniforms.u_flow_distortion_a,this._flowDistortionA),r.uniform1f(u.uniforms.u_flow_distortion_b,this._flowDistortionB),r.uniform1f(u.uniforms.u_flow_scale,this._flowScale),r.uniform1f(u.uniforms.u_flow_ease,this._flowEase),r.uniform1f(u.uniforms.u_flow_enabled,this._flowEnabled?1:0),r.uniform1f(u.uniforms.u_enable_procedural_texture,this._enableProceduralTexture?1:0),r.uniform1f(u.uniforms.u_texture_ease,this._textureEase),this._uniformsDirty=!1),this._textureNeedsUpdate&&this._enableProceduralTexture&&(this._proceduralTexture&&r.deleteTexture(this._proceduralTexture),this._proceduralTexture=this._createProceduralTexture(r),this._textureNeedsUpdate=!1,this._textureDirty=!0),this._textureDirty&&this._proceduralTexture&&(r.activeTexture(r.TEXTURE1),r.bindTexture(r.TEXTURE_2D,this._proceduralTexture),r.uniform1i(u.uniforms.u_procedural_texture,1),this._textureDirty=!1),this._colorsChanged){this._colorsChanged=!1;for(let z=0;z<O;z++)if(z<this._colors.length){const ee=this._colors[z],Re=this._cachedColorRgb[z]||[0,0,0];r.uniform1f(u.uniforms[`u_colors[${z}].is_active`],ee.enabled?1:0),r.uniform3fv(u.uniforms[`u_colors[${z}].color`],Re),r.uniform1f(u.uniforms[`u_colors[${z}].influence`],ee.influence||0)}else r.uniform1f(u.uniforms[`u_colors[${z}].is_active`],0);r.uniform1i(u.uniforms.u_colors_count,O)}}r.clearColor(this._backgroundColorRgb[0],this._backgroundColorRgb[1],this._backgroundColorRgb[2],this._backgroundAlpha),r.clear(r.COLOR_BUFFER_BIT|r.DEPTH_BUFFER_BIT),this._wireframe?(r.bindBuffer(r.ELEMENT_ARRAY_BUFFER,this.glState.buffers.wireframeIndex),r.drawElements(r.LINES,this.glState.wireframeIndexCount,W,0),r.bindBuffer(r.ELEMENT_ARRAY_BUFFER,this.glState.buffers.index)):r.drawElements(r.TRIANGLES,L,W,0),this.requestRef=requestAnimationFrame(J)},Te=()=>{const{gl:r,camera:N}=this.glState,u=this._ref.clientWidth,L=this._ref.clientHeight;this._ref.width=u,this._ref.height=L,r.viewport(0,0,u,L),j(N,u,L);const W=r.getUniformLocation(this.glState.program,"projectionMatrix");r.useProgram(this.glState.program),r.uniformMatrix4fv(W,!1,N.projectionMatrix.elements)};this.sizeObserver=new ResizeObserver(()=>{this._resizeTimeoutId!==null&&clearTimeout(this._resizeTimeoutId),this._resizeTimeoutId=window.setTimeout(()=>{Te(),this._resizeTimeoutId=null},100)}),this.sizeObserver.observe(i),J()}destroy(){if(cancelAnimationFrame(this.requestRef),this.sizeObserver.disconnect(),this._resizeTimeoutId!==null&&(clearTimeout(this._resizeTimeoutId),this._resizeTimeoutId=null),this._linkElement&&this._linkElement.parentElement&&(this._linkElement.parentElement.removeChild(this._linkElement),this._linkElement=null),this.glState){const e=this.glState.gl;e.deleteProgram(this.glState.program),e.deleteBuffer(this.glState.buffers.position),e.deleteBuffer(this.glState.buffers.normal),e.deleteBuffer(this.glState.buffers.uv),e.deleteBuffer(this.glState.buffers.index),e.deleteBuffer(this.glState.buffers.wireframeIndex)}this._proceduralTexture&&this.glState&&this.glState.gl.deleteTexture(this._proceduralTexture)}downloadAsPNG(e="neat.png"){const i=this._ref.toDataURL("image/png");ce(i,e)}set speed(e){this._uniformsDirty=!0,this._speed=e/20}set horizontalPressure(e){this._uniformsDirty=!0,this._horizontalPressure=e/4}set verticalPressure(e){this._uniformsDirty=!0,this._verticalPressure=e/4}set waveFrequencyX(e){this._uniformsDirty=!0,this._waveFrequencyX=e*.04}set waveFrequencyY(e){this._uniformsDirty=!0,this._waveFrequencyY=e*.04}set waveAmplitude(e){this._uniformsDirty=!0,this._waveAmplitude=e*.75}set colors(e){this._uniformsDirty=!0,this._colors=e,this._cachedColorRgb=e.map(i=>this._hexToRgb(i.color)),this._colorsChanged=!0}set highlights(e){this._uniformsDirty=!0,this._highlights=e/100}set shadows(e){this._uniformsDirty=!0,this._shadows=e/100}set colorSaturation(e){this._uniformsDirty=!0,this._saturation=e/10}set colorBrightness(e){this._uniformsDirty=!0,this._brightness=e}set colorBlending(e){this._uniformsDirty=!0,this._colorBlending=e/10}set grainScale(e){this._uniformsDirty=!0,this._grainScale=e==0?1:e}set grainIntensity(e){this._uniformsDirty=!0,this._grainIntensity=e}set grainSparsity(e){this._uniformsDirty=!0,this._grainSparsity=e}set grainSpeed(e){this._uniformsDirty=!0,this._grainSpeed=e}set wireframe(e){this._uniformsDirty=!0,this._wireframe=e}set resolution(e){if(this._uniformsDirty=!0,this.glState){const i=this.glState.gl;i.deleteProgram(this.glState.program),i.deleteBuffer(this.glState.buffers.position),i.deleteBuffer(this.glState.buffers.normal),i.deleteBuffer(this.glState.buffers.uv),i.deleteBuffer(this.glState.buffers.index),i.deleteBuffer(this.glState.buffers.wireframeIndex)}this.glState=this._initScene(e)}set backgroundColor(e){this._uniformsDirty=!0,this._backgroundColor=e,this._backgroundColorRgb=this._hexToRgb(e)}set backgroundAlpha(e){this._uniformsDirty=!0,this._backgroundAlpha=e}set yOffset(e){this._uniformsDirty=!0,this._yOffset=e}get yOffsetWaveMultiplier(){return this._yOffsetWaveMultiplier*1e3}set yOffsetWaveMultiplier(e){this._uniformsDirty=!0,this._yOffsetWaveMultiplier=e/1e3}get yOffsetColorMultiplier(){return this._yOffsetColorMultiplier*1e3}set yOffsetColorMultiplier(e){this._uniformsDirty=!0,this._yOffsetColorMultiplier=e/1e3}get yOffsetFlowMultiplier(){return this._yOffsetFlowMultiplier*1e3}set yOffsetFlowMultiplier(e){this._uniformsDirty=!0,this._yOffsetFlowMultiplier=e/1e3}set flowDistortionA(e){this._uniformsDirty=!0,this._flowDistortionA=e}set flowDistortionB(e){this._uniformsDirty=!0,this._flowDistortionB=e}set flowScale(e){this._uniformsDirty=!0,this._flowScale=e}set flowEase(e){this._uniformsDirty=!0,this._flowEase=e}set flowEnabled(e){this._uniformsDirty=!0,this._flowEnabled=e}get flowEnabled(){return this._flowEnabled}set enableProceduralTexture(e){this._uniformsDirty=!0,this._enableProceduralTexture=e,e&&!this._proceduralTexture&&(this._textureNeedsUpdate=!0)}set textureVoidLikelihood(e){this._uniformsDirty=!0,this._textureVoidLikelihood=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureVoidWidthMin(e){this._uniformsDirty=!0,this._textureVoidWidthMin=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureVoidWidthMax(e){this._uniformsDirty=!0,this._textureVoidWidthMax=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureBandDensity(e){this._uniformsDirty=!0,this._textureBandDensity=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureColorBlending(e){this._uniformsDirty=!0,this._textureColorBlending=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureSeed(e){this._uniformsDirty=!0,this._textureSeed=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}get textureEase(){return this._textureEase}set textureEase(e){this._uniformsDirty=!0,this._textureEase=e}set proceduralBackgroundColor(e){this._uniformsDirty=!0,this._proceduralBackgroundColor=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureShapeTriangles(e){this._uniformsDirty=!0,this._textureShapeTriangles=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureShapeCircles(e){this._uniformsDirty=!0,this._textureShapeCircles=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureShapeBars(e){this._uniformsDirty=!0,this._textureShapeBars=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureShapeSquiggles(e){this._uniformsDirty=!0,this._textureShapeSquiggles=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}_hexToRgb(e){const i=parseInt(e.replace("#",""),16);return[(i>>16&255)/255,(i>>8&255)/255,(i&255)/255]}_initScene(e){const i=this._ref.clientWidth,o=this._ref.clientHeight,t=this._ref.getContext("webgl2",{alpha:!0,preserveDrawingBuffer:!0,antialias:!0})||this._ref.getContext("webgl",{alpha:!0,preserveDrawingBuffer:!0,antialias:!0});if(!t)throw new Error("WebGL not supported");t.getExtension("OES_standard_derivatives"),t.getExtension("OES_element_index_uint"),t.viewport(0,0,i,o);const{position:b,normal:y,uv:n,index:p,wireframeIndex:v}=se(Y,H,240*e,240*e),T=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,T),t.bufferData(t.ARRAY_BUFFER,b,t.STATIC_DRAW);const x=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,x),t.bufferData(t.ARRAY_BUFFER,y,t.STATIC_DRAW);const h=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,h),t.bufferData(t.ARRAY_BUFFER,n,t.STATIC_DRAW);const w=t.createBuffer();t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,w),t.bufferData(t.ELEMENT_ARRAY_BUFFER,p,t.STATIC_DRAW);const R=t.createBuffer();t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,R),t.bufferData(t.ELEMENT_ARRAY_BUFFER,v,t.STATIC_DRAW),t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,w);const E=ie()+`
|
|
399
|
-
`+
|
|
400
|
-
`+
|
|
401
|
-
`+
|
|
402
|
-
`).map((S,
|
|
403
|
-
`)),console.log("VERTEX_SHADER_ERROR_END"));const
|
|
404
|
-
`+
|
|
405
|
-
`+
|
|
406
|
-
`+
|
|
407
|
-
`).map((S,
|
|
408
|
-
`)),console.log("FRAGMENT_SHADER_ERROR_END"));const l=t.createProgram();t.attachShader(l,g),t.attachShader(l,c),t.linkProgram(l),t.getProgramParameter(l,t.LINK_STATUS)||(console.log("PROGRAM_LINK_ERROR_START"),console.log("Program linking error: ",t.getProgramInfoLog(l)),console.log("GL Error Code:",t.getError()),console.log("PROGRAM_LINK_ERROR_END")),t.useProgram(l);const m=new oe(0,0,0,0,0,1e3);m.position=[0,0,5],j(m,i,o);const s=t.getAttribLocation(l,"position"),f=t.getAttribLocation(l,"normal"),_=t.getAttribLocation(l,"uv");t.enableVertexAttribArray(s),t.bindBuffer(t.ARRAY_BUFFER,T),t.vertexAttribPointer(s,3,t.FLOAT,!1,0,0),t.enableVertexAttribArray(f),t.bindBuffer(t.ARRAY_BUFFER,x),t.vertexAttribPointer(f,3,t.FLOAT,!1,0,0),t.enableVertexAttribArray(_),t.bindBuffer(t.ARRAY_BUFFER,h),t.vertexAttribPointer(_,2,t.FLOAT,!1,0,0),t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,w);const d=new G;d.translate(-m.position[0],-m.position[1],-m.position[2]),d.translate(0,0,-1),d.rotateX(-Math.PI/3.5);const P=t.getUniformLocation(l,"modelViewMatrix");t.uniformMatrix4fv(P,!1,d.elements);const C=t.getUniformLocation(l,"projectionMatrix");t.uniformMatrix4fv(C,!1,m.projectionMatrix.elements);const U=t.getUniformLocation(l,"u_plane_width");t.uniform1f(U,Y);const B=t.getUniformLocation(l,"u_plane_height");t.uniform1f(B,H);const k=t.getUniformLocation(l,"u_colors_count");t.uniform1i(k,O);const X=["u_time","u_resolution","u_color_pressure","u_wave_frequency_x","u_wave_frequency_y","u_wave_amplitude","u_colors_count","u_plane_width","u_plane_height","u_shadows","u_highlights","u_grain_intensity","u_grain_sparsity","u_grain_scale","u_grain_speed","u_flow_distortion_a","u_flow_distortion_b","u_flow_scale","u_flow_ease","u_flow_enabled","u_y_offset","u_y_offset_wave_multiplier","u_y_offset_color_multiplier","u_y_offset_flow_multiplier","u_procedural_texture","u_enable_procedural_texture","u_texture_ease","u_saturation","u_brightness","u_color_blending"],D={attributes:{position:s,normal:f,uv:_},uniforms:{}};X.forEach(S=>{D.uniforms[S]=t.getUniformLocation(l,S)});for(let S=0;S<O;S++)D.uniforms[`u_colors[${S}].is_active`]=t.getUniformLocation(l,`u_colors[${S}].is_active`),D.uniforms[`u_colors[${S}].color`]=t.getUniformLocation(l,`u_colors[${S}].color`),D.uniforms[`u_colors[${S}].influence`]=t.getUniformLocation(l,`u_colors[${S}].influence`);return this._initialized=!0,this._uniformsDirty=!0,this._colorsChanged=!0,this._textureDirty=!0,t.enable(t.BLEND),t.blendFunc(t.SRC_ALPHA,t.ONE_MINUS_SRC_ALPHA),t.enable(t.DEPTH_TEST),{gl:t,program:l,buffers:{position:T,normal:x,uv:h,index:w,wireframeIndex:R},locations:D,camera:m,indexCount:p.length,wireframeIndexCount:v.length,indexType:p instanceof Uint32Array?t.UNSIGNED_INT:t.UNSIGNED_SHORT}}_createProceduralTexture(e){const o=document.createElement("canvas");o.width=1024,o.height=1024;const t=o.getContext("2d",{willReadFrequently:!0});if(!t)return null;let b=this._textureSeed;const y=this._textureSeed;function n(){const s=Math.sin(b++)*1e4;return s-Math.floor(s)}const p=s=>{b=y+s},v=this._colors.filter(s=>s.enabled).map(s=>s.color);if(v.length===0)return null;function T(s){const f=parseInt(s.replace("#",""),16);return{r:f>>16&255,g:f>>8&255,b:f&255}}function x(s,f,_){return"#"+((1<<24)+(Math.round(s)<<16)+(Math.round(f)<<8)+Math.round(_)).toString(16).slice(1).padStart(6,"0")}const h=()=>{const s=v[Math.floor(n()*v.length)],f=v[Math.floor(n()*v.length)],_=n()*this._textureColorBlending,d=T(s),P=T(f),C=d.r+(P.r-d.r)*_,U=d.g+(P.g-d.g)*_,B=d.b+(P.b-d.b)*_;return x(C,U,B)},w=this._proceduralBackgroundColor||"#000000";t.fillStyle=w,t.fillRect(0,0,1024,1024);const R=t.createLinearGradient(0,0,0,1024);R.addColorStop(0,h()),R.addColorStop(1,h()),t.fillStyle=R,t.fillRect(0,0,1024,1024);for(let s=0;s<this._textureShapeTriangles;s++){t.fillStyle=h(),t.beginPath();const f=n()*1024,_=n()*1024,d=100+n()*300;t.moveTo(f,_),t.lineTo(f+(n()-.5)*d,_+(n()-.5)*d),t.lineTo(f+(n()-.5)*d,_+(n()-.5)*d),t.fill()}for(let s=0;s<this._textureShapeCircles;s++){t.strokeStyle=h(),t.lineWidth=10+n()*50,t.beginPath();const f=n()*1024,_=n()*1024,d=50+n()*150;t.arc(f,_,d,0,Math.PI*2),t.stroke()}for(let s=0;s<this._textureShapeBars;s++)t.fillStyle=h(),t.save(),t.translate(n()*1024,n()*1024),t.rotate(n()*Math.PI),t.fillRect(-150,-25,300,50),t.restore();t.lineWidth=15,t.lineCap="round";for(let s=0;s<this._textureShapeSquiggles;s++){t.strokeStyle=h(),t.beginPath();let f=n()*1024,_=n()*1024;t.moveTo(f,_);for(let d=0;d<4;d++)t.bezierCurveTo(f+(n()-.5)*300,_+(n()-.5)*300,f+(n()-.5)*300,_+(n()-.5)*300,f+(n()-.5)*300,_+(n()-.5)*300),f+=(n()-.5)*300,_+=(n()-.5)*300;t.stroke()}p(5e4);const E=document.createElement("canvas");E.width=1024,E.height=1024;const g=E.getContext("2d",{willReadFrequently:!0});if(!g)return null;g.fillStyle=w,g.fillRect(0,0,1024,1024);let A=0;const c=[];for(;A<1024;)if(n()<this._textureVoidLikelihood){const f=this._textureVoidWidthMin+n()*(this._textureVoidWidthMax-this._textureVoidWidthMin);c.push({type:"void",x:A,width:f}),A+=f}else{const f=50+n()*200;c.push({type:"matter",x:A,width:f}),A+=f}for(const s of c)if(s.type==="matter"){const f=s.x,_=Math.min(s.x+s.width,1024);let d=f;for(;d<_;){const P=(2+n()*20)/this._textureBandDensity,C=Math.floor(n()*1024);g.drawImage(o,C,0,P,1024,d,0,P,1024),d+=P}}const l=e.createTexture();e.bindTexture(e.TEXTURE_2D,l),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,E),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR_MIPMAP_LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.generateMipmap(e.TEXTURE_2D);const m=e.getExtension("EXT_texture_filter_anisotropic")||e.getExtension("MOZ_EXT_texture_filter_anisotropic")||e.getExtension("WEBKIT_EXT_texture_filter_anisotropic");if(m){const s=e.getParameter(m.MAX_TEXTURE_MAX_ANISOTROPY_EXT);e.texParameterf(e.TEXTURE_2D,m.TEXTURE_MAX_ANISOTROPY_EXT,Math.min(16,s))}return l}}const $=a=>{a.id=ne,a.href="https://neat.firecms.co",a.target="_blank",a.style.position="absolute",a.style.display="block",a.style.bottom="0",a.style.right="0",a.style.padding="10px",a.style.color="#dcdcdc",a.style.opacity="0.8",a.style.fontFamily="sans-serif",a.style.fontSize="16px",a.style.fontWeight="bold",a.style.textDecoration="none",a.style.zIndex="10000",a.style.pointerEvents="auto",a.setAttribute("data-n","1"),a.innerHTML="NEAT"},le=a=>{const e=a.parentElement;if(e&&getComputedStyle(e).position==="static"&&(e.style.position="relative"),e){const o=e.querySelector("a[data-n]");if(o)return $(o),o}const i=document.createElement("a");return $(i),e?.appendChild(i),i};function ue(){const a=new Date,e=a.getMinutes(),i=a.getSeconds();return e*60+i}function fe(a=6){const e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";let i="";for(let o=0;o<a;o++){const t=Math.floor(Math.random()*e.length);i+=e.charAt(t)}return i}function ce(a,e){const i=document.createElement("a");i.download=e,i.href=a,document.body.appendChild(i),i.click(),document.body.removeChild(i)}function _e(){if(document.getElementById("neat-seo-schema"))return;const a=document.createElement("script");a.id="neat-seo-schema",a.type="application/ld+json",a.text=JSON.stringify({"@context":"https://schema.org","@type":"WebSite",name:"NEAT Gradient",url:"https://neat.firecms.co",author:{"@type":"Organization",name:"FireCMS",url:"https://firecms.co"},description:"Beautiful, fast, heavily customizable, WebGL based gradients."}),document.head.appendChild(a);const e=document.createElement("div");e.style.position="absolute",e.style.width="1px",e.style.height="1px",e.style.padding="0",e.style.margin="-1px",e.style.overflow="hidden",e.style.clip="rect(0, 0, 0, 0)",e.style.whiteSpace="nowrap",e.style.borderWidth="0";try{const i=e.attachShadow({mode:"closed"}),o=document.createElement("a");o.href="https://firecms.co",o.textContent="FireCMS",i.appendChild(o)}catch{const o=document.createElement("a");o.href="https://firecms.co",o.textContent="FireCMS",e.appendChild(o)}document.body.appendChild(e)}F.NeatGradient=ae,Object.defineProperties(F,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
470
|
+
https://neat.firecms.co`,"font-weight: bold; font-size: 14px; color: #FF5772;","color: inherit;");const X=50,O=80,j=6,xe=Se();class ve{_ref;_speed=-1;_horizontalPressure=-1;_verticalPressure=-1;_waveFrequencyX=-1;_waveFrequencyY=-1;_waveAmplitude=-1;_shadows=-1;_highlights=-1;_saturation=-1;_brightness=-1;_grainScale=-1;_grainIntensity=-1;_grainSparsity=-1;_grainSpeed=-1;_colorBlending=-1;_resolution=1;_colors=[];_wireframe=!1;_backgroundColor="#FFFFFF";_backgroundColorRgb=[1,1,1];_backgroundAlpha=1;_flowDistortionA=0;_flowDistortionB=0;_flowScale=1;_flowEase=0;_flowEnabled=!0;glState;_enableProceduralTexture=!1;_textureVoidLikelihood=.45;_textureVoidWidthMin=200;_textureVoidWidthMax=486;_textureBandDensity=2.15;_textureColorBlending=.01;_textureSeed=333;_textureEase=.5;_transparentTextureVoid=!1;_domainWarpEnabled=!1;_domainWarpIntensity=.5;_domainWarpScale=1;_vignetteIntensity=.5;_vignetteRadius=.8;_fresnelEnabled=!1;_fresnelPower=2;_fresnelIntensity=.5;_fresnelColor="#FFFFFF";_fresnelColorRgb=[1,1,1];_iridescenceEnabled=!1;_iridescenceIntensity=.5;_iridescenceSpeed=1;_bloomIntensity=0;_bloomThreshold=.7;_chromaticAberration=0;_silhouetteFade=.25;_cylinderFade=.08;_ribbonFade=.05;_shapeType="plane";_shapeRotationX=0;_shapeRotationY=0;_shapeRotationZ=0;_shapeAutoRotateSpeedX=0;_shapeAutoRotateSpeedY=0;_sphereRadius=15;_torusRadius=15;_torusTube=5;_cylinderRadius=10;_cylinderHeight=40;_planeBend=0;_planeTwist=0;_cameraLock=!1;_cameraX=0;_cameraY=0;_cameraZ=0;_cameraRotationX=0;_cameraRotationY=0;_cameraRotationZ=0;_cameraZoom=1;_proceduralTexture=null;_proceduralBackgroundColor="#000000";_textureShapeTriangles=20;_textureShapeCircles=15;_textureShapeBars=15;_textureShapeSquiggles=10;requestRef=-1;sizeObserver;_initialized=!1;_linkElement=null;_cachedColorRgb=[];_yOffset=0;_yOffsetWaveMultiplier=.004;_yOffsetColorMultiplier=.004;_yOffsetFlowMultiplier=.004;_sourceCanvas=null;_sourceCtx=null;_maskedCanvas=null;_maskedCtx=null;_resizeTimeoutId=null;_textureNeedsUpdate=!1;_linkCheckCounter=0;_colorsChanged=!0;_uniformsDirty=!0;_textureDirty=!0;constructor(e){const{ref:i,speed:r=4,horizontalPressure:t=3,verticalPressure:y=3,waveFrequencyX:x=5,waveFrequencyY:o=5,waveAmplitude:l=3,colors:_,highlights:b=4,shadows:a=4,colorSaturation:h=0,colorBrightness:p=1,colorBlending:c=5,grainScale:f=2,grainIntensity:R=.55,grainSparsity:g=0,grainSpeed:v=.1,wireframe:w=!1,backgroundColor:u="#FFFFFF",backgroundAlpha:T=1,resolution:A=1,seed:M,yOffset:m=0,yOffsetWaveMultiplier:F=4,yOffsetColorMultiplier:D=4,yOffsetFlowMultiplier:z=4,flowDistortionA:C=0,flowDistortionB:P=0,flowScale:E=1,flowEase:S=0,flowEnabled:U=!0,enableProceduralTexture:B=!1,textureVoidLikelihood:W=.45,textureVoidWidthMin:I=200,textureVoidWidthMax:Y=486,textureBandDensity:Te=2.15,textureColorBlending:Ee=.01,textureSeed:Ae=333,textureEase:Fe=.5,proceduralBackgroundColor:ze="#000000",transparentTextureVoid:Me=!1,textureShapeTriangles:Ce=20,textureShapeCircles:De=15,textureShapeBars:Pe=15,textureShapeSquiggles:Ue=10,domainWarpEnabled:Ie=!1,domainWarpIntensity:Be=.5,domainWarpScale:Le=1,vignetteIntensity:We=0,vignetteRadius:Ne=.8,fresnelEnabled:Xe=!1,fresnelPower:Oe=2,fresnelIntensity:Ye=.5,fresnelColor:ke="#FFFFFF",iridescenceEnabled:Ve=!1,iridescenceIntensity:qe=.5,iridescenceSpeed:Ze=1,bloomIntensity:Ge=0,bloomThreshold:je=.7,chromaticAberration:He=0,silhouetteFade:$e=.25,cylinderFade:Ke=.08,ribbonFade:Je=.05,cameraLock:Qe=!1,cameraX:et=0,cameraY:tt=0,cameraZ:it=0,cameraRotationX:ot=0,cameraRotationY:rt=0,cameraRotationZ:st=0,cameraZoom:nt=1,shapeType:at="plane",shapeRotationX:lt=0,shapeRotationY:ut=0,shapeRotationZ:_t=0,shapeAutoRotateSpeedX:ct=0,shapeAutoRotateSpeedY:ht=0,sphereRadius:ft=15,torusRadius:dt=15,torusTube:mt=5,cylinderRadius:pt=10,cylinderHeight:gt=40,planeBend:yt=0,planeTwist:xt=0}=e;this._ref=i,this.destroy=this.destroy.bind(this),this._initScene=this._initScene.bind(this),this.speed=r,this.horizontalPressure=t,this.verticalPressure=y,this.waveFrequencyX=x,this.waveFrequencyY=o,this.waveAmplitude=l,this.colorBlending=c,this._resolution=A,this.grainScale=f,this.grainIntensity=R,this.grainSparsity=g,this.grainSpeed=v,this.colors=_,this.shadows=a,this.highlights=b,this.colorSaturation=h,this.colorBrightness=p,this.wireframe=w,this.backgroundColor=u,this.backgroundAlpha=T,this.yOffset=m,this.yOffsetWaveMultiplier=F,this.yOffsetColorMultiplier=D,this.yOffsetFlowMultiplier=z,this.flowDistortionA=C,this.flowDistortionB=P,this.flowScale=E,this.flowEase=S,this.flowEnabled=U,this.enableProceduralTexture=B,this.textureVoidLikelihood=W,this.textureVoidWidthMin=I,this.textureVoidWidthMax=Y,this.textureBandDensity=Te,this.textureColorBlending=Ee,this.textureSeed=Ae,this.textureEase=Fe,this._proceduralBackgroundColor=ze,this.transparentTextureVoid=Me,this._textureShapeTriangles=Ce,this._textureShapeCircles=De,this._textureShapeBars=Pe,this._textureShapeSquiggles=Ue,this.domainWarpEnabled=Ie,this.domainWarpIntensity=Be,this.domainWarpScale=Le,this.vignetteIntensity=We,this.vignetteRadius=Ne,this.fresnelEnabled=Xe,this.fresnelPower=Oe,this.fresnelIntensity=Ye,this.fresnelColor=ke,this.iridescenceEnabled=Ve,this.iridescenceIntensity=qe,this.iridescenceSpeed=Ze,this.bloomIntensity=Ge,this.bloomThreshold=je,this.chromaticAberration=He,this.silhouetteFade=$e,this.cylinderFade=Ke,this.ribbonFade=Je,this._cameraLock=Qe,this._cameraX=et,this._cameraY=tt,this._cameraZ=it,this._cameraRotationX=ot,this._cameraRotationY=rt,this._cameraRotationZ=st,this._cameraZoom=nt,this._shapeType=at,this._shapeRotationX=lt,this._shapeRotationY=ut,this._shapeRotationZ=_t,this._shapeAutoRotateSpeedX=ct,this._shapeAutoRotateSpeedY=ht,this._sphereRadius=ft,this._torusRadius=dt,this._torusTube=mt,this._cylinderRadius=pt,this._cylinderHeight=gt,this._planeBend=yt,this._planeTwist=xt,this.glState=this._initScene(A),Re();let H=M!==void 0?M:we(),ue=performance.now();const _e=()=>{const{gl:n,program:$,locations:d,indexCount:q,indexType:Z}=this.glState;if(this._linkCheckCounter++,this._linkCheckCounter>=300&&(this._linkCheckCounter=0,(!this._linkElement||!document.contains(this._linkElement))&&(this._linkElement=be(i))),this._initialized){const ce=performance.now();H+=(ce-ue)/1e3*this._speed,ue=ce,n.useProgram($),n.uniform1f(d.uniforms.u_time,H);const K=this.glState.camera,N=new te;N.translate(-K.position[0]-this._cameraX,-K.position[1]-this._cameraY,-K.position[2]-this._cameraZ),N.translate(0,0,-1),N.rotateX(-this._cameraRotationX),N.rotateY(-this._cameraRotationY),N.rotateZ(-this._cameraRotationZ);let J=this._shapeRotationX,he=this._shapeRotationY,bt=this._shapeRotationZ;this._shapeAutoRotateSpeedX!==0&&(J+=H*this._shapeAutoRotateSpeedX*.1),this._shapeAutoRotateSpeedY!==0&&(he+=H*this._shapeAutoRotateSpeedY*.1),this._shapeType==="plane"||this._shapeType==="ribbon"?N.rotateX(J-Math.PI/3.5):N.rotateX(J),N.rotateY(he),N.rotateZ(bt);const fe=d.uniforms.modelViewMatrix;if(fe&&n.uniformMatrix4fv(fe,!1,N.elements),this._uniformsDirty){n.uniform2f(d.uniforms.u_resolution,this._ref.clientWidth,this._ref.clientHeight),n.uniform2f(d.uniforms.u_color_pressure,this._horizontalPressure,this._verticalPressure),n.uniform1f(d.uniforms.u_wave_frequency_x,this._waveFrequencyX),n.uniform1f(d.uniforms.u_wave_frequency_y,this._waveFrequencyY),n.uniform1f(d.uniforms.u_wave_amplitude,this._waveAmplitude),n.uniform1f(d.uniforms.u_color_blending,this._colorBlending),n.uniform1f(d.uniforms.u_shadows,this._shadows),n.uniform1f(d.uniforms.u_highlights,this._highlights),n.uniform1f(d.uniforms.u_saturation,this._saturation),n.uniform1f(d.uniforms.u_brightness,this._brightness),n.uniform1f(d.uniforms.u_grain_intensity,this._grainIntensity),n.uniform1f(d.uniforms.u_grain_sparsity,this._grainSparsity),n.uniform1f(d.uniforms.u_grain_speed,this._grainSpeed),n.uniform1f(d.uniforms.u_grain_scale,this._grainScale),n.uniform1f(d.uniforms.u_y_offset,this._yOffset),n.uniform1f(d.uniforms.u_y_offset_wave_multiplier,this._yOffsetWaveMultiplier),n.uniform1f(d.uniforms.u_y_offset_color_multiplier,this._yOffsetColorMultiplier),n.uniform1f(d.uniforms.u_y_offset_flow_multiplier,this._yOffsetFlowMultiplier),n.uniform1f(d.uniforms.u_flow_distortion_a,this._flowDistortionA),n.uniform1f(d.uniforms.u_flow_distortion_b,this._flowDistortionB),n.uniform1f(d.uniforms.u_flow_scale,this._flowScale),n.uniform1f(d.uniforms.u_flow_ease,this._flowEase),n.uniform1f(d.uniforms.u_flow_enabled,this._flowEnabled?1:0);let L=0;this._shapeType==="sphere"?L=1:this._shapeType==="torus"?L=2:this._shapeType==="cylinder"?L=3:this._shapeType==="ribbon"&&(L=4),n.uniform1f(d.uniforms.u_shape_type,L),n.uniform1f(d.uniforms.u_enable_procedural_texture,this._enableProceduralTexture?1:0),n.uniform1f(d.uniforms.u_texture_ease,this._textureEase),n.uniform1f(d.uniforms.u_transparent_texture_void,this._transparentTextureVoid?1:0),n.uniform1f(d.uniforms.u_domain_warp_enabled,this._domainWarpEnabled?1:0),n.uniform1f(d.uniforms.u_domain_warp_intensity,this._domainWarpIntensity),n.uniform1f(d.uniforms.u_domain_warp_scale,this._domainWarpScale),n.uniform1f(d.uniforms.u_vignette_intensity,this._vignetteIntensity),n.uniform1f(d.uniforms.u_vignette_radius,this._vignetteRadius),n.uniform1f(d.uniforms.u_fresnel_enabled,this._fresnelEnabled?1:0),n.uniform1f(d.uniforms.u_fresnel_power,this._fresnelPower),n.uniform1f(d.uniforms.u_fresnel_intensity,this._fresnelIntensity),n.uniform3fv(d.uniforms.u_fresnel_color,this._fresnelColorRgb),n.uniform1f(d.uniforms.u_iridescence_enabled,this._iridescenceEnabled?1:0),n.uniform1f(d.uniforms.u_iridescence_intensity,this._iridescenceIntensity),n.uniform1f(d.uniforms.u_iridescence_speed,this._iridescenceSpeed),n.uniform1f(d.uniforms.u_bloom_intensity,this._bloomIntensity),n.uniform1f(d.uniforms.u_bloom_threshold,this._bloomThreshold),n.uniform1f(d.uniforms.u_chromatic_aberration,this._chromaticAberration),n.uniform1f(d.uniforms.u_silhouette_fade,this._silhouetteFade),n.uniform1f(d.uniforms.u_cylinder_fade,this._cylinderFade),n.uniform1f(d.uniforms.u_ribbon_fade,this._ribbonFade),this._uniformsDirty=!1}if(this._textureNeedsUpdate&&this._enableProceduralTexture&&(this._proceduralTexture&&n.deleteTexture(this._proceduralTexture),this._proceduralTexture=this._createProceduralTexture(n),this._textureNeedsUpdate=!1,this._textureDirty=!0),this._textureDirty&&this._proceduralTexture&&(n.activeTexture(n.TEXTURE1),n.bindTexture(n.TEXTURE_2D,this._proceduralTexture),n.uniform1i(d.uniforms.u_procedural_texture,1),this._textureDirty=!1),this._colorsChanged){this._colorsChanged=!1;for(let L=0;L<j;L++)if(L<this._colors.length){const de=this._colors[L],wt=this._cachedColorRgb[L]||[0,0,0];n.uniform1f(d.uniforms[`u_colors[${L}].is_active`],de.enabled?1:0),n.uniform3fv(d.uniforms[`u_colors[${L}].color`],wt),n.uniform1f(d.uniforms[`u_colors[${L}].influence`],de.influence||0)}else n.uniform1f(d.uniforms[`u_colors[${L}].is_active`],0);n.uniform1i(d.uniforms.u_colors_count,j)}}n.clearColor(this._backgroundColorRgb[0],this._backgroundColorRgb[1],this._backgroundColorRgb[2],this._backgroundAlpha),n.clear(n.COLOR_BUFFER_BIT|n.DEPTH_BUFFER_BIT),this._wireframe?(n.bindBuffer(n.ELEMENT_ARRAY_BUFFER,this.glState.buffers.wireframeIndex),n.drawElements(n.LINES,this.glState.wireframeIndexCount,Z,0),n.bindBuffer(n.ELEMENT_ARRAY_BUFFER,this.glState.buffers.index)):n.drawElements(n.TRIANGLES,q,Z,0),this.requestRef=requestAnimationFrame(_e)},vt=()=>{const{gl:n,camera:$}=this.glState,d=this._ref.clientWidth,q=this._ref.clientHeight;this._ref.width=d,this._ref.height=q,n.viewport(0,0,d,q),G($,d,q,X,O,this._shapeType,this._cameraZoom);const Z=this.glState.locations.uniforms.projectionMatrix;n.useProgram(this.glState.program),Z&&n.uniformMatrix4fv(Z,!1,$.projectionMatrix.elements)};this.sizeObserver=new ResizeObserver(()=>{this._resizeTimeoutId!==null&&clearTimeout(this._resizeTimeoutId),this._resizeTimeoutId=window.setTimeout(()=>{vt(),this._resizeTimeoutId=null},100)}),this.sizeObserver.observe(i),_e()}destroy(){if(cancelAnimationFrame(this.requestRef),this.sizeObserver.disconnect(),this._resizeTimeoutId!==null&&(clearTimeout(this._resizeTimeoutId),this._resizeTimeoutId=null),this._linkElement&&this._linkElement.parentElement&&(this._linkElement.parentElement.removeChild(this._linkElement),this._linkElement=null),this.glState){const e=this.glState.gl;e.deleteProgram(this.glState.program),e.deleteBuffer(this.glState.buffers.position),e.deleteBuffer(this.glState.buffers.normal),e.deleteBuffer(this.glState.buffers.uv),e.deleteBuffer(this.glState.buffers.index),e.deleteBuffer(this.glState.buffers.wireframeIndex)}this._proceduralTexture&&this.glState&&this.glState.gl.deleteTexture(this._proceduralTexture)}downloadAsPNG(e="neat.png"){const i=this._ref.toDataURL("image/png");le(i,e)}recordVideo(e={}){const{durationMs:i=5e3,filename:r="neat.firecms.co",format:t,onProgress:y,onComplete:x}=e,o=this._ref,l=e.width||o.width||o.clientWidth,_=e.height||o.height||o.clientHeight,b=document.createElement("canvas");b.width=l,b.height=_;const a=b.getContext("2d"),h=b.captureStream(0),p=h.getVideoTracks()[0],c=["video/mp4;codecs=avc1","video/mp4;codecs=avc1,opus","video/mp4"],f=["video/webm;codecs=vp9,opus","video/webm;codecs=vp9","video/webm;codecs=vp8,opus","video/webm"];let R;t==="mp4"?R=[...c,...f]:t==="webm"?R=[...f,...c]:R=[...c,...f];let g="video/webm";for(const E of R)if(MediaRecorder.isTypeSupported(E)){g=E;break}const v=l*_,w=8e6,u=1280*720,T=Math.round(w*Math.max(1,v/u)),A=new MediaRecorder(h,{mimeType:g,videoBitsPerSecond:T}),M=[];A.ondataavailable=E=>{E.data.size>0&&M.push(E.data)};let m=!1,F;const D=performance.now();let z=0;const C=()=>{if(m)return;a.clearRect(0,0,l,_),a.drawImage(o,0,0,l,_);const E=Math.max(14,Math.round(_*.025));if(a.font=`bold ${E}px "Sofia Sans", sans-serif`,a.textAlign="right",a.textBaseline="bottom",a.shadowColor="rgba(0,0,0,0.5)",a.shadowBlur=4,a.shadowOffsetX=1,a.shadowOffsetY=1,a.fillStyle="rgba(255,255,255,0.7)",a.fillText("NEAT",l-E*.8,_-E*.5),a.shadowColor="transparent",a.shadowBlur=0,a.shadowOffsetX=0,a.shadowOffsetY=0,p.requestFrame&&p.requestFrame(),y){const S=performance.now();S-z>250&&(z=S,y(Math.min(.99,(S-D)/i)))}F=requestAnimationFrame(C)};A.onstop=()=>{m=!0,cancelAnimationFrame(F);const E=g.startsWith("video/mp4"),S=E?".mp4":".webm",U=E?"video/mp4":"video/webm",B=r+S,W=new Blob(M,{type:U}),I=URL.createObjectURL(W);le(I,B),setTimeout(()=>URL.revokeObjectURL(I),3e4),y?.(1),x?.()},C(),A.start(100);const P=window.setTimeout(()=>{A.state==="recording"&&A.stop()},i);return()=>{clearTimeout(P),A.state==="recording"&&A.stop()}}get speed(){return this._speed*20}set speed(e){this._uniformsDirty=!0,this._speed=e/20}get horizontalPressure(){return this._horizontalPressure*4}set horizontalPressure(e){this._uniformsDirty=!0,this._horizontalPressure=e/4}get verticalPressure(){return this._verticalPressure*4}set verticalPressure(e){this._uniformsDirty=!0,this._verticalPressure=e/4}get waveFrequencyX(){return this._waveFrequencyX/.04}set waveFrequencyX(e){this._uniformsDirty=!0,this._waveFrequencyX=e*.04}get waveFrequencyY(){return this._waveFrequencyY/.04}set waveFrequencyY(e){this._uniformsDirty=!0,this._waveFrequencyY=e*.04}get waveAmplitude(){return this._waveAmplitude/.75}set waveAmplitude(e){this._uniformsDirty=!0,this._waveAmplitude=e*.75}get colors(){return this._colors}set colors(e){this._uniformsDirty=!0,this._colors=e,this._cachedColorRgb=e.map(i=>this._hexToRgb(i.color)),this._colorsChanged=!0}get highlights(){return this._highlights*100}set highlights(e){this._uniformsDirty=!0,this._highlights=e/100}get shadows(){return this._shadows*100}set shadows(e){this._uniformsDirty=!0,this._shadows=e/100}get colorSaturation(){return this._saturation*10}set colorSaturation(e){this._uniformsDirty=!0,this._saturation=e/10}get colorBrightness(){return this._brightness}set colorBrightness(e){this._uniformsDirty=!0,this._brightness=e}get colorBlending(){return this._colorBlending*10}set colorBlending(e){this._uniformsDirty=!0,this._colorBlending=e/10}get grainScale(){return this._grainScale}set grainScale(e){this._uniformsDirty=!0,this._grainScale=e==0?1:e}get grainIntensity(){return this._grainIntensity}set grainIntensity(e){this._uniformsDirty=!0,this._grainIntensity=e}get grainSparsity(){return this._grainSparsity}set grainSparsity(e){this._uniformsDirty=!0,this._grainSparsity=e}get grainSpeed(){return this._grainSpeed}set grainSpeed(e){this._uniformsDirty=!0,this._grainSpeed=e}get wireframe(){return this._wireframe}set wireframe(e){this._uniformsDirty=!0,this._wireframe=e}get resolution(){return this._resolution}set resolution(e){this._resolution!==e&&(this._resolution=e,this._updateGeometry())}get backgroundColor(){return this._backgroundColor}set backgroundColor(e){this._uniformsDirty=!0,this._backgroundColor=e,this._backgroundColorRgb=this._hexToRgb(e)}get backgroundAlpha(){return this._backgroundAlpha}set backgroundAlpha(e){this._uniformsDirty=!0,this._backgroundAlpha=e}get yOffset(){return this._yOffset}set yOffset(e){this._uniformsDirty=!0,this._yOffset=e}get yOffsetWaveMultiplier(){return this._yOffsetWaveMultiplier*1e3}set yOffsetWaveMultiplier(e){this._uniformsDirty=!0,this._yOffsetWaveMultiplier=e/1e3}get yOffsetColorMultiplier(){return this._yOffsetColorMultiplier*1e3}set yOffsetColorMultiplier(e){this._uniformsDirty=!0,this._yOffsetColorMultiplier=e/1e3}get yOffsetFlowMultiplier(){return this._yOffsetFlowMultiplier*1e3}set yOffsetFlowMultiplier(e){this._uniformsDirty=!0,this._yOffsetFlowMultiplier=e/1e3}get flowDistortionA(){return this._flowDistortionA}set flowDistortionA(e){this._uniformsDirty=!0,this._flowDistortionA=e}get flowDistortionB(){return this._flowDistortionB}set flowDistortionB(e){this._uniformsDirty=!0,this._flowDistortionB=e}get flowScale(){return this._flowScale}set flowScale(e){this._uniformsDirty=!0,this._flowScale=e}get flowEase(){return this._flowEase}set flowEase(e){this._uniformsDirty=!0,this._flowEase=e}set flowEnabled(e){this._uniformsDirty=!0,this._flowEnabled=e}get flowEnabled(){return this._flowEnabled}get enableProceduralTexture(){return this._enableProceduralTexture}set enableProceduralTexture(e){this._uniformsDirty=!0,this._enableProceduralTexture=e,e&&!this._proceduralTexture&&(this._textureNeedsUpdate=!0)}get textureVoidLikelihood(){return this._textureVoidLikelihood}set textureVoidLikelihood(e){this._uniformsDirty=!0,this._textureVoidLikelihood=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}get textureVoidWidthMin(){return this._textureVoidWidthMin}set textureVoidWidthMin(e){this._uniformsDirty=!0,this._textureVoidWidthMin=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}get textureVoidWidthMax(){return this._textureVoidWidthMax}set textureVoidWidthMax(e){this._uniformsDirty=!0,this._textureVoidWidthMax=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}get textureBandDensity(){return this._textureBandDensity}set textureBandDensity(e){this._uniformsDirty=!0,this._textureBandDensity=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}get textureColorBlending(){return this._textureColorBlending}set textureColorBlending(e){this._uniformsDirty=!0,this._textureColorBlending=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}get textureSeed(){return this._textureSeed}set textureSeed(e){this._uniformsDirty=!0,this._textureSeed=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}get textureEase(){return this._textureEase}set textureEase(e){this._uniformsDirty=!0,this._textureEase=e}get transparentTextureVoid(){return this._transparentTextureVoid}set transparentTextureVoid(e){this._uniformsDirty=!0,this._transparentTextureVoid=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}get proceduralBackgroundColor(){return this._proceduralBackgroundColor}set proceduralBackgroundColor(e){this._uniformsDirty=!0,this._proceduralBackgroundColor=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}get textureShapeTriangles(){return this._textureShapeTriangles}set textureShapeTriangles(e){this._uniformsDirty=!0,this._textureShapeTriangles=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}get textureShapeCircles(){return this._textureShapeCircles}set textureShapeCircles(e){this._uniformsDirty=!0,this._textureShapeCircles=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}get textureShapeBars(){return this._textureShapeBars}set textureShapeBars(e){this._uniformsDirty=!0,this._textureShapeBars=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}get textureShapeSquiggles(){return this._textureShapeSquiggles}set textureShapeSquiggles(e){this._uniformsDirty=!0,this._textureShapeSquiggles=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}_updateGeometry(){if(!this.glState)return;const e=this.glState.gl,i=this._resolution||1;let r;this._shapeType==="sphere"?r=oe(this._sphereRadius,120*i,120*i):this._shapeType==="torus"?r=re(this._torusRadius,this._torusTube,120*i,120*i):this._shapeType==="cylinder"?r=se(this._cylinderRadius,this._cylinderRadius,this._cylinderHeight,120*i,120*i):this._shapeType==="ribbon"?r=ne(X,O,240*i,240*i,this._planeBend,this._planeTwist):r=ie(X,O,240*i,240*i);const{position:t,normal:y,uv:x,index:o,wireframeIndex:l}=r;e.bindBuffer(e.ARRAY_BUFFER,this.glState.buffers.position),e.bufferData(e.ARRAY_BUFFER,t,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,this.glState.buffers.normal),e.bufferData(e.ARRAY_BUFFER,y,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,this.glState.buffers.uv),e.bufferData(e.ARRAY_BUFFER,x,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,this.glState.buffers.index),e.bufferData(e.ELEMENT_ARRAY_BUFFER,o,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,this.glState.buffers.wireframeIndex),e.bufferData(e.ELEMENT_ARRAY_BUFFER,l,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,this.glState.buffers.index),this.glState.indexCount=o.length,this.glState.wireframeIndexCount=l.length,this.glState.indexType=o instanceof Uint32Array?e.UNSIGNED_INT:e.UNSIGNED_SHORT;const _=this._ref.clientWidth,b=this._ref.clientHeight;G(this.glState.camera,_,b,X,O,this._shapeType,this._cameraZoom);const a=this.glState.locations.uniforms.projectionMatrix;e.useProgram(this.glState.program),a&&e.uniformMatrix4fv(a,!1,this.glState.camera.projectionMatrix.elements),this._uniformsDirty=!0}_hexToRgb(e){const i=parseInt(e.replace("#",""),16);return[(i>>16&255)/255,(i>>8&255)/255,(i&255)/255]}_initScene(e){const i=this._ref.clientWidth,r=this._ref.clientHeight,t=this._ref.getContext("webgl2",{alpha:!0,preserveDrawingBuffer:!0,antialias:!0})||this._ref.getContext("webgl",{alpha:!0,preserveDrawingBuffer:!0,antialias:!0});if(!t)throw new Error("WebGL not supported");t.getExtension("OES_standard_derivatives"),t.getExtension("OES_element_index_uint"),t.viewport(0,0,i,r);let y;this._shapeType==="sphere"?y=oe(this._sphereRadius,120*e,120*e):this._shapeType==="torus"?y=re(this._torusRadius,this._torusTube,120*e,120*e):this._shapeType==="cylinder"?y=se(this._cylinderRadius,this._cylinderRadius,this._cylinderHeight,120*e,120*e):this._shapeType==="ribbon"?y=ne(X,O,240*e,240*e,this._planeBend,this._planeTwist):y=ie(X,O,240*e,240*e);const{position:x,normal:o,uv:l,index:_,wireframeIndex:b}=y,a=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,a),t.bufferData(t.ARRAY_BUFFER,x,t.STATIC_DRAW);const h=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,h),t.bufferData(t.ARRAY_BUFFER,o,t.STATIC_DRAW);const p=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,p),t.bufferData(t.ARRAY_BUFFER,l,t.STATIC_DRAW);const c=t.createBuffer();t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,c),t.bufferData(t.ELEMENT_ARRAY_BUFFER,_,t.STATIC_DRAW);const f=t.createBuffer();t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,f),t.bufferData(t.ELEMENT_ARRAY_BUFFER,b,t.STATIC_DRAW),t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,c);const R=pe()+`
|
|
471
|
+
`+Q()+`
|
|
472
|
+
`+ee()+`
|
|
473
|
+
`+V,g=t.createShader(t.VERTEX_SHADER);t.shaderSource(g,R),t.compileShader(g),t.getShaderParameter(g,t.COMPILE_STATUS)||(console.log("VERTEX_SHADER_ERROR_START"),console.log("Vertex shader error: ",t.getShaderInfoLog(g)),console.log("GL Error Code:",t.getError()),console.log("Vertex Shader Source Dump:"),console.log(R.split(`
|
|
474
|
+
`).map((S,U)=>`${U+1}: ${S}`).join(`
|
|
475
|
+
`)),console.log("VERTEX_SHADER_ERROR_END"));const v=ge()+`
|
|
476
|
+
`+ee()+`
|
|
477
|
+
`+Q()+`
|
|
478
|
+
`+me,w=t.createShader(t.FRAGMENT_SHADER);t.shaderSource(w,v),t.compileShader(w),t.getShaderParameter(w,t.COMPILE_STATUS)||(console.log("FRAGMENT_SHADER_ERROR_START"),console.log("Fragment shader error: ",t.getShaderInfoLog(w)),console.log("GL Error Code:",t.getError()),console.log("Fragment Shader Source Dump:"),console.log(v.split(`
|
|
479
|
+
`).map((S,U)=>`${U+1}: ${S}`).join(`
|
|
480
|
+
`)),console.log("FRAGMENT_SHADER_ERROR_END"));const u=t.createProgram();t.attachShader(u,g),t.attachShader(u,w),t.linkProgram(u),t.getProgramParameter(u,t.LINK_STATUS)||(console.log("PROGRAM_LINK_ERROR_START"),console.log("Program linking error: ",t.getProgramInfoLog(u)),console.log("GL Error Code:",t.getError()),console.log("PROGRAM_LINK_ERROR_END")),t.useProgram(u);const T=new ye(0,0,0,0,0,1e3);T.position=[0,0,5],G(T,i,r,X,O,this._shapeType,this._cameraZoom);const A=t.getAttribLocation(u,"position"),M=t.getAttribLocation(u,"normal"),m=t.getAttribLocation(u,"uv");t.enableVertexAttribArray(A),t.bindBuffer(t.ARRAY_BUFFER,a),t.vertexAttribPointer(A,3,t.FLOAT,!1,0,0),t.enableVertexAttribArray(M),t.bindBuffer(t.ARRAY_BUFFER,h),t.vertexAttribPointer(M,3,t.FLOAT,!1,0,0),t.enableVertexAttribArray(m),t.bindBuffer(t.ARRAY_BUFFER,p),t.vertexAttribPointer(m,2,t.FLOAT,!1,0,0),t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,c);const F=t.getUniformLocation(u,"projectionMatrix");t.uniformMatrix4fv(F,!1,T.projectionMatrix.elements);const D=t.getUniformLocation(u,"u_plane_width");t.uniform1f(D,X);const z=t.getUniformLocation(u,"u_plane_height");t.uniform1f(z,O);const C=t.getUniformLocation(u,"u_colors_count");t.uniform1i(C,j);const P=["projectionMatrix","modelViewMatrix","u_time","u_resolution","u_color_pressure","u_wave_frequency_x","u_wave_frequency_y","u_wave_amplitude","u_colors_count","u_plane_width","u_plane_height","u_shadows","u_highlights","u_grain_intensity","u_grain_sparsity","u_grain_scale","u_grain_speed","u_flow_distortion_a","u_flow_distortion_b","u_flow_scale","u_flow_ease","u_flow_enabled","u_y_offset","u_y_offset_wave_multiplier","u_y_offset_color_multiplier","u_y_offset_flow_multiplier","u_procedural_texture","u_enable_procedural_texture","u_texture_ease","u_transparent_texture_void","u_saturation","u_brightness","u_color_blending","u_domain_warp_enabled","u_domain_warp_intensity","u_domain_warp_scale","u_vignette_intensity","u_vignette_radius","u_fresnel_enabled","u_fresnel_power","u_fresnel_intensity","u_fresnel_color","u_iridescence_enabled","u_iridescence_intensity","u_iridescence_speed","u_bloom_intensity","u_bloom_threshold","u_chromatic_aberration","u_shape_type","u_silhouette_fade","u_cylinder_fade","u_ribbon_fade"],E={attributes:{position:A,normal:M,uv:m},uniforms:{}};P.forEach(S=>{E.uniforms[S]=t.getUniformLocation(u,S)});for(let S=0;S<j;S++)E.uniforms[`u_colors[${S}].is_active`]=t.getUniformLocation(u,`u_colors[${S}].is_active`),E.uniforms[`u_colors[${S}].color`]=t.getUniformLocation(u,`u_colors[${S}].color`),E.uniforms[`u_colors[${S}].influence`]=t.getUniformLocation(u,`u_colors[${S}].influence`);return this._initialized=!0,this._uniformsDirty=!0,this._colorsChanged=!0,this._textureDirty=!0,t.enable(t.BLEND),t.blendFunc(t.SRC_ALPHA,t.ONE_MINUS_SRC_ALPHA),t.enable(t.DEPTH_TEST),{gl:t,program:u,buffers:{position:a,normal:h,uv:p,index:c,wireframeIndex:f},locations:E,camera:T,indexCount:_.length,wireframeIndexCount:b.length,indexType:_ instanceof Uint32Array?t.UNSIGNED_INT:t.UNSIGNED_SHORT}}_createProceduralTexture(e){this._sourceCanvas||(this._sourceCanvas=document.createElement("canvas"),this._sourceCanvas.width=1024,this._sourceCanvas.height=1024,this._sourceCtx=this._sourceCanvas.getContext("2d"));const r=this._sourceCanvas,t=this._sourceCtx;if(!t)return null;let y=this._textureSeed;const x=this._textureSeed;function o(){const m=Math.sin(y++)*1e4;return m-Math.floor(m)}const l=m=>{y=x+m},_=this._colors.filter(m=>m.enabled).map(m=>m.color);if(_.length===0)return null;const b=this._shapeType!=="plane",a=b?[-1,0,1]:[0],h=b?[-1,0,1]:[0];function p(m){const F=parseInt(m.replace("#",""),16);return{r:F>>16&255,g:F>>8&255,b:F&255}}function c(m,F,D){return"#"+((1<<24)+(Math.round(m)<<16)+(Math.round(F)<<8)+Math.round(D)).toString(16).slice(1).padStart(6,"0")}const f=()=>{const m=_[Math.floor(o()*_.length)],F=_[Math.floor(o()*_.length)],D=o()*this._textureColorBlending,z=p(m),C=p(F),P=z.r+(C.r-z.r)*D,E=z.g+(C.g-z.g)*D,S=z.b+(C.b-z.b)*D;return c(P,E,S)},R=this._proceduralBackgroundColor||"#000000";t.fillStyle=R,t.fillRect(0,0,1024,1024);const g=t.createLinearGradient(0,0,0,1024);g.addColorStop(0,f()),g.addColorStop(1,f()),t.fillStyle=g,t.fillRect(0,0,1024,1024);for(let m=0;m<this._textureShapeTriangles;m++){const F=f(),D=o()*1024,z=o()*1024,C=100+o()*300,P=(o()-.5)*C,E=(o()-.5)*C,S=(o()-.5)*C,U=(o()-.5)*C;for(const B of a)for(const W of h){t.fillStyle=F,t.beginPath();const I=D+B*1024,Y=z+W*1024;t.moveTo(I,Y),t.lineTo(I+P,Y+E),t.lineTo(I+S,Y+U),t.fill()}}for(let m=0;m<this._textureShapeCircles;m++){const F=f(),D=10+o()*50,z=o()*1024,C=o()*1024,P=50+o()*150;for(const E of a)for(const S of h)t.strokeStyle=F,t.lineWidth=D,t.beginPath(),t.arc(z+E*1024,C+S*1024,P,0,Math.PI*2),t.stroke()}for(let m=0;m<this._textureShapeBars;m++){const F=f(),D=o()*1024,z=o()*1024,C=o()*Math.PI;for(const P of a)for(const E of h)t.fillStyle=F,t.save(),t.translate(D+P*1024,z+E*1024),t.rotate(C),t.fillRect(-150,-25,300,50),t.restore()}t.lineWidth=15,t.lineCap="round";for(let m=0;m<this._textureShapeSquiggles;m++){const F=f(),D=o()*1024,z=o()*1024,C=[];let P=0,E=0;for(let S=0;S<4;S++){const U=P+(o()-.5)*300,B=E+(o()-.5)*300;C.push({cx1:P+(o()-.5)*300,cy1:E+(o()-.5)*300,cx2:P+(o()-.5)*300,cy2:E+(o()-.5)*300,ex:U,ey:B}),P=U,E=B}for(const S of a)for(const U of h){t.strokeStyle=F,t.beginPath();const B=D+S*1024,W=z+U*1024;t.moveTo(B,W);for(const I of C)t.bezierCurveTo(B+I.cx1,W+I.cy1,B+I.cx2,W+I.cy2,B+I.ex,W+I.ey);t.stroke()}}l(5e4),this._maskedCanvas||(this._maskedCanvas=document.createElement("canvas"),this._maskedCanvas.width=1024,this._maskedCanvas.height=1024,this._maskedCtx=this._maskedCanvas.getContext("2d"));const v=this._maskedCanvas,w=this._maskedCtx;if(!w)return null;this._transparentTextureVoid?w.clearRect(0,0,1024,1024):(w.fillStyle=R,w.fillRect(0,0,1024,1024));let u=0;const T=[];for(;u<1024;)if(o()<this._textureVoidLikelihood){const F=this._textureVoidWidthMin+o()*(this._textureVoidWidthMax-this._textureVoidWidthMin);T.push({type:"void",x:u,width:F}),u+=F}else{const F=50+o()*200;T.push({type:"matter",x:u,width:F}),u+=F}for(const m of T)if(m.type==="matter"){const F=m.x,D=Math.min(m.x+m.width,1024);let z=F;for(;z<D;){const C=(2+o()*20)/this._textureBandDensity,P=Math.floor(o()*1024);w.drawImage(r,P,0,C,1024,z,0,C,1024),z+=C}}const A=e.createTexture();e.bindTexture(e.TEXTURE_2D,A),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,v),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR_MIPMAP_LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.generateMipmap(e.TEXTURE_2D);const M=e.getExtension("EXT_texture_filter_anisotropic")||e.getExtension("MOZ_EXT_texture_filter_anisotropic")||e.getExtension("WEBKIT_EXT_texture_filter_anisotropic");if(M){const m=e.getParameter(M.MAX_TEXTURE_MAX_ANISOTROPY_EXT);e.texParameterf(e.TEXTURE_2D,M.TEXTURE_MAX_ANISOTROPY_EXT,Math.min(16,m))}return A}get silhouetteFade(){return this._silhouetteFade}set silhouetteFade(e){this._silhouetteFade!==e&&(this._silhouetteFade=e,this._uniformsDirty=!0)}get cylinderFade(){return this._cylinderFade}set cylinderFade(e){this._cylinderFade!==e&&(this._cylinderFade=e,this._uniformsDirty=!0)}get ribbonFade(){return this._ribbonFade}set ribbonFade(e){this._ribbonFade!==e&&(this._ribbonFade=e,this._uniformsDirty=!0)}get domainWarpEnabled(){return this._domainWarpEnabled}set domainWarpEnabled(e){this._domainWarpEnabled!==e&&(this._domainWarpEnabled=e,this._uniformsDirty=!0)}get domainWarpIntensity(){return this._domainWarpIntensity}set domainWarpIntensity(e){this._domainWarpIntensity!==e&&(this._domainWarpIntensity=e,this._uniformsDirty=!0)}get domainWarpScale(){return this._domainWarpScale}set domainWarpScale(e){this._domainWarpScale!==e&&(this._domainWarpScale=e,this._uniformsDirty=!0)}get vignetteIntensity(){return this._vignetteIntensity}set vignetteIntensity(e){this._vignetteIntensity!==e&&(this._vignetteIntensity=e,this._uniformsDirty=!0)}get vignetteRadius(){return this._vignetteRadius}set vignetteRadius(e){this._vignetteRadius!==e&&(this._vignetteRadius=e,this._uniformsDirty=!0)}get fresnelEnabled(){return this._fresnelEnabled}set fresnelEnabled(e){this._fresnelEnabled!==e&&(this._fresnelEnabled=e,this._uniformsDirty=!0)}get fresnelPower(){return this._fresnelPower}set fresnelPower(e){this._fresnelPower!==e&&(this._fresnelPower=e,this._uniformsDirty=!0)}get fresnelIntensity(){return this._fresnelIntensity}set fresnelIntensity(e){this._fresnelIntensity!==e&&(this._fresnelIntensity=e,this._uniformsDirty=!0)}get fresnelColor(){return this._fresnelColor}set fresnelColor(e){this._fresnelColor!==e&&(this._fresnelColor=e,this._fresnelColorRgb=this._hexToRgb(e),this._uniformsDirty=!0)}get iridescenceEnabled(){return this._iridescenceEnabled}set iridescenceEnabled(e){this._iridescenceEnabled!==e&&(this._iridescenceEnabled=e,this._uniformsDirty=!0)}get iridescenceIntensity(){return this._iridescenceIntensity}set iridescenceIntensity(e){this._iridescenceIntensity!==e&&(this._iridescenceIntensity=e,this._uniformsDirty=!0)}get iridescenceSpeed(){return this._iridescenceSpeed}set iridescenceSpeed(e){this._iridescenceSpeed!==e&&(this._iridescenceSpeed=e,this._uniformsDirty=!0)}get bloomIntensity(){return this._bloomIntensity}set bloomIntensity(e){this._bloomIntensity!==e&&(this._bloomIntensity=e,this._uniformsDirty=!0)}get bloomThreshold(){return this._bloomThreshold}set bloomThreshold(e){this._bloomThreshold!==e&&(this._bloomThreshold=e,this._uniformsDirty=!0)}get chromaticAberration(){return this._chromaticAberration}set chromaticAberration(e){this._chromaticAberration!==e&&(this._chromaticAberration=e,this._uniformsDirty=!0)}get shapeType(){return this._shapeType}set shapeType(e){this._shapeType!==e&&(this._shapeType=e,this._updateGeometry())}get shapeRotationX(){return this._shapeRotationX}set shapeRotationX(e){this._shapeRotationX=e,this._uniformsDirty=!0}get shapeRotationY(){return this._shapeRotationY}set shapeRotationY(e){this._shapeRotationY=e,this._uniformsDirty=!0}get shapeRotationZ(){return this._shapeRotationZ}set shapeRotationZ(e){this._shapeRotationZ=e,this._uniformsDirty=!0}get shapeAutoRotateSpeedX(){return this._shapeAutoRotateSpeedX}set shapeAutoRotateSpeedX(e){this._shapeAutoRotateSpeedX=e,this._uniformsDirty=!0}get shapeAutoRotateSpeedY(){return this._shapeAutoRotateSpeedY}set shapeAutoRotateSpeedY(e){this._shapeAutoRotateSpeedY=e,this._uniformsDirty=!0}get sphereRadius(){return this._sphereRadius}set sphereRadius(e){this._sphereRadius!==e&&(this._sphereRadius=e,this._updateGeometry())}get torusRadius(){return this._torusRadius}set torusRadius(e){this._torusRadius!==e&&(this._torusRadius=e,this._updateGeometry())}get torusTube(){return this._torusTube}set torusTube(e){this._torusTube!==e&&(this._torusTube=e,this._updateGeometry())}get cylinderRadius(){return this._cylinderRadius}set cylinderRadius(e){this._cylinderRadius!==e&&(this._cylinderRadius=e,this._updateGeometry())}get cylinderHeight(){return this._cylinderHeight}set cylinderHeight(e){this._cylinderHeight!==e&&(this._cylinderHeight=e,this._updateGeometry())}get planeBend(){return this._planeBend}set planeBend(e){this._planeBend!==e&&(this._planeBend=e,this._updateGeometry())}get planeTwist(){return this._planeTwist}set planeTwist(e){this._planeTwist!==e&&(this._planeTwist=e,this._updateGeometry())}get cameraLock(){return this._cameraLock}set cameraLock(e){this._cameraLock=e}get cameraX(){return this._cameraX}set cameraX(e){this._cameraX=e,this._uniformsDirty=!0}get cameraY(){return this._cameraY}set cameraY(e){this._cameraY=e,this._uniformsDirty=!0}get cameraZ(){return this._cameraZ}set cameraZ(e){this._cameraZ=e,this._uniformsDirty=!0}get cameraRotationX(){return this._cameraRotationX}set cameraRotationX(e){this._cameraRotationX=e,this._uniformsDirty=!0}get cameraRotationY(){return this._cameraRotationY}set cameraRotationY(e){this._cameraRotationY=e,this._uniformsDirty=!0}get cameraRotationZ(){return this._cameraRotationZ}set cameraRotationZ(e){this._cameraRotationZ=e,this._uniformsDirty=!0}get cameraZoom(){return this._cameraZoom}set cameraZoom(e){this._cameraZoom!==e&&(this._cameraZoom=e,this._updateCameraFrustum())}_updateCameraFrustum(){if(!this.glState)return;const e=this.glState.gl,i=this._ref.clientWidth,r=this._ref.clientHeight;G(this.glState.camera,i,r,X,O,this._shapeType,this._cameraZoom);const t=this.glState.locations.uniforms.projectionMatrix;e.useProgram(this.glState.program),t&&e.uniformMatrix4fv(t,!1,this.glState.camera.projectionMatrix.elements),this._uniformsDirty=!0}}const ae=s=>{s.id=xe,s.href="https://neat.firecms.co",s.target="_blank",s.style.position="absolute",s.style.display="block",s.style.bottom="0",s.style.right="0",s.style.padding="10px",s.style.color="#dcdcdc",s.style.opacity="0.8",s.style.fontFamily="sans-serif",s.style.fontSize="16px",s.style.fontWeight="bold",s.style.textDecoration="none",s.style.zIndex="10000",s.style.pointerEvents="auto",s.setAttribute("data-n","1"),s.innerHTML="NEAT"},be=s=>{const e=s.parentElement;if(e&&getComputedStyle(e).position==="static"&&(e.style.position="relative"),e){const r=e.querySelector("a[data-n]");if(r)return ae(r),r}const i=document.createElement("a");return ae(i),e?.appendChild(i),i};function we(){const s=new Date,e=s.getMinutes(),i=s.getSeconds();return e*60+i}function Se(s=6){const e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";let i="";for(let r=0;r<s;r++){const t=Math.floor(Math.random()*e.length);i+=e.charAt(t)}return i}function le(s,e){const i=document.createElement("a");i.download=e,i.href=s,document.body.appendChild(i),i.click(),document.body.removeChild(i)}function Re(){if(document.getElementById("neat-seo-schema"))return;const s=document.createElement("script");s.id="neat-seo-schema",s.type="application/ld+json",s.text=JSON.stringify({"@context":"https://schema.org","@type":"WebSite",name:"NEAT Gradient",url:"https://neat.firecms.co",author:{"@type":"Organization",name:"FireCMS",url:"https://firecms.co"},description:"Beautiful, fast, heavily customizable, WebGL based gradients."}),document.head.appendChild(s);const e=document.createElement("div");e.style.position="absolute",e.style.width="1px",e.style.height="1px",e.style.padding="0",e.style.margin="-1px",e.style.overflow="hidden",e.style.clip="rect(0, 0, 0, 0)",e.style.whiteSpace="nowrap",e.style.borderWidth="0";try{const i=e.attachShadow({mode:"closed"}),r=document.createElement("a");r.href="https://firecms.co",r.textContent="FireCMS",i.appendChild(r)}catch{const r=document.createElement("a");r.href="https://firecms.co",r.textContent="FireCMS",e.appendChild(r)}document.body.appendChild(e)}k.NeatGradient=ve,Object.defineProperties(k,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
409
481
|
//# sourceMappingURL=index.umd.js.map
|