@paper-design/shaders-react 0.0.70 → 0.0.72
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/set-min-image-size.d.ts +5 -0
- package/dist/set-min-image-size.js +19 -0
- package/dist/set-min-image-size.js.map +7 -0
- package/dist/shader-mount.js +12 -10
- package/dist/shader-mount.js.map +2 -2
- package/dist/shaders/image-dithering.js +10 -4
- package/dist/shaders/image-dithering.js.map +2 -2
- package/package.json +2 -2
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
2
|
+
* Paper Shaders *
|
|
3
|
+
* https://github.com/paper-design/shaders *
|
|
4
|
+
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
5
|
+
|
|
6
|
+
function setMinImageSize(img) {
|
|
7
|
+
if (img.naturalWidth < 1024 && img.naturalHeight < 1024) {
|
|
8
|
+
if (img.naturalWidth < 1 || img.naturalHeight < 1) {
|
|
9
|
+
return;
|
|
10
|
+
}
|
|
11
|
+
const aspect = img.naturalWidth / img.naturalHeight;
|
|
12
|
+
img.width = Math.round(aspect > 1 ? 1024 * aspect : 1024);
|
|
13
|
+
img.height = Math.round(aspect > 1 ? 1024 : 1024 / aspect);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
export {
|
|
17
|
+
setMinImageSize
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=set-min-image-size.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/set-min-image-size.tsx"],
|
|
4
|
+
"sourcesContent": ["/**\n * Resize the image to at least 1024px on the shorter side.\n * Makes sure that vector images are converted to bitmaps at an acceptable resolution.\n */\nexport function setMinImageSize(img: HTMLImageElement): void {\n if (img.naturalWidth < 1024 && img.naturalHeight < 1024) {\n if (img.naturalWidth < 1 || img.naturalHeight < 1) {\n // Skip weird sizes\n return;\n }\n\n const aspect = img.naturalWidth / img.naturalHeight;\n img.width = Math.round(aspect > 1 ? 1024 * aspect : 1024);\n img.height = Math.round(aspect > 1 ? 1024 : 1024 / aspect);\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;AAIO,SAAS,gBAAgB,KAA6B;AAC3D,MAAI,IAAI,eAAe,QAAQ,IAAI,gBAAgB,MAAM;AACvD,QAAI,IAAI,eAAe,KAAK,IAAI,gBAAgB,GAAG;AAEjD;AAAA,IACF;AAEA,UAAM,SAAS,IAAI,eAAe,IAAI;AACtC,QAAI,QAAQ,KAAK,MAAM,SAAS,IAAI,OAAO,SAAS,IAAI;AACxD,QAAI,SAAS,KAAK,MAAM,SAAS,IAAI,OAAO,OAAO,MAAM;AAAA,EAC3D;AACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/shader-mount.js
CHANGED
|
@@ -7,9 +7,10 @@
|
|
|
7
7
|
import { useEffect, useRef, forwardRef, useState } from "react";
|
|
8
8
|
import {
|
|
9
9
|
ShaderMount as ShaderMountVanilla,
|
|
10
|
-
|
|
10
|
+
emptyPixel
|
|
11
11
|
} from "@paper-design/shaders";
|
|
12
12
|
import { useMergeRefs } from "./use-merge-refs.js";
|
|
13
|
+
import { setMinImageSize } from "./set-min-image-size.js";
|
|
13
14
|
import { jsx } from "react/jsx-runtime";
|
|
14
15
|
async function processUniforms(uniformsProp) {
|
|
15
16
|
const processedUniforms = {};
|
|
@@ -34,30 +35,31 @@ async function processUniforms(uniformsProp) {
|
|
|
34
35
|
};
|
|
35
36
|
Object.entries(uniformsProp).forEach(([key, value]) => {
|
|
36
37
|
if (typeof value === "string") {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}
|
|
41
|
-
if (!isValidUrl(value)) {
|
|
42
|
-
console.warn(`Uniform "${key}" has invalid URL "${value}". Skipping image loading.`);
|
|
38
|
+
const url = value || emptyPixel;
|
|
39
|
+
if (!isValidUrl(url)) {
|
|
40
|
+
console.warn(`Uniform "${key}" has invalid URL "${url}". Skipping image loading.`);
|
|
43
41
|
return;
|
|
44
42
|
}
|
|
45
43
|
const imagePromise = new Promise((resolve, reject) => {
|
|
46
44
|
const img = new Image();
|
|
47
|
-
if (isExternalUrl(
|
|
45
|
+
if (isExternalUrl(url)) {
|
|
48
46
|
img.crossOrigin = "anonymous";
|
|
49
47
|
}
|
|
50
48
|
img.onload = () => {
|
|
49
|
+
setMinImageSize(img);
|
|
51
50
|
processedUniforms[key] = img;
|
|
52
51
|
resolve();
|
|
53
52
|
};
|
|
54
53
|
img.onerror = () => {
|
|
55
|
-
console.error(`Could not set uniforms. Failed to load image at ${
|
|
54
|
+
console.error(`Could not set uniforms. Failed to load image at ${url}`);
|
|
56
55
|
reject();
|
|
57
56
|
};
|
|
58
|
-
img.src =
|
|
57
|
+
img.src = url;
|
|
59
58
|
});
|
|
60
59
|
imageLoadPromises.push(imagePromise);
|
|
60
|
+
} else if (value instanceof HTMLImageElement) {
|
|
61
|
+
setMinImageSize(value);
|
|
62
|
+
processedUniforms[key] = value;
|
|
61
63
|
} else {
|
|
62
64
|
processedUniforms[key] = value;
|
|
63
65
|
}
|
package/dist/shader-mount.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/shader-mount.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client';\n\nimport { useEffect, useRef, forwardRef, useState } from 'react';\nimport {\n ShaderMount as ShaderMountVanilla,\n
|
|
5
|
-
"mappings": ";;;;;;AAEA,SAAS,WAAW,QAAQ,YAAY,gBAAgB;AACxD;AAAA,EACE,eAAe;AAAA,EACf;AAAA,OAIK;AACP,SAAS,oBAAoB;
|
|
4
|
+
"sourcesContent": ["'use client';\n\nimport { useEffect, useRef, forwardRef, useState } from 'react';\nimport {\n ShaderMount as ShaderMountVanilla,\n emptyPixel,\n type PaperShaderElement,\n type ShaderMotionParams,\n type ShaderMountUniforms,\n} from '@paper-design/shaders';\nimport { useMergeRefs } from './use-merge-refs.js';\nimport { setMinImageSize } from './set-min-image-size.js';\n\n/**\n * React Shader Mount can also accept strings as uniform values, which will assumed to be URLs and loaded as images\n *\n * We accept undefined as a convenience for server rendering, when some things may be undefined\n * We just skip setting the uniform if it's undefined. This allows the shader mount to still take up space during server rendering\n */\ninterface ShaderMountUniformsReact {\n [key: string]: string | boolean | number | number[] | number[][] | HTMLImageElement | undefined;\n}\n\nexport interface ShaderMountProps extends Omit<React.ComponentProps<'div'>, 'color' | 'ref'>, ShaderMotionParams {\n ref?: React.Ref<PaperShaderElement>;\n fragmentShader: string;\n uniforms: ShaderMountUniformsReact;\n mipmaps?: string[];\n minPixelRatio?: number;\n maxPixelCount?: number;\n webGlContextAttributes?: WebGLContextAttributes;\n\n /** Inline CSS width style */\n width?: string | number;\n /** Inline CSS height style */\n height?: string | number;\n}\n\nexport interface ShaderComponentProps extends Omit<React.ComponentProps<'div'>, 'color' | 'ref'> {\n ref?: React.Ref<PaperShaderElement>;\n minPixelRatio?: number;\n maxPixelCount?: number;\n webGlContextAttributes?: WebGLContextAttributes;\n\n /** Inline CSS width style */\n width?: string | number;\n /** Inline CSS height style */\n height?: string | number;\n}\n\n/** Parse the provided uniforms, turning URL strings into loaded images */\nasync function processUniforms(uniformsProp: ShaderMountUniformsReact): Promise<ShaderMountUniforms> {\n const processedUniforms = {} as ShaderMountUniforms;\n const imageLoadPromises: Promise<void>[] = [];\n\n const isValidUrl = (url: string): boolean => {\n try {\n // Handle absolute paths\n if (url.startsWith('/')) return true;\n // Check if it's a valid URL\n new URL(url);\n return true;\n } catch {\n return false;\n }\n };\n\n const isExternalUrl = (url: string): boolean => {\n try {\n if (url.startsWith('/')) return false;\n const urlObject = new URL(url, window.location.origin);\n return urlObject.origin !== window.location.origin;\n } catch {\n return false;\n }\n };\n\n Object.entries(uniformsProp).forEach(([key, value]) => {\n if (typeof value === 'string') {\n // Use a transparent pixel for empty strings\n const url = value || emptyPixel;\n\n // Make sure the provided string is a valid URL or just skip trying to set this uniform entirely\n if (!isValidUrl(url)) {\n console.warn(`Uniform \"${key}\" has invalid URL \"${url}\". Skipping image loading.`);\n return;\n }\n\n const imagePromise = new Promise<void>((resolve, reject) => {\n const img = new Image();\n if (isExternalUrl(url)) {\n img.crossOrigin = 'anonymous';\n }\n img.onload = () => {\n setMinImageSize(img);\n processedUniforms[key] = img;\n resolve();\n };\n img.onerror = () => {\n console.error(`Could not set uniforms. Failed to load image at ${url}`);\n reject();\n };\n img.src = url;\n });\n\n imageLoadPromises.push(imagePromise);\n } else if (value instanceof HTMLImageElement) {\n setMinImageSize(value);\n processedUniforms[key] = value;\n } else {\n processedUniforms[key] = value;\n }\n });\n\n await Promise.all(imageLoadPromises);\n return processedUniforms;\n}\n\n/**\n * A React component that mounts a shader and updates its uniforms as the component's props change\n * If you pass a string as a uniform value, it will be assumed to be a URL and attempted to be loaded as an image\n */\nexport const ShaderMount: React.FC<ShaderMountProps> = forwardRef<PaperShaderElement, ShaderMountProps>(\n function ShaderMountImpl(\n {\n fragmentShader,\n uniforms: uniformsProp,\n webGlContextAttributes,\n speed = 0,\n frame = 0,\n width,\n height,\n minPixelRatio,\n maxPixelCount,\n mipmaps,\n style,\n ...divProps\n },\n forwardedRef\n ) {\n const [isInitialized, setIsInitialized] = useState(false);\n const divRef = useRef<PaperShaderElement>(null);\n const shaderMountRef: React.RefObject<ShaderMountVanilla | null> = useRef<ShaderMountVanilla>(null);\n const webGlContextAttributesRef = useRef(webGlContextAttributes);\n\n // Initialize the ShaderMountVanilla\n useEffect(() => {\n const initShader = async () => {\n const uniforms = await processUniforms(uniformsProp);\n\n if (divRef.current && !shaderMountRef.current) {\n shaderMountRef.current = new ShaderMountVanilla(\n divRef.current,\n fragmentShader,\n uniforms,\n webGlContextAttributesRef.current,\n speed,\n frame,\n minPixelRatio,\n maxPixelCount,\n mipmaps\n );\n\n setIsInitialized(true);\n }\n };\n\n initShader();\n\n return () => {\n shaderMountRef.current?.dispose();\n shaderMountRef.current = null;\n };\n }, [fragmentShader]);\n\n // Uniforms\n useEffect(() => {\n let isStale = false;\n\n const updateUniforms = async () => {\n const uniforms = await processUniforms(uniformsProp);\n\n if (!isStale) {\n // We only use the freshest uniforms otherwise we can get into race conditions\n // if some uniforms (images!) take longer to load in subsequent effect runs.\n shaderMountRef.current?.setUniforms(uniforms);\n }\n };\n\n updateUniforms();\n\n return () => {\n isStale = true;\n };\n }, [uniformsProp, isInitialized]);\n\n // Speed\n useEffect(() => {\n shaderMountRef.current?.setSpeed(speed);\n }, [speed, isInitialized]);\n\n // Max Pixel Count\n useEffect(() => {\n shaderMountRef.current?.setMaxPixelCount(maxPixelCount);\n }, [maxPixelCount, isInitialized]);\n\n // Min Pixel Ratio\n useEffect(() => {\n shaderMountRef.current?.setMinPixelRatio(minPixelRatio);\n }, [minPixelRatio, isInitialized]);\n\n // Frame\n useEffect(() => {\n shaderMountRef.current?.setFrame(frame);\n }, [frame, isInitialized]);\n\n const mergedRef = useMergeRefs([divRef, forwardedRef]) as unknown as React.RefObject<HTMLDivElement>;\n return (\n <div\n ref={mergedRef}\n style={\n width !== undefined || height !== undefined\n ? {\n width: typeof width === 'string' && isNaN(+width) === false ? +width : width,\n height: typeof height === 'string' && isNaN(+height) === false ? +height : height,\n ...style,\n }\n : style\n }\n {...divProps}\n />\n );\n }\n);\n\nShaderMount.displayName = 'ShaderMount';\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -28,7 +28,8 @@ const defaultPreset = {
|
|
|
28
28
|
type: "8x8",
|
|
29
29
|
size: 2,
|
|
30
30
|
colorSteps: 2,
|
|
31
|
-
originalColors: false
|
|
31
|
+
originalColors: false,
|
|
32
|
+
inverted: false
|
|
32
33
|
}
|
|
33
34
|
};
|
|
34
35
|
const retroPreset = {
|
|
@@ -44,7 +45,8 @@ const retroPreset = {
|
|
|
44
45
|
type: "2x2",
|
|
45
46
|
size: 3,
|
|
46
47
|
colorSteps: 1,
|
|
47
|
-
originalColors: true
|
|
48
|
+
originalColors: true,
|
|
49
|
+
inverted: false
|
|
48
50
|
}
|
|
49
51
|
};
|
|
50
52
|
const noisePreset = {
|
|
@@ -60,7 +62,8 @@ const noisePreset = {
|
|
|
60
62
|
type: "random",
|
|
61
63
|
size: 1,
|
|
62
64
|
colorSteps: 1,
|
|
63
|
-
originalColors: false
|
|
65
|
+
originalColors: false,
|
|
66
|
+
inverted: false
|
|
64
67
|
}
|
|
65
68
|
};
|
|
66
69
|
const naturalPreset = {
|
|
@@ -76,7 +79,8 @@ const naturalPreset = {
|
|
|
76
79
|
type: "8x8",
|
|
77
80
|
size: 2,
|
|
78
81
|
colorSteps: 5,
|
|
79
|
-
originalColors: true
|
|
82
|
+
originalColors: true,
|
|
83
|
+
inverted: false
|
|
80
84
|
}
|
|
81
85
|
};
|
|
82
86
|
const imageDitheringPresets = [defaultPreset, noisePreset, retroPreset, naturalPreset];
|
|
@@ -91,6 +95,7 @@ const ImageDithering = memo(function ImageDitheringImpl({
|
|
|
91
95
|
type = defaultPreset.params.type,
|
|
92
96
|
colorSteps = defaultPreset.params.colorSteps,
|
|
93
97
|
originalColors = defaultPreset.params.originalColors,
|
|
98
|
+
inverted = defaultPreset.params.inverted,
|
|
94
99
|
pxSize,
|
|
95
100
|
size = pxSize === void 0 ? defaultPreset.params.size : pxSize,
|
|
96
101
|
// Sizing props
|
|
@@ -115,6 +120,7 @@ const ImageDithering = memo(function ImageDitheringImpl({
|
|
|
115
120
|
u_pxSize: size,
|
|
116
121
|
u_colorSteps: colorSteps,
|
|
117
122
|
u_originalColors: originalColors,
|
|
123
|
+
u_inverted: inverted,
|
|
118
124
|
// Sizing uniforms
|
|
119
125
|
u_fit: ShaderFitOptions[fit],
|
|
120
126
|
u_rotation: rotation,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/shaders/image-dithering.tsx"],
|
|
4
|
-
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n imageDitheringFragmentShader,\n getShaderColorFromString,\n ShaderFitOptions,\n type ImageDitheringUniforms,\n type ImageDitheringParams,\n defaultObjectSizing,\n DitheringTypes,\n type ImageShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface ImageDitheringProps extends ShaderComponentProps, ImageDitheringParams {\n /** @deprecated use `size` instead */\n pxSize?: number;\n}\n\ntype ImageDitheringPreset = ImageShaderPreset<ImageDitheringParams>;\n\nexport const defaultPreset: ImageDitheringPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n // scale: 0.95,\n speed: 0,\n frame: 0,\n colorFront: '#94ffaf',\n colorBack: '#000c38',\n colorHighlight: '#eaff94',\n type: '8x8',\n size: 2,\n colorSteps: 2,\n originalColors: false,\n },\n} as const;\n\nexport const retroPreset: ImageDitheringPreset = {\n name: 'Retro',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n speed: 0,\n frame: 0,\n colorFront: '#eeeeee',\n colorBack: '#5452ff',\n colorHighlight: '#eeeeee',\n type: '2x2',\n size: 3,\n colorSteps: 1,\n originalColors: true,\n },\n} as const;\n\nexport const noisePreset: ImageDitheringPreset = {\n name: 'Noise',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n speed: 0,\n frame: 0,\n colorFront: '#a2997c',\n colorBack: '#000000',\n colorHighlight: '#ededed',\n type: 'random',\n size: 1,\n colorSteps: 1,\n originalColors: false,\n },\n} as const;\n\nexport const naturalPreset: ImageDitheringPreset = {\n name: 'Natural',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n speed: 0,\n frame: 0,\n colorFront: '#ffffff',\n colorBack: '#000000',\n colorHighlight: '#ffffff',\n type: '8x8',\n size: 2,\n colorSteps: 5,\n originalColors: true,\n },\n} as const;\n\nexport const imageDitheringPresets: ImageDitheringPreset[] = [defaultPreset, noisePreset, retroPreset, naturalPreset];\n\nexport const ImageDithering: React.FC<ImageDitheringProps> = memo(function ImageDitheringImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorFront = defaultPreset.params.colorFront,\n colorBack = defaultPreset.params.colorBack,\n colorHighlight = defaultPreset.params.colorHighlight,\n image = '',\n type = defaultPreset.params.type,\n colorSteps = defaultPreset.params.colorSteps,\n originalColors = defaultPreset.params.originalColors,\n pxSize,\n size = pxSize === undefined ? defaultPreset.params.size : pxSize,\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}: ImageDitheringProps) {\n const uniforms = {\n // Own uniforms\n u_image: image,\n u_colorFront: getShaderColorFromString(colorFront),\n u_colorBack: getShaderColorFromString(colorBack),\n u_colorHighlight: getShaderColorFromString(colorHighlight),\n u_type: DitheringTypes[type],\n u_pxSize: size,\n u_colorSteps: colorSteps,\n u_originalColors: originalColors,\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_rotation: rotation,\n u_scale: scale,\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 ImageDitheringUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={imageDitheringFragmentShader}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
-
"mappings": ";;;;;AAAA,SAAS,YAAY;AACrB,SAAS,mBAA8C;AACvD,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,OAEK;
|
|
4
|
+
"sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n imageDitheringFragmentShader,\n getShaderColorFromString,\n ShaderFitOptions,\n type ImageDitheringUniforms,\n type ImageDitheringParams,\n defaultObjectSizing,\n DitheringTypes,\n type ImageShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface ImageDitheringProps extends ShaderComponentProps, ImageDitheringParams {\n /** @deprecated use `size` instead */\n pxSize?: number;\n}\n\ntype ImageDitheringPreset = ImageShaderPreset<ImageDitheringParams>;\n\nexport const defaultPreset: ImageDitheringPreset = {\n name: 'Default',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n // scale: 0.95,\n speed: 0,\n frame: 0,\n colorFront: '#94ffaf',\n colorBack: '#000c38',\n colorHighlight: '#eaff94',\n type: '8x8',\n size: 2,\n colorSteps: 2,\n originalColors: false,\n inverted: false,\n },\n} as const;\n\nexport const retroPreset: ImageDitheringPreset = {\n name: 'Retro',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n speed: 0,\n frame: 0,\n colorFront: '#eeeeee',\n colorBack: '#5452ff',\n colorHighlight: '#eeeeee',\n type: '2x2',\n size: 3,\n colorSteps: 1,\n originalColors: true,\n inverted: false,\n },\n} as const;\n\nexport const noisePreset: ImageDitheringPreset = {\n name: 'Noise',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n speed: 0,\n frame: 0,\n colorFront: '#a2997c',\n colorBack: '#000000',\n colorHighlight: '#ededed',\n type: 'random',\n size: 1,\n colorSteps: 1,\n originalColors: false,\n inverted: false,\n },\n} as const;\n\nexport const naturalPreset: ImageDitheringPreset = {\n name: 'Natural',\n params: {\n ...defaultObjectSizing,\n fit: 'cover',\n speed: 0,\n frame: 0,\n colorFront: '#ffffff',\n colorBack: '#000000',\n colorHighlight: '#ffffff',\n type: '8x8',\n size: 2,\n colorSteps: 5,\n originalColors: true,\n inverted: false,\n },\n} as const;\n\nexport const imageDitheringPresets: ImageDitheringPreset[] = [defaultPreset, noisePreset, retroPreset, naturalPreset];\n\nexport const ImageDithering: React.FC<ImageDitheringProps> = memo(function ImageDitheringImpl({\n // Own props\n speed = defaultPreset.params.speed,\n frame = defaultPreset.params.frame,\n colorFront = defaultPreset.params.colorFront,\n colorBack = defaultPreset.params.colorBack,\n colorHighlight = defaultPreset.params.colorHighlight,\n image = '',\n type = defaultPreset.params.type,\n colorSteps = defaultPreset.params.colorSteps,\n originalColors = defaultPreset.params.originalColors,\n inverted = defaultPreset.params.inverted,\n pxSize,\n size = pxSize === undefined ? defaultPreset.params.size : pxSize,\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}: ImageDitheringProps) {\n const uniforms = {\n // Own uniforms\n u_image: image,\n u_colorFront: getShaderColorFromString(colorFront),\n u_colorBack: getShaderColorFromString(colorBack),\n u_colorHighlight: getShaderColorFromString(colorHighlight),\n u_type: DitheringTypes[type],\n u_pxSize: size,\n u_colorSteps: colorSteps,\n u_originalColors: originalColors,\n u_inverted: inverted,\n\n // Sizing uniforms\n u_fit: ShaderFitOptions[fit],\n u_rotation: rotation,\n u_scale: scale,\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 ImageDitheringUniforms;\n\n return (\n <ShaderMount\n {...props}\n speed={speed}\n frame={frame}\n fragmentShader={imageDitheringFragmentShader}\n uniforms={uniforms}\n />\n );\n}, colorPropsAreEqual);\n"],
|
|
5
|
+
"mappings": "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",
|
|
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.72",
|
|
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.72"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@types/react": "19.1.0"
|