shaders 2.5.110 → 2.5.111
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/core/{Bulge-Chpbxxzj.js → Bulge-6gRUYqZS.js} +1 -1
- package/dist/core/{ConcentricSpin-Crfxti93.js → ConcentricSpin-Fegtvhl6.js} +1 -1
- package/dist/core/{CursorRipples-D-cfjHY5.js → CursorRipples-BqtHgpEq.js} +1 -1
- package/dist/core/{DiffuseBlur-eyM1v3ad.js → DiffuseBlur-B-Vki4ab.js} +1 -1
- package/dist/core/{FlowField-RyqiRxyI.js → FlowField-CTWyjeXm.js} +1 -1
- package/dist/core/FlutedGlass-B4FlyBOn.js +320 -0
- package/dist/core/{GridDistortion-SRyevgsp.js → GridDistortion-CVpebl48.js} +1 -1
- package/dist/core/{Kaleidoscope-CFWtKisp.js → Kaleidoscope-B0_OCrob.js} +1 -1
- package/dist/core/{Liquify-p-_qcb1f.js → Liquify-ZMAyGUIb.js} +1 -1
- package/dist/core/{Mirror-B7XmfGdw.js → Mirror-Gb0fugtF.js} +1 -1
- package/dist/core/{Perspective-BN_OpTZq.js → Perspective-SBZzprC5.js} +1 -1
- package/dist/core/{PolarCoordinates-CMYCFT4S.js → PolarCoordinates-Ckvb1eG0.js} +1 -1
- package/dist/core/{RectangularCoordinates-8Sa2GaDy.js → RectangularCoordinates-r0fTwVuL.js} +1 -1
- package/dist/core/{Shatter-ByKkCYTR.js → Shatter-CC3EFcP9.js} +1 -1
- package/dist/core/{Stretch--GV6hbru.js → Stretch-CJUUU-I1.js} +1 -1
- package/dist/core/{Twirl-v8pLqUTN.js → Twirl-CgRyZdT1.js} +1 -1
- package/dist/core/{VideoTexture-BMSdfLf_.js → VideoTexture-Cr1f0IOE.js} +1 -1
- package/dist/core/{WaveDistortion-BGdgj3Iz.js → WaveDistortion-iyTUI1lj.js} +1 -1
- package/dist/core/{WebcamTexture-Ds9IrtRn.js → WebcamTexture-BQJpZvC5.js} +1 -1
- package/dist/core/{edges-CfGcQniB.js → edges-CX_lJB9R.js} +13 -1
- package/dist/core/index.js +79 -78
- package/dist/core/registry.js +79 -78
- package/dist/core/shaderRegistry-SmtG2mTo.js +254 -0
- package/dist/core/shaderRegistry.d.ts.map +1 -1
- package/dist/core/shaders/Bulge/index.js +2 -2
- package/dist/core/shaders/ConcentricSpin/index.js +2 -2
- package/dist/core/shaders/CursorRipples/index.js +2 -2
- package/dist/core/shaders/DiffuseBlur/index.js +2 -2
- package/dist/core/shaders/FlowField/index.js +2 -2
- package/dist/core/shaders/FlutedGlass/index.d.ts +97 -0
- package/dist/core/shaders/FlutedGlass/index.d.ts.map +1 -0
- package/dist/core/shaders/FlutedGlass/index.js +6 -0
- package/dist/core/shaders/Fog/index.js +1 -1
- package/dist/core/shaders/Form3D/index.js +1 -1
- package/dist/core/shaders/Glass/index.js +1 -1
- package/dist/core/shaders/GlassTiles/index.js +1 -1
- package/dist/core/shaders/Glitch/index.js +1 -1
- package/dist/core/shaders/Glow/index.js +1 -1
- package/dist/core/shaders/Godrays/index.js +1 -1
- package/dist/core/shaders/Grayscale/index.js +1 -1
- package/dist/core/shaders/Grid/index.js +1 -1
- package/dist/core/shaders/GridDistortion/index.js +2 -2
- package/dist/core/shaders/Group/index.js +1 -1
- package/dist/core/shaders/Halftone/index.js +1 -1
- package/dist/core/shaders/HexGrid/index.js +1 -1
- package/dist/core/shaders/HueShift/index.js +1 -1
- package/dist/core/shaders/ImageTexture/index.js +1 -1
- package/dist/core/shaders/Invert/index.js +1 -1
- package/dist/core/shaders/Kaleidoscope/index.js +2 -2
- package/dist/core/shaders/LensFlare/index.js +1 -1
- package/dist/core/shaders/LinearBlur/index.js +1 -1
- package/dist/core/shaders/LinearGradient/index.js +1 -1
- package/dist/core/shaders/Liquify/index.js +2 -2
- package/dist/core/shaders/Mirror/index.js +2 -2
- package/dist/core/shaders/MultiPointGradient/index.js +1 -1
- package/dist/core/shaders/Neon/index.js +1 -1
- package/dist/core/shaders/Paper/index.js +1 -1
- package/dist/core/shaders/Perspective/index.js +2 -2
- package/dist/core/shaders/Pixelate/index.js +1 -1
- package/dist/core/shaders/Plasma/index.js +1 -1
- package/dist/core/shaders/PolarCoordinates/index.js +2 -2
- package/dist/core/shaders/Polygon/index.js +1 -1
- package/dist/core/shaders/Posterize/index.js +1 -1
- package/dist/core/shaders/ProgressiveBlur/index.js +1 -1
- package/dist/core/shaders/RadialGradient/index.js +1 -1
- package/dist/core/shaders/RectangularCoordinates/index.js +2 -2
- package/dist/core/shaders/Ring/index.js +1 -1
- package/dist/core/shaders/Ripples/index.js +1 -1
- package/dist/core/shaders/RoundedRect/index.js +1 -1
- package/dist/core/shaders/Saturation/index.js +1 -1
- package/dist/core/shaders/Sharpness/index.js +1 -1
- package/dist/core/shaders/Shatter/index.js +2 -2
- package/dist/core/shaders/SimplexNoise/index.js +1 -1
- package/dist/core/shaders/SineWave/index.js +1 -1
- package/dist/core/shaders/Smoke/index.js +1 -1
- package/dist/core/shaders/SmokeFill/index.js +1 -1
- package/dist/core/shaders/Solarize/index.js +1 -1
- package/dist/core/shaders/SolidColor/index.js +1 -1
- package/dist/core/shaders/Spherize/index.js +1 -1
- package/dist/core/shaders/Spiral/index.js +1 -1
- package/dist/core/shaders/Star/index.js +1 -1
- package/dist/core/shaders/Strands/index.js +1 -1
- package/dist/core/shaders/Stretch/index.js +2 -2
- package/dist/core/shaders/Stripes/index.js +1 -1
- package/dist/core/shaders/StudioBackground/index.js +1 -1
- package/dist/core/shaders/Swirl/index.js +1 -1
- package/dist/core/shaders/TiltShift/index.js +1 -1
- package/dist/core/shaders/Tint/index.js +1 -1
- package/dist/core/shaders/Trapezoid/index.js +1 -1
- package/dist/core/shaders/Tritone/index.js +1 -1
- package/dist/core/shaders/Truchet/index.js +1 -1
- package/dist/core/shaders/Twirl/index.js +2 -2
- package/dist/core/shaders/VHS/index.js +1 -1
- package/dist/core/shaders/Vesica/index.js +1 -1
- package/dist/core/shaders/Vibrance/index.js +1 -1
- package/dist/core/shaders/VideoTexture/index.js +2 -2
- package/dist/core/shaders/Vignette/index.js +1 -1
- package/dist/core/shaders/Voronoi/index.js +1 -1
- package/dist/core/shaders/WaveDistortion/index.js +2 -2
- package/dist/core/shaders/Weave/index.js +1 -1
- package/dist/core/shaders/WebcamTexture/index.js +2 -2
- package/dist/core/shaders/ZoomBlur/index.js +1 -1
- package/dist/js/createShader.js +1 -1
- package/dist/js/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/js/utils/generatePresetCode.js +19 -0
- package/dist/react/FlutedGlass.js +223 -0
- package/dist/react/Preview.js +1 -0
- package/dist/react/Shader.js +1 -1
- package/dist/react/components/FlutedGlass.d.ts +41 -0
- package/dist/react/components/FlutedGlass.d.ts.map +1 -0
- package/dist/react/engine/Preview.d.ts.map +1 -1
- package/dist/react/index.d.ts +1 -0
- package/dist/react/index.d.ts.map +1 -1
- package/dist/react/index.js +2 -1
- package/dist/react/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/react/utils/generatePresetCode.js +19 -0
- package/dist/registry.js +468 -0
- package/dist/solid/components/FlutedGlass.d.ts +38 -0
- package/dist/solid/components/FlutedGlass.d.ts.map +1 -0
- package/dist/solid/components/FlutedGlass.js +228 -0
- package/dist/solid/engine/Preview.d.ts.map +1 -1
- package/dist/solid/engine/Preview.js +76 -74
- package/dist/solid/engine/Shader.js +1 -1
- package/dist/solid/index.d.ts +1 -0
- package/dist/solid/index.d.ts.map +1 -1
- package/dist/solid/index.js +146 -144
- package/dist/solid/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/solid/utils/generatePresetCode.js +19 -0
- package/dist/svelte/components/FlutedGlass.svelte.d.ts +28 -0
- package/dist/svelte/{generatePresetCode-jdOx6mhw.js → generatePresetCode-DAEzZxbM.js} +19 -0
- package/dist/svelte/index.d.ts +1 -0
- package/dist/svelte/index.js +769 -569
- package/dist/svelte/source/components/FlutedGlass.svelte +334 -0
- package/dist/svelte/source/engine/Preview.svelte +2 -0
- package/dist/svelte/source/index.js +1 -0
- package/dist/svelte/utils/generatePresetCode.js +1 -1
- package/dist/vue/FlutedGlass.js +3 -0
- package/dist/vue/FlutedGlass.vue_vue_type_script_setup_true_lang.js +226 -0
- package/dist/vue/Preview.vue_vue_type_script_setup_true_lang.js +2 -0
- package/dist/vue/Shader.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/vue/components/FlutedGlass.vue.d.ts +63 -0
- package/dist/vue/components/FlutedGlass.vue.d.ts.map +1 -0
- package/dist/vue/index.d.ts +1 -0
- package/dist/vue/index.d.ts.map +1 -1
- package/dist/vue/index.js +2 -1
- package/dist/vue/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/vue/utils/generatePresetCode.js +19 -0
- package/package.json +9 -1
- package/dist/core/shaderRegistry-DFzzFEKX.js +0 -252
- /package/dist/core/{Fog-BeKcPcTq.js → Fog-CIdU2Wn-.js} +0 -0
- /package/dist/core/{Form3D-Bufw6tZb.js → Form3D-CqmOXXGj.js} +0 -0
- /package/dist/core/{Glass-Bz9IKI2q.js → Glass-BCOkQbvW.js} +0 -0
- /package/dist/core/{GlassTiles-Dgh6nOaE.js → GlassTiles-CMx4NyO-.js} +0 -0
- /package/dist/core/{Glitch-BsbzLahF.js → Glitch-BdygvJKe.js} +0 -0
- /package/dist/core/{Glow-CUv1yHLZ.js → Glow-CsTZA75y.js} +0 -0
- /package/dist/core/{Godrays-D1LINbut.js → Godrays-w3ruw4NO.js} +0 -0
- /package/dist/core/{Grayscale-Ri-695Uh.js → Grayscale-ChaVI3AW.js} +0 -0
- /package/dist/core/{Grid-BYSsAIEv.js → Grid-CKbLS5tU.js} +0 -0
- /package/dist/core/{Group-CkhjTW59.js → Group-BqVJ4S7i.js} +0 -0
- /package/dist/core/{Halftone-BUCDTTAU.js → Halftone-BGQeBAgG.js} +0 -0
- /package/dist/core/{HexGrid-BUiDrehv.js → HexGrid-BFrnZEZT.js} +0 -0
- /package/dist/core/{HueShift-ctEX5vfo.js → HueShift-C1RxETwN.js} +0 -0
- /package/dist/core/{ImageTexture-uxj4LpF7.js → ImageTexture-DXhgMEOT.js} +0 -0
- /package/dist/core/{Invert-azYrcDMi.js → Invert-D3tc2UGp.js} +0 -0
- /package/dist/core/{LensFlare-ttrXgfea.js → LensFlare-B8x1fOKu.js} +0 -0
- /package/dist/core/{LinearBlur-By2aD8OO.js → LinearBlur-CshzmjfO.js} +0 -0
- /package/dist/core/{LinearGradient-CM02z32l.js → LinearGradient-Bzwquw_Q.js} +0 -0
- /package/dist/core/{MultiPointGradient-8zGSIM4U.js → MultiPointGradient-D0QQwizn.js} +0 -0
- /package/dist/core/{Neon-CMmGJzPy.js → Neon-eN4HlILk.js} +0 -0
- /package/dist/core/{Paper-B08rxNys.js → Paper-BmeUPAFe.js} +0 -0
- /package/dist/core/{Pixelate-dxPAFCRu.js → Pixelate-DqZcUKFK.js} +0 -0
- /package/dist/core/{Plasma-DGCw0cd7.js → Plasma-COq8mAw2.js} +0 -0
- /package/dist/core/{Polygon-CsCOt5YE.js → Polygon-BP5eKEiz.js} +0 -0
- /package/dist/core/{Posterize-Blv9pzPT.js → Posterize-CxYemXTn.js} +0 -0
- /package/dist/core/{ProgressiveBlur-NbvxFfRa.js → ProgressiveBlur-CNacb2Qx.js} +0 -0
- /package/dist/core/{RadialGradient-De0gtdh3.js → RadialGradient-SASVv2vb.js} +0 -0
- /package/dist/core/{Ring-kHH-DIDQ.js → Ring-CdJlzjRV.js} +0 -0
- /package/dist/core/{Ripples-Bf6Zwg6X.js → Ripples-BRZPZszq.js} +0 -0
- /package/dist/core/{RoundedRect-B0sWh2BN.js → RoundedRect-lzzi_1J7.js} +0 -0
- /package/dist/core/{Saturation-DCFAIUvZ.js → Saturation-n-aXJS81.js} +0 -0
- /package/dist/core/{Sharpness-DSpEoCSL.js → Sharpness-7tm7b-Bu.js} +0 -0
- /package/dist/core/{SimplexNoise-CMuU8n27.js → SimplexNoise-0-rfeziU.js} +0 -0
- /package/dist/core/{SineWave-VTNDSK_g.js → SineWave--i6bSrad.js} +0 -0
- /package/dist/core/{Smoke-9MJIAKq7.js → Smoke-BgPHDWDR.js} +0 -0
- /package/dist/core/{SmokeFill-qV2iRIts.js → SmokeFill-Dtctgt2S.js} +0 -0
- /package/dist/core/{Solarize-CWDgSBiv.js → Solarize-gNMmd47z.js} +0 -0
- /package/dist/core/{SolidColor-DhMdM3bE.js → SolidColor-D9ikFFu3.js} +0 -0
- /package/dist/core/{Spherize-BZxwopX8.js → Spherize-ZBorEEOU.js} +0 -0
- /package/dist/core/{Spiral-gpkw37l1.js → Spiral-sg-i02xw.js} +0 -0
- /package/dist/core/{Star-WJAOZ5P5.js → Star-BcqCHzHG.js} +0 -0
- /package/dist/core/{Strands-DOthZNHt.js → Strands-XLpth60o.js} +0 -0
- /package/dist/core/{Stripes-CFCXw1_N.js → Stripes-DEOXYnmy.js} +0 -0
- /package/dist/core/{StudioBackground-DJr-cxOL.js → StudioBackground-B5dpTR_X.js} +0 -0
- /package/dist/core/{Swirl-B_KxdaX2.js → Swirl-WqPvBF7u.js} +0 -0
- /package/dist/core/{TiltShift-BSAyR0Me.js → TiltShift-CYb6OQoU.js} +0 -0
- /package/dist/core/{Tint-DdvnpzEJ.js → Tint-C-bJpwd0.js} +0 -0
- /package/dist/core/{Trapezoid-Co0sIA73.js → Trapezoid-BvTEGdW_.js} +0 -0
- /package/dist/core/{Tritone-Ckb6hTkI.js → Tritone-LX-qUAGy.js} +0 -0
- /package/dist/core/{Truchet-CkFSkniR.js → Truchet-DE4lgYRb.js} +0 -0
- /package/dist/core/{VHS-mKd1QBBj.js → VHS-DbNjgUEX.js} +0 -0
- /package/dist/core/{Vesica-CxP7UD0a.js → Vesica-DqJMyqmy.js} +0 -0
- /package/dist/core/{Vibrance-WR5yQv_9.js → Vibrance-IDvmP1Xw.js} +0 -0
- /package/dist/core/{Vignette-hAIKTi35.js → Vignette-CA12P9VO.js} +0 -0
- /package/dist/core/{Voronoi-DOGmwUSK.js → Voronoi-DXeJ3xOf.js} +0 -0
- /package/dist/core/{Weave-CIP_EUPa.js → Weave-Bn2CfeE4.js} +0 -0
- /package/dist/core/{ZoomBlur-BuIVpHGG.js → ZoomBlur-DOzP_sOK.js} +0 -0
- /package/dist/core/{browser-D8zonASQ.js → browser-CsOpQ0L_.js} +0 -0
|
@@ -0,0 +1,334 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { getContext, setContext, onMount, onDestroy } from 'svelte';
|
|
3
|
+
import {
|
|
4
|
+
createUniformsMap,
|
|
5
|
+
type UniformsMap,
|
|
6
|
+
type BlendMode,
|
|
7
|
+
type NodeMetadata,
|
|
8
|
+
type PropConfig,
|
|
9
|
+
type MaskConfig,
|
|
10
|
+
type PropDriver,
|
|
11
|
+
type TransformConfig
|
|
12
|
+
} from '../../../core/index.js';
|
|
13
|
+
import {setColorSpaceMode} from '../../../core/utilities/transformations/index.js';
|
|
14
|
+
|
|
15
|
+
// @ts-ignore - this import is replaced at build time
|
|
16
|
+
import { componentDefinition, type ComponentProps } from '../../../core/shaders/FlutedGlass/index.js';
|
|
17
|
+
|
|
18
|
+
// Warn once per page load if this is an experimental component
|
|
19
|
+
let _experimentalWarnedOnce = false;
|
|
20
|
+
if ((componentDefinition as any).experimental && !_experimentalWarnedOnce) {
|
|
21
|
+
_experimentalWarnedOnce = true;
|
|
22
|
+
const _e = (componentDefinition as any).experimental;
|
|
23
|
+
console.info(`%c⚠ [Shaders] ${componentDefinition.name} is experimental: ${_e.message}`, 'color: #f59e0b; font-weight: bold');
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* Define component props including blend mode, opacity, visibility, masking, and transformation
|
|
28
|
+
*/
|
|
29
|
+
interface ExtendedComponentProps extends Partial<ComponentProps> {
|
|
30
|
+
angle?: ComponentProps['angle'] | PropDriver;
|
|
31
|
+
frequency?: ComponentProps['frequency'] | PropDriver;
|
|
32
|
+
softness?: ComponentProps['softness'] | PropDriver;
|
|
33
|
+
waveAmplitude?: ComponentProps['waveAmplitude'] | PropDriver;
|
|
34
|
+
waveFrequency?: ComponentProps['waveFrequency'] | PropDriver;
|
|
35
|
+
refraction?: ComponentProps['refraction'] | PropDriver;
|
|
36
|
+
aberration?: ComponentProps['aberration'] | PropDriver;
|
|
37
|
+
highlight?: ComponentProps['highlight'] | PropDriver;
|
|
38
|
+
highlightSoftness?: ComponentProps['highlightSoftness'] | PropDriver;
|
|
39
|
+
blendMode?: BlendMode;
|
|
40
|
+
opacity?: number;
|
|
41
|
+
visible?: boolean;
|
|
42
|
+
id?: string;
|
|
43
|
+
maskSource?: string;
|
|
44
|
+
maskType?: string;
|
|
45
|
+
renderOrder?: number;
|
|
46
|
+
transform?: Partial<TransformConfig>;
|
|
47
|
+
children?: import('svelte').Snippet;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
function isPropDriver(value: unknown): value is PropDriver {
|
|
51
|
+
return typeof value === 'object' && value !== null && 'type' in value &&
|
|
52
|
+
((value as any).type === 'map' || (value as any).type === 'mouse' || (value as any).type === 'mouse-position' || (value as any).type === 'auto-animate');
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/**
|
|
56
|
+
* Default transform configuration (optimized for zero overhead)
|
|
57
|
+
*/
|
|
58
|
+
const DEFAULT_TRANSFORM: TransformConfig = {
|
|
59
|
+
offsetX: 0,
|
|
60
|
+
offsetY: 0,
|
|
61
|
+
rotation: 0,
|
|
62
|
+
scale: 1,
|
|
63
|
+
anchorX: 0.5,
|
|
64
|
+
anchorY: 0.5,
|
|
65
|
+
edges: 'transparent'
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
// Define the component props and their default values from the shader definition
|
|
69
|
+
const componentDefaults = {
|
|
70
|
+
blendMode: 'normal' as BlendMode,
|
|
71
|
+
visible: true,
|
|
72
|
+
// opacity intentionally has no default - handled by renderer
|
|
73
|
+
// transform intentionally has no default - handled by effectiveTransform
|
|
74
|
+
...Object.entries(componentDefinition.props).reduce(
|
|
75
|
+
(acc, [key, config]) => {
|
|
76
|
+
acc[key] = (config as unknown as PropConfig<typeof config>).default;
|
|
77
|
+
return acc;
|
|
78
|
+
},
|
|
79
|
+
{} as Record<string, any>
|
|
80
|
+
)
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
// Declare props using Svelte 5's syntax
|
|
84
|
+
const props: ExtendedComponentProps = $props();
|
|
85
|
+
|
|
86
|
+
// Apply defaults manually since Svelte 5 doesn't have withDefaults equivalent
|
|
87
|
+
// Use $derived so the metadata $effect re-runs when any of these change at runtime
|
|
88
|
+
const blendMode = $derived(props.blendMode ?? componentDefaults.blendMode);
|
|
89
|
+
const opacity = $derived(props.opacity); // No default - handled by renderer
|
|
90
|
+
const visible = $derived(props.visible ?? componentDefaults.visible); // Default to true
|
|
91
|
+
const id = $derived(props.id);
|
|
92
|
+
const maskSource = $derived(props.maskSource);
|
|
93
|
+
const maskType = $derived(props.maskType);
|
|
94
|
+
const renderOrder = $derived(props.renderOrder);
|
|
95
|
+
const { children } = props;
|
|
96
|
+
|
|
97
|
+
// Collect PropDriver values from shader props into the maps metadata structure
|
|
98
|
+
const mapsFromProps = $derived.by(() => {
|
|
99
|
+
const maps: Record<string, PropDriver> = {};
|
|
100
|
+
for (const key of Object.keys(componentDefinition.props)) {
|
|
101
|
+
const val = (props as any)[key];
|
|
102
|
+
if (isPropDriver(val)) maps[key] = val as PropDriver;
|
|
103
|
+
}
|
|
104
|
+
return Object.keys(maps).length > 0 ? maps : undefined;
|
|
105
|
+
});
|
|
106
|
+
|
|
107
|
+
/**
|
|
108
|
+
* Computed transform that merges user-provided values with defaults
|
|
109
|
+
*/
|
|
110
|
+
const effectiveTransform = $derived({
|
|
111
|
+
...DEFAULT_TRANSFORM,
|
|
112
|
+
...props.transform
|
|
113
|
+
});
|
|
114
|
+
|
|
115
|
+
/**
|
|
116
|
+
* FIRST: Get the parent ID from context BEFORE setting our own context
|
|
117
|
+
*/
|
|
118
|
+
const parentId = getContext<string>('shaderParentId');
|
|
119
|
+
if (parentId === undefined) {
|
|
120
|
+
throw new Error('Shader components must be used inside an <Shader> component or another shader component');
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
/**
|
|
124
|
+
* Use the provided ID or generate a unique identifier for this component instance
|
|
125
|
+
*/
|
|
126
|
+
const instanceId = (id ? id.replace(/[^a-zA-Z0-9_]/g, '_') : null) || Math.random().toString(36).substring(2, 10);
|
|
127
|
+
|
|
128
|
+
/**
|
|
129
|
+
* THEN: Provide our unique identifier to child components
|
|
130
|
+
*/
|
|
131
|
+
setContext('shaderParentId', instanceId);
|
|
132
|
+
|
|
133
|
+
/**
|
|
134
|
+
* Creates a non-reactive object containing only props that differ from defaults
|
|
135
|
+
* This optimization prevents unnecessary GPU uniform updates for unchanged values
|
|
136
|
+
* Special props like blendMode and opacity are handled separately
|
|
137
|
+
*/
|
|
138
|
+
const shaderReadyProps = $derived.by(() => {
|
|
139
|
+
let baseProps = { ...componentDefaults };
|
|
140
|
+
|
|
141
|
+
// Only include props that differ from defaults (excluding special props and PropDrivers)
|
|
142
|
+
for (const key in props) {
|
|
143
|
+
if (key !== 'blendMode' && key !== 'opacity' && key !== 'visible' &&
|
|
144
|
+
key !== 'id' && key !== 'maskSource' && key !== 'maskType' && key !== 'renderOrder' &&
|
|
145
|
+
key !== 'transform' && key !== 'children') {
|
|
146
|
+
const propValue = (props as any)[key];
|
|
147
|
+
if (isPropDriver(propValue)) continue; // PropDrivers go to metadata.maps, not uniforms
|
|
148
|
+
const defaultValue = (componentDefaults as any)[key];
|
|
149
|
+
if (propValue !== undefined && propValue !== defaultValue) {
|
|
150
|
+
(baseProps as any)[key] = propValue;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
return baseProps;
|
|
155
|
+
});
|
|
156
|
+
|
|
157
|
+
/**
|
|
158
|
+
* Get the color space from the root Shader component.
|
|
159
|
+
* Used to set the global color space mode before creating uniforms.
|
|
160
|
+
*/
|
|
161
|
+
const shaderColorSpace = getContext<() => 'p3-linear' | 'srgb'>('shaderColorSpace');
|
|
162
|
+
|
|
163
|
+
/**
|
|
164
|
+
* Creates the GPU uniform values map using only the changed props
|
|
165
|
+
* Set the global color space mode before creating uniforms so colors are transformed correctly
|
|
166
|
+
* Note: Intentionally captures initial value - props are immutable after initialization
|
|
167
|
+
*/
|
|
168
|
+
if (shaderColorSpace) {
|
|
169
|
+
setColorSpaceMode(shaderColorSpace());
|
|
170
|
+
}
|
|
171
|
+
// svelte-ignore state_referenced_locally
|
|
172
|
+
const uniforms: UniformsMap = createUniformsMap(componentDefinition, shaderReadyProps, instanceId);
|
|
173
|
+
|
|
174
|
+
/**
|
|
175
|
+
* Get the node registration function from parent context
|
|
176
|
+
*/
|
|
177
|
+
const parentRegister = getContext<(id: string, fragmentNodeFunc: any, parentId: string | null, metadata: NodeMetadata | null, uniforms: UniformsMap | null, componentDefinition: any, domCanvas?: HTMLCanvasElement) => void>('shaderNodeRegister');
|
|
178
|
+
if (parentRegister === undefined) {
|
|
179
|
+
throw new Error('Shader components must be used inside an <Shader> component or another shader component');
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
/**
|
|
183
|
+
* Get the uniform update function from parent context
|
|
184
|
+
*/
|
|
185
|
+
const parentUniformUpdate = getContext<(nodeId: string, uniformName: string, value: any) => void>('shaderUniformUpdate');
|
|
186
|
+
if (parentUniformUpdate === undefined) {
|
|
187
|
+
throw new Error('Shader components require shaderUniformUpdate from parent');
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
/**
|
|
191
|
+
* Get the metadata update function from parent context
|
|
192
|
+
*/
|
|
193
|
+
const parentMetadataUpdate = getContext<(nodeId: string, metadata: NodeMetadata) => void>('shaderMetadataUpdate');
|
|
194
|
+
if (parentMetadataUpdate === undefined) {
|
|
195
|
+
throw new Error('Shader components require shaderMetadataUpdate from parent');
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
// capturesDOM — canvas layoutsubtree portal for DOMTexture-style shaders
|
|
199
|
+
const isCapturesDOM = !!(componentDefinition as any).capturesDOM;
|
|
200
|
+
let captureCanvas: HTMLCanvasElement | undefined;
|
|
201
|
+
let captureW = $state(typeof window !== 'undefined' ? Math.round(window.innerWidth * Math.min(window.devicePixelRatio, 2)) : 0);
|
|
202
|
+
let captureH = $state(typeof window !== 'undefined' ? Math.round(window.innerHeight * Math.min(window.devicePixelRatio, 2)) : 0);
|
|
203
|
+
|
|
204
|
+
function teleportToBody(node: HTMLElement) {
|
|
205
|
+
document.body.appendChild(node);
|
|
206
|
+
return { destroy() { node.remove(); } };
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
if (isCapturesDOM) {
|
|
210
|
+
const onWinResize = () => {
|
|
211
|
+
const d = Math.min(window.devicePixelRatio, 2);
|
|
212
|
+
captureW = Math.round(window.innerWidth * d);
|
|
213
|
+
captureH = Math.round(window.innerHeight * d);
|
|
214
|
+
};
|
|
215
|
+
onMount(() => { window.addEventListener('resize', onWinResize); });
|
|
216
|
+
onDestroy(() => { window.removeEventListener('resize', onWinResize); });
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
// DOM marker ref for determining render order from template position
|
|
220
|
+
let orderMarker: HTMLSpanElement;
|
|
221
|
+
|
|
222
|
+
// Stores the DOM-detected render order
|
|
223
|
+
let detectedRenderOrder: number | undefined = undefined;
|
|
224
|
+
|
|
225
|
+
// Flag to track when component is registered
|
|
226
|
+
let isRegistered = $state(false);
|
|
227
|
+
|
|
228
|
+
// Setup uniform watchers with registration guard
|
|
229
|
+
Object.entries(uniforms).forEach(([propName, { uniform, transform }]) => {
|
|
230
|
+
$effect(() => {
|
|
231
|
+
// Only run after component is registered
|
|
232
|
+
if (!isRegistered) return;
|
|
233
|
+
|
|
234
|
+
if (uniform && uniform.value !== undefined) {
|
|
235
|
+
const newValue = (props as any)[propName];
|
|
236
|
+
if (newValue !== undefined && !isPropDriver(newValue)) {
|
|
237
|
+
// Send raw value - renderer will handle transformation
|
|
238
|
+
// PropDriver values go to metadata.maps, not uniforms
|
|
239
|
+
parentUniformUpdate(instanceId, propName, newValue);
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
});
|
|
243
|
+
});
|
|
244
|
+
|
|
245
|
+
// Watch blend mode, opacity, visibility, masking, transformations, and prop maps changes
|
|
246
|
+
$effect(() => {
|
|
247
|
+
// Only run after component is registered
|
|
248
|
+
if (!isRegistered) return;
|
|
249
|
+
|
|
250
|
+
const metadata: NodeMetadata = {
|
|
251
|
+
blendMode,
|
|
252
|
+
opacity,
|
|
253
|
+
visible: visible === false ? false : true,
|
|
254
|
+
id,
|
|
255
|
+
mask: maskSource ? {
|
|
256
|
+
source: maskSource,
|
|
257
|
+
type: (maskType || 'alpha') as MaskConfig['type']
|
|
258
|
+
} : undefined,
|
|
259
|
+
maps: mapsFromProps,
|
|
260
|
+
renderOrder: renderOrder ?? detectedRenderOrder,
|
|
261
|
+
transform: effectiveTransform
|
|
262
|
+
};
|
|
263
|
+
parentMetadataUpdate(instanceId, metadata);
|
|
264
|
+
});
|
|
265
|
+
|
|
266
|
+
// Register this component after mount to ensure parent is ready
|
|
267
|
+
onMount(() => {
|
|
268
|
+
// Register this component with safety check
|
|
269
|
+
if (componentDefinition && typeof componentDefinition.fragmentNode === 'function') {
|
|
270
|
+
parentRegister(
|
|
271
|
+
instanceId,
|
|
272
|
+
componentDefinition.fragmentNode,
|
|
273
|
+
parentId,
|
|
274
|
+
{
|
|
275
|
+
blendMode,
|
|
276
|
+
opacity,
|
|
277
|
+
visible: visible !== false ? true : false,
|
|
278
|
+
id,
|
|
279
|
+
mask: maskSource ? {
|
|
280
|
+
source: maskSource,
|
|
281
|
+
type: (maskType || 'alpha') as MaskConfig['type']
|
|
282
|
+
} as MaskConfig : undefined,
|
|
283
|
+
maps: mapsFromProps,
|
|
284
|
+
renderOrder: renderOrder ?? detectedRenderOrder,
|
|
285
|
+
transform: effectiveTransform
|
|
286
|
+
},
|
|
287
|
+
uniforms,
|
|
288
|
+
componentDefinition,
|
|
289
|
+
isCapturesDOM ? captureCanvas : undefined
|
|
290
|
+
);
|
|
291
|
+
|
|
292
|
+
// Set flag to enable effects after successful registration
|
|
293
|
+
isRegistered = true;
|
|
294
|
+
|
|
295
|
+
// Detect DOM position for correct render ordering
|
|
296
|
+
if (renderOrder === undefined && orderMarker) {
|
|
297
|
+
const parent = orderMarker.parentElement;
|
|
298
|
+
if (parent) {
|
|
299
|
+
const siblings = parent.querySelectorAll(':scope > [data-shader-id]');
|
|
300
|
+
const position = Array.from(siblings).indexOf(orderMarker);
|
|
301
|
+
if (position >= 0) {
|
|
302
|
+
detectedRenderOrder = position;
|
|
303
|
+
parentMetadataUpdate(instanceId, { renderOrder: position } as NodeMetadata);
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
} else {
|
|
308
|
+
console.error('componentDefinition.fragmentNode is not a function:', {
|
|
309
|
+
componentDefinition,
|
|
310
|
+
fragmentNode: componentDefinition?.fragmentNode,
|
|
311
|
+
type: typeof componentDefinition?.fragmentNode
|
|
312
|
+
});
|
|
313
|
+
}
|
|
314
|
+
});
|
|
315
|
+
|
|
316
|
+
// Clean up node from registry when component is unmounted
|
|
317
|
+
onDestroy(() => {
|
|
318
|
+
isRegistered = false;
|
|
319
|
+
parentRegister(instanceId, null, null, null, null);
|
|
320
|
+
});
|
|
321
|
+
</script>
|
|
322
|
+
|
|
323
|
+
<span bind:this={orderMarker} style="display:contents" data-shader-id={instanceId}>
|
|
324
|
+
{#if !isCapturesDOM}
|
|
325
|
+
{@render children?.()}
|
|
326
|
+
{/if}
|
|
327
|
+
</span>
|
|
328
|
+
{#if isCapturesDOM}
|
|
329
|
+
<canvas use:teleportToBody bind:this={captureCanvas} layoutsubtree
|
|
330
|
+
width={captureW} height={captureH}
|
|
331
|
+
style="position:fixed;inset:0;width:100vw;height:100vh;z-index:-9999">
|
|
332
|
+
{@render children?.()}
|
|
333
|
+
</canvas>
|
|
334
|
+
{/if}
|
|
@@ -42,6 +42,7 @@ import FloatingParticles from '../components/FloatingParticles.svelte'
|
|
|
42
42
|
import FlowField from '../components/FlowField.svelte'
|
|
43
43
|
import Flower from '../components/Flower.svelte'
|
|
44
44
|
import FlowingGradient from '../components/FlowingGradient.svelte'
|
|
45
|
+
import FlutedGlass from '../components/FlutedGlass.svelte'
|
|
45
46
|
import Fog from '../components/Fog.svelte'
|
|
46
47
|
import Form3D from '../components/Form3D.svelte'
|
|
47
48
|
import Glass from '../components/Glass.svelte'
|
|
@@ -153,6 +154,7 @@ const componentMap: Record<string, any> = {
|
|
|
153
154
|
FlowField,
|
|
154
155
|
Flower,
|
|
155
156
|
FlowingGradient,
|
|
157
|
+
FlutedGlass,
|
|
156
158
|
Fog,
|
|
157
159
|
Form3D,
|
|
158
160
|
Glass,
|
|
@@ -35,6 +35,7 @@ export { default as FloatingParticles } from './components/FloatingParticles.sve
|
|
|
35
35
|
export { default as FlowField } from './components/FlowField.svelte';
|
|
36
36
|
export { default as Flower } from './components/Flower.svelte';
|
|
37
37
|
export { default as FlowingGradient } from './components/FlowingGradient.svelte';
|
|
38
|
+
export { default as FlutedGlass } from './components/FlutedGlass.svelte';
|
|
38
39
|
export { default as Fog } from './components/Fog.svelte';
|
|
39
40
|
export { default as Form3D } from './components/Form3D.svelte';
|
|
40
41
|
export { default as Glass } from './components/Glass.svelte';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as generatePresetCode, t as availableComponents } from "../generatePresetCode-
|
|
1
|
+
import { n as generatePresetCode, t as availableComponents } from "../generatePresetCode-DAEzZxbM.js";
|
|
2
2
|
export { availableComponents, generatePresetCode };
|
|
@@ -0,0 +1,226 @@
|
|
|
1
|
+
import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, effectScope, inject, mergeDefaults, mergeProps, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, toValue, unref, useId, watch } from "vue";
|
|
2
|
+
import { createUniformsMap } from "../core/index.js";
|
|
3
|
+
import { setColorSpaceMode } from "../core/utilities/transformations/index.js";
|
|
4
|
+
import { componentDefinition } from "../core/shaders/FlutedGlass/index.js";
|
|
5
|
+
var _hoisted_1 = ["data-shader-id"];
|
|
6
|
+
var _hoisted_2 = ["width", "height"];
|
|
7
|
+
var FlutedGlass_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
8
|
+
__name: "FlutedGlass",
|
|
9
|
+
props: /* @__PURE__ */ mergeDefaults({
|
|
10
|
+
angle: {},
|
|
11
|
+
frequency: {},
|
|
12
|
+
softness: {},
|
|
13
|
+
waveAmplitude: {},
|
|
14
|
+
waveFrequency: {},
|
|
15
|
+
refraction: {},
|
|
16
|
+
aberration: {},
|
|
17
|
+
highlight: {},
|
|
18
|
+
highlightSoftness: {},
|
|
19
|
+
blendMode: {},
|
|
20
|
+
opacity: {},
|
|
21
|
+
visible: { type: Boolean },
|
|
22
|
+
id: {},
|
|
23
|
+
maskSource: {},
|
|
24
|
+
maskType: {},
|
|
25
|
+
renderOrder: {},
|
|
26
|
+
transform: {},
|
|
27
|
+
shape: {},
|
|
28
|
+
speed: {},
|
|
29
|
+
lightAngle: {},
|
|
30
|
+
highlightColor: {},
|
|
31
|
+
edges: {}
|
|
32
|
+
}, {
|
|
33
|
+
blendMode: "normal",
|
|
34
|
+
visible: true,
|
|
35
|
+
...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
|
|
36
|
+
acc[key] = config.default;
|
|
37
|
+
return acc;
|
|
38
|
+
}, {})
|
|
39
|
+
}),
|
|
40
|
+
setup(__props) {
|
|
41
|
+
let _experimentalWarnedOnce = false;
|
|
42
|
+
if (componentDefinition.experimental && !_experimentalWarnedOnce) {
|
|
43
|
+
_experimentalWarnedOnce = true;
|
|
44
|
+
const _e = componentDefinition.experimental;
|
|
45
|
+
console.info(`%c⚠ [Shaders] ${componentDefinition.name} is experimental: ${_e.message}`, "color: #f59e0b; font-weight: bold");
|
|
46
|
+
}
|
|
47
|
+
function isPropDriver(value) {
|
|
48
|
+
return typeof value === "object" && value !== null && "type" in value && (value.type === "map" || value.type === "mouse" || value.type === "mouse-position" || value.type === "auto-animate");
|
|
49
|
+
}
|
|
50
|
+
const props = __props;
|
|
51
|
+
const instanceId = (props.id ? props.id.replace(/[^a-zA-Z0-9_]/g, "_") : null) || useId().replace(/[^a-zA-Z0-9_]/g, "");
|
|
52
|
+
provide("shaderParentId", instanceId);
|
|
53
|
+
const DEFAULT_TRANSFORM = {
|
|
54
|
+
offsetX: 0,
|
|
55
|
+
offsetY: 0,
|
|
56
|
+
rotation: 0,
|
|
57
|
+
scale: 1,
|
|
58
|
+
anchorX: .5,
|
|
59
|
+
anchorY: .5,
|
|
60
|
+
edges: "transparent"
|
|
61
|
+
};
|
|
62
|
+
const effectiveTransform = computed(() => ({
|
|
63
|
+
...DEFAULT_TRANSFORM,
|
|
64
|
+
...props.transform
|
|
65
|
+
}));
|
|
66
|
+
const shaderReadyProps = computed(() => {
|
|
67
|
+
let baseProps = { ...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
|
|
68
|
+
acc[key] = config.default;
|
|
69
|
+
return acc;
|
|
70
|
+
}, {}) };
|
|
71
|
+
for (const key in props) if (key !== "blendMode" && key !== "opacity" && key !== "visible" && key !== "id" && key !== "maskSource" && key !== "maskType" && key !== "renderOrder" && key !== "transform") {
|
|
72
|
+
const val = toValue(props[key]);
|
|
73
|
+
if (isPropDriver(val)) continue;
|
|
74
|
+
if (val !== Object.entries(componentDefinition.props).reduce((acc, [key$1, config]) => {
|
|
75
|
+
acc[key$1] = config.default;
|
|
76
|
+
return acc;
|
|
77
|
+
}, {})[key]) baseProps[key] = val;
|
|
78
|
+
}
|
|
79
|
+
return baseProps;
|
|
80
|
+
});
|
|
81
|
+
const mapsFromProps = computed(() => {
|
|
82
|
+
const maps = {};
|
|
83
|
+
for (const key of Object.keys(componentDefinition.props)) {
|
|
84
|
+
const val = props[key];
|
|
85
|
+
if (isPropDriver(val)) maps[key] = val;
|
|
86
|
+
}
|
|
87
|
+
return Object.keys(maps).length > 0 ? maps : void 0;
|
|
88
|
+
});
|
|
89
|
+
const shaderColorSpace = inject("shaderColorSpace");
|
|
90
|
+
if (shaderColorSpace) setColorSpaceMode(shaderColorSpace.value);
|
|
91
|
+
const uniforms = createUniformsMap(componentDefinition, shaderReadyProps.value, instanceId);
|
|
92
|
+
const parentId = inject("shaderParentId");
|
|
93
|
+
if (parentId === void 0) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
|
|
94
|
+
const parentRegister = inject("shaderNodeRegister");
|
|
95
|
+
if (parentRegister === void 0) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
|
|
96
|
+
const parentUniformUpdate = inject("shaderUniformUpdate");
|
|
97
|
+
if (parentUniformUpdate === void 0) throw new Error("Shader components require shaderUniformUpdate from parent");
|
|
98
|
+
const parentMetadataUpdate = inject("shaderMetadataUpdate");
|
|
99
|
+
if (parentMetadataUpdate === void 0) throw new Error("Shader components require shaderMetadataUpdate from parent");
|
|
100
|
+
const rendererResetSignal = inject("shaderRendererResetSignal");
|
|
101
|
+
const orderMarker = ref(null);
|
|
102
|
+
const isCapturesDOM = !!componentDefinition.capturesDOM;
|
|
103
|
+
const captureCanvas = ref(null);
|
|
104
|
+
const captureW = ref(typeof window !== "undefined" ? Math.round(window.innerWidth * Math.min(window.devicePixelRatio, 2)) : 0);
|
|
105
|
+
const captureH = ref(typeof window !== "undefined" ? Math.round(window.innerHeight * Math.min(window.devicePixelRatio, 2)) : 0);
|
|
106
|
+
const captureStyle = {
|
|
107
|
+
position: "fixed",
|
|
108
|
+
inset: "0",
|
|
109
|
+
width: "100vw",
|
|
110
|
+
height: "100vh",
|
|
111
|
+
zIndex: "-9999"
|
|
112
|
+
};
|
|
113
|
+
if (isCapturesDOM) {
|
|
114
|
+
const onWinResize = () => {
|
|
115
|
+
const d = Math.min(window.devicePixelRatio, 2);
|
|
116
|
+
captureW.value = Math.round(window.innerWidth * d);
|
|
117
|
+
captureH.value = Math.round(window.innerHeight * d);
|
|
118
|
+
};
|
|
119
|
+
onMounted(() => {
|
|
120
|
+
const d = Math.min(window.devicePixelRatio, 2);
|
|
121
|
+
captureW.value = Math.round(window.innerWidth * d);
|
|
122
|
+
captureH.value = Math.round(window.innerHeight * d);
|
|
123
|
+
window.addEventListener("resize", onWinResize);
|
|
124
|
+
});
|
|
125
|
+
onBeforeUnmount(() => {
|
|
126
|
+
window.removeEventListener("resize", onWinResize);
|
|
127
|
+
});
|
|
128
|
+
}
|
|
129
|
+
let detectedRenderOrder = void 0;
|
|
130
|
+
const registerWithRenderer = () => {
|
|
131
|
+
parentRegister(instanceId, componentDefinition.fragmentNode, parentId, {
|
|
132
|
+
blendMode: props.blendMode,
|
|
133
|
+
opacity: props.opacity,
|
|
134
|
+
visible: props.visible === false ? false : true,
|
|
135
|
+
id: props.id,
|
|
136
|
+
mask: props.maskSource ? {
|
|
137
|
+
source: props.maskSource,
|
|
138
|
+
type: props.maskType || "alpha"
|
|
139
|
+
} : void 0,
|
|
140
|
+
maps: mapsFromProps.value,
|
|
141
|
+
renderOrder: props.renderOrder ?? detectedRenderOrder,
|
|
142
|
+
transform: effectiveTransform.value
|
|
143
|
+
}, uniforms, componentDefinition, isCapturesDOM ? captureCanvas.value ?? void 0 : void 0);
|
|
144
|
+
};
|
|
145
|
+
onMounted(() => {
|
|
146
|
+
if (props.renderOrder === void 0 && orderMarker.value) {
|
|
147
|
+
const parent = orderMarker.value.parentElement;
|
|
148
|
+
if (parent) {
|
|
149
|
+
const siblings = parent.querySelectorAll(":scope > [data-shader-id]");
|
|
150
|
+
const position = Array.from(siblings).indexOf(orderMarker.value);
|
|
151
|
+
if (position >= 0) {
|
|
152
|
+
detectedRenderOrder = position;
|
|
153
|
+
parentMetadataUpdate(instanceId, { renderOrder: position });
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
});
|
|
158
|
+
const setupUniformWatchers = () => {
|
|
159
|
+
const scope = effectScope();
|
|
160
|
+
scope.run(() => {
|
|
161
|
+
Object.entries(uniforms).forEach(([propName, { uniform, transform }]) => {
|
|
162
|
+
watch(() => props[propName], (newValue) => {
|
|
163
|
+
if (uniform && uniform.value !== void 0 && !isPropDriver(newValue)) parentUniformUpdate(instanceId, propName, newValue);
|
|
164
|
+
}, { deep: true });
|
|
165
|
+
});
|
|
166
|
+
watch(() => [
|
|
167
|
+
props.blendMode,
|
|
168
|
+
props.opacity,
|
|
169
|
+
props.visible,
|
|
170
|
+
props.id,
|
|
171
|
+
props.maskSource,
|
|
172
|
+
props.maskType,
|
|
173
|
+
props.renderOrder,
|
|
174
|
+
props.transform,
|
|
175
|
+
mapsFromProps.value
|
|
176
|
+
], ([blendMode, opacity, visible]) => {
|
|
177
|
+
parentMetadataUpdate(instanceId, {
|
|
178
|
+
blendMode,
|
|
179
|
+
opacity,
|
|
180
|
+
visible: visible === false ? false : true,
|
|
181
|
+
id: props.id,
|
|
182
|
+
mask: props.maskSource ? {
|
|
183
|
+
source: props.maskSource,
|
|
184
|
+
type: props.maskType || "alpha"
|
|
185
|
+
} : void 0,
|
|
186
|
+
maps: mapsFromProps.value,
|
|
187
|
+
renderOrder: props.renderOrder ?? detectedRenderOrder,
|
|
188
|
+
transform: effectiveTransform.value
|
|
189
|
+
});
|
|
190
|
+
}, { deep: true });
|
|
191
|
+
if (rendererResetSignal) watch(() => rendererResetSignal.value, (newValue) => {
|
|
192
|
+
if (newValue > 0) registerWithRenderer();
|
|
193
|
+
}, { immediate: true });
|
|
194
|
+
});
|
|
195
|
+
onBeforeUnmount(() => {
|
|
196
|
+
scope.stop();
|
|
197
|
+
});
|
|
198
|
+
};
|
|
199
|
+
if (isCapturesDOM) onMounted(() => {
|
|
200
|
+
setupUniformWatchers();
|
|
201
|
+
});
|
|
202
|
+
else setupUniformWatchers();
|
|
203
|
+
onBeforeUnmount(() => {
|
|
204
|
+
parentRegister(instanceId, null, null, null, null, null);
|
|
205
|
+
});
|
|
206
|
+
return (_ctx, _cache) => {
|
|
207
|
+
return openBlock(), createElementBlock(Fragment, null, [createElementVNode("span", {
|
|
208
|
+
ref_key: "orderMarker",
|
|
209
|
+
ref: orderMarker,
|
|
210
|
+
style: { "display": "contents" },
|
|
211
|
+
"data-shader-id": unref(instanceId)
|
|
212
|
+
}, [!isCapturesDOM ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)], 8, _hoisted_1), isCapturesDOM ? (openBlock(), createBlock(Teleport, {
|
|
213
|
+
key: 0,
|
|
214
|
+
to: "body"
|
|
215
|
+
}, [createElementVNode("canvas", mergeProps({
|
|
216
|
+
ref_key: "captureCanvas",
|
|
217
|
+
ref: captureCanvas
|
|
218
|
+
}, { "layoutsubtree": "" }, {
|
|
219
|
+
width: captureW.value,
|
|
220
|
+
height: captureH.value,
|
|
221
|
+
style: captureStyle
|
|
222
|
+
}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_2)])) : createCommentVNode("", true)], 64);
|
|
223
|
+
};
|
|
224
|
+
}
|
|
225
|
+
});
|
|
226
|
+
export { FlutedGlass_vue_vue_type_script_setup_true_lang_default as default };
|
|
@@ -35,6 +35,7 @@ import FloatingParticles_default from "./FloatingParticles.js";
|
|
|
35
35
|
import FlowField_default from "./FlowField.js";
|
|
36
36
|
import Flower_default from "./Flower.js";
|
|
37
37
|
import FlowingGradient_default from "./FlowingGradient.js";
|
|
38
|
+
import FlutedGlass_default from "./FlutedGlass.js";
|
|
38
39
|
import Fog_default from "./Fog.js";
|
|
39
40
|
import Form3D_default from "./Form3D.js";
|
|
40
41
|
import Glass_default from "./Glass.js";
|
|
@@ -197,6 +198,7 @@ var Preview_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
|
|
|
197
198
|
FlowField: FlowField_default,
|
|
198
199
|
Flower: Flower_default,
|
|
199
200
|
FlowingGradient: FlowingGradient_default,
|
|
201
|
+
FlutedGlass: FlutedGlass_default,
|
|
200
202
|
Fog: Fog_default,
|
|
201
203
|
Form3D: Form3D_default,
|
|
202
204
|
Glass: Glass_default,
|
|
@@ -60,7 +60,7 @@ var Shader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
|
|
|
60
60
|
const startTelemetryWhenReady = () => {
|
|
61
61
|
const checkRendering = () => {
|
|
62
62
|
if (rendererInstance.value.getPerformanceStats().fps > 0) {
|
|
63
|
-
telemetryCollector = startTelemetry(rendererInstance.value, "2.5.
|
|
63
|
+
telemetryCollector = startTelemetry(rendererInstance.value, "2.5.111", props.disableTelemetry, props.isPreview);
|
|
64
64
|
if (telemetryCollector) telemetryCollector.start();
|
|
65
65
|
telemetryStartTimeout = null;
|
|
66
66
|
} else telemetryStartTimeout = setTimeout(checkRendering, 500);
|