shaders 2.3.55 → 2.3.56
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/Circle-ChQqil0S.js +148 -0
- package/dist/core/registry.js +1 -1
- package/dist/core/shaders/Circle/index.d.ts +28 -0
- package/dist/core/shaders/Circle/index.d.ts.map +1 -1
- package/dist/core/shaders/Circle/index.js +2 -1
- package/dist/react/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/react/utils/generatePresetCode.js +5 -1
- package/dist/registry.js +136 -2
- package/dist/solid/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/solid/utils/generatePresetCode.js +5 -1
- package/dist/svelte/{generatePresetCode-DN-iUvZN.js → generatePresetCode-CO9fAymD.js} +5 -1
- package/dist/svelte/index.js +1 -1
- package/dist/svelte/utils/generatePresetCode.js +1 -1
- package/dist/vue/Circle.vue_vue_type_script_setup_true_lang.js +5 -1
- package/dist/vue/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/vue/utils/generatePresetCode.js +5 -1
- package/package.json +1 -1
- package/dist/core/Circle-C9DYXDnD.js +0 -69
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
import { i as transformColorSpace, r as transformColor, s as transformPosition, t as colorSpaceOptions } from "./transformations-CC_c-QAT.js";
|
|
2
|
+
import { t as mixColors } from "./colorMixing-Ehw-Hfs_.js";
|
|
3
|
+
import { float, length, screenUV, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
|
|
4
|
+
var transformStrokePosition = (value) => {
|
|
5
|
+
const mode = {
|
|
6
|
+
"outside": 0,
|
|
7
|
+
"center": 1,
|
|
8
|
+
"inside": 2
|
|
9
|
+
}[value.toLowerCase()];
|
|
10
|
+
if (mode === void 0) {
|
|
11
|
+
console.warn(`Invalid stroke position: ${value}. Defaulting to 'outside'.`);
|
|
12
|
+
return 0;
|
|
13
|
+
}
|
|
14
|
+
return mode;
|
|
15
|
+
};
|
|
16
|
+
const componentDefinition = {
|
|
17
|
+
name: "Circle",
|
|
18
|
+
category: "Textures",
|
|
19
|
+
description: "Generate a circle with adjustable size and softness",
|
|
20
|
+
props: {
|
|
21
|
+
color: {
|
|
22
|
+
default: "#ffffff",
|
|
23
|
+
transform: transformColor,
|
|
24
|
+
description: "The color of the circle",
|
|
25
|
+
ui: {
|
|
26
|
+
type: "color",
|
|
27
|
+
label: "Color",
|
|
28
|
+
group: "Colors"
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
radius: {
|
|
32
|
+
default: 1,
|
|
33
|
+
description: "The radius of the circle. A value of one (1) is sets the circle to fit the canvas.",
|
|
34
|
+
ui: {
|
|
35
|
+
type: "range",
|
|
36
|
+
min: 0,
|
|
37
|
+
max: 2,
|
|
38
|
+
step: .05,
|
|
39
|
+
label: "Radius",
|
|
40
|
+
group: "Effect"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
softness: {
|
|
44
|
+
default: 0,
|
|
45
|
+
description: "Edge softness. Lower values like zero (0) are sharp, higher values like one (1) are softer.",
|
|
46
|
+
ui: {
|
|
47
|
+
type: "range",
|
|
48
|
+
min: 0,
|
|
49
|
+
max: 1,
|
|
50
|
+
step: .01,
|
|
51
|
+
label: "Softness",
|
|
52
|
+
group: "Effect"
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
center: {
|
|
56
|
+
default: {
|
|
57
|
+
x: .5,
|
|
58
|
+
y: .5
|
|
59
|
+
},
|
|
60
|
+
transform: transformPosition,
|
|
61
|
+
description: "The center point of the circle",
|
|
62
|
+
ui: {
|
|
63
|
+
type: "position",
|
|
64
|
+
label: "Center Position",
|
|
65
|
+
group: "Position"
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
strokeThickness: {
|
|
69
|
+
default: 0,
|
|
70
|
+
description: "The thickness of the stroke outline. Zero (0) means no stroke.",
|
|
71
|
+
ui: {
|
|
72
|
+
type: "range",
|
|
73
|
+
min: 0,
|
|
74
|
+
max: .5,
|
|
75
|
+
step: .01,
|
|
76
|
+
label: "Stroke Thickness",
|
|
77
|
+
group: "Stroke"
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
strokeColor: {
|
|
81
|
+
default: "#000000",
|
|
82
|
+
transform: transformColor,
|
|
83
|
+
description: "The color of the stroke outline",
|
|
84
|
+
ui: {
|
|
85
|
+
type: "color",
|
|
86
|
+
label: "Stroke Color",
|
|
87
|
+
group: "Colors"
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
strokePosition: {
|
|
91
|
+
default: "center",
|
|
92
|
+
transform: transformStrokePosition,
|
|
93
|
+
description: "Position of the stroke relative to the circle edge",
|
|
94
|
+
ui: {
|
|
95
|
+
type: "select",
|
|
96
|
+
options: [
|
|
97
|
+
{
|
|
98
|
+
label: "Outside",
|
|
99
|
+
value: "outside"
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
label: "Center",
|
|
103
|
+
value: "center"
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
label: "Inside",
|
|
107
|
+
value: "inside"
|
|
108
|
+
}
|
|
109
|
+
],
|
|
110
|
+
label: "Stroke Position",
|
|
111
|
+
group: "Stroke"
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
colorSpace: {
|
|
115
|
+
default: "linear",
|
|
116
|
+
transform: transformColorSpace,
|
|
117
|
+
description: "Color space for blending fill and stroke colors in soft edges",
|
|
118
|
+
ui: {
|
|
119
|
+
type: "select",
|
|
120
|
+
options: colorSpaceOptions,
|
|
121
|
+
label: "Color Blending",
|
|
122
|
+
group: "Colors"
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
},
|
|
126
|
+
fragmentNode: ({ uniforms }) => {
|
|
127
|
+
const uv$1 = screenUV;
|
|
128
|
+
const aspect = viewportSize.x.div(viewportSize.y);
|
|
129
|
+
const aspectCorrectedUV = vec2(uv$1.x.mul(aspect), uv$1.y);
|
|
130
|
+
const centerPos = vec2(uniforms.center.uniform.x.mul(aspect), uniforms.center.uniform.y.oneMinus());
|
|
131
|
+
const distanceFromCenter = length(aspectCorrectedUV.sub(centerPos));
|
|
132
|
+
const edgeSoftness = uniforms.softness.uniform;
|
|
133
|
+
const circleEdge = uniforms.radius.uniform.mul(.5);
|
|
134
|
+
const strokeThickness = uniforms.strokeThickness.uniform;
|
|
135
|
+
const strokePositionMode = uniforms.strokePosition.uniform;
|
|
136
|
+
const isCenter = strokePositionMode.greaterThanEqual(float(.5)).and(strokePositionMode.lessThan(float(1.5)));
|
|
137
|
+
const isInside = strokePositionMode.greaterThanEqual(float(1.5));
|
|
138
|
+
const halfThickness = strokeThickness.mul(.5);
|
|
139
|
+
const strokeInner = isInside.select(circleEdge.sub(strokeThickness), isCenter.select(circleEdge.sub(halfThickness), circleEdge));
|
|
140
|
+
const strokeOuter = isInside.select(circleEdge, isCenter.select(circleEdge.add(halfThickness), circleEdge.add(strokeThickness)));
|
|
141
|
+
const overallMask = smoothstep(strokeOuter.sub(edgeSoftness), strokeOuter, distanceFromCenter).oneMinus();
|
|
142
|
+
const strokeBlend = strokeThickness.greaterThan(float(0)).select(smoothstep(strokeInner.sub(edgeSoftness), strokeInner, distanceFromCenter), float(0));
|
|
143
|
+
const blendedColor = mixColors(vec4(uniforms.color.uniform.rgb, uniforms.color.uniform.a), vec4(uniforms.strokeColor.uniform.rgb, uniforms.strokeColor.uniform.a), strokeBlend, uniforms.colorSpace.uniform);
|
|
144
|
+
return vec4(blendedColor.xyz, blendedColor.w.mul(overallMask));
|
|
145
|
+
}
|
|
146
|
+
};
|
|
147
|
+
var Circle_default = componentDefinition;
|
|
148
|
+
export { componentDefinition as n, Circle_default as t };
|
package/dist/core/registry.js
CHANGED
|
@@ -14,7 +14,7 @@ import { n as componentDefinition$8 } from "./ChannelBlur-A0r5Gx_y.js";
|
|
|
14
14
|
import { n as componentDefinition$9 } from "./Checkerboard-XJh_tV6B.js";
|
|
15
15
|
import { n as componentDefinition$10 } from "./ChromaFlow-Cc647Knw.js";
|
|
16
16
|
import { n as componentDefinition$11 } from "./ChromaticAberration-CYvju_kr.js";
|
|
17
|
-
import { n as componentDefinition$12 } from "./Circle-
|
|
17
|
+
import { n as componentDefinition$12 } from "./Circle-ChQqil0S.js";
|
|
18
18
|
import { n as componentDefinition$13 } from "./ConcentricSpin-CnuAW_6I.js";
|
|
19
19
|
import { n as componentDefinition$14 } from "./ContourLines-DJ0R9q6Y.js";
|
|
20
20
|
import { n as componentDefinition$15 } from "./CRTScreen-BHKDJ9_0.js";
|
|
@@ -30,6 +30,34 @@ export interface ComponentProps {
|
|
|
30
30
|
* @default {"x":0.5,"y":0.5}
|
|
31
31
|
*/
|
|
32
32
|
center: Parameters<typeof transformPosition>[0];
|
|
33
|
+
/**
|
|
34
|
+
* The thickness of the stroke outline. Zero (0) means no stroke.
|
|
35
|
+
*
|
|
36
|
+
* Accepts a number between 0 and 0.5.
|
|
37
|
+
* @default 0
|
|
38
|
+
*/
|
|
39
|
+
strokeThickness: number;
|
|
40
|
+
/**
|
|
41
|
+
* The color of the stroke outline
|
|
42
|
+
*
|
|
43
|
+
* Accepts hex strings (`#ff0000`), RGB objects (`{ r, g, b }`), or CSS color names (`limegreen`).
|
|
44
|
+
* @default "#000000"
|
|
45
|
+
*/
|
|
46
|
+
strokeColor: Parameters<typeof transformColor>[0];
|
|
47
|
+
/**
|
|
48
|
+
* Position of the stroke relative to the circle edge
|
|
49
|
+
*
|
|
50
|
+
* Accepts one of: `"outside"`, `"center"`, `"inside"`.
|
|
51
|
+
* @default "center"
|
|
52
|
+
*/
|
|
53
|
+
strokePosition: string;
|
|
54
|
+
/**
|
|
55
|
+
* Color space for blending fill and stroke colors in soft edges
|
|
56
|
+
*
|
|
57
|
+
* Accepts one of the predefined option values.
|
|
58
|
+
* @default "linear"
|
|
59
|
+
*/
|
|
60
|
+
colorSpace: string;
|
|
33
61
|
}
|
|
34
62
|
export declare const componentDefinition: ComponentDefinition<ComponentProps>;
|
|
35
63
|
export default componentDefinition;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shaders/Circle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,mBAAmB,EAAqB,MAAM,iBAAiB,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shaders/Circle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,mBAAmB,EAAqB,MAAM,iBAAiB,CAAA;AAGvE,OAAO,EAAC,cAAc,EAAE,iBAAiB,EAAyC,MAAM,qCAAqC,CAAA;AAwB7H,MAAM,WAAW,cAAc;IAC3B,KAAK,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5C,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;IAChD,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;IAClD,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,mBAAmB,EAAE,mBAAmB,CAAC,cAAc,CA6JnE,CAAA;AAED,eAAe,mBAAmB,CAAA"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
import "../../transformations-CC_c-QAT.js";
|
|
2
|
-
import
|
|
2
|
+
import "../../colorMixing-Ehw-Hfs_.js";
|
|
3
|
+
import { n as componentDefinition, t as Circle_default } from "../../Circle-ChQqil0S.js";
|
|
3
4
|
export { componentDefinition, Circle_default as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;
|
|
1
|
+
{"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AAy4BD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAyC/D;AAGD,eAAO,MAAM,mBAAmB,UA4E/B,CAAA"}
|
package/dist/registry.js
CHANGED
|
@@ -2182,7 +2182,7 @@ export const shaderRegistry = [
|
|
|
2182
2182
|
"type": "range",
|
|
2183
2183
|
"min": 0,
|
|
2184
2184
|
"max": 1,
|
|
2185
|
-
"step": 0.
|
|
2185
|
+
"step": 0.01,
|
|
2186
2186
|
"label": "Softness",
|
|
2187
2187
|
"group": "Effect"
|
|
2188
2188
|
}
|
|
@@ -2198,6 +2198,73 @@ export const shaderRegistry = [
|
|
|
2198
2198
|
"label": "Center Position",
|
|
2199
2199
|
"group": "Position"
|
|
2200
2200
|
}
|
|
2201
|
+
},
|
|
2202
|
+
"strokeThickness": {
|
|
2203
|
+
"default": 0,
|
|
2204
|
+
"description": "The thickness of the stroke outline. Zero (0) means no stroke.",
|
|
2205
|
+
"ui": {
|
|
2206
|
+
"type": "range",
|
|
2207
|
+
"min": 0,
|
|
2208
|
+
"max": 0.5,
|
|
2209
|
+
"step": 0.01,
|
|
2210
|
+
"label": "Stroke Thickness",
|
|
2211
|
+
"group": "Stroke"
|
|
2212
|
+
}
|
|
2213
|
+
},
|
|
2214
|
+
"strokeColor": {
|
|
2215
|
+
"default": "#000000",
|
|
2216
|
+
"description": "The color of the stroke outline",
|
|
2217
|
+
"ui": {
|
|
2218
|
+
"type": "color",
|
|
2219
|
+
"label": "Stroke Color",
|
|
2220
|
+
"group": "Colors"
|
|
2221
|
+
}
|
|
2222
|
+
},
|
|
2223
|
+
"strokePosition": {
|
|
2224
|
+
"default": "center",
|
|
2225
|
+
"description": "Position of the stroke relative to the circle edge",
|
|
2226
|
+
"ui": {
|
|
2227
|
+
"type": "select",
|
|
2228
|
+
"options": [
|
|
2229
|
+
{
|
|
2230
|
+
"label": "Outside",
|
|
2231
|
+
"value": "outside"
|
|
2232
|
+
},
|
|
2233
|
+
{
|
|
2234
|
+
"label": "Center",
|
|
2235
|
+
"value": "center"
|
|
2236
|
+
},
|
|
2237
|
+
{
|
|
2238
|
+
"label": "Inside",
|
|
2239
|
+
"value": "inside"
|
|
2240
|
+
}
|
|
2241
|
+
],
|
|
2242
|
+
"label": "Stroke Position",
|
|
2243
|
+
"group": "Stroke"
|
|
2244
|
+
}
|
|
2245
|
+
},
|
|
2246
|
+
"colorSpace": {
|
|
2247
|
+
"default": "linear",
|
|
2248
|
+
"description": "Color space for blending fill and stroke colors in soft edges",
|
|
2249
|
+
"ui": {
|
|
2250
|
+
"type": "select",
|
|
2251
|
+
"options": [
|
|
2252
|
+
{
|
|
2253
|
+
"label": "Linear RGB",
|
|
2254
|
+
"value": "linear"
|
|
2255
|
+
},
|
|
2256
|
+
{
|
|
2257
|
+
"label": "OKLCh",
|
|
2258
|
+
"value": "oklch"
|
|
2259
|
+
},
|
|
2260
|
+
{
|
|
2261
|
+
"label": "OKLAB",
|
|
2262
|
+
"value": "oklab"
|
|
2263
|
+
}
|
|
2264
|
+
],
|
|
2265
|
+
"label": "Color Blending",
|
|
2266
|
+
"group": "Colors"
|
|
2267
|
+
}
|
|
2201
2268
|
}
|
|
2202
2269
|
}
|
|
2203
2270
|
},
|
|
@@ -2228,7 +2295,7 @@ export const shaderRegistry = [
|
|
|
2228
2295
|
"type": "range",
|
|
2229
2296
|
"min": 0,
|
|
2230
2297
|
"max": 1,
|
|
2231
|
-
"step": 0.
|
|
2298
|
+
"step": 0.01,
|
|
2232
2299
|
"label": "Softness",
|
|
2233
2300
|
"group": "Effect"
|
|
2234
2301
|
},
|
|
@@ -2246,6 +2313,73 @@ export const shaderRegistry = [
|
|
|
2246
2313
|
"y": 0.5
|
|
2247
2314
|
},
|
|
2248
2315
|
"description": "The center point of the circle"
|
|
2316
|
+
},
|
|
2317
|
+
"strokeThickness": {
|
|
2318
|
+
"ui": {
|
|
2319
|
+
"type": "range",
|
|
2320
|
+
"min": 0,
|
|
2321
|
+
"max": 0.5,
|
|
2322
|
+
"step": 0.01,
|
|
2323
|
+
"label": "Stroke Thickness",
|
|
2324
|
+
"group": "Stroke"
|
|
2325
|
+
},
|
|
2326
|
+
"default": 0,
|
|
2327
|
+
"description": "The thickness of the stroke outline. Zero (0) means no stroke."
|
|
2328
|
+
},
|
|
2329
|
+
"strokeColor": {
|
|
2330
|
+
"ui": {
|
|
2331
|
+
"type": "color",
|
|
2332
|
+
"label": "Stroke Color",
|
|
2333
|
+
"group": "Colors"
|
|
2334
|
+
},
|
|
2335
|
+
"default": "#000000",
|
|
2336
|
+
"description": "The color of the stroke outline"
|
|
2337
|
+
},
|
|
2338
|
+
"strokePosition": {
|
|
2339
|
+
"ui": {
|
|
2340
|
+
"type": "select",
|
|
2341
|
+
"options": [
|
|
2342
|
+
{
|
|
2343
|
+
"label": "Outside",
|
|
2344
|
+
"value": "outside"
|
|
2345
|
+
},
|
|
2346
|
+
{
|
|
2347
|
+
"label": "Center",
|
|
2348
|
+
"value": "center"
|
|
2349
|
+
},
|
|
2350
|
+
{
|
|
2351
|
+
"label": "Inside",
|
|
2352
|
+
"value": "inside"
|
|
2353
|
+
}
|
|
2354
|
+
],
|
|
2355
|
+
"label": "Stroke Position",
|
|
2356
|
+
"group": "Stroke"
|
|
2357
|
+
},
|
|
2358
|
+
"default": "center",
|
|
2359
|
+
"description": "Position of the stroke relative to the circle edge"
|
|
2360
|
+
},
|
|
2361
|
+
"colorSpace": {
|
|
2362
|
+
"ui": {
|
|
2363
|
+
"type": "select",
|
|
2364
|
+
"options": [
|
|
2365
|
+
{
|
|
2366
|
+
"label": "Linear RGB",
|
|
2367
|
+
"value": "linear"
|
|
2368
|
+
},
|
|
2369
|
+
{
|
|
2370
|
+
"label": "OKLCh",
|
|
2371
|
+
"value": "oklch"
|
|
2372
|
+
},
|
|
2373
|
+
{
|
|
2374
|
+
"label": "OKLAB",
|
|
2375
|
+
"value": "oklab"
|
|
2376
|
+
}
|
|
2377
|
+
],
|
|
2378
|
+
"label": "Color Blending",
|
|
2379
|
+
"group": "Colors"
|
|
2380
|
+
},
|
|
2381
|
+
"default": "linear",
|
|
2382
|
+
"description": "Color space for blending fill and stroke colors in soft edges"
|
|
2249
2383
|
}
|
|
2250
2384
|
}
|
|
2251
2385
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;
|
|
1
|
+
{"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AA24BD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAyC/D;AAGD,eAAO,MAAM,mBAAmB,UA4E/B,CAAA"}
|
|
@@ -164,7 +164,11 @@ const shaderMetadata = {
|
|
|
164
164
|
"center": {
|
|
165
165
|
"x": 0.5,
|
|
166
166
|
"y": 0.5
|
|
167
|
-
}
|
|
167
|
+
},
|
|
168
|
+
"strokeThickness": 0,
|
|
169
|
+
"strokeColor": "#000000",
|
|
170
|
+
"strokePosition": "center",
|
|
171
|
+
"colorSpace": "linear"
|
|
168
172
|
},
|
|
169
173
|
"ConcentricSpin": {
|
|
170
174
|
"opacity": 1,
|
package/dist/svelte/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { n as generatePresetCode } from "./generatePresetCode-
|
|
1
|
+
import { n as generatePresetCode } from "./generatePresetCode-CO9fAymD.js";
|
|
2
2
|
import "svelte/internal/disclose-version";
|
|
3
3
|
import * as $ from "svelte/internal/client";
|
|
4
4
|
import { getContext, onDestroy, onMount, setContext } from "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-CO9fAymD.js";
|
|
2
2
|
export { availableComponents, generatePresetCode };
|
|
@@ -16,7 +16,11 @@ var Circle_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
|
|
|
16
16
|
color: {},
|
|
17
17
|
radius: {},
|
|
18
18
|
softness: {},
|
|
19
|
-
center: {}
|
|
19
|
+
center: {},
|
|
20
|
+
strokeThickness: {},
|
|
21
|
+
strokeColor: {},
|
|
22
|
+
strokePosition: {},
|
|
23
|
+
colorSpace: {}
|
|
20
24
|
}, {
|
|
21
25
|
blendMode: "normal",
|
|
22
26
|
visible: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;
|
|
1
|
+
{"version":3,"file":"generatePresetCode.d.ts","sourceRoot":"","sources":["../../src/utils/generatePresetCode.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;CAC7B;AAED,UAAU,YAAY;IACpB,UAAU,EAAE,eAAe,EAAE,CAAA;CAC9B;AAs4BD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,GAAG,MAAM,CAyC/D;AAGD,eAAO,MAAM,mBAAmB,UA4E/B,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import { r as transformColor, s as transformPosition } from "./transformations-CC_c-QAT.js";
|
|
2
|
-
import { length, screenUV, smoothstep, vec2, vec4, viewportSize } from "three/tsl";
|
|
3
|
-
const componentDefinition = {
|
|
4
|
-
name: "Circle",
|
|
5
|
-
category: "Textures",
|
|
6
|
-
description: "Generate a circle with adjustable size and softness",
|
|
7
|
-
props: {
|
|
8
|
-
color: {
|
|
9
|
-
default: "#ffffff",
|
|
10
|
-
transform: transformColor,
|
|
11
|
-
description: "The color of the circle",
|
|
12
|
-
ui: {
|
|
13
|
-
type: "color",
|
|
14
|
-
label: "Color",
|
|
15
|
-
group: "Colors"
|
|
16
|
-
}
|
|
17
|
-
},
|
|
18
|
-
radius: {
|
|
19
|
-
default: 1,
|
|
20
|
-
description: "The radius of the circle. A value of one (1) is sets the circle to fit the canvas.",
|
|
21
|
-
ui: {
|
|
22
|
-
type: "range",
|
|
23
|
-
min: 0,
|
|
24
|
-
max: 2,
|
|
25
|
-
step: .05,
|
|
26
|
-
label: "Radius",
|
|
27
|
-
group: "Effect"
|
|
28
|
-
}
|
|
29
|
-
},
|
|
30
|
-
softness: {
|
|
31
|
-
default: 0,
|
|
32
|
-
description: "Edge softness. Lower values like zero (0) are sharp, higher values like one (1) are softer.",
|
|
33
|
-
ui: {
|
|
34
|
-
type: "range",
|
|
35
|
-
min: 0,
|
|
36
|
-
max: 1,
|
|
37
|
-
step: .05,
|
|
38
|
-
label: "Softness",
|
|
39
|
-
group: "Effect"
|
|
40
|
-
}
|
|
41
|
-
},
|
|
42
|
-
center: {
|
|
43
|
-
default: {
|
|
44
|
-
x: .5,
|
|
45
|
-
y: .5
|
|
46
|
-
},
|
|
47
|
-
transform: transformPosition,
|
|
48
|
-
description: "The center point of the circle",
|
|
49
|
-
ui: {
|
|
50
|
-
type: "position",
|
|
51
|
-
label: "Center Position",
|
|
52
|
-
group: "Position"
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
},
|
|
56
|
-
fragmentNode: ({ uniforms }) => {
|
|
57
|
-
const uv$1 = screenUV;
|
|
58
|
-
const aspect = viewportSize.x.div(viewportSize.y);
|
|
59
|
-
const aspectCorrectedUV = vec2(uv$1.x.mul(aspect), uv$1.y);
|
|
60
|
-
const centerPos = vec2(uniforms.center.uniform.x.mul(aspect), uniforms.center.uniform.y.oneMinus());
|
|
61
|
-
const distanceFromCenter = length(aspectCorrectedUV.sub(centerPos));
|
|
62
|
-
const edgeSoftness = uniforms.softness.uniform;
|
|
63
|
-
const circleEdge = uniforms.radius.uniform.mul(.5);
|
|
64
|
-
const circleMask = smoothstep(circleEdge.sub(edgeSoftness), circleEdge, distanceFromCenter).oneMinus();
|
|
65
|
-
return vec4(uniforms.color.uniform.rgb, uniforms.color.uniform.a.mul(circleMask));
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
var Circle_default = componentDefinition;
|
|
69
|
-
export { componentDefinition as n, Circle_default as t };
|