shaders 2.2.43 → 2.2.44
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/index.d.ts +0 -2
- package/dist/core/index.d.ts.map +1 -1
- package/dist/core/index.js +8 -170
- package/dist/core/registry.d.ts +10 -0
- package/dist/core/registry.d.ts.map +1 -0
- package/dist/core/registry.js +166 -0
- package/dist/react/AngularBlur.js +144 -0
- package/dist/react/Ascii.js +144 -0
- package/dist/react/Beam.js +144 -0
- package/dist/react/Blob.js +144 -0
- package/dist/react/Blur.js +144 -0
- package/dist/react/BrightnessContrast.js +144 -0
- package/dist/react/Bulge.js +144 -0
- package/dist/react/CRTScreen.js +144 -0
- package/dist/react/ChannelBlur.js +144 -0
- package/dist/react/Checkerboard.js +144 -0
- package/dist/react/ChromaFlow.js +144 -0
- package/dist/react/ChromaticAberration.js +144 -0
- package/dist/react/Circle.js +144 -0
- package/dist/react/CursorTrail.js +144 -0
- package/dist/react/DiffuseBlur.js +144 -0
- package/dist/react/Dither.js +144 -0
- package/dist/react/DotGrid.js +144 -0
- package/dist/react/Duotone.js +144 -0
- package/dist/react/FilmGrain.js +144 -0
- package/dist/react/FloatingParticles.js +144 -0
- package/dist/react/GlassTiles.js +144 -0
- package/dist/react/Glow.js +144 -0
- package/dist/react/Godrays.js +144 -0
- package/dist/react/Grayscale.js +144 -0
- package/dist/react/Grid.js +144 -0
- package/dist/react/GridDistortion.js +144 -0
- package/dist/react/Group.js +144 -0
- package/dist/react/Halftone.js +144 -0
- package/dist/react/HueShift.js +144 -0
- package/dist/react/ImageTexture.js +144 -0
- package/dist/react/Invert.js +144 -0
- package/dist/react/LinearBlur.js +144 -0
- package/dist/react/LinearGradient.js +144 -0
- package/dist/react/Liquify.js +144 -0
- package/dist/react/Perspective.js +144 -0
- package/dist/react/Pixelate.js +144 -0
- package/dist/react/PolarCoordinates.js +144 -0
- package/dist/react/Posterize.js +144 -0
- package/dist/react/ProgressiveBlur.js +144 -0
- package/dist/react/RadialGradient.js +144 -0
- package/dist/react/RectangularCoordinates.js +144 -0
- package/dist/react/Ripples.js +144 -0
- package/dist/react/Saturation.js +144 -0
- package/dist/react/Shader.js +166 -0
- package/dist/react/Sharpness.js +144 -0
- package/dist/react/Shatter.js +144 -0
- package/dist/react/SimplexNoise.js +144 -0
- package/dist/react/SineWave.js +144 -0
- package/dist/react/SolidColor.js +144 -0
- package/dist/react/Spherize.js +144 -0
- package/dist/react/Spiral.js +144 -0
- package/dist/react/Strands.js +144 -0
- package/dist/react/Stretch.js +144 -0
- package/dist/react/Stripes.js +144 -0
- package/dist/react/Swirl.js +144 -0
- package/dist/react/TiltShift.js +144 -0
- package/dist/react/Tint.js +144 -0
- package/dist/react/Tritone.js +144 -0
- package/dist/react/Twirl.js +144 -0
- package/dist/react/Vibrance.js +144 -0
- package/dist/react/WaveDistortion.js +144 -0
- package/dist/react/WebcamTexture.js +144 -0
- package/dist/react/ZoomBlur.js +144 -0
- package/dist/react/index.js +64 -8784
- package/dist/react/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/react/utils/generatePresetCode.js +392 -1
- package/dist/solid/components/AngularBlur.js +148 -0
- package/dist/solid/components/Ascii.js +148 -0
- package/dist/solid/components/Beam.js +148 -0
- package/dist/solid/components/Blob.js +148 -0
- package/dist/solid/components/Blur.js +148 -0
- package/dist/solid/components/BrightnessContrast.js +148 -0
- package/dist/solid/components/Bulge.js +148 -0
- package/dist/solid/components/CRTScreen.js +148 -0
- package/dist/solid/components/ChannelBlur.js +148 -0
- package/dist/solid/components/Checkerboard.js +148 -0
- package/dist/solid/components/ChromaFlow.js +148 -0
- package/dist/solid/components/ChromaticAberration.js +148 -0
- package/dist/solid/components/Circle.js +148 -0
- package/dist/solid/components/CursorTrail.js +148 -0
- package/dist/solid/components/DiffuseBlur.js +148 -0
- package/dist/solid/components/Dither.js +148 -0
- package/dist/solid/components/DotGrid.js +148 -0
- package/dist/solid/components/Duotone.js +148 -0
- package/dist/solid/components/FilmGrain.js +148 -0
- package/dist/solid/components/FloatingParticles.js +148 -0
- package/dist/solid/components/GlassTiles.js +148 -0
- package/dist/solid/components/Glow.js +148 -0
- package/dist/solid/components/Godrays.js +148 -0
- package/dist/solid/components/Grayscale.js +148 -0
- package/dist/solid/components/Grid.js +148 -0
- package/dist/solid/components/GridDistortion.js +148 -0
- package/dist/solid/components/Group.js +148 -0
- package/dist/solid/components/Halftone.js +148 -0
- package/dist/solid/components/HueShift.js +148 -0
- package/dist/solid/components/ImageTexture.js +148 -0
- package/dist/solid/components/Invert.js +148 -0
- package/dist/solid/components/LinearBlur.js +148 -0
- package/dist/solid/components/LinearGradient.js +148 -0
- package/dist/solid/components/Liquify.js +148 -0
- package/dist/solid/components/Perspective.js +148 -0
- package/dist/solid/components/Pixelate.js +148 -0
- package/dist/solid/components/PolarCoordinates.js +148 -0
- package/dist/solid/components/Posterize.js +148 -0
- package/dist/solid/components/ProgressiveBlur.js +148 -0
- package/dist/solid/components/RadialGradient.js +148 -0
- package/dist/solid/components/RectangularCoordinates.js +148 -0
- package/dist/solid/components/Ripples.js +148 -0
- package/dist/solid/components/Saturation.js +148 -0
- package/dist/solid/components/Sharpness.js +148 -0
- package/dist/solid/components/Shatter.js +148 -0
- package/dist/solid/components/SimplexNoise.js +148 -0
- package/dist/solid/components/SineWave.js +148 -0
- package/dist/solid/components/SolidColor.js +148 -0
- package/dist/solid/components/Spherize.js +148 -0
- package/dist/solid/components/Spiral.js +148 -0
- package/dist/solid/components/Strands.js +148 -0
- package/dist/solid/components/Stretch.js +148 -0
- package/dist/solid/components/Stripes.js +148 -0
- package/dist/solid/components/Swirl.js +148 -0
- package/dist/solid/components/TiltShift.js +148 -0
- package/dist/solid/components/Tint.js +148 -0
- package/dist/solid/components/Tritone.js +148 -0
- package/dist/solid/components/Twirl.js +148 -0
- package/dist/solid/components/Vibrance.js +148 -0
- package/dist/solid/components/WaveDistortion.js +148 -0
- package/dist/solid/components/WebcamTexture.js +148 -0
- package/dist/solid/components/ZoomBlur.js +148 -0
- package/dist/solid/engine/Shader.js +189 -0
- package/dist/solid/index.js +126 -8989
- package/dist/solid/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/solid/utils/generatePresetCode.js +62 -417
- package/dist/svelte/generatePresetCode-CtXcoyI0.js +393 -0
- package/dist/svelte/index.js +1 -1
- package/dist/svelte/utils/generatePresetCode.js +1 -1
- package/dist/vue/AngularBlur.js +3 -0
- package/dist/vue/AngularBlur.vue_vue_type_script_setup_true_lang.js +125 -0
- package/dist/vue/Ascii.js +3 -0
- package/dist/vue/Ascii.vue_vue_type_script_setup_true_lang.js +127 -0
- package/dist/vue/Beam.js +3 -0
- package/dist/vue/Beam.vue_vue_type_script_setup_true_lang.js +132 -0
- package/dist/vue/Blob.js +3 -0
- package/dist/vue/Blob.vue_vue_type_script_setup_true_lang.js +137 -0
- package/dist/vue/Blur.js +3 -0
- package/dist/vue/Blur.vue_vue_type_script_setup_true_lang.js +124 -0
- package/dist/vue/BrightnessContrast.js +3 -0
- package/dist/vue/BrightnessContrast.vue_vue_type_script_setup_true_lang.js +125 -0
- package/dist/vue/Bulge.js +3 -0
- package/dist/vue/Bulge.vue_vue_type_script_setup_true_lang.js +128 -0
- package/dist/vue/CRTScreen.js +3 -0
- package/dist/vue/CRTScreen.vue_vue_type_script_setup_true_lang.js +129 -0
- package/dist/vue/ChannelBlur.js +3 -0
- package/dist/vue/ChannelBlur.vue_vue_type_script_setup_true_lang.js +126 -0
- package/dist/vue/Checkerboard.js +3 -0
- package/dist/vue/Checkerboard.vue_vue_type_script_setup_true_lang.js +128 -0
- package/dist/vue/ChromaFlow.js +3 -0
- package/dist/vue/ChromaFlow.vue_vue_type_script_setup_true_lang.js +131 -0
- package/dist/vue/ChromaticAberration.js +3 -0
- package/dist/vue/ChromaticAberration.vue_vue_type_script_setup_true_lang.js +128 -0
- package/dist/vue/Circle.js +3 -0
- package/dist/vue/Circle.vue_vue_type_script_setup_true_lang.js +127 -0
- package/dist/vue/CursorTrail.js +3 -0
- package/dist/vue/CursorTrail.vue_vue_type_script_setup_true_lang.js +129 -0
- package/dist/vue/DiffuseBlur.js +3 -0
- package/dist/vue/DiffuseBlur.vue_vue_type_script_setup_true_lang.js +125 -0
- package/dist/vue/Dither.js +3 -0
- package/dist/vue/Dither.vue_vue_type_script_setup_true_lang.js +127 -0
- package/dist/vue/DotGrid.js +3 -0
- package/dist/vue/DotGrid.vue_vue_type_script_setup_true_lang.js +127 -0
- package/dist/vue/Duotone.js +3 -0
- package/dist/vue/Duotone.vue_vue_type_script_setup_true_lang.js +127 -0
- package/dist/vue/FilmGrain.js +3 -0
- package/dist/vue/FilmGrain.vue_vue_type_script_setup_true_lang.js +124 -0
- package/dist/vue/FloatingParticles.js +3 -0
- package/dist/vue/FloatingParticles.vue_vue_type_script_setup_true_lang.js +134 -0
- package/dist/vue/GlassTiles.js +3 -0
- package/dist/vue/GlassTiles.vue_vue_type_script_setup_true_lang.js +127 -0
- package/dist/vue/Glow.js +3 -0
- package/dist/vue/Glow.vue_vue_type_script_setup_true_lang.js +126 -0
- package/dist/vue/Godrays.js +3 -0
- package/dist/vue/Godrays.vue_vue_type_script_setup_true_lang.js +130 -0
- package/dist/vue/Grayscale.js +3 -0
- package/dist/vue/Grayscale.vue_vue_type_script_setup_true_lang.js +123 -0
- package/dist/vue/Grid.js +3 -0
- package/dist/vue/Grid.vue_vue_type_script_setup_true_lang.js +126 -0
- package/dist/vue/GridDistortion.js +3 -0
- package/dist/vue/GridDistortion.vue_vue_type_script_setup_true_lang.js +129 -0
- package/dist/vue/Group.js +3 -0
- package/dist/vue/Group.vue_vue_type_script_setup_true_lang.js +123 -0
- package/dist/vue/Halftone.js +3 -0
- package/dist/vue/Halftone.vue_vue_type_script_setup_true_lang.js +126 -0
- package/dist/vue/HueShift.js +3 -0
- package/dist/vue/HueShift.vue_vue_type_script_setup_true_lang.js +124 -0
- package/dist/vue/ImageTexture.js +3 -0
- package/dist/vue/ImageTexture.vue_vue_type_script_setup_true_lang.js +125 -0
- package/dist/vue/Invert.js +3 -0
- package/dist/vue/Invert.vue_vue_type_script_setup_true_lang.js +123 -0
- package/dist/vue/LinearBlur.js +3 -0
- package/dist/vue/LinearBlur.vue_vue_type_script_setup_true_lang.js +125 -0
- package/dist/vue/LinearGradient.js +3 -0
- package/dist/vue/LinearGradient.vue_vue_type_script_setup_true_lang.js +130 -0
- package/dist/vue/Liquify.js +3 -0
- package/dist/vue/Liquify.vue_vue_type_script_setup_true_lang.js +128 -0
- package/dist/vue/Perspective.js +3 -0
- package/dist/vue/Perspective.vue_vue_type_script_setup_true_lang.js +130 -0
- package/dist/vue/Pixelate.js +3 -0
- package/dist/vue/Pixelate.vue_vue_type_script_setup_true_lang.js +124 -0
- package/dist/vue/PolarCoordinates.js +3 -0
- package/dist/vue/PolarCoordinates.vue_vue_type_script_setup_true_lang.js +128 -0
- package/dist/vue/Posterize.js +3 -0
- package/dist/vue/Posterize.vue_vue_type_script_setup_true_lang.js +124 -0
- package/dist/vue/ProgressiveBlur.js +3 -0
- package/dist/vue/ProgressiveBlur.vue_vue_type_script_setup_true_lang.js +127 -0
- package/dist/vue/RadialGradient.js +3 -0
- package/dist/vue/RadialGradient.vue_vue_type_script_setup_true_lang.js +128 -0
- package/dist/vue/RectangularCoordinates.js +3 -0
- package/dist/vue/RectangularCoordinates.vue_vue_type_script_setup_true_lang.js +127 -0
- package/dist/vue/Ripples.js +3 -0
- package/dist/vue/Ripples.vue_vue_type_script_setup_true_lang.js +131 -0
- package/dist/vue/Saturation.js +3 -0
- package/dist/vue/Saturation.vue_vue_type_script_setup_true_lang.js +124 -0
- package/dist/vue/Shader.js +3 -0
- package/dist/vue/Shader.vue_vue_type_script_setup_true_lang.js +153 -0
- package/dist/vue/Sharpness.js +3 -0
- package/dist/vue/Sharpness.vue_vue_type_script_setup_true_lang.js +124 -0
- package/dist/vue/Shatter.js +3 -0
- package/dist/vue/Shatter.vue_vue_type_script_setup_true_lang.js +132 -0
- package/dist/vue/SimplexNoise.js +3 -0
- package/dist/vue/SimplexNoise.vue_vue_type_script_setup_true_lang.js +130 -0
- package/dist/vue/SineWave.js +3 -0
- package/dist/vue/SineWave.vue_vue_type_script_setup_true_lang.js +131 -0
- package/dist/vue/SolidColor.js +3 -0
- package/dist/vue/SolidColor.vue_vue_type_script_setup_true_lang.js +124 -0
- package/dist/vue/Spherize.js +3 -0
- package/dist/vue/Spherize.vue_vue_type_script_setup_true_lang.js +130 -0
- package/dist/vue/Spiral.js +3 -0
- package/dist/vue/Spiral.vue_vue_type_script_setup_true_lang.js +132 -0
- package/dist/vue/Strands.js +3 -0
- package/dist/vue/Strands.vue_vue_type_script_setup_true_lang.js +132 -0
- package/dist/vue/Stretch.js +3 -0
- package/dist/vue/Stretch.vue_vue_type_script_setup_true_lang.js +128 -0
- package/dist/vue/Stripes.js +3 -0
- package/dist/vue/Stripes.vue_vue_type_script_setup_true_lang.js +132 -0
- package/dist/vue/Swirl.js +3 -0
- package/dist/vue/Swirl.vue_vue_type_script_setup_true_lang.js +129 -0
- package/dist/vue/TiltShift.js +3 -0
- package/dist/vue/TiltShift.vue_vue_type_script_setup_true_lang.js +128 -0
- package/dist/vue/Tint.js +3 -0
- package/dist/vue/Tint.vue_vue_type_script_setup_true_lang.js +126 -0
- package/dist/vue/Tritone.js +3 -0
- package/dist/vue/Tritone.vue_vue_type_script_setup_true_lang.js +128 -0
- package/dist/vue/Twirl.js +3 -0
- package/dist/vue/Twirl.vue_vue_type_script_setup_true_lang.js +126 -0
- package/dist/vue/Vibrance.js +3 -0
- package/dist/vue/Vibrance.vue_vue_type_script_setup_true_lang.js +124 -0
- package/dist/vue/WaveDistortion.js +3 -0
- package/dist/vue/WaveDistortion.vue_vue_type_script_setup_true_lang.js +129 -0
- package/dist/vue/WebcamTexture.js +3 -0
- package/dist/vue/WebcamTexture.vue_vue_type_script_setup_true_lang.js +125 -0
- package/dist/vue/ZoomBlur.js +3 -0
- package/dist/vue/ZoomBlur.vue_vue_type_script_setup_true_lang.js +125 -0
- package/dist/vue/index.js +64 -7870
- package/dist/vue/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/vue/utils/generatePresetCode.js +391 -1
- package/package.json +1 -1
- package/dist/react/generatePresetCode-D0yiVxb4.js +0 -748
- package/dist/svelte/generatePresetCode-DUGaV_ym.js +0 -748
- package/dist/vue/generatePresetCode-CShQ8TLw.js +0 -747
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
import { computed, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, provide, renderSlot, toValue, watch } from "vue";
|
|
2
|
+
import { createUniformsMap } from "../core/index.js";
|
|
3
|
+
import { componentDefinition } from "../core/shaders/Saturation/index.js";
|
|
4
|
+
var Saturation_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
5
|
+
__name: "Saturation",
|
|
6
|
+
props: /* @__PURE__ */ mergeDefaults({
|
|
7
|
+
blendMode: {},
|
|
8
|
+
opacity: {},
|
|
9
|
+
visible: { type: Boolean },
|
|
10
|
+
id: {},
|
|
11
|
+
maskSource: {},
|
|
12
|
+
maskType: {},
|
|
13
|
+
renderOrder: {},
|
|
14
|
+
transform: {},
|
|
15
|
+
intensity: {}
|
|
16
|
+
}, {
|
|
17
|
+
blendMode: "normal",
|
|
18
|
+
renderOrder: 0,
|
|
19
|
+
visible: true,
|
|
20
|
+
...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
|
|
21
|
+
acc[key] = config.default;
|
|
22
|
+
return acc;
|
|
23
|
+
}, {})
|
|
24
|
+
}),
|
|
25
|
+
setup(__props) {
|
|
26
|
+
const props = __props;
|
|
27
|
+
const instanceId = props.id || `${componentDefinition.name.toLowerCase()}_${Math.random().toString(36).substring(7)}`;
|
|
28
|
+
provide("ombreParentId", instanceId);
|
|
29
|
+
const DEFAULT_TRANSFORM = {
|
|
30
|
+
offsetX: 0,
|
|
31
|
+
offsetY: 0,
|
|
32
|
+
rotation: 0,
|
|
33
|
+
scale: 1,
|
|
34
|
+
anchorX: .5,
|
|
35
|
+
anchorY: .5,
|
|
36
|
+
edges: "transparent"
|
|
37
|
+
};
|
|
38
|
+
const effectiveTransform = computed(() => ({
|
|
39
|
+
...DEFAULT_TRANSFORM,
|
|
40
|
+
...props.transform
|
|
41
|
+
}));
|
|
42
|
+
const uniforms = createUniformsMap(componentDefinition, computed(() => {
|
|
43
|
+
let baseProps = { ...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
|
|
44
|
+
acc[key] = config.default;
|
|
45
|
+
return acc;
|
|
46
|
+
}, {}) };
|
|
47
|
+
for (const key in props) if (key !== "blendMode" && key !== "opacity" && key !== "visible" && key !== "id" && key !== "maskSource" && key !== "maskType" && key !== "renderOrder" && key !== "transform" && props[key] !== Object.entries(componentDefinition.props).reduce((acc, [key$1, config]) => {
|
|
48
|
+
acc[key$1] = config.default;
|
|
49
|
+
return acc;
|
|
50
|
+
}, {})[key]) baseProps[key] = toValue(props[key]);
|
|
51
|
+
return baseProps;
|
|
52
|
+
}).value, instanceId);
|
|
53
|
+
const parentId = inject("ombreParentId");
|
|
54
|
+
if (parentId === void 0) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
|
|
55
|
+
const parentRegister = inject("ombreNodeRegister");
|
|
56
|
+
if (parentRegister === void 0) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
|
|
57
|
+
const parentUniformUpdate = inject("ombreUniformUpdate");
|
|
58
|
+
if (parentUniformUpdate === void 0) throw new Error("Shader components require ombreUniformUpdate from parent");
|
|
59
|
+
const parentMetadataUpdate = inject("ombreMetadataUpdate");
|
|
60
|
+
if (parentMetadataUpdate === void 0) throw new Error("Shader components require ombreMetadataUpdate from parent");
|
|
61
|
+
const rendererResetSignal = inject("ombreRendererResetSignal");
|
|
62
|
+
const registerWithRenderer = () => {
|
|
63
|
+
parentRegister(instanceId, componentDefinition.fragmentNode, parentId, {
|
|
64
|
+
blendMode: props.blendMode,
|
|
65
|
+
opacity: props.opacity,
|
|
66
|
+
visible: props.visible === false ? false : true,
|
|
67
|
+
id: props.id,
|
|
68
|
+
mask: props.maskSource ? {
|
|
69
|
+
source: props.maskSource,
|
|
70
|
+
type: props.maskType || "alpha"
|
|
71
|
+
} : void 0,
|
|
72
|
+
renderOrder: props.renderOrder,
|
|
73
|
+
transform: effectiveTransform.value
|
|
74
|
+
}, uniforms, componentDefinition);
|
|
75
|
+
};
|
|
76
|
+
const setupUniformWatchers = () => {
|
|
77
|
+
const scope = effectScope();
|
|
78
|
+
scope.run(() => {
|
|
79
|
+
Object.entries(uniforms).forEach(([propName, { uniform, transform }]) => {
|
|
80
|
+
watch(() => props[propName], (newValue) => {
|
|
81
|
+
if (uniform && uniform.value !== void 0) parentUniformUpdate(instanceId, propName, newValue);
|
|
82
|
+
}, { deep: true });
|
|
83
|
+
});
|
|
84
|
+
watch(() => [
|
|
85
|
+
props.blendMode,
|
|
86
|
+
props.opacity,
|
|
87
|
+
props.visible,
|
|
88
|
+
props.id,
|
|
89
|
+
props.maskSource,
|
|
90
|
+
props.maskType,
|
|
91
|
+
props.renderOrder,
|
|
92
|
+
props.transform
|
|
93
|
+
], ([blendMode, opacity, visible]) => {
|
|
94
|
+
parentMetadataUpdate(instanceId, {
|
|
95
|
+
blendMode,
|
|
96
|
+
opacity,
|
|
97
|
+
visible: visible === false ? false : true,
|
|
98
|
+
id: props.id,
|
|
99
|
+
mask: props.maskSource ? {
|
|
100
|
+
source: props.maskSource,
|
|
101
|
+
type: props.maskType || "alpha"
|
|
102
|
+
} : void 0,
|
|
103
|
+
renderOrder: props.renderOrder,
|
|
104
|
+
transform: effectiveTransform.value
|
|
105
|
+
});
|
|
106
|
+
}, { deep: true });
|
|
107
|
+
if (rendererResetSignal) watch(() => rendererResetSignal.value, (newValue) => {
|
|
108
|
+
if (newValue > 0) registerWithRenderer();
|
|
109
|
+
}, { immediate: true });
|
|
110
|
+
});
|
|
111
|
+
onBeforeUnmount(() => {
|
|
112
|
+
scope.stop();
|
|
113
|
+
});
|
|
114
|
+
};
|
|
115
|
+
setupUniformWatchers();
|
|
116
|
+
onBeforeUnmount(() => {
|
|
117
|
+
parentRegister(instanceId, null, null, null, null, null);
|
|
118
|
+
});
|
|
119
|
+
return (_ctx, _cache) => {
|
|
120
|
+
return renderSlot(_ctx.$slots, "default");
|
|
121
|
+
};
|
|
122
|
+
}
|
|
123
|
+
});
|
|
124
|
+
export { Saturation_vue_vue_type_script_setup_true_lang_default as default };
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
import { createElementBlock, createElementVNode, defineComponent, mergeProps, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot } from "vue";
|
|
2
|
+
import { shaderRenderer } from "../core/index.js";
|
|
3
|
+
import { vec4 } from "three/tsl";
|
|
4
|
+
import { TelemetryCollector, isExternalUser, shouldCollectTelemetry } from "../core/telemetry/index.js";
|
|
5
|
+
var Shader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
6
|
+
__name: "Shader",
|
|
7
|
+
props: { hideNotice: {
|
|
8
|
+
type: Boolean,
|
|
9
|
+
default: false
|
|
10
|
+
} },
|
|
11
|
+
setup(__props, { expose: __expose }) {
|
|
12
|
+
const props = __props;
|
|
13
|
+
const containerRef = ref(null);
|
|
14
|
+
const canvasRef = ref(null);
|
|
15
|
+
const rootId = ref("ombre-root-" + Math.random().toString(36).substring(7));
|
|
16
|
+
const rendererInstance = ref(shaderRenderer());
|
|
17
|
+
const rendererResetSignal = ref(0);
|
|
18
|
+
let telemetryCollector = null;
|
|
19
|
+
provide("ombreParentId", rootId.value);
|
|
20
|
+
provide("ombreRendererResetSignal", rendererResetSignal);
|
|
21
|
+
provide("ombreNodeRegister", (id, fragmentNodeFunc, parentId, metadata, uniforms = null, componentDefinition = null) => {
|
|
22
|
+
if (fragmentNodeFunc === null) rendererInstance.value.removeNode(id);
|
|
23
|
+
else rendererInstance.value.registerNode(id, fragmentNodeFunc, parentId, metadata, uniforms, componentDefinition);
|
|
24
|
+
});
|
|
25
|
+
provide("ombreUniformUpdate", (nodeId, uniformName, value) => {
|
|
26
|
+
rendererInstance.value.updateUniformValue(nodeId, uniformName, value);
|
|
27
|
+
});
|
|
28
|
+
provide("ombreMetadataUpdate", (nodeId, metadata) => {
|
|
29
|
+
rendererInstance.value.updateNodeMetadata(nodeId, metadata);
|
|
30
|
+
});
|
|
31
|
+
const initializeRenderer = async () => {
|
|
32
|
+
if (!canvasRef.value) return;
|
|
33
|
+
if (!rendererInstance.value.isInitialized()) await rendererInstance.value.initialize({
|
|
34
|
+
canvas: canvasRef.value,
|
|
35
|
+
enablePerformanceTracking: true
|
|
36
|
+
});
|
|
37
|
+
rendererInstance.value.registerNode(rootId.value, ({ childNode }) => childNode || vec4(0, 0, 0, 0), null, null, {}, void 0);
|
|
38
|
+
if (!props.hideNotice) rendererInstance.value.showLicenseWarning();
|
|
39
|
+
if (isExternalUser() && shouldCollectTelemetry()) {
|
|
40
|
+
telemetryCollector = new TelemetryCollector(rendererInstance.value);
|
|
41
|
+
telemetryCollector.start();
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
let wasVisible = false;
|
|
45
|
+
let visibilityObserver = null;
|
|
46
|
+
const setupVisibilityObserver = () => {
|
|
47
|
+
if (!containerRef.value || visibilityObserver) return;
|
|
48
|
+
visibilityObserver = new IntersectionObserver((entries) => {
|
|
49
|
+
const entry = entries[0];
|
|
50
|
+
if (!entry) return;
|
|
51
|
+
const rect = containerRef.value?.getBoundingClientRect();
|
|
52
|
+
const isCurrentlyVisible = entry.isIntersecting && rect && rect.width > 0 && rect.height > 0;
|
|
53
|
+
if (isCurrentlyVisible && !wasVisible) {
|
|
54
|
+
if (rendererInstance.value.isInitialized()) rendererInstance.value.startAnimation();
|
|
55
|
+
else initializeRenderer().then(() => {
|
|
56
|
+
rendererResetSignal.value++;
|
|
57
|
+
}).catch(console.error);
|
|
58
|
+
wasVisible = true;
|
|
59
|
+
} else if (!isCurrentlyVisible && wasVisible) {
|
|
60
|
+
rendererInstance.value.stopAnimation();
|
|
61
|
+
wasVisible = false;
|
|
62
|
+
}
|
|
63
|
+
}, { threshold: 0 });
|
|
64
|
+
visibilityObserver.observe(containerRef.value);
|
|
65
|
+
};
|
|
66
|
+
onMounted(async () => {
|
|
67
|
+
if (canvasRef.value && containerRef.value) {
|
|
68
|
+
const rect = containerRef.value.getBoundingClientRect();
|
|
69
|
+
if (rect.width > 0 && rect.height > 0) {
|
|
70
|
+
await initializeRenderer();
|
|
71
|
+
rendererResetSignal.value++;
|
|
72
|
+
wasVisible = true;
|
|
73
|
+
} else wasVisible = false;
|
|
74
|
+
setupVisibilityObserver();
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
const captureScreenshot = async (maxWidth = 1200) => {
|
|
78
|
+
if (!canvasRef.value) throw new Error("Canvas not available");
|
|
79
|
+
try {
|
|
80
|
+
await rendererInstance.value.renderAndWait();
|
|
81
|
+
} catch (error) {
|
|
82
|
+
console.warn("Failed to force render before screenshot:", error);
|
|
83
|
+
}
|
|
84
|
+
return new Promise((resolve, reject) => {
|
|
85
|
+
const sourceCanvas = canvasRef.value;
|
|
86
|
+
const sourceWidth = sourceCanvas.width;
|
|
87
|
+
const sourceHeight = sourceCanvas.height;
|
|
88
|
+
let targetWidth = sourceWidth;
|
|
89
|
+
let targetHeight = sourceHeight;
|
|
90
|
+
if (sourceWidth > maxWidth) {
|
|
91
|
+
targetWidth = maxWidth;
|
|
92
|
+
targetHeight = Math.round(sourceHeight / sourceWidth * maxWidth);
|
|
93
|
+
}
|
|
94
|
+
const dataUrl = sourceCanvas.toDataURL("image/png");
|
|
95
|
+
const img = new Image();
|
|
96
|
+
img.onload = () => {
|
|
97
|
+
const tempCanvas = document.createElement("canvas");
|
|
98
|
+
tempCanvas.width = targetWidth;
|
|
99
|
+
tempCanvas.height = targetHeight;
|
|
100
|
+
const ctx = tempCanvas.getContext("2d");
|
|
101
|
+
if (!ctx) {
|
|
102
|
+
reject(/* @__PURE__ */ new Error("Failed to get canvas context"));
|
|
103
|
+
return;
|
|
104
|
+
}
|
|
105
|
+
ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
|
|
106
|
+
tempCanvas.toBlob((blob) => {
|
|
107
|
+
if (blob) resolve(blob);
|
|
108
|
+
else reject(/* @__PURE__ */ new Error("Failed to capture screenshot"));
|
|
109
|
+
}, "image/jpeg", .85);
|
|
110
|
+
};
|
|
111
|
+
img.onerror = () => {
|
|
112
|
+
reject(/* @__PURE__ */ new Error("Failed to load canvas image"));
|
|
113
|
+
};
|
|
114
|
+
img.src = dataUrl;
|
|
115
|
+
});
|
|
116
|
+
};
|
|
117
|
+
const getPerformanceStats = () => {
|
|
118
|
+
return rendererInstance.value.getPerformanceStats();
|
|
119
|
+
};
|
|
120
|
+
__expose({
|
|
121
|
+
captureScreenshot,
|
|
122
|
+
getPerformanceStats
|
|
123
|
+
});
|
|
124
|
+
onBeforeUnmount(() => {
|
|
125
|
+
if (telemetryCollector) {
|
|
126
|
+
telemetryCollector.stop();
|
|
127
|
+
telemetryCollector = null;
|
|
128
|
+
}
|
|
129
|
+
if (visibilityObserver) {
|
|
130
|
+
visibilityObserver.disconnect();
|
|
131
|
+
visibilityObserver = null;
|
|
132
|
+
}
|
|
133
|
+
rendererInstance.value.cleanup();
|
|
134
|
+
});
|
|
135
|
+
return (_ctx, _cache) => {
|
|
136
|
+
return openBlock(), createElementBlock("div", mergeProps({
|
|
137
|
+
class: "shader",
|
|
138
|
+
ref_key: "containerRef",
|
|
139
|
+
ref: containerRef
|
|
140
|
+
}, _ctx.$attrs), [createElementVNode("canvas", {
|
|
141
|
+
"data-renderer": "shaders",
|
|
142
|
+
ref_key: "canvasRef",
|
|
143
|
+
ref: canvasRef,
|
|
144
|
+
style: {
|
|
145
|
+
"width": "100%",
|
|
146
|
+
"height": "100%",
|
|
147
|
+
"display": "block"
|
|
148
|
+
}
|
|
149
|
+
}, [renderSlot(_ctx.$slots, "default")], 512)], 16);
|
|
150
|
+
};
|
|
151
|
+
}
|
|
152
|
+
});
|
|
153
|
+
export { Shader_vue_vue_type_script_setup_true_lang_default as default };
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
import { computed, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, provide, renderSlot, toValue, watch } from "vue";
|
|
2
|
+
import { createUniformsMap } from "../core/index.js";
|
|
3
|
+
import { componentDefinition } from "../core/shaders/Sharpness/index.js";
|
|
4
|
+
var Sharpness_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
5
|
+
__name: "Sharpness",
|
|
6
|
+
props: /* @__PURE__ */ mergeDefaults({
|
|
7
|
+
blendMode: {},
|
|
8
|
+
opacity: {},
|
|
9
|
+
visible: { type: Boolean },
|
|
10
|
+
id: {},
|
|
11
|
+
maskSource: {},
|
|
12
|
+
maskType: {},
|
|
13
|
+
renderOrder: {},
|
|
14
|
+
transform: {},
|
|
15
|
+
sharpness: {}
|
|
16
|
+
}, {
|
|
17
|
+
blendMode: "normal",
|
|
18
|
+
renderOrder: 0,
|
|
19
|
+
visible: true,
|
|
20
|
+
...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
|
|
21
|
+
acc[key] = config.default;
|
|
22
|
+
return acc;
|
|
23
|
+
}, {})
|
|
24
|
+
}),
|
|
25
|
+
setup(__props) {
|
|
26
|
+
const props = __props;
|
|
27
|
+
const instanceId = props.id || `${componentDefinition.name.toLowerCase()}_${Math.random().toString(36).substring(7)}`;
|
|
28
|
+
provide("ombreParentId", instanceId);
|
|
29
|
+
const DEFAULT_TRANSFORM = {
|
|
30
|
+
offsetX: 0,
|
|
31
|
+
offsetY: 0,
|
|
32
|
+
rotation: 0,
|
|
33
|
+
scale: 1,
|
|
34
|
+
anchorX: .5,
|
|
35
|
+
anchorY: .5,
|
|
36
|
+
edges: "transparent"
|
|
37
|
+
};
|
|
38
|
+
const effectiveTransform = computed(() => ({
|
|
39
|
+
...DEFAULT_TRANSFORM,
|
|
40
|
+
...props.transform
|
|
41
|
+
}));
|
|
42
|
+
const uniforms = createUniformsMap(componentDefinition, computed(() => {
|
|
43
|
+
let baseProps = { ...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
|
|
44
|
+
acc[key] = config.default;
|
|
45
|
+
return acc;
|
|
46
|
+
}, {}) };
|
|
47
|
+
for (const key in props) if (key !== "blendMode" && key !== "opacity" && key !== "visible" && key !== "id" && key !== "maskSource" && key !== "maskType" && key !== "renderOrder" && key !== "transform" && props[key] !== Object.entries(componentDefinition.props).reduce((acc, [key$1, config]) => {
|
|
48
|
+
acc[key$1] = config.default;
|
|
49
|
+
return acc;
|
|
50
|
+
}, {})[key]) baseProps[key] = toValue(props[key]);
|
|
51
|
+
return baseProps;
|
|
52
|
+
}).value, instanceId);
|
|
53
|
+
const parentId = inject("ombreParentId");
|
|
54
|
+
if (parentId === void 0) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
|
|
55
|
+
const parentRegister = inject("ombreNodeRegister");
|
|
56
|
+
if (parentRegister === void 0) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
|
|
57
|
+
const parentUniformUpdate = inject("ombreUniformUpdate");
|
|
58
|
+
if (parentUniformUpdate === void 0) throw new Error("Shader components require ombreUniformUpdate from parent");
|
|
59
|
+
const parentMetadataUpdate = inject("ombreMetadataUpdate");
|
|
60
|
+
if (parentMetadataUpdate === void 0) throw new Error("Shader components require ombreMetadataUpdate from parent");
|
|
61
|
+
const rendererResetSignal = inject("ombreRendererResetSignal");
|
|
62
|
+
const registerWithRenderer = () => {
|
|
63
|
+
parentRegister(instanceId, componentDefinition.fragmentNode, parentId, {
|
|
64
|
+
blendMode: props.blendMode,
|
|
65
|
+
opacity: props.opacity,
|
|
66
|
+
visible: props.visible === false ? false : true,
|
|
67
|
+
id: props.id,
|
|
68
|
+
mask: props.maskSource ? {
|
|
69
|
+
source: props.maskSource,
|
|
70
|
+
type: props.maskType || "alpha"
|
|
71
|
+
} : void 0,
|
|
72
|
+
renderOrder: props.renderOrder,
|
|
73
|
+
transform: effectiveTransform.value
|
|
74
|
+
}, uniforms, componentDefinition);
|
|
75
|
+
};
|
|
76
|
+
const setupUniformWatchers = () => {
|
|
77
|
+
const scope = effectScope();
|
|
78
|
+
scope.run(() => {
|
|
79
|
+
Object.entries(uniforms).forEach(([propName, { uniform, transform }]) => {
|
|
80
|
+
watch(() => props[propName], (newValue) => {
|
|
81
|
+
if (uniform && uniform.value !== void 0) parentUniformUpdate(instanceId, propName, newValue);
|
|
82
|
+
}, { deep: true });
|
|
83
|
+
});
|
|
84
|
+
watch(() => [
|
|
85
|
+
props.blendMode,
|
|
86
|
+
props.opacity,
|
|
87
|
+
props.visible,
|
|
88
|
+
props.id,
|
|
89
|
+
props.maskSource,
|
|
90
|
+
props.maskType,
|
|
91
|
+
props.renderOrder,
|
|
92
|
+
props.transform
|
|
93
|
+
], ([blendMode, opacity, visible]) => {
|
|
94
|
+
parentMetadataUpdate(instanceId, {
|
|
95
|
+
blendMode,
|
|
96
|
+
opacity,
|
|
97
|
+
visible: visible === false ? false : true,
|
|
98
|
+
id: props.id,
|
|
99
|
+
mask: props.maskSource ? {
|
|
100
|
+
source: props.maskSource,
|
|
101
|
+
type: props.maskType || "alpha"
|
|
102
|
+
} : void 0,
|
|
103
|
+
renderOrder: props.renderOrder,
|
|
104
|
+
transform: effectiveTransform.value
|
|
105
|
+
});
|
|
106
|
+
}, { deep: true });
|
|
107
|
+
if (rendererResetSignal) watch(() => rendererResetSignal.value, (newValue) => {
|
|
108
|
+
if (newValue > 0) registerWithRenderer();
|
|
109
|
+
}, { immediate: true });
|
|
110
|
+
});
|
|
111
|
+
onBeforeUnmount(() => {
|
|
112
|
+
scope.stop();
|
|
113
|
+
});
|
|
114
|
+
};
|
|
115
|
+
setupUniformWatchers();
|
|
116
|
+
onBeforeUnmount(() => {
|
|
117
|
+
parentRegister(instanceId, null, null, null, null, null);
|
|
118
|
+
});
|
|
119
|
+
return (_ctx, _cache) => {
|
|
120
|
+
return renderSlot(_ctx.$slots, "default");
|
|
121
|
+
};
|
|
122
|
+
}
|
|
123
|
+
});
|
|
124
|
+
export { Sharpness_vue_vue_type_script_setup_true_lang_default as default };
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
import { computed, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, provide, renderSlot, toValue, watch } from "vue";
|
|
2
|
+
import { createUniformsMap } from "../core/index.js";
|
|
3
|
+
import { componentDefinition } from "../core/shaders/Shatter/index.js";
|
|
4
|
+
var Shatter_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
5
|
+
__name: "Shatter",
|
|
6
|
+
props: /* @__PURE__ */ mergeDefaults({
|
|
7
|
+
blendMode: {},
|
|
8
|
+
opacity: {},
|
|
9
|
+
visible: { type: Boolean },
|
|
10
|
+
id: {},
|
|
11
|
+
maskSource: {},
|
|
12
|
+
maskType: {},
|
|
13
|
+
renderOrder: {},
|
|
14
|
+
transform: {},
|
|
15
|
+
crackWidth: {},
|
|
16
|
+
intensity: {},
|
|
17
|
+
radius: {},
|
|
18
|
+
decay: {},
|
|
19
|
+
seed: {},
|
|
20
|
+
chromaticSplit: {},
|
|
21
|
+
refractionStrength: {},
|
|
22
|
+
shardLighting: {},
|
|
23
|
+
edges: {}
|
|
24
|
+
}, {
|
|
25
|
+
blendMode: "normal",
|
|
26
|
+
renderOrder: 0,
|
|
27
|
+
visible: true,
|
|
28
|
+
...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
|
|
29
|
+
acc[key] = config.default;
|
|
30
|
+
return acc;
|
|
31
|
+
}, {})
|
|
32
|
+
}),
|
|
33
|
+
setup(__props) {
|
|
34
|
+
const props = __props;
|
|
35
|
+
const instanceId = props.id || `${componentDefinition.name.toLowerCase()}_${Math.random().toString(36).substring(7)}`;
|
|
36
|
+
provide("ombreParentId", instanceId);
|
|
37
|
+
const DEFAULT_TRANSFORM = {
|
|
38
|
+
offsetX: 0,
|
|
39
|
+
offsetY: 0,
|
|
40
|
+
rotation: 0,
|
|
41
|
+
scale: 1,
|
|
42
|
+
anchorX: .5,
|
|
43
|
+
anchorY: .5,
|
|
44
|
+
edges: "transparent"
|
|
45
|
+
};
|
|
46
|
+
const effectiveTransform = computed(() => ({
|
|
47
|
+
...DEFAULT_TRANSFORM,
|
|
48
|
+
...props.transform
|
|
49
|
+
}));
|
|
50
|
+
const uniforms = createUniformsMap(componentDefinition, computed(() => {
|
|
51
|
+
let baseProps = { ...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
|
|
52
|
+
acc[key] = config.default;
|
|
53
|
+
return acc;
|
|
54
|
+
}, {}) };
|
|
55
|
+
for (const key in props) if (key !== "blendMode" && key !== "opacity" && key !== "visible" && key !== "id" && key !== "maskSource" && key !== "maskType" && key !== "renderOrder" && key !== "transform" && props[key] !== Object.entries(componentDefinition.props).reduce((acc, [key$1, config]) => {
|
|
56
|
+
acc[key$1] = config.default;
|
|
57
|
+
return acc;
|
|
58
|
+
}, {})[key]) baseProps[key] = toValue(props[key]);
|
|
59
|
+
return baseProps;
|
|
60
|
+
}).value, instanceId);
|
|
61
|
+
const parentId = inject("ombreParentId");
|
|
62
|
+
if (parentId === void 0) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
|
|
63
|
+
const parentRegister = inject("ombreNodeRegister");
|
|
64
|
+
if (parentRegister === void 0) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
|
|
65
|
+
const parentUniformUpdate = inject("ombreUniformUpdate");
|
|
66
|
+
if (parentUniformUpdate === void 0) throw new Error("Shader components require ombreUniformUpdate from parent");
|
|
67
|
+
const parentMetadataUpdate = inject("ombreMetadataUpdate");
|
|
68
|
+
if (parentMetadataUpdate === void 0) throw new Error("Shader components require ombreMetadataUpdate from parent");
|
|
69
|
+
const rendererResetSignal = inject("ombreRendererResetSignal");
|
|
70
|
+
const registerWithRenderer = () => {
|
|
71
|
+
parentRegister(instanceId, componentDefinition.fragmentNode, parentId, {
|
|
72
|
+
blendMode: props.blendMode,
|
|
73
|
+
opacity: props.opacity,
|
|
74
|
+
visible: props.visible === false ? false : true,
|
|
75
|
+
id: props.id,
|
|
76
|
+
mask: props.maskSource ? {
|
|
77
|
+
source: props.maskSource,
|
|
78
|
+
type: props.maskType || "alpha"
|
|
79
|
+
} : void 0,
|
|
80
|
+
renderOrder: props.renderOrder,
|
|
81
|
+
transform: effectiveTransform.value
|
|
82
|
+
}, uniforms, componentDefinition);
|
|
83
|
+
};
|
|
84
|
+
const setupUniformWatchers = () => {
|
|
85
|
+
const scope = effectScope();
|
|
86
|
+
scope.run(() => {
|
|
87
|
+
Object.entries(uniforms).forEach(([propName, { uniform, transform }]) => {
|
|
88
|
+
watch(() => props[propName], (newValue) => {
|
|
89
|
+
if (uniform && uniform.value !== void 0) parentUniformUpdate(instanceId, propName, newValue);
|
|
90
|
+
}, { deep: true });
|
|
91
|
+
});
|
|
92
|
+
watch(() => [
|
|
93
|
+
props.blendMode,
|
|
94
|
+
props.opacity,
|
|
95
|
+
props.visible,
|
|
96
|
+
props.id,
|
|
97
|
+
props.maskSource,
|
|
98
|
+
props.maskType,
|
|
99
|
+
props.renderOrder,
|
|
100
|
+
props.transform
|
|
101
|
+
], ([blendMode, opacity, visible]) => {
|
|
102
|
+
parentMetadataUpdate(instanceId, {
|
|
103
|
+
blendMode,
|
|
104
|
+
opacity,
|
|
105
|
+
visible: visible === false ? false : true,
|
|
106
|
+
id: props.id,
|
|
107
|
+
mask: props.maskSource ? {
|
|
108
|
+
source: props.maskSource,
|
|
109
|
+
type: props.maskType || "alpha"
|
|
110
|
+
} : void 0,
|
|
111
|
+
renderOrder: props.renderOrder,
|
|
112
|
+
transform: effectiveTransform.value
|
|
113
|
+
});
|
|
114
|
+
}, { deep: true });
|
|
115
|
+
if (rendererResetSignal) watch(() => rendererResetSignal.value, (newValue) => {
|
|
116
|
+
if (newValue > 0) registerWithRenderer();
|
|
117
|
+
}, { immediate: true });
|
|
118
|
+
});
|
|
119
|
+
onBeforeUnmount(() => {
|
|
120
|
+
scope.stop();
|
|
121
|
+
});
|
|
122
|
+
};
|
|
123
|
+
setupUniformWatchers();
|
|
124
|
+
onBeforeUnmount(() => {
|
|
125
|
+
parentRegister(instanceId, null, null, null, null, null);
|
|
126
|
+
});
|
|
127
|
+
return (_ctx, _cache) => {
|
|
128
|
+
return renderSlot(_ctx.$slots, "default");
|
|
129
|
+
};
|
|
130
|
+
}
|
|
131
|
+
});
|
|
132
|
+
export { Shatter_vue_vue_type_script_setup_true_lang_default as default };
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
import { computed, defineComponent, effectScope, inject, mergeDefaults, onBeforeUnmount, provide, renderSlot, toValue, watch } from "vue";
|
|
2
|
+
import { createUniformsMap } from "../core/index.js";
|
|
3
|
+
import { componentDefinition } from "../core/shaders/SimplexNoise/index.js";
|
|
4
|
+
var SimplexNoise_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
5
|
+
__name: "SimplexNoise",
|
|
6
|
+
props: /* @__PURE__ */ mergeDefaults({
|
|
7
|
+
blendMode: {},
|
|
8
|
+
opacity: {},
|
|
9
|
+
visible: { type: Boolean },
|
|
10
|
+
id: {},
|
|
11
|
+
maskSource: {},
|
|
12
|
+
maskType: {},
|
|
13
|
+
renderOrder: {},
|
|
14
|
+
transform: {},
|
|
15
|
+
colorA: {},
|
|
16
|
+
colorB: {},
|
|
17
|
+
scale: {},
|
|
18
|
+
balance: {},
|
|
19
|
+
contrast: {},
|
|
20
|
+
seed: {},
|
|
21
|
+
speed: {}
|
|
22
|
+
}, {
|
|
23
|
+
blendMode: "normal",
|
|
24
|
+
renderOrder: 0,
|
|
25
|
+
visible: true,
|
|
26
|
+
...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
|
|
27
|
+
acc[key] = config.default;
|
|
28
|
+
return acc;
|
|
29
|
+
}, {})
|
|
30
|
+
}),
|
|
31
|
+
setup(__props) {
|
|
32
|
+
const props = __props;
|
|
33
|
+
const instanceId = props.id || `${componentDefinition.name.toLowerCase()}_${Math.random().toString(36).substring(7)}`;
|
|
34
|
+
provide("ombreParentId", instanceId);
|
|
35
|
+
const DEFAULT_TRANSFORM = {
|
|
36
|
+
offsetX: 0,
|
|
37
|
+
offsetY: 0,
|
|
38
|
+
rotation: 0,
|
|
39
|
+
scale: 1,
|
|
40
|
+
anchorX: .5,
|
|
41
|
+
anchorY: .5,
|
|
42
|
+
edges: "transparent"
|
|
43
|
+
};
|
|
44
|
+
const effectiveTransform = computed(() => ({
|
|
45
|
+
...DEFAULT_TRANSFORM,
|
|
46
|
+
...props.transform
|
|
47
|
+
}));
|
|
48
|
+
const uniforms = createUniformsMap(componentDefinition, computed(() => {
|
|
49
|
+
let baseProps = { ...Object.entries(componentDefinition.props).reduce((acc, [key, config]) => {
|
|
50
|
+
acc[key] = config.default;
|
|
51
|
+
return acc;
|
|
52
|
+
}, {}) };
|
|
53
|
+
for (const key in props) if (key !== "blendMode" && key !== "opacity" && key !== "visible" && key !== "id" && key !== "maskSource" && key !== "maskType" && key !== "renderOrder" && key !== "transform" && props[key] !== Object.entries(componentDefinition.props).reduce((acc, [key$1, config]) => {
|
|
54
|
+
acc[key$1] = config.default;
|
|
55
|
+
return acc;
|
|
56
|
+
}, {})[key]) baseProps[key] = toValue(props[key]);
|
|
57
|
+
return baseProps;
|
|
58
|
+
}).value, instanceId);
|
|
59
|
+
const parentId = inject("ombreParentId");
|
|
60
|
+
if (parentId === void 0) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
|
|
61
|
+
const parentRegister = inject("ombreNodeRegister");
|
|
62
|
+
if (parentRegister === void 0) throw new Error("Shader components must be used inside an <Shader> component or another shader component");
|
|
63
|
+
const parentUniformUpdate = inject("ombreUniformUpdate");
|
|
64
|
+
if (parentUniformUpdate === void 0) throw new Error("Shader components require ombreUniformUpdate from parent");
|
|
65
|
+
const parentMetadataUpdate = inject("ombreMetadataUpdate");
|
|
66
|
+
if (parentMetadataUpdate === void 0) throw new Error("Shader components require ombreMetadataUpdate from parent");
|
|
67
|
+
const rendererResetSignal = inject("ombreRendererResetSignal");
|
|
68
|
+
const registerWithRenderer = () => {
|
|
69
|
+
parentRegister(instanceId, componentDefinition.fragmentNode, parentId, {
|
|
70
|
+
blendMode: props.blendMode,
|
|
71
|
+
opacity: props.opacity,
|
|
72
|
+
visible: props.visible === false ? false : true,
|
|
73
|
+
id: props.id,
|
|
74
|
+
mask: props.maskSource ? {
|
|
75
|
+
source: props.maskSource,
|
|
76
|
+
type: props.maskType || "alpha"
|
|
77
|
+
} : void 0,
|
|
78
|
+
renderOrder: props.renderOrder,
|
|
79
|
+
transform: effectiveTransform.value
|
|
80
|
+
}, uniforms, componentDefinition);
|
|
81
|
+
};
|
|
82
|
+
const setupUniformWatchers = () => {
|
|
83
|
+
const scope = effectScope();
|
|
84
|
+
scope.run(() => {
|
|
85
|
+
Object.entries(uniforms).forEach(([propName, { uniform, transform }]) => {
|
|
86
|
+
watch(() => props[propName], (newValue) => {
|
|
87
|
+
if (uniform && uniform.value !== void 0) parentUniformUpdate(instanceId, propName, newValue);
|
|
88
|
+
}, { deep: true });
|
|
89
|
+
});
|
|
90
|
+
watch(() => [
|
|
91
|
+
props.blendMode,
|
|
92
|
+
props.opacity,
|
|
93
|
+
props.visible,
|
|
94
|
+
props.id,
|
|
95
|
+
props.maskSource,
|
|
96
|
+
props.maskType,
|
|
97
|
+
props.renderOrder,
|
|
98
|
+
props.transform
|
|
99
|
+
], ([blendMode, opacity, visible]) => {
|
|
100
|
+
parentMetadataUpdate(instanceId, {
|
|
101
|
+
blendMode,
|
|
102
|
+
opacity,
|
|
103
|
+
visible: visible === false ? false : true,
|
|
104
|
+
id: props.id,
|
|
105
|
+
mask: props.maskSource ? {
|
|
106
|
+
source: props.maskSource,
|
|
107
|
+
type: props.maskType || "alpha"
|
|
108
|
+
} : void 0,
|
|
109
|
+
renderOrder: props.renderOrder,
|
|
110
|
+
transform: effectiveTransform.value
|
|
111
|
+
});
|
|
112
|
+
}, { deep: true });
|
|
113
|
+
if (rendererResetSignal) watch(() => rendererResetSignal.value, (newValue) => {
|
|
114
|
+
if (newValue > 0) registerWithRenderer();
|
|
115
|
+
}, { immediate: true });
|
|
116
|
+
});
|
|
117
|
+
onBeforeUnmount(() => {
|
|
118
|
+
scope.stop();
|
|
119
|
+
});
|
|
120
|
+
};
|
|
121
|
+
setupUniformWatchers();
|
|
122
|
+
onBeforeUnmount(() => {
|
|
123
|
+
parentRegister(instanceId, null, null, null, null, null);
|
|
124
|
+
});
|
|
125
|
+
return (_ctx, _cache) => {
|
|
126
|
+
return renderSlot(_ctx.$slots, "default");
|
|
127
|
+
};
|
|
128
|
+
}
|
|
129
|
+
});
|
|
130
|
+
export { SimplexNoise_vue_vue_type_script_setup_true_lang_default as default };
|