@remotion/effects 4.0.539 → 4.0.541
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/THIRD_PARTY_LICENSES.md +15 -0
- package/dist/barrel-distortion/webgpu-shader.d.ts +1 -0
- package/dist/bevel-alpha/webgpu-shaders.d.ts +2 -0
- package/dist/burlap-webgpu-shader.d.ts +1 -0
- package/dist/checkerboard-webgpu-shader.d.ts +1 -0
- package/dist/chromatic-aberration/webgpu-shader.d.ts +1 -0
- package/dist/color-correction-webgpu-shader-utils.d.ts +4 -0
- package/dist/color-key-webgpu-shader.d.ts +1 -0
- package/dist/color-matrix-runtime.d.ts +4 -0
- package/dist/contour-lines-webgpu-shader.d.ts +1 -0
- package/dist/corner-pin/webgpu-shader.d.ts +1 -0
- package/dist/cylinder/webgl-shader.d.ts +1 -0
- package/dist/dot-grid-webgpu-shader.d.ts +1 -0
- package/dist/drop-shadow/webgpu-shaders.d.ts +2 -0
- package/dist/emboss-webgpu-shader.d.ts +1 -0
- package/dist/esm/barrel-distortion.mjs +67 -118
- package/dist/esm/bevel-alpha.mjs +247 -196
- package/dist/esm/blur.mjs +101 -115
- package/dist/esm/brightness.mjs +65 -132
- package/dist/esm/burlap.mjs +178 -151
- package/dist/esm/checkerboard.mjs +6 -514
- package/dist/esm/chromatic-aberration.mjs +72 -119
- package/dist/esm/color-correction.mjs +186 -224
- package/dist/esm/color-key.mjs +149 -136
- package/dist/esm/contour-lines.mjs +201 -160
- package/dist/esm/contrast.mjs +65 -132
- package/dist/esm/corner-pin.mjs +4 -390
- package/dist/esm/curves.mjs +195 -211
- package/dist/esm/cylinder.mjs +108 -225
- package/dist/esm/dot-grid.mjs +184 -213
- package/dist/esm/drop-shadow.mjs +162 -180
- package/dist/esm/duotone.mjs +110 -143
- package/dist/esm/emboss.mjs +153 -151
- package/dist/esm/evolve.mjs +228 -154
- package/dist/esm/exposure.mjs +93 -201
- package/dist/esm/film-burn.mjs +298 -0
- package/dist/esm/fisheye.mjs +97 -126
- package/dist/esm/flannel.mjs +158 -156
- package/dist/esm/fractal-noise.mjs +186 -232
- package/dist/esm/glow.mjs +164 -179
- package/dist/esm/grayscale.mjs +56 -122
- package/dist/esm/gridlines.mjs +6 -575
- package/dist/esm/halftone-linear-gradient.mjs +246 -245
- package/dist/esm/halftone.mjs +267 -243
- package/dist/esm/hue.mjs +55 -122
- package/dist/esm/index-00v3hr66.mjs +299 -0
- package/dist/esm/index-0w4eqht8.mjs +351 -0
- package/dist/esm/index-18y0zcy2.mjs +440 -0
- package/dist/esm/index-1m1b1ad7.mjs +520 -0
- package/dist/esm/index-34fxm3ax.mjs +518 -0
- package/dist/esm/index-4fvp93ps.mjs +32 -0
- package/dist/esm/index-4scpn12x.mjs +224 -0
- package/dist/esm/index-4z6pt3ka.mjs +104 -0
- package/dist/esm/index-618ky75w.mjs +51 -0
- package/dist/esm/index-6agxdrvr.mjs +411 -0
- package/dist/esm/index-6jkps947.mjs +120 -0
- package/dist/esm/index-8agtsbw4.mjs +617 -0
- package/dist/esm/index-8jx11jyn.mjs +29 -0
- package/dist/esm/index-8p04sssx.mjs +123 -0
- package/dist/esm/index-afdtmrh2.mjs +596 -0
- package/dist/esm/index-b86qstcs.mjs +18 -0
- package/dist/esm/index-cb77qg3g.mjs +587 -0
- package/dist/esm/index-cdp7tr8x.mjs +122 -0
- package/dist/esm/index-evy8hyah.mjs +55 -0
- package/dist/esm/index-gnsce796.mjs +6 -0
- package/dist/esm/index-kkvzt8b7.mjs +199 -0
- package/dist/esm/index-r0v18b2n.mjs +425 -0
- package/dist/esm/index-rswpzmm5.mjs +926 -0
- package/dist/esm/index-s9mrx750.mjs +97 -0
- package/dist/esm/index-tvfexb7s.mjs +164 -0
- package/dist/esm/index-vp56k1gj.mjs +215 -0
- package/dist/esm/index-wxhvgv2s.mjs +79 -0
- package/dist/esm/index-wy95a41r.mjs +407 -0
- package/dist/esm/index-ysnwfc4t.mjs +306 -0
- package/dist/esm/index.mjs +49 -4053
- package/dist/esm/invert.mjs +54 -122
- package/dist/esm/iris-wipe.mjs +315 -0
- package/dist/esm/lens-blur.mjs +169 -156
- package/dist/esm/levels.mjs +134 -151
- package/dist/esm/light-leak.mjs +6 -416
- package/dist/esm/light-trail.mjs +124 -128
- package/dist/esm/linear-gradient-tint.mjs +4 -424
- package/dist/esm/linear-gradient.mjs +4 -370
- package/dist/esm/linear-progressive-blur.mjs +92 -118
- package/dist/esm/linear-progressive-pixelate.mjs +83 -378
- package/dist/esm/lines.mjs +167 -162
- package/dist/esm/liquid-contours.mjs +192 -153
- package/dist/esm/long-shadows.mjs +278 -251
- package/dist/esm/lut.mjs +123 -23
- package/dist/esm/mirror.mjs +78 -120
- package/dist/esm/noise-displacement.mjs +156 -151
- package/dist/esm/noise.mjs +107 -143
- package/dist/esm/outline.mjs +192 -170
- package/dist/esm/page-turn.mjs +141 -244
- package/dist/esm/paper.mjs +522 -194
- package/dist/esm/pattern.mjs +4 -568
- package/dist/esm/pixel-dissolve.mjs +158 -186
- package/dist/esm/pixelate.mjs +92 -149
- package/dist/esm/radial-progressive-blur.mjs +96 -118
- package/dist/esm/radial-progressive-pixelate.mjs +91 -384
- package/dist/esm/radial-wipe.mjs +224 -0
- package/dist/esm/rain-fall.mjs +114 -0
- package/dist/esm/region-blur.mjs +138 -192
- package/dist/esm/rings.mjs +6 -512
- package/dist/esm/roughen-edges.mjs +180 -156
- package/dist/esm/saturation.mjs +56 -122
- package/dist/esm/scale.mjs +50 -60
- package/dist/esm/scanlines.mjs +115 -149
- package/dist/esm/shadows-highlights.mjs +103 -205
- package/dist/esm/shatter.mjs +133 -153
- package/dist/esm/shine.mjs +192 -227
- package/dist/esm/shrinkwrap.mjs +388 -225
- package/dist/esm/skew.mjs +100 -145
- package/dist/esm/snow-fall.mjs +170 -0
- package/dist/esm/speckle.mjs +192 -210
- package/dist/esm/sphere.mjs +101 -225
- package/dist/esm/starburst.mjs +6 -345
- package/dist/esm/tear.mjs +138 -155
- package/dist/esm/thermal-vision.mjs +135 -152
- package/dist/esm/tile.mjs +5 -184
- package/dist/esm/tint.mjs +80 -132
- package/dist/esm/translate.mjs +55 -137
- package/dist/esm/turbulent-displace.mjs +182 -221
- package/dist/esm/tv-signal-off.mjs +140 -149
- package/dist/esm/venetian-blinds.mjs +91 -140
- package/dist/esm/vibrance.mjs +95 -204
- package/dist/esm/vignette.mjs +136 -155
- package/dist/esm/wave.mjs +88 -47
- package/dist/esm/waves.mjs +181 -169
- package/dist/esm/white-balance.mjs +100 -204
- package/dist/esm/white-noise.mjs +98 -146
- package/dist/esm/zigzag.mjs +6 -575
- package/dist/esm/zoom-blur.mjs +90 -121
- package/dist/evolve.d.ts +46 -10
- package/dist/film-burn-webgpu-shader.d.ts +1 -0
- package/dist/film-burn.d.ts +40 -0
- package/dist/fisheye/webgpu-shader.d.ts +1 -0
- package/dist/flannel-webgpu-shader.d.ts +1 -0
- package/dist/fractal-noise/shader.d.ts +1 -1
- package/dist/fractal-noise/webgpu-shader.d.ts +1 -0
- package/dist/gaussian-blur-webgpu-shader.d.ts +1 -0
- package/dist/glow/webgpu-shaders.d.ts +2 -0
- package/dist/gridlines-webgpu-shader.d.ts +1 -0
- package/dist/halftone-linear-gradient-webgpu-shader.d.ts +1 -0
- package/dist/halftone-webgpu-shader.d.ts +1 -0
- package/dist/iris-wipe.d.ts +78 -0
- package/dist/lens-blur/webgpu-shader.d.ts +1 -0
- package/dist/light-leak-webgpu-shader.d.ts +1 -0
- package/dist/light-trail/webgpu-shader.d.ts +1 -0
- package/dist/linear-gradient-tint-webgpu-shader.d.ts +1 -0
- package/dist/linear-gradient-webgpu-shader.d.ts +1 -0
- package/dist/lines-webgpu-shader.d.ts +1 -0
- package/dist/liquid-contours-webgpu-shader.d.ts +1 -0
- package/dist/long-shadows-webgpu-shaders.d.ts +2 -0
- package/dist/lut/webgpu-shader.d.ts +1 -0
- package/dist/mirror/webgpu-shader.d.ts +1 -0
- package/dist/noise-displacement-webgpu-shader.d.ts +1 -0
- package/dist/noise-webgpu-shader.d.ts +1 -0
- package/dist/outline/webgpu-shader.d.ts +1 -0
- package/dist/page-turn/webgl-shader.d.ts +1 -0
- package/dist/paper-webgpu-shader.d.ts +2 -0
- package/dist/pattern-webgpu-shader.d.ts +1 -0
- package/dist/pixel-dissolve-webgpu-shader.d.ts +1 -0
- package/dist/progressive-pixelate-runtime.d.ts +1 -0
- package/dist/radial-wipe.d.ts +19 -0
- package/dist/rain-fall.d.ts +143 -0
- package/dist/rect-transform-runtime.d.ts +11 -0
- package/dist/region-blur/webgpu-shader.d.ts +1 -0
- package/dist/rings-webgpu-shader.d.ts +1 -0
- package/dist/roughen-edges-webgpu-shader.d.ts +1 -0
- package/dist/shatter/webgpu-shader.d.ts +1 -0
- package/dist/shine-webgpu-shader.d.ts +1 -0
- package/dist/shrinkwrap-webgpu-shader.d.ts +1 -0
- package/dist/single-pass-runtime.d.ts +18 -0
- package/dist/skew-webgpu-shader.d.ts +1 -0
- package/dist/snow-fall.d.ts +208 -0
- package/dist/speckle-webgpu-shader.d.ts +1 -0
- package/dist/sphere/webgl-shader.d.ts +1 -0
- package/dist/starburst-webgpu-shader.d.ts +1 -0
- package/dist/tear-webgpu-shader.d.ts +1 -0
- package/dist/thermal-vision-webgpu-shader.d.ts +1 -0
- package/dist/tile-gpu-runtime.d.ts +24 -0
- package/dist/turbulent-displace/webgpu-shader.d.ts +1 -0
- package/dist/value-noise-webgpu-shader.d.ts +1 -0
- package/dist/vignette-webgpu-shader.d.ts +1 -0
- package/dist/wave/wave-runtime.d.ts +2 -1
- package/dist/wave/webgpu-shader.d.ts +1 -0
- package/dist/waves-webgpu-shader.d.ts +1 -0
- package/dist/weather/params.d.ts +149 -0
- package/dist/weather/runtime.d.ts +52 -0
- package/dist/weather/shaders.d.ts +4 -0
- package/dist/weather/webgpu-runtime.d.ts +36 -0
- package/dist/weather/webgpu-shader.d.ts +1 -0
- package/dist/webgl-projection-runtime.d.ts +18 -0
- package/dist/webgpu-color-state.d.ts +10 -0
- package/dist/webgpu-mesh-runtime.d.ts +46 -0
- package/dist/webgpu-multipass-runtime.d.ts +50 -0
- package/dist/webgpu-projection-runtime.d.ts +9 -5
- package/dist/webgpu-single-pass-runtime.d.ts +47 -0
- package/dist/white-noise-webgpu-shader.d.ts +1 -0
- package/dist/zigzag-webgpu-shader.d.ts +1 -0
- package/dist/zoom-blur/webgpu-shader.d.ts +1 -0
- package/package.json +43 -3
|
@@ -0,0 +1,926 @@
|
|
|
1
|
+
import {
|
|
2
|
+
assertOptionalFiniteNumber,
|
|
3
|
+
parseColorRgba
|
|
4
|
+
} from "./index-wxhvgv2s.mjs";
|
|
5
|
+
import {
|
|
6
|
+
WEBGPU_SINGLE_PASS_VERTEX
|
|
7
|
+
} from "./index-tvfexb7s.mjs";
|
|
8
|
+
import {
|
|
9
|
+
assertEffectParamsObject,
|
|
10
|
+
assertRequiredFiniteNumber,
|
|
11
|
+
assertOptionalColor,
|
|
12
|
+
assertOptionalBoolean
|
|
13
|
+
} from "./index-4fvp93ps.mjs";
|
|
14
|
+
|
|
15
|
+
// src/weather/params.ts
|
|
16
|
+
var COMMON_WEATHER_DEFAULTS = {
|
|
17
|
+
time: 0,
|
|
18
|
+
sceneDepth: 5000,
|
|
19
|
+
spread: 0,
|
|
20
|
+
compositeWithOriginal: true,
|
|
21
|
+
offset: [0.5, 0.5],
|
|
22
|
+
seed: 0
|
|
23
|
+
};
|
|
24
|
+
var createWeatherSchema = (defaults, maxSpeed, maxWind) => ({
|
|
25
|
+
time: {
|
|
26
|
+
type: "number",
|
|
27
|
+
min: 0,
|
|
28
|
+
max: 10,
|
|
29
|
+
step: 0.01,
|
|
30
|
+
default: defaults.time,
|
|
31
|
+
description: "Time",
|
|
32
|
+
hiddenFromList: false
|
|
33
|
+
},
|
|
34
|
+
size: {
|
|
35
|
+
type: "number",
|
|
36
|
+
min: 0,
|
|
37
|
+
max: 50,
|
|
38
|
+
step: 0.01,
|
|
39
|
+
default: defaults.size,
|
|
40
|
+
description: "Size",
|
|
41
|
+
hiddenFromList: false
|
|
42
|
+
},
|
|
43
|
+
sceneDepth: {
|
|
44
|
+
type: "number",
|
|
45
|
+
min: 0,
|
|
46
|
+
max: 20000,
|
|
47
|
+
step: 1,
|
|
48
|
+
default: defaults.sceneDepth,
|
|
49
|
+
description: "Scene depth",
|
|
50
|
+
hiddenFromList: false
|
|
51
|
+
},
|
|
52
|
+
speed: {
|
|
53
|
+
type: "number",
|
|
54
|
+
min: 0,
|
|
55
|
+
max: maxSpeed,
|
|
56
|
+
step: 1,
|
|
57
|
+
default: defaults.speed,
|
|
58
|
+
description: "Speed",
|
|
59
|
+
hiddenFromList: false
|
|
60
|
+
},
|
|
61
|
+
wind: {
|
|
62
|
+
type: "number",
|
|
63
|
+
min: -maxWind,
|
|
64
|
+
max: maxWind,
|
|
65
|
+
step: 1,
|
|
66
|
+
default: defaults.wind,
|
|
67
|
+
description: "Wind",
|
|
68
|
+
hiddenFromList: false
|
|
69
|
+
},
|
|
70
|
+
windVariation: {
|
|
71
|
+
type: "number",
|
|
72
|
+
min: 0,
|
|
73
|
+
max: 1,
|
|
74
|
+
step: 0.01,
|
|
75
|
+
default: defaults.windVariation,
|
|
76
|
+
description: "Wind variation",
|
|
77
|
+
hiddenFromList: false
|
|
78
|
+
},
|
|
79
|
+
spread: {
|
|
80
|
+
type: "number",
|
|
81
|
+
min: 0,
|
|
82
|
+
max: 1000,
|
|
83
|
+
step: 1,
|
|
84
|
+
default: defaults.spread,
|
|
85
|
+
description: "Spread",
|
|
86
|
+
hiddenFromList: false
|
|
87
|
+
},
|
|
88
|
+
opacity: {
|
|
89
|
+
type: "number",
|
|
90
|
+
min: 0,
|
|
91
|
+
max: 1,
|
|
92
|
+
step: 0.01,
|
|
93
|
+
default: defaults.opacity,
|
|
94
|
+
description: "Opacity",
|
|
95
|
+
hiddenFromList: false
|
|
96
|
+
},
|
|
97
|
+
color: { type: "color", default: defaults.color, description: "Color" },
|
|
98
|
+
transferMode: {
|
|
99
|
+
type: "enum",
|
|
100
|
+
variants: { composite: {}, lighten: {} },
|
|
101
|
+
default: defaults.transferMode,
|
|
102
|
+
description: "Transfer mode"
|
|
103
|
+
},
|
|
104
|
+
compositeWithOriginal: {
|
|
105
|
+
type: "boolean",
|
|
106
|
+
default: defaults.compositeWithOriginal,
|
|
107
|
+
description: "Composite with original"
|
|
108
|
+
},
|
|
109
|
+
offset: {
|
|
110
|
+
type: "uv-coordinate",
|
|
111
|
+
step: 0.01,
|
|
112
|
+
default: defaults.offset,
|
|
113
|
+
description: "Offset"
|
|
114
|
+
},
|
|
115
|
+
seed: {
|
|
116
|
+
type: "number",
|
|
117
|
+
min: 0,
|
|
118
|
+
max: 4294967295,
|
|
119
|
+
step: 1,
|
|
120
|
+
integer: true,
|
|
121
|
+
default: defaults.seed,
|
|
122
|
+
description: "Seed",
|
|
123
|
+
hiddenFromList: false
|
|
124
|
+
}
|
|
125
|
+
});
|
|
126
|
+
var resolveWeatherParams = (params, defaults) => ({
|
|
127
|
+
time: params.time ?? defaults.time,
|
|
128
|
+
size: params.size ?? defaults.size,
|
|
129
|
+
sceneDepth: params.sceneDepth ?? defaults.sceneDepth,
|
|
130
|
+
speed: params.speed ?? defaults.speed,
|
|
131
|
+
wind: params.wind ?? defaults.wind,
|
|
132
|
+
windVariation: params.windVariation ?? defaults.windVariation,
|
|
133
|
+
spread: params.spread ?? defaults.spread,
|
|
134
|
+
color: params.color ?? defaults.color,
|
|
135
|
+
opacity: params.opacity ?? defaults.opacity,
|
|
136
|
+
transferMode: params.transferMode ?? defaults.transferMode,
|
|
137
|
+
compositeWithOriginal: params.compositeWithOriginal ?? defaults.compositeWithOriginal,
|
|
138
|
+
offset: params.offset ?? defaults.offset,
|
|
139
|
+
seed: params.seed ?? defaults.seed
|
|
140
|
+
});
|
|
141
|
+
var validateWeatherRange = (value, name, min, max) => {
|
|
142
|
+
assertOptionalFiniteNumber(value, name);
|
|
143
|
+
if (value === undefined)
|
|
144
|
+
return;
|
|
145
|
+
if (value < min || max !== null && value > max) {
|
|
146
|
+
throw new TypeError(`"${name}" must be ${max === null ? `at least ${min}` : `between ${min} and ${max}`}, but got ${value}`);
|
|
147
|
+
}
|
|
148
|
+
};
|
|
149
|
+
var validateWeatherParams = (params, label, maxSpeed, maxWind) => {
|
|
150
|
+
assertEffectParamsObject(params, label);
|
|
151
|
+
validateWeatherRange(params.time, "time", 0, null);
|
|
152
|
+
validateWeatherRange(params.size, "size", 0, 50);
|
|
153
|
+
validateWeatherRange(params.sceneDepth, "sceneDepth", 0, 20000);
|
|
154
|
+
validateWeatherRange(params.speed, "speed", 0, maxSpeed);
|
|
155
|
+
validateWeatherRange(params.wind, "wind", -maxWind, maxWind);
|
|
156
|
+
validateWeatherRange(params.windVariation, "windVariation", 0, 1);
|
|
157
|
+
validateWeatherRange(params.spread, "spread", 0, 1000);
|
|
158
|
+
validateWeatherRange(params.opacity, "opacity", 0, 1);
|
|
159
|
+
assertOptionalColor(params.color, "color");
|
|
160
|
+
assertOptionalBoolean(params.compositeWithOriginal, "compositeWithOriginal");
|
|
161
|
+
assertOptionalFiniteNumber(params.seed, "seed");
|
|
162
|
+
if (params.seed !== undefined && (!Number.isInteger(params.seed) || params.seed < 0 || params.seed > 4294967295)) {
|
|
163
|
+
throw new TypeError('"seed" must be an unsigned 32-bit integer');
|
|
164
|
+
}
|
|
165
|
+
if (params.transferMode !== undefined && params.transferMode !== "composite" && params.transferMode !== "lighten") {
|
|
166
|
+
throw new TypeError('"transferMode" must be "composite" or "lighten"');
|
|
167
|
+
}
|
|
168
|
+
if (params.offset !== undefined) {
|
|
169
|
+
if (!Array.isArray(params.offset) || params.offset.length !== 2) {
|
|
170
|
+
throw new TypeError('"offset" must be a [number, number] tuple');
|
|
171
|
+
}
|
|
172
|
+
assertRequiredFiniteNumber(params.offset[0], "offset[0]");
|
|
173
|
+
assertRequiredFiniteNumber(params.offset[1], "offset[1]");
|
|
174
|
+
}
|
|
175
|
+
};
|
|
176
|
+
|
|
177
|
+
// src/weather/runtime.ts
|
|
178
|
+
import { Internals } from "remotion";
|
|
179
|
+
|
|
180
|
+
// src/weather/shaders.ts
|
|
181
|
+
var WEATHER_VERTEX_SHADER = `#version 300 es
|
|
182
|
+
precision highp float;
|
|
183
|
+
precision highp int;
|
|
184
|
+
|
|
185
|
+
uniform sampler2D uSource;
|
|
186
|
+
uniform vec2 uResolution;
|
|
187
|
+
uniform int uSnow;
|
|
188
|
+
uniform float uTime;
|
|
189
|
+
uniform uint uSeed;
|
|
190
|
+
uniform vec2 uOffset;
|
|
191
|
+
uniform float uSize;
|
|
192
|
+
uniform float uSizeVariation;
|
|
193
|
+
uniform float uSceneDepth;
|
|
194
|
+
uniform float uSpeed;
|
|
195
|
+
uniform float uSpeedVariation;
|
|
196
|
+
uniform float uWind;
|
|
197
|
+
uniform float uWindVariation;
|
|
198
|
+
uniform float uSpread;
|
|
199
|
+
uniform float uWiggleAmount;
|
|
200
|
+
uniform float uWiggleAmountVariation;
|
|
201
|
+
uniform float uWiggleFrequency;
|
|
202
|
+
uniform float uWiggleFrequencyVariation;
|
|
203
|
+
uniform vec4 uColor;
|
|
204
|
+
uniform float uOpacity;
|
|
205
|
+
uniform int uRefract;
|
|
206
|
+
|
|
207
|
+
flat out vec2 vPosition;
|
|
208
|
+
flat out vec2 vLine;
|
|
209
|
+
flat out float vRadius;
|
|
210
|
+
flat out vec4 vColor;
|
|
211
|
+
|
|
212
|
+
float noise(uint i, uint key) {
|
|
213
|
+
uint h = i * 0x8da6b343u ^ key * 0xd8163841u ^ uSeed * 0xcb1ab31fu;
|
|
214
|
+
h ^= h >> 13;
|
|
215
|
+
h *= 0x5bd1e995u;
|
|
216
|
+
h ^= h >> 15;
|
|
217
|
+
return float(h & 0x00ffffffu) / 16777216.0;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
float signedNoise(uint i, uint key) {
|
|
221
|
+
return noise(i, key) * 2.0 - 1.0;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
float wrap(float value, float margin, float size) {
|
|
225
|
+
return -margin + mod(value + margin, size + 2.0 * margin);
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
vec4 sourcePixel(ivec2 p) {
|
|
229
|
+
ivec2 size = textureSize(uSource, 0);
|
|
230
|
+
if (p.x < 0 || p.y < 0 || p.x >= size.x || p.y >= size.y) {
|
|
231
|
+
return vec4(0.0);
|
|
232
|
+
}
|
|
233
|
+
return texelFetch(uSource, ivec2(p.x, size.y - 1 - p.y), 0);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
// Bilinear sampling with transparent borders, at pixel centers of +0.5.
|
|
237
|
+
vec4 sourceAt(vec2 position) {
|
|
238
|
+
vec2 p = position - 0.5;
|
|
239
|
+
ivec2 base = ivec2(floor(p));
|
|
240
|
+
vec2 f = fract(p);
|
|
241
|
+
return mix(
|
|
242
|
+
mix(sourcePixel(base), sourcePixel(base + ivec2(1, 0)), f.x),
|
|
243
|
+
mix(sourcePixel(base + ivec2(0, 1)), sourcePixel(base + ivec2(1, 1)), f.x),
|
|
244
|
+
f.y
|
|
245
|
+
);
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
void main() {
|
|
249
|
+
uint i = uint(gl_InstanceID);
|
|
250
|
+
float depth = 1.0 / (1.0 + noise(i, 1u) * uSceneDepth / 2500.0);
|
|
251
|
+
vec2 offset = (uOffset - 0.5) * uResolution;
|
|
252
|
+
vec2 position;
|
|
253
|
+
vec2 line = vec2(0.0);
|
|
254
|
+
float radius;
|
|
255
|
+
float alpha;
|
|
256
|
+
if (uSnow == 1) {
|
|
257
|
+
radius = max(uSize * 0.5 * depth * (1.0 + uSizeVariation * signedNoise(i, 2u)), 0.05);
|
|
258
|
+
float speed = uSpeed * (uResolution.y / 600.0) * depth * (1.0 + uSpeedVariation * signedNoise(i, 3u));
|
|
259
|
+
float wind = uWind * (uResolution.y / 1200.0) * depth * (1.0 + uWindVariation * signedNoise(i, 4u))
|
|
260
|
+
+ uSpread * signedNoise(i, 8u) * depth;
|
|
261
|
+
float amplitude = uWiggleAmount * 2.0 * depth * (1.0 + uWiggleAmountVariation * signedNoise(i, 5u));
|
|
262
|
+
float frequency = uWiggleFrequency * (1.0 + uWiggleFrequencyVariation * signedNoise(i, 6u));
|
|
263
|
+
float phase = noise(i, 9u) * 6.283185307179586;
|
|
264
|
+
float margin = radius + abs(amplitude) + 2.0;
|
|
265
|
+
position.y = wrap(noise(i, 10u) * (uResolution.y + 2.0 * margin) + speed * uTime + offset.y, margin, uResolution.y);
|
|
266
|
+
position.x = wrap(noise(i, 11u) * (uResolution.x + 2.0 * margin) + wind * uTime + offset.x, margin, uResolution.x)
|
|
267
|
+
+ amplitude * sin(frequency * uTime * 6.283185307179586 + phase);
|
|
268
|
+
alpha = uOpacity * (0.4 + 0.6 * depth);
|
|
269
|
+
} else {
|
|
270
|
+
float speed = uSpeed / 4000.0 * uResolution.y * 2.2 * depth;
|
|
271
|
+
float wind = uWind / 1000.0 * uResolution.y * (1.0 + uWindVariation * signedNoise(i, 2u)) * depth
|
|
272
|
+
+ uSpread * signedNoise(i, 7u) * depth;
|
|
273
|
+
float length = max(speed * 0.04 * max(uSize, 0.2), 1.0);
|
|
274
|
+
float horizontalLength = wind * 0.04 * max(uSize, 0.2);
|
|
275
|
+
float margin = length + abs(horizontalLength) + 4.0;
|
|
276
|
+
position.y = wrap(noise(i, 3u) * (uResolution.y + 2.0 * margin) + speed * uTime + offset.y, margin, uResolution.y);
|
|
277
|
+
position.x = wrap(noise(i, 4u) * (uResolution.x + 2.0 * margin) + wind * uTime + offset.x, margin, uResolution.x);
|
|
278
|
+
line = vec2(-horizontalLength, -length);
|
|
279
|
+
radius = max(uSize * 0.6 * depth, 0.25);
|
|
280
|
+
alpha = uOpacity * (0.35 + 0.65 * depth);
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
vec3 color = uColor.rgb;
|
|
284
|
+
if (uSnow == 0 && uRefract == 1) {
|
|
285
|
+
vec4 sampleColor = sourceAt(position + vec2(2.0, 0.0));
|
|
286
|
+
if (sampleColor.a > 0.0) {
|
|
287
|
+
vec3 straight = sampleColor.a > 0.000001 ? sampleColor.rgb / sampleColor.a : vec3(0.0);
|
|
288
|
+
color *= straight * 0.6 + 0.5;
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
vPosition = position;
|
|
293
|
+
vLine = line;
|
|
294
|
+
vRadius = radius;
|
|
295
|
+
vColor = vec4(color, alpha * uColor.a);
|
|
296
|
+
float padding = max(radius, 0.5) + 1.0;
|
|
297
|
+
vec2 minimum = min(position, position + line) - padding;
|
|
298
|
+
vec2 maximum = max(position, position + line) + padding;
|
|
299
|
+
vec2 corner = vec2(float(gl_VertexID & 1), float(gl_VertexID >> 1));
|
|
300
|
+
vec2 pixel = mix(minimum, maximum, corner);
|
|
301
|
+
gl_Position = vec4(pixel.x / uResolution.x * 2.0 - 1.0, 1.0 - pixel.y / uResolution.y * 2.0, 0.0, 1.0);
|
|
302
|
+
}
|
|
303
|
+
`;
|
|
304
|
+
var WEATHER_FRAGMENT_SHADER = `#version 300 es
|
|
305
|
+
precision highp float;
|
|
306
|
+
precision highp int;
|
|
307
|
+
|
|
308
|
+
uniform vec2 uResolution;
|
|
309
|
+
uniform int uSnow;
|
|
310
|
+
|
|
311
|
+
flat in vec2 vPosition;
|
|
312
|
+
flat in vec2 vLine;
|
|
313
|
+
flat in float vRadius;
|
|
314
|
+
flat in vec4 vColor;
|
|
315
|
+
out vec4 fragColor;
|
|
316
|
+
|
|
317
|
+
void main() {
|
|
318
|
+
if (vColor.a <= 0.00001) discard;
|
|
319
|
+
vec2 delta = vec2(gl_FragCoord.x, uResolution.y - gl_FragCoord.y) - vPosition;
|
|
320
|
+
float radius = max(vRadius, 0.5);
|
|
321
|
+
float fade = min(vRadius / 0.5, 1.0);
|
|
322
|
+
float coverage;
|
|
323
|
+
if (uSnow == 1) {
|
|
324
|
+
float distanceSquared = dot(delta, delta) / (radius * radius);
|
|
325
|
+
if (distanceSquared >= 1.0) discard;
|
|
326
|
+
float q = 1.0 - distanceSquared;
|
|
327
|
+
coverage = q * q;
|
|
328
|
+
} else {
|
|
329
|
+
float lengthSquared = dot(vLine, vLine);
|
|
330
|
+
float along = lengthSquared > 0.0 ? clamp(dot(delta, vLine) / lengthSquared, 0.0, 1.0) : 0.0;
|
|
331
|
+
coverage = clamp(radius - length(delta - vLine * along) + 0.5, 0.0, 1.0);
|
|
332
|
+
}
|
|
333
|
+
float alpha = coverage * vColor.a * fade;
|
|
334
|
+
if (alpha <= 0.000001) discard;
|
|
335
|
+
fragColor = vec4(vColor.rgb * alpha, alpha);
|
|
336
|
+
}
|
|
337
|
+
`;
|
|
338
|
+
var WEATHER_COMPOSITE_VERTEX_SHADER = `#version 300 es
|
|
339
|
+
out vec2 vUv;
|
|
340
|
+
|
|
341
|
+
void main() {
|
|
342
|
+
vUv = vec2(float(gl_VertexID & 1), float(gl_VertexID >> 1));
|
|
343
|
+
gl_Position = vec4(vUv * 2.0 - 1.0, 0.0, 1.0);
|
|
344
|
+
}
|
|
345
|
+
`;
|
|
346
|
+
var WEATHER_COMPOSITE_FRAGMENT_SHADER = `#version 300 es
|
|
347
|
+
precision highp float;
|
|
348
|
+
|
|
349
|
+
uniform sampler2D uSource;
|
|
350
|
+
uniform sampler2D uWeather;
|
|
351
|
+
uniform int uCompositeWithOriginal;
|
|
352
|
+
uniform int uLighten;
|
|
353
|
+
|
|
354
|
+
in vec2 vUv;
|
|
355
|
+
out vec4 fragColor;
|
|
356
|
+
|
|
357
|
+
void main() {
|
|
358
|
+
vec4 weather = texture(uWeather, vUv);
|
|
359
|
+
if (uCompositeWithOriginal == 0) {
|
|
360
|
+
fragColor = weather;
|
|
361
|
+
return;
|
|
362
|
+
}
|
|
363
|
+
vec4 source = texture(uSource, vUv);
|
|
364
|
+
if (uLighten == 1) {
|
|
365
|
+
fragColor = vec4(max(source.rgb, weather.rgb), source.a + weather.a - source.a * weather.a);
|
|
366
|
+
} else {
|
|
367
|
+
fragColor = weather + source * (1.0 - weather.a);
|
|
368
|
+
}
|
|
369
|
+
}
|
|
370
|
+
`;
|
|
371
|
+
|
|
372
|
+
// src/weather/runtime.ts
|
|
373
|
+
var setupWeather = (target, effectName) => {
|
|
374
|
+
const gl = target.getContext("webgl2", {
|
|
375
|
+
premultipliedAlpha: true,
|
|
376
|
+
alpha: true,
|
|
377
|
+
preserveDrawingBuffer: true
|
|
378
|
+
});
|
|
379
|
+
if (!gl)
|
|
380
|
+
throw Internals.createWebGL2ContextError(`${effectName} effect`);
|
|
381
|
+
const shaders = [];
|
|
382
|
+
const program = gl.createProgram();
|
|
383
|
+
const compositeProgram = gl.createProgram();
|
|
384
|
+
const vao = gl.createVertexArray();
|
|
385
|
+
const sourceTexture = gl.createTexture();
|
|
386
|
+
const weatherTexture = gl.createTexture();
|
|
387
|
+
const framebuffer = gl.createFramebuffer();
|
|
388
|
+
try {
|
|
389
|
+
if (!program || !compositeProgram || !vao || !sourceTexture || !weatherTexture || !framebuffer) {
|
|
390
|
+
throw new Error(`Could not allocate ${effectName} WebGL resources`);
|
|
391
|
+
}
|
|
392
|
+
for (const [nextProgram, vertexSource, fragmentSource] of [
|
|
393
|
+
[program, WEATHER_VERTEX_SHADER, WEATHER_FRAGMENT_SHADER],
|
|
394
|
+
[
|
|
395
|
+
compositeProgram,
|
|
396
|
+
WEATHER_COMPOSITE_VERTEX_SHADER,
|
|
397
|
+
WEATHER_COMPOSITE_FRAGMENT_SHADER
|
|
398
|
+
]
|
|
399
|
+
]) {
|
|
400
|
+
for (const [type, source] of [
|
|
401
|
+
[gl.VERTEX_SHADER, vertexSource],
|
|
402
|
+
[gl.FRAGMENT_SHADER, fragmentSource]
|
|
403
|
+
]) {
|
|
404
|
+
const shader = gl.createShader(type);
|
|
405
|
+
if (!shader)
|
|
406
|
+
throw new Error(`Could not create ${effectName} shader`);
|
|
407
|
+
shaders.push(shader);
|
|
408
|
+
gl.shaderSource(shader, source);
|
|
409
|
+
gl.compileShader(shader);
|
|
410
|
+
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
411
|
+
throw new Error(`${effectName} shader compile failed: ${gl.getShaderInfoLog(shader)}`);
|
|
412
|
+
}
|
|
413
|
+
gl.attachShader(nextProgram, shader);
|
|
414
|
+
}
|
|
415
|
+
gl.linkProgram(nextProgram);
|
|
416
|
+
if (!gl.getProgramParameter(nextProgram, gl.LINK_STATUS)) {
|
|
417
|
+
throw new Error(`${effectName} program link failed: ${gl.getProgramInfoLog(nextProgram)}`);
|
|
418
|
+
}
|
|
419
|
+
}
|
|
420
|
+
for (const texture of [sourceTexture, weatherTexture]) {
|
|
421
|
+
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
422
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
423
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
424
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
425
|
+
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
426
|
+
}
|
|
427
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
428
|
+
const colorCanvas = document.createElement("canvas");
|
|
429
|
+
colorCanvas.width = 1;
|
|
430
|
+
colorCanvas.height = 1;
|
|
431
|
+
const colorCtx = colorCanvas.getContext("2d", { willReadFrequently: true });
|
|
432
|
+
if (!colorCtx) {
|
|
433
|
+
throw new Error(`Could not create ${effectName} color parsing context`);
|
|
434
|
+
}
|
|
435
|
+
return {
|
|
436
|
+
gl,
|
|
437
|
+
program,
|
|
438
|
+
compositeProgram,
|
|
439
|
+
vao,
|
|
440
|
+
sourceTexture,
|
|
441
|
+
weatherTexture,
|
|
442
|
+
framebuffer,
|
|
443
|
+
uniforms: Object.fromEntries([
|
|
444
|
+
"uSource",
|
|
445
|
+
"uResolution",
|
|
446
|
+
"uSnow",
|
|
447
|
+
"uTime",
|
|
448
|
+
"uSeed",
|
|
449
|
+
"uOffset",
|
|
450
|
+
"uSize",
|
|
451
|
+
"uSizeVariation",
|
|
452
|
+
"uSceneDepth",
|
|
453
|
+
"uSpeed",
|
|
454
|
+
"uSpeedVariation",
|
|
455
|
+
"uWind",
|
|
456
|
+
"uWindVariation",
|
|
457
|
+
"uSpread",
|
|
458
|
+
"uWiggleAmount",
|
|
459
|
+
"uWiggleAmountVariation",
|
|
460
|
+
"uWiggleFrequency",
|
|
461
|
+
"uWiggleFrequencyVariation",
|
|
462
|
+
"uColor",
|
|
463
|
+
"uOpacity",
|
|
464
|
+
"uRefract"
|
|
465
|
+
].map((name) => [name, gl.getUniformLocation(program, name)])),
|
|
466
|
+
compositeUniforms: Object.fromEntries(["uSource", "uWeather", "uCompositeWithOriginal", "uLighten"].map((name) => [name, gl.getUniformLocation(compositeProgram, name)])),
|
|
467
|
+
colorCtx,
|
|
468
|
+
floatingPoint: gl.getExtension("EXT_color_buffer_float") !== null,
|
|
469
|
+
cachedColor: null,
|
|
470
|
+
cachedColorRgba: [0, 0, 0, 0],
|
|
471
|
+
width: 0,
|
|
472
|
+
height: 0
|
|
473
|
+
};
|
|
474
|
+
} catch (error) {
|
|
475
|
+
gl.deleteFramebuffer(framebuffer);
|
|
476
|
+
gl.deleteTexture(weatherTexture);
|
|
477
|
+
gl.deleteTexture(sourceTexture);
|
|
478
|
+
gl.deleteVertexArray(vao);
|
|
479
|
+
gl.deleteProgram(compositeProgram);
|
|
480
|
+
gl.deleteProgram(program);
|
|
481
|
+
throw error;
|
|
482
|
+
} finally {
|
|
483
|
+
for (const shader of shaders)
|
|
484
|
+
gl.deleteShader(shader);
|
|
485
|
+
}
|
|
486
|
+
};
|
|
487
|
+
var drawWeather = ({
|
|
488
|
+
state,
|
|
489
|
+
source,
|
|
490
|
+
width,
|
|
491
|
+
height,
|
|
492
|
+
flipSourceY,
|
|
493
|
+
params,
|
|
494
|
+
type
|
|
495
|
+
}) => {
|
|
496
|
+
const { gl, uniforms, compositeUniforms } = state;
|
|
497
|
+
if (state.cachedColor !== params.color) {
|
|
498
|
+
state.cachedColorRgba = parseColorRgba(state.colorCtx, params.color);
|
|
499
|
+
state.cachedColor = params.color;
|
|
500
|
+
}
|
|
501
|
+
const color = state.cachedColorRgba;
|
|
502
|
+
gl.viewport(0, 0, width, height);
|
|
503
|
+
gl.activeTexture(gl.TEXTURE0);
|
|
504
|
+
gl.bindTexture(gl.TEXTURE_2D, state.sourceTexture);
|
|
505
|
+
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
506
|
+
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flipSourceY);
|
|
507
|
+
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
|
|
508
|
+
gl.activeTexture(gl.TEXTURE1);
|
|
509
|
+
gl.bindTexture(gl.TEXTURE_2D, state.weatherTexture);
|
|
510
|
+
gl.bindFramebuffer(gl.FRAMEBUFFER, state.framebuffer);
|
|
511
|
+
if (state.width !== width || state.height !== height) {
|
|
512
|
+
gl.texImage2D(gl.TEXTURE_2D, 0, state.floatingPoint ? gl.RGBA16F : gl.RGBA8, width, height, 0, gl.RGBA, state.floatingPoint ? gl.HALF_FLOAT : gl.UNSIGNED_BYTE, null);
|
|
513
|
+
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, state.weatherTexture, 0);
|
|
514
|
+
if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
|
|
515
|
+
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
|
516
|
+
throw new Error("Could not allocate weather effect render target");
|
|
517
|
+
}
|
|
518
|
+
state.width = width;
|
|
519
|
+
state.height = height;
|
|
520
|
+
}
|
|
521
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
522
|
+
gl.disable(gl.DEPTH_TEST);
|
|
523
|
+
gl.disable(gl.CULL_FACE);
|
|
524
|
+
gl.disable(gl.SCISSOR_TEST);
|
|
525
|
+
gl.clearColor(0, 0, 0, 0);
|
|
526
|
+
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
527
|
+
gl.enable(gl.BLEND);
|
|
528
|
+
gl.blendEquation(gl.FUNC_ADD);
|
|
529
|
+
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
|
|
530
|
+
gl.useProgram(state.program);
|
|
531
|
+
gl.bindVertexArray(state.vao);
|
|
532
|
+
gl.uniform1i(uniforms.uSource, 0);
|
|
533
|
+
gl.uniform2f(uniforms.uResolution, width, height);
|
|
534
|
+
gl.uniform1i(uniforms.uSnow, type === "snow" ? 1 : 0);
|
|
535
|
+
gl.uniform1f(uniforms.uTime, params.time);
|
|
536
|
+
gl.uniform1ui(uniforms.uSeed, params.seed);
|
|
537
|
+
gl.uniform2f(uniforms.uOffset, params.offset[0], params.offset[1]);
|
|
538
|
+
gl.uniform1f(uniforms.uSize, params.size);
|
|
539
|
+
gl.uniform1f(uniforms.uSizeVariation, params.sizeVariation);
|
|
540
|
+
gl.uniform1f(uniforms.uSceneDepth, params.sceneDepth);
|
|
541
|
+
gl.uniform1f(uniforms.uSpeed, params.speed);
|
|
542
|
+
gl.uniform1f(uniforms.uSpeedVariation, params.speedVariation);
|
|
543
|
+
gl.uniform1f(uniforms.uWind, params.wind);
|
|
544
|
+
gl.uniform1f(uniforms.uWindVariation, params.windVariation);
|
|
545
|
+
gl.uniform1f(uniforms.uSpread, params.spread);
|
|
546
|
+
gl.uniform1f(uniforms.uWiggleAmount, params.wiggleAmount);
|
|
547
|
+
gl.uniform1f(uniforms.uWiggleAmountVariation, params.wiggleAmountVariation);
|
|
548
|
+
gl.uniform1f(uniforms.uWiggleFrequency, params.wiggleFrequency);
|
|
549
|
+
gl.uniform1f(uniforms.uWiggleFrequencyVariation, params.wiggleFrequencyVariation);
|
|
550
|
+
gl.uniform4f(uniforms.uColor, color[0] / 255, color[1] / 255, color[2] / 255, color[3] / 255);
|
|
551
|
+
gl.uniform1f(uniforms.uOpacity, params.opacity);
|
|
552
|
+
gl.uniform1i(uniforms.uRefract, params.appearance === "refracting" ? 1 : 0);
|
|
553
|
+
gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, params.count);
|
|
554
|
+
gl.disable(gl.BLEND);
|
|
555
|
+
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
|
556
|
+
gl.bindTexture(gl.TEXTURE_2D, state.weatherTexture);
|
|
557
|
+
gl.useProgram(state.compositeProgram);
|
|
558
|
+
gl.uniform1i(compositeUniforms.uSource, 0);
|
|
559
|
+
gl.uniform1i(compositeUniforms.uWeather, 1);
|
|
560
|
+
gl.uniform1i(compositeUniforms.uCompositeWithOriginal, params.compositeWithOriginal ? 1 : 0);
|
|
561
|
+
gl.uniform1i(compositeUniforms.uLighten, params.transferMode === "lighten" ? 1 : 0);
|
|
562
|
+
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
563
|
+
gl.bindVertexArray(null);
|
|
564
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
565
|
+
gl.activeTexture(gl.TEXTURE0);
|
|
566
|
+
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
567
|
+
gl.useProgram(null);
|
|
568
|
+
};
|
|
569
|
+
var cleanupWeather = (state) => {
|
|
570
|
+
const { gl } = state;
|
|
571
|
+
gl.deleteFramebuffer(state.framebuffer);
|
|
572
|
+
gl.deleteTexture(state.weatherTexture);
|
|
573
|
+
gl.deleteTexture(state.sourceTexture);
|
|
574
|
+
gl.deleteVertexArray(state.vao);
|
|
575
|
+
gl.deleteProgram(state.compositeProgram);
|
|
576
|
+
gl.deleteProgram(state.program);
|
|
577
|
+
};
|
|
578
|
+
|
|
579
|
+
// src/weather/webgpu-shader.ts
|
|
580
|
+
var WEATHER_WEBGPU_SHADER = `
|
|
581
|
+
${WEBGPU_SINGLE_PASS_VERTEX}
|
|
582
|
+
struct Params {
|
|
583
|
+
resolution: vec2f, offset: vec2f, color: vec4f,
|
|
584
|
+
snow: f32, time: f32, seed: u32, size: f32,
|
|
585
|
+
sizeVariation: f32, sceneDepth: f32, speed: f32, speedVariation: f32,
|
|
586
|
+
wind: f32, windVariation: f32, spread: f32, wiggleAmount: f32,
|
|
587
|
+
wiggleAmountVariation: f32, wiggleFrequency: f32, wiggleFrequencyVariation: f32, opacity: f32,
|
|
588
|
+
refract: f32, composite: f32, lighten: f32, padding: f32,
|
|
589
|
+
}
|
|
590
|
+
struct ParticleOutput {
|
|
591
|
+
@builtin(position) position: vec4f,
|
|
592
|
+
@location(0) @interpolate(flat) particlePosition: vec2f,
|
|
593
|
+
@location(1) @interpolate(flat) line: vec2f,
|
|
594
|
+
@location(2) @interpolate(flat) radius: f32,
|
|
595
|
+
@location(3) @interpolate(flat) color: vec4f,
|
|
596
|
+
}
|
|
597
|
+
@group(0) @binding(0) var source: texture_2d<f32>;
|
|
598
|
+
@group(0) @binding(1) var sourceSampler: sampler;
|
|
599
|
+
@group(0) @binding(2) var<uniform> params: Params;
|
|
600
|
+
@group(0) @binding(3) var weather: texture_2d<f32>;
|
|
601
|
+
fn noise(i: u32, key: u32) -> f32 {
|
|
602
|
+
var h: u32 = (i * 0x8da6b343u) ^ (key * 0xd8163841u) ^ (params.seed * 0xcb1ab31fu);
|
|
603
|
+
h ^= h >> 13u;
|
|
604
|
+
h *= 0x5bd1e995u;
|
|
605
|
+
h ^= h >> 15u;
|
|
606
|
+
return f32(h & 0x00ffffffu) / 16777216.0;
|
|
607
|
+
}
|
|
608
|
+
|
|
609
|
+
fn signedNoise(i: u32, key: u32) -> f32 {
|
|
610
|
+
return noise(i, key) * 2.0 - 1.0;
|
|
611
|
+
}
|
|
612
|
+
|
|
613
|
+
fn wrap(value: f32, margin: f32, size: f32) -> f32 {
|
|
614
|
+
return -margin + (value + margin - floor((value + margin)/(size + 2.0*margin))*(size+2.0*margin));
|
|
615
|
+
}
|
|
616
|
+
|
|
617
|
+
fn sourcePixel(p: vec2i) -> vec4f {
|
|
618
|
+
var size: vec2i = vec2i(textureDimensions(source));
|
|
619
|
+
if (p.x < 0 || p.y < 0 || p.x >= size.x || p.y >= size.y) {
|
|
620
|
+
return vec4f(0.0);
|
|
621
|
+
}
|
|
622
|
+
return textureLoad(source,p,0);
|
|
623
|
+
}
|
|
624
|
+
|
|
625
|
+
// Bilinear sampling with transparent borders, at pixel centers of +0.5.
|
|
626
|
+
fn sourceAt(position: vec2f) -> vec4f {
|
|
627
|
+
var p: vec2f = position - vec2f(0.5);
|
|
628
|
+
var base: vec2i = vec2i(floor(p));
|
|
629
|
+
var f: vec2f = fract(p);
|
|
630
|
+
return mix(
|
|
631
|
+
mix(sourcePixel(base), sourcePixel(base + vec2i(1, 0)), f.x),
|
|
632
|
+
mix(sourcePixel(base + vec2i(0, 1)), sourcePixel(base + vec2i(1, 1)), f.x),
|
|
633
|
+
f.y
|
|
634
|
+
);
|
|
635
|
+
}
|
|
636
|
+
|
|
637
|
+
@vertex fn particleVertex(@builtin(vertex_index) vertexIndex: u32, @builtin(instance_index) instanceIndex: u32) -> ParticleOutput {
|
|
638
|
+
var output: ParticleOutput;
|
|
639
|
+
var i: u32 = instanceIndex;
|
|
640
|
+
var depth: f32 = 1.0 / (1.0 + noise(i, 1u) * params.sceneDepth / 2500.0);
|
|
641
|
+
var offset: vec2f = (params.offset - vec2f(0.5)) * params.resolution;
|
|
642
|
+
var position: vec2f ;
|
|
643
|
+
var line: vec2f = vec2f(0.0);
|
|
644
|
+
var radius: f32 ;
|
|
645
|
+
var alpha: f32 ;
|
|
646
|
+
if (params.snow == 1) {
|
|
647
|
+
radius = max(params.size * 0.5 * depth * (1.0 + params.sizeVariation * signedNoise(i, 2u)), 0.05);
|
|
648
|
+
var speed: f32 = params.speed * (params.resolution.y / 600.0) * depth * (1.0 + params.speedVariation * signedNoise(i, 3u));
|
|
649
|
+
var wind: f32 = params.wind * (params.resolution.y / 1200.0) * depth * (1.0 + params.windVariation * signedNoise(i, 4u))
|
|
650
|
+
+ params.spread * signedNoise(i, 8u) * depth;
|
|
651
|
+
var amplitude: f32 = params.wiggleAmount * 2.0 * depth * (1.0 + params.wiggleAmountVariation * signedNoise(i, 5u));
|
|
652
|
+
var frequency: f32 = params.wiggleFrequency * (1.0 + params.wiggleFrequencyVariation * signedNoise(i, 6u));
|
|
653
|
+
var phase: f32 = noise(i, 9u) * 6.283185307179586;
|
|
654
|
+
var margin: f32 = radius + abs(amplitude) + 2.0;
|
|
655
|
+
position.y = wrap(noise(i, 10u) * (params.resolution.y + 2.0 * margin) + speed * params.time + offset.y, margin, params.resolution.y);
|
|
656
|
+
position.x = wrap(noise(i, 11u) * (params.resolution.x + 2.0 * margin) + wind * params.time + offset.x, margin, params.resolution.x)
|
|
657
|
+
+ amplitude * sin(frequency * params.time * 6.283185307179586 + phase);
|
|
658
|
+
alpha = params.opacity * (0.4 + 0.6 * depth);
|
|
659
|
+
} else {
|
|
660
|
+
var speed: f32 = params.speed / 4000.0 * params.resolution.y * 2.2 * depth;
|
|
661
|
+
var wind: f32 = params.wind / 1000.0 * params.resolution.y * (1.0 + params.windVariation * signedNoise(i, 2u)) * depth
|
|
662
|
+
+ params.spread * signedNoise(i, 7u) * depth;
|
|
663
|
+
var length: f32 = max(speed * 0.04 * max(params.size, 0.2), 1.0);
|
|
664
|
+
var horizontalLength: f32 = wind * 0.04 * max(params.size, 0.2);
|
|
665
|
+
var margin: f32 = length + abs(horizontalLength) + 4.0;
|
|
666
|
+
position.y = wrap(noise(i, 3u) * (params.resolution.y + 2.0 * margin) + speed * params.time + offset.y, margin, params.resolution.y);
|
|
667
|
+
position.x = wrap(noise(i, 4u) * (params.resolution.x + 2.0 * margin) + wind * params.time + offset.x, margin, params.resolution.x);
|
|
668
|
+
line = vec2f(-horizontalLength, -length);
|
|
669
|
+
radius = max(params.size * 0.6 * depth, 0.25);
|
|
670
|
+
alpha = params.opacity * (0.35 + 0.65 * depth);
|
|
671
|
+
}
|
|
672
|
+
|
|
673
|
+
var color: vec3f = params.color.rgb;
|
|
674
|
+
if (params.snow == 0 && params.refract == 1) {
|
|
675
|
+
var sampleColor: vec4f = sourceAt(position + vec2f(2.0, 0.0));
|
|
676
|
+
if (sampleColor.a > 0.0) {
|
|
677
|
+
var straight: vec3f = select(vec3f(0),sampleColor.rgb/max(sampleColor.a,0.000001),sampleColor.a>0.000001);
|
|
678
|
+
color *= straight * 0.6 + vec3f(0.5);
|
|
679
|
+
}
|
|
680
|
+
}
|
|
681
|
+
|
|
682
|
+
output.particlePosition = position;
|
|
683
|
+
output.line = line;
|
|
684
|
+
output.radius = radius;
|
|
685
|
+
output.color = vec4f(color, alpha * params.color.a);
|
|
686
|
+
var padding: f32 = max(radius, 0.5) + 1.0;
|
|
687
|
+
var minimum: vec2f = min(position, position + line) - vec2f(padding);
|
|
688
|
+
var maximum: vec2f = max(position, position + line) + vec2f(padding);
|
|
689
|
+
var corner: vec2f = vec2f(f32(vertexIndex & 1u), f32(vertexIndex >> 1u));
|
|
690
|
+
var pixel: vec2f = mix(minimum, maximum, corner);
|
|
691
|
+
output.position = vec4f(pixel.x / params.resolution.x * 2.0 - 1.0, 1.0 - pixel.y / params.resolution.y * 2.0, 0.0, 1.0);
|
|
692
|
+
return output;
|
|
693
|
+
}
|
|
694
|
+
@fragment fn particleFragment(input: ParticleOutput) -> @location(0) vec4f {
|
|
695
|
+
if (input.color.a <= 0.00001) { discard; }
|
|
696
|
+
var delta: vec2f = input.position.xy - input.particlePosition;
|
|
697
|
+
var radius: f32 = max(input.radius, 0.5);
|
|
698
|
+
var fade: f32 = min(input.radius / 0.5, 1.0);
|
|
699
|
+
var coverage: f32 ;
|
|
700
|
+
if (params.snow == 1) {
|
|
701
|
+
var distanceSquared: f32 = dot(delta, delta) / (radius * radius);
|
|
702
|
+
if (distanceSquared >= 1.0) { discard; }
|
|
703
|
+
var q: f32 = 1.0 - distanceSquared;
|
|
704
|
+
coverage = q * q;
|
|
705
|
+
} else {
|
|
706
|
+
var lengthSquared: f32 = dot(input.line, input.line);
|
|
707
|
+
var along: f32 = select(0.0,clamp(dot(delta, input.line)/max(lengthSquared,0.00000001),0.0,1.0),lengthSquared>0.0);
|
|
708
|
+
coverage = clamp(radius - length(delta - input.line * along) + 0.5, 0.0, 1.0);
|
|
709
|
+
}
|
|
710
|
+
var alpha: f32 = coverage * input.color.a * fade;
|
|
711
|
+
if (alpha <= 0.000001) { discard; }
|
|
712
|
+
return vec4f(input.color.rgb * alpha, alpha);
|
|
713
|
+
}
|
|
714
|
+
|
|
715
|
+
@fragment fn fragment(input: VertexOutput) -> @location(0) vec4f {
|
|
716
|
+
let result=textureSampleLevel(weather,sourceSampler,input.uv,0);
|
|
717
|
+
if(params.composite==0.0) { return result; }
|
|
718
|
+
let original=textureSampleLevel(source,sourceSampler,input.uv,0);
|
|
719
|
+
if(params.lighten==1.0) { return vec4f(max(original.rgb,result.rgb),original.a+result.a-original.a*result.a); }
|
|
720
|
+
return result+original*(1.0-result.a);
|
|
721
|
+
}
|
|
722
|
+
`;
|
|
723
|
+
|
|
724
|
+
// src/weather/webgpu-runtime.ts
|
|
725
|
+
var setupWeatherWebGpu = (target) => {
|
|
726
|
+
const context = target.getContext("webgpu");
|
|
727
|
+
if (!context)
|
|
728
|
+
throw new Error("WebGPU is not available for weather effects");
|
|
729
|
+
const canvas = document.createElement("canvas");
|
|
730
|
+
canvas.width = 1;
|
|
731
|
+
canvas.height = 1;
|
|
732
|
+
const colorCtx = canvas.getContext("2d", { willReadFrequently: true });
|
|
733
|
+
if (!colorCtx)
|
|
734
|
+
throw new Error("Could not create weather color parsing context");
|
|
735
|
+
return {
|
|
736
|
+
context,
|
|
737
|
+
colorCtx,
|
|
738
|
+
cachedColor: null,
|
|
739
|
+
cachedColorRgba: [0, 0, 0, 0],
|
|
740
|
+
resources: null
|
|
741
|
+
};
|
|
742
|
+
};
|
|
743
|
+
var cleanupWeatherWebGpu = (state) => {
|
|
744
|
+
state.resources?.textures?.source.destroy();
|
|
745
|
+
state.resources?.textures?.weather.destroy();
|
|
746
|
+
state.resources?.uniforms.destroy();
|
|
747
|
+
state.resources = null;
|
|
748
|
+
state.context.unconfigure();
|
|
749
|
+
};
|
|
750
|
+
var drawWeatherWebGpu = ({
|
|
751
|
+
state,
|
|
752
|
+
source,
|
|
753
|
+
width,
|
|
754
|
+
height,
|
|
755
|
+
device,
|
|
756
|
+
params,
|
|
757
|
+
type
|
|
758
|
+
}) => {
|
|
759
|
+
if (state.cachedColor !== params.color) {
|
|
760
|
+
state.cachedColorRgba = parseColorRgba(state.colorCtx, params.color);
|
|
761
|
+
state.cachedColor = params.color;
|
|
762
|
+
}
|
|
763
|
+
if (state.resources && state.resources.device !== device)
|
|
764
|
+
cleanupWeatherWebGpu(state);
|
|
765
|
+
if (!state.resources) {
|
|
766
|
+
const format = navigator.gpu.getPreferredCanvasFormat();
|
|
767
|
+
state.context.configure({ device, format, alphaMode: "premultiplied" });
|
|
768
|
+
const module = device.createShaderModule({
|
|
769
|
+
code: WEATHER_WEBGPU_SHADER,
|
|
770
|
+
label: "weather"
|
|
771
|
+
});
|
|
772
|
+
const particles = device.createRenderPipeline({
|
|
773
|
+
layout: "auto",
|
|
774
|
+
vertex: { module, entryPoint: "particleVertex" },
|
|
775
|
+
fragment: {
|
|
776
|
+
module,
|
|
777
|
+
entryPoint: "particleFragment",
|
|
778
|
+
targets: [
|
|
779
|
+
{
|
|
780
|
+
format: "rgba16float",
|
|
781
|
+
blend: {
|
|
782
|
+
color: { srcFactor: "one", dstFactor: "one-minus-src-alpha" },
|
|
783
|
+
alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha" }
|
|
784
|
+
}
|
|
785
|
+
}
|
|
786
|
+
]
|
|
787
|
+
},
|
|
788
|
+
primitive: { topology: "triangle-strip" }
|
|
789
|
+
});
|
|
790
|
+
const composite = device.createRenderPipeline({
|
|
791
|
+
layout: "auto",
|
|
792
|
+
vertex: { module, entryPoint: "vertex" },
|
|
793
|
+
fragment: { module, entryPoint: "fragment", targets: [{ format }] },
|
|
794
|
+
primitive: { topology: "triangle-list" }
|
|
795
|
+
});
|
|
796
|
+
const uniforms = device.createBuffer({
|
|
797
|
+
size: 112,
|
|
798
|
+
usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
|
|
799
|
+
});
|
|
800
|
+
const sampler = device.createSampler({
|
|
801
|
+
minFilter: "linear",
|
|
802
|
+
magFilter: "linear"
|
|
803
|
+
});
|
|
804
|
+
state.resources = {
|
|
805
|
+
device,
|
|
806
|
+
particles,
|
|
807
|
+
composite,
|
|
808
|
+
uniforms,
|
|
809
|
+
sampler,
|
|
810
|
+
textures: null
|
|
811
|
+
};
|
|
812
|
+
}
|
|
813
|
+
const { resources } = state;
|
|
814
|
+
const sourceWidth = "displayWidth" in source ? source.displayWidth : ("videoWidth" in source) ? source.videoWidth : ("naturalWidth" in source) ? source.naturalWidth : typeof source.width === "number" ? source.width : source.width.baseVal.value;
|
|
815
|
+
const sourceHeight = "displayHeight" in source ? source.displayHeight : ("videoHeight" in source) ? source.videoHeight : ("naturalHeight" in source) ? source.naturalHeight : typeof source.height === "number" ? source.height : source.height.baseVal.value;
|
|
816
|
+
if (resources.textures && (resources.textures.width !== width || resources.textures.height !== height || resources.textures.sourceWidth !== sourceWidth || resources.textures.sourceHeight !== sourceHeight)) {
|
|
817
|
+
resources.textures.source.destroy();
|
|
818
|
+
resources.textures.weather.destroy();
|
|
819
|
+
resources.textures = null;
|
|
820
|
+
}
|
|
821
|
+
if (!resources.textures) {
|
|
822
|
+
const sourceTexture = device.createTexture({
|
|
823
|
+
size: [sourceWidth, sourceHeight],
|
|
824
|
+
format: "rgba8unorm",
|
|
825
|
+
usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
|
|
826
|
+
});
|
|
827
|
+
const weather = device.createTexture({
|
|
828
|
+
size: [width, height],
|
|
829
|
+
format: "rgba16float",
|
|
830
|
+
usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT
|
|
831
|
+
});
|
|
832
|
+
const particleGroup = device.createBindGroup({
|
|
833
|
+
layout: resources.particles.getBindGroupLayout(0),
|
|
834
|
+
entries: [
|
|
835
|
+
{ binding: 0, resource: sourceTexture.createView() },
|
|
836
|
+
{ binding: 2, resource: { buffer: resources.uniforms } }
|
|
837
|
+
]
|
|
838
|
+
});
|
|
839
|
+
const compositeGroup = device.createBindGroup({
|
|
840
|
+
layout: resources.composite.getBindGroupLayout(0),
|
|
841
|
+
entries: [
|
|
842
|
+
{ binding: 0, resource: sourceTexture.createView() },
|
|
843
|
+
{ binding: 1, resource: resources.sampler },
|
|
844
|
+
{ binding: 2, resource: { buffer: resources.uniforms } },
|
|
845
|
+
{ binding: 3, resource: weather.createView() }
|
|
846
|
+
]
|
|
847
|
+
});
|
|
848
|
+
resources.textures = {
|
|
849
|
+
source: sourceTexture,
|
|
850
|
+
weather,
|
|
851
|
+
particleGroup,
|
|
852
|
+
compositeGroup,
|
|
853
|
+
width,
|
|
854
|
+
height,
|
|
855
|
+
sourceWidth,
|
|
856
|
+
sourceHeight
|
|
857
|
+
};
|
|
858
|
+
}
|
|
859
|
+
const { textures } = resources;
|
|
860
|
+
const color = state.cachedColorRgba;
|
|
861
|
+
const uniformData = new Float32Array([
|
|
862
|
+
width,
|
|
863
|
+
height,
|
|
864
|
+
params.offset[0],
|
|
865
|
+
params.offset[1],
|
|
866
|
+
color[0] / 255,
|
|
867
|
+
color[1] / 255,
|
|
868
|
+
color[2] / 255,
|
|
869
|
+
color[3] / 255,
|
|
870
|
+
type === "snow" ? 1 : 0,
|
|
871
|
+
params.time,
|
|
872
|
+
0,
|
|
873
|
+
params.size,
|
|
874
|
+
params.sizeVariation,
|
|
875
|
+
params.sceneDepth,
|
|
876
|
+
params.speed,
|
|
877
|
+
params.speedVariation,
|
|
878
|
+
params.wind,
|
|
879
|
+
params.windVariation,
|
|
880
|
+
params.spread,
|
|
881
|
+
params.wiggleAmount,
|
|
882
|
+
params.wiggleAmountVariation,
|
|
883
|
+
params.wiggleFrequency,
|
|
884
|
+
params.wiggleFrequencyVariation,
|
|
885
|
+
params.opacity,
|
|
886
|
+
params.appearance === "refracting" ? 1 : 0,
|
|
887
|
+
params.compositeWithOriginal ? 1 : 0,
|
|
888
|
+
params.transferMode === "lighten" ? 1 : 0,
|
|
889
|
+
0
|
|
890
|
+
]);
|
|
891
|
+
new Uint32Array(uniformData.buffer)[10] = params.seed;
|
|
892
|
+
device.queue.writeBuffer(resources.uniforms, 0, uniformData);
|
|
893
|
+
device.queue.copyExternalImageToTexture({ source }, { texture: textures.source, premultipliedAlpha: true }, [sourceWidth, sourceHeight]);
|
|
894
|
+
const encoder = device.createCommandEncoder();
|
|
895
|
+
const particlePass = encoder.beginRenderPass({
|
|
896
|
+
colorAttachments: [
|
|
897
|
+
{
|
|
898
|
+
view: textures.weather.createView(),
|
|
899
|
+
clearValue: { r: 0, g: 0, b: 0, a: 0 },
|
|
900
|
+
loadOp: "clear",
|
|
901
|
+
storeOp: "store"
|
|
902
|
+
}
|
|
903
|
+
]
|
|
904
|
+
});
|
|
905
|
+
particlePass.setPipeline(resources.particles);
|
|
906
|
+
particlePass.setBindGroup(0, textures.particleGroup);
|
|
907
|
+
particlePass.draw(4, params.count);
|
|
908
|
+
particlePass.end();
|
|
909
|
+
const compositePass = encoder.beginRenderPass({
|
|
910
|
+
colorAttachments: [
|
|
911
|
+
{
|
|
912
|
+
view: state.context.getCurrentTexture().createView(),
|
|
913
|
+
clearValue: { r: 0, g: 0, b: 0, a: 0 },
|
|
914
|
+
loadOp: "clear",
|
|
915
|
+
storeOp: "store"
|
|
916
|
+
}
|
|
917
|
+
]
|
|
918
|
+
});
|
|
919
|
+
compositePass.setPipeline(resources.composite);
|
|
920
|
+
compositePass.setBindGroup(0, textures.compositeGroup);
|
|
921
|
+
compositePass.draw(3);
|
|
922
|
+
compositePass.end();
|
|
923
|
+
device.queue.submit([encoder.finish()]);
|
|
924
|
+
};
|
|
925
|
+
|
|
926
|
+
export { COMMON_WEATHER_DEFAULTS, createWeatherSchema, resolveWeatherParams, validateWeatherRange, validateWeatherParams, setupWeather, drawWeather, cleanupWeather, setupWeatherWebGpu, cleanupWeatherWebGpu, drawWeatherWebGpu };
|