@paper-design/shaders-react 0.0.73 → 0.0.74
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.
|
@@ -11,7 +11,8 @@ import {
|
|
|
11
11
|
ShaderFitOptions,
|
|
12
12
|
defaultObjectSizing,
|
|
13
13
|
toProcessedGemSmoke,
|
|
14
|
-
getShaderColorFromString
|
|
14
|
+
getShaderColorFromString,
|
|
15
|
+
GemSmokeShapes
|
|
15
16
|
} from "@paper-design/shaders";
|
|
16
17
|
import { transparentPixel } from "../transparent-pixel.js";
|
|
17
18
|
import { suspend } from "../suspend.js";
|
|
@@ -20,7 +21,7 @@ const defaultPreset = {
|
|
|
20
21
|
name: "Default",
|
|
21
22
|
params: {
|
|
22
23
|
...defaultObjectSizing,
|
|
23
|
-
scale: 0.
|
|
24
|
+
scale: 0.6,
|
|
24
25
|
speed: 1,
|
|
25
26
|
frame: 0,
|
|
26
27
|
colorBack: "#f0efea",
|
|
@@ -32,7 +33,8 @@ const defaultPreset = {
|
|
|
32
33
|
outerDistortion: 0.6,
|
|
33
34
|
offset: 0,
|
|
34
35
|
angle: 0,
|
|
35
|
-
size: 0.5
|
|
36
|
+
size: 0.5,
|
|
37
|
+
shape: "diamond"
|
|
36
38
|
}
|
|
37
39
|
};
|
|
38
40
|
const fluorescentPreset = {
|
|
@@ -51,7 +53,8 @@ const fluorescentPreset = {
|
|
|
51
53
|
outerDistortion: 0.8,
|
|
52
54
|
offset: 0,
|
|
53
55
|
angle: 0,
|
|
54
|
-
size: 0.5
|
|
56
|
+
size: 0.5,
|
|
57
|
+
shape: "diamond"
|
|
55
58
|
}
|
|
56
59
|
};
|
|
57
60
|
const firePreset = {
|
|
@@ -70,26 +73,28 @@ const firePreset = {
|
|
|
70
73
|
outerDistortion: 0.8,
|
|
71
74
|
offset: 0,
|
|
72
75
|
angle: 0,
|
|
73
|
-
size: 0.5
|
|
76
|
+
size: 0.5,
|
|
77
|
+
shape: "diamond"
|
|
74
78
|
}
|
|
75
79
|
};
|
|
76
80
|
const infraredPreset = {
|
|
77
81
|
name: "Infrared",
|
|
78
82
|
params: {
|
|
79
83
|
...defaultObjectSizing,
|
|
80
|
-
scale:
|
|
84
|
+
scale: 1,
|
|
81
85
|
speed: 0.5,
|
|
82
86
|
frame: 0,
|
|
83
87
|
colorBack: "#cd28dc",
|
|
84
88
|
colorInner: "#00000000",
|
|
85
89
|
colors: ["#ff9900", "#fff67a", "#dcff52", "#00ffbb", "#0077ff"],
|
|
86
|
-
outerGlow: 0
|
|
90
|
+
outerGlow: 0,
|
|
87
91
|
innerGlow: 1,
|
|
88
92
|
innerDistortion: 1,
|
|
89
93
|
outerDistortion: 1,
|
|
90
94
|
offset: 0.2,
|
|
91
95
|
angle: 0,
|
|
92
|
-
size: 1
|
|
96
|
+
size: 1,
|
|
97
|
+
shape: "none"
|
|
93
98
|
}
|
|
94
99
|
};
|
|
95
100
|
const gemSmokePresets = [defaultPreset, firePreset, fluorescentPreset, infraredPreset];
|
|
@@ -108,6 +113,7 @@ const GemSmoke = memo(function GemSmokeImpl({
|
|
|
108
113
|
offset = defaultPreset.params.offset,
|
|
109
114
|
angle = defaultPreset.params.angle,
|
|
110
115
|
size = defaultPreset.params.size,
|
|
116
|
+
shape = defaultPreset.params.shape,
|
|
111
117
|
suspendWhenProcessingImage = false,
|
|
112
118
|
// Sizing props
|
|
113
119
|
fit = defaultPreset.params.fit,
|
|
@@ -166,6 +172,8 @@ const GemSmoke = memo(function GemSmokeImpl({
|
|
|
166
172
|
u_offset: offset,
|
|
167
173
|
u_angle: angle,
|
|
168
174
|
u_size: size,
|
|
175
|
+
u_isImage: Boolean(image),
|
|
176
|
+
u_shape: GemSmokeShapes[shape],
|
|
169
177
|
// Sizing uniforms
|
|
170
178
|
u_fit: ShaderFitOptions[fit],
|
|
171
179
|
u_scale: scale,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/gem-smoke.tsx"],
|
|
4
|
-
"sourcesContent": ["import { memo, useLayoutEffect, useState } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n gemSmokeFragmentShader,\n ShaderFitOptions,\n defaultObjectSizing,\n type GemSmokeUniforms,\n type GemSmokeParams,\n toProcessedGemSmoke,\n type ImageShaderPreset,\n getShaderColorFromString,\n} from '@paper-design/shaders';\nimport { transparentPixel } from '../transparent-pixel.js';\nimport { suspend } from '../suspend.js';\n\nexport interface GemSmokeProps extends ShaderComponentProps, GemSmokeParams {\n /**\n * Suspends the component when the image is being processed.\n */\n suspendWhenProcessingImage?: boolean;\n}\n\ntype GemSmokePreset = ImageShaderPreset<GemSmokeParams>;\n\nexport const defaultPreset: GemSmokePreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 0.
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,MAAM,iBAAiB,gBAAgB;AAChD,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAGA;AAAA,EAEA;AAAA,OACK;AACP,SAAS,wBAAwB;AACjC,SAAS,eAAe;
|
|
4
|
+
"sourcesContent": ["import { memo, useLayoutEffect, useState } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n gemSmokeFragmentShader,\n ShaderFitOptions,\n defaultObjectSizing,\n type GemSmokeUniforms,\n type GemSmokeParams,\n toProcessedGemSmoke,\n type ImageShaderPreset,\n getShaderColorFromString,\n GemSmokeShapes,\n} from '@paper-design/shaders';\nimport { transparentPixel } from '../transparent-pixel.js';\nimport { suspend } from '../suspend.js';\n\nexport interface GemSmokeProps extends ShaderComponentProps, GemSmokeParams {\n /**\n * Suspends the component when the image is being processed.\n */\n suspendWhenProcessingImage?: boolean;\n}\n\ntype GemSmokePreset = ImageShaderPreset<GemSmokeParams>;\n\nexport const defaultPreset: GemSmokePreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n scale: 0.6,\n speed: 1,\n frame: 0,\n colorBack: '#f0efea',\n colorInner: '#fafaf5',\n colors: ['#333333', '#e7e6df'],\n outerGlow: 0.4,\n innerGlow: 1,\n innerDistortion: 0.8,\n outerDistortion: 0.6,\n offset: 0,\n angle: 0,\n size: 0.5,\n shape: 'diamond',\n },\n};\n\nexport const fluorescentPreset: GemSmokePreset = {\n name: 'Fluorescent',\n params: {\n ...defaultObjectSizing,\n scale: 0.75,\n speed: 1,\n frame: 0,\n colorBack: '#000000',\n colorInner: '#000000',\n colors: ['#2fb64c', '#cdff61', '#ffffff'],\n outerGlow: 0,\n innerGlow: 1,\n innerDistortion: 1,\n outerDistortion: 0.8,\n offset: 0,\n angle: 0,\n size: 0.5,\n shape: 'diamond',\n },\n};\n\nexport const firePreset: GemSmokePreset = {\n name: 'Fire',\n params: {\n ...defaultObjectSizing,\n scale: 0.75,\n speed: 1,\n frame: 0,\n colorBack: '#000000',\n colorInner: '#000000',\n colors: ['#fe5b16', '#f7ff61', '#ffffff'],\n outerGlow: 1,\n innerGlow: 0.65,\n innerDistortion: 0.6,\n outerDistortion: 0.8,\n offset: 0,\n angle: 0,\n size: 0.5,\n shape: 'diamond',\n },\n};\n\nexport const infraredPreset: GemSmokePreset = {\n name: 'Infrared',\n params: {\n ...defaultObjectSizing,\n scale: 1,\n speed: 0.5,\n frame: 0,\n colorBack: '#cd28dc',\n colorInner: '#00000000',\n colors: ['#ff9900', '#fff67a', '#dcff52', '#00ffbb', '#0077ff'],\n outerGlow: 0,\n innerGlow: 1,\n innerDistortion: 1,\n outerDistortion: 1,\n offset: 0.2,\n angle: 0,\n size: 1,\n shape: 'none',\n },\n};\n\nexport const gemSmokePresets: GemSmokePreset[] = [defaultPreset, firePreset, fluorescentPreset, infraredPreset];\n\nexport const GemSmoke: React.FC<GemSmokeProps> = memo(function GemSmokeImpl({\n // Own props\n colorBack = defaultPreset.params.colorBack,\n colors = defaultPreset.params.colors,\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n image = '',\n innerDistortion = defaultPreset.params.innerDistortion,\n outerDistortion = defaultPreset.params.outerDistortion,\n outerGlow = defaultPreset.params.outerGlow,\n innerGlow = defaultPreset.params.innerGlow,\n colorInner = defaultPreset.params.colorInner,\n offset = defaultPreset.params.offset,\n angle = defaultPreset.params.angle,\n size = defaultPreset.params.size,\n shape = defaultPreset.params.shape,\n suspendWhenProcessingImage = false,\n\n // Sizing props\n fit = defaultPreset.params.fit,\n scale = defaultPreset.params.scale,\n rotation = defaultPreset.params.rotation,\n originX = defaultPreset.params.originX,\n originY = defaultPreset.params.originY,\n offsetX = defaultPreset.params.offsetX,\n offsetY = defaultPreset.params.offsetY,\n worldWidth = defaultPreset.params.worldWidth,\n worldHeight = defaultPreset.params.worldHeight,\n ...props\n}: GemSmokeProps) {\n const imageUrl = typeof image === 'string' ? image : image.src;\n const [processedStateImage, setProcessedStateImage] = useState<string>(transparentPixel);\n\n let processedImage: string;\n\n if (suspendWhenProcessingImage && typeof window !== 'undefined' && imageUrl) {\n processedImage = suspend(\n (): Promise<string> => toProcessedGemSmoke(imageUrl).then((result) => URL.createObjectURL(result.pngBlob)),\n [imageUrl, 'gemSmoke']\n );\n } else {\n processedImage = processedStateImage;\n }\n\n useLayoutEffect(() => {\n if (suspendWhenProcessingImage) {\n // Skip doing work in the effect as it's been handled by suspense.\n return;\n }\n\n if (!imageUrl) {\n setProcessedStateImage(transparentPixel);\n return;\n }\n\n let url: string;\n let current = true;\n\n toProcessedGemSmoke(imageUrl).then((result) => {\n if (current) {\n url = URL.createObjectURL(result.pngBlob);\n setProcessedStateImage(url);\n }\n });\n\n return () => {\n current = false;\n };\n }, [imageUrl, suspendWhenProcessingImage]);\n\n const uniforms = {\n // Own uniforms\n u_colors: colors.map(getShaderColorFromString),\n u_colorsCount: colors.length,\n u_colorBack: getShaderColorFromString(colorBack),\n u_image: processedImage,\n u_innerDistortion: innerDistortion,\n u_outerDistortion: outerDistortion,\n u_outerGlow: outerGlow,\n u_innerGlow: innerGlow,\n u_colorInner: getShaderColorFromString(colorInner),\n u_offset: offset,\n u_angle: angle,\n u_size: size,\n u_isImage: Boolean(image),\n u_shape: GemSmokeShapes[shape],\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_scale: scale,\n u_rotation: rotation,\n u_offsetX: offsetX,\n u_offsetY: offsetY,\n u_originX: originX,\n u_originY: originY,\n u_worldWidth: worldWidth,\n u_worldHeight: worldHeight,\n } satisfies GemSmokeUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={gemSmokeFragmentShader}\n mipmaps={['u_image']}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": ";;;;;AAAA,SAAS,MAAM,iBAAiB,gBAAgB;AAChD,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAGA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AACjC,SAAS,eAAe;AAqMpB;AA1LG,MAAM,gBAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,QAAQ,CAAC,WAAW,SAAS;AAAA,IAC7B,WAAW;AAAA,IACX,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF;AAEO,MAAM,oBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,IACxC,WAAW;AAAA,IACX,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF;AAEO,MAAM,aAA6B;AAAA,EACxC,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,IACxC,WAAW;AAAA,IACX,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF;AAEO,MAAM,iBAAiC;AAAA,EAC5C,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,QAAQ,CAAC,WAAW,WAAW,WAAW,WAAW,SAAS;AAAA,IAC9D,WAAW;AAAA,IACX,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF;AAEO,MAAM,kBAAoC,CAAC,eAAe,YAAY,mBAAmB,cAAc;AAEvG,MAAM,WAAoC,KAAK,SAAS,aAAa;AAAA;AAAA,EAE1E,YAAY,cAAc,OAAO;AAAA,EACjC,SAAS,cAAc,OAAO;AAAA,EAC9B,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ,cAAc,OAAO;AAAA,EAC7B,QAAQ;AAAA,EACR,kBAAkB,cAAc,OAAO;AAAA,EACvC,kBAAkB,cAAc,OAAO;AAAA,EACvC,YAAY,cAAc,OAAO;AAAA,EACjC,YAAY,cAAc,OAAO;AAAA,EACjC,aAAa,cAAc,OAAO;AAAA,EAClC,SAAS,cAAc,OAAO;AAAA,EAC9B,QAAQ,cAAc,OAAO;AAAA,EAC7B,OAAO,cAAc,OAAO;AAAA,EAC5B,QAAQ,cAAc,OAAO;AAAA,EAC7B,6BAA6B;AAAA;AAAA,EAG7B,MAAM,cAAc,OAAO;AAAA,EAC3B,QAAQ,cAAc,OAAO;AAAA,EAC7B,WAAW,cAAc,OAAO;AAAA,EAChC,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,UAAU,cAAc,OAAO;AAAA,EAC/B,aAAa,cAAc,OAAO;AAAA,EAClC,cAAc,cAAc,OAAO;AAAA,EACnC,GAAG;AACL,GAAkB;AAChB,QAAM,WAAW,OAAO,UAAU,WAAW,QAAQ,MAAM;AAC3D,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAiB,gBAAgB;AAEvF,MAAI;AAEJ,MAAI,8BAA8B,OAAO,WAAW,eAAe,UAAU;AAC3E,qBAAiB;AAAA,MACf,MAAuB,oBAAoB,QAAQ,EAAE,KAAK,CAAC,WAAW,IAAI,gBAAgB,OAAO,OAAO,CAAC;AAAA,MACzG,CAAC,UAAU,UAAU;AAAA,IACvB;AAAA,EACF,OAAO;AACL,qBAAiB;AAAA,EACnB;AAEA,kBAAgB,MAAM;AACpB,QAAI,4BAA4B;AAE9B;AAAA,IACF;AAEA,QAAI,CAAC,UAAU;AACb,6BAAuB,gBAAgB;AACvC;AAAA,IACF;AAEA,QAAI;AACJ,QAAI,UAAU;AAEd,wBAAoB,QAAQ,EAAE,KAAK,CAAC,WAAW;AAC7C,UAAI,SAAS;AACX,cAAM,IAAI,gBAAgB,OAAO,OAAO;AACxC,+BAAuB,GAAG;AAAA,MAC5B;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,gBAAU;AAAA,IACZ;AAAA,EACF,GAAG,CAAC,UAAU,0BAA0B,CAAC;AAEzC,QAAM,WAAW;AAAA;AAAA,IAEf,UAAU,OAAO,IAAI,wBAAwB;AAAA,IAC7C,eAAe,OAAO;AAAA,IACtB,aAAa,yBAAyB,SAAS;AAAA,IAC/C,SAAS;AAAA,IACT,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,IACnB,aAAa;AAAA,IACb,aAAa;AAAA,IACb,cAAc,yBAAyB,UAAU;AAAA,IACjD,UAAU;AAAA,IACV,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,WAAW,QAAQ,KAAK;AAAA,IACxB,SAAS,eAAe,KAAK;AAAA;AAAA,IAG7B,OAAO,iBAAiB,GAAG;AAAA,IAC3B,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA,IACd,eAAe;AAAA,EACjB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB,SAAS,CAAC,SAAS;AAAA,MACnB;AAAA;AAAA,EACF;AAEJ,GAAG,kBAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@paper-design/shaders-react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.74",
|
|
4
4
|
"license": "SEE LICENSE IN https://github.com/paper-design/shaders/blob/main/LICENSE",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"type-check": "tsc --project tsconfig.json"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@paper-design/shaders": "0.0.
|
|
27
|
+
"@paper-design/shaders": "0.0.74"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@types/react": "19.1.0"
|