From bb08a49ff9f86ed1a75371c73b0ad121c49570df Mon Sep 17 00:00:00 2001 From: Ksenia Kondrashova Date: Fri, 31 Oct 2025 13:58:09 +0000 Subject: [PATCH 1/6] default fit cover => contain --- .../shaders-react/src/shaders/paper-texture.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/shaders-react/src/shaders/paper-texture.tsx b/packages/shaders-react/src/shaders/paper-texture.tsx index 81cc82edf..df7a283dd 100644 --- a/packages/shaders-react/src/shaders/paper-texture.tsx +++ b/packages/shaders-react/src/shaders/paper-texture.tsx @@ -29,8 +29,8 @@ export const defaultPreset: PaperTexturePreset = { name: 'Default', params: { ...defaultObjectSizing, - fit: 'cover', - scale: 0.6, + fit: 'contain', + scale: 0.8, speed: 0, frame: 0, colorFront: '#9fadbc', @@ -53,10 +53,10 @@ export const abstractPreset: PaperTexturePreset = { name: 'Abstract', params: { ...defaultObjectSizing, - fit: 'cover', + fit: 'contain', speed: 0, frame: 0, - scale: 0.6, + scale: 0.8, colorFront: '#00eeff', colorBack: '#ff0a81', contrast: 0.85, @@ -77,10 +77,10 @@ export const cardboardPreset: PaperTexturePreset = { name: 'Cardboard', params: { ...defaultObjectSizing, - fit: 'cover', + fit: 'contain', speed: 0, frame: 0, - scale: 0.6, + scale: 0.8, colorFront: '#c7b89e', colorBack: '#999180', contrast: 0.4, @@ -103,7 +103,7 @@ export const detailsPreset: PaperTexturePreset = { ...defaultObjectSizing, speed: 0, frame: 0, - fit: 'cover', + fit: 'contain', scale: 3, colorFront: '#00000000', colorBack: '#00000000', From ccf26501fa34c21d578c8bcb2c3a23037e8c9a5b Mon Sep 17 00:00:00 2001 From: Ksenia Kondrashova Date: Fri, 31 Oct 2025 14:33:10 +0000 Subject: [PATCH 2/6] blending param added + default blending improved --- docs/src/app/(shaders)/paper-texture/page.tsx | 1 + .../src/shaders/paper-texture.tsx | 6 ++++++ packages/shaders/src/shaders/paper-texture.ts | 18 ++++++++++++++++-- 3 files changed, 23 insertions(+), 2 deletions(-) diff --git a/docs/src/app/(shaders)/paper-texture/page.tsx b/docs/src/app/(shaders)/paper-texture/page.tsx index a8ec94dcf..c9685d31c 100644 --- a/docs/src/app/(shaders)/paper-texture/page.tsx +++ b/docs/src/app/(shaders)/paper-texture/page.tsx @@ -79,6 +79,7 @@ const PaperTextureWithControls = () => { foldCount: { value: defaults.foldCount, min: 1, max: 15, step: 1, order: 207 }, drops: { value: defaults.drops, min: 0, max: 1, order: 209 }, fade: { value: defaults.fade, min: 0, max: 1, order: 208 }, + blending: { value: defaults.blending, min: 0, max: 1, order: 0 }, seed: { value: defaults.seed, min: 0, step: 1, max: 1000, order: 250 }, scale: { value: defaults.scale, min: 0.5, max: 10, order: 300 }, fit: { value: defaults.fit, options: ['contain', 'cover'] as ShaderFit[], order: 301 }, diff --git a/packages/shaders-react/src/shaders/paper-texture.tsx b/packages/shaders-react/src/shaders/paper-texture.tsx index df7a283dd..df34f9974 100644 --- a/packages/shaders-react/src/shaders/paper-texture.tsx +++ b/packages/shaders-react/src/shaders/paper-texture.tsx @@ -29,6 +29,7 @@ export const defaultPreset: PaperTexturePreset = { name: 'Default', params: { ...defaultObjectSizing, + blending: 0, fit: 'contain', scale: 0.8, speed: 0, @@ -53,6 +54,7 @@ export const abstractPreset: PaperTexturePreset = { name: 'Abstract', params: { ...defaultObjectSizing, + blending: 0, fit: 'contain', speed: 0, frame: 0, @@ -77,6 +79,7 @@ export const cardboardPreset: PaperTexturePreset = { name: 'Cardboard', params: { ...defaultObjectSizing, + blending: 0, fit: 'contain', speed: 0, frame: 0, @@ -101,6 +104,7 @@ export const detailsPreset: PaperTexturePreset = { name: 'Details', params: { ...defaultObjectSizing, + blending: 0, speed: 0, frame: 0, fit: 'contain', @@ -142,6 +146,7 @@ export const PaperTexture: React.FC = memo(function PaperText folds = defaultPreset.params.folds, drops = defaultPreset.params.drops, seed = defaultPreset.params.seed, + blending = defaultPreset.params.blending, // Reworked props fiberScale, @@ -183,6 +188,7 @@ export const PaperTexture: React.FC = memo(function PaperText u_fade: fade, u_drops: drops, u_seed: seed, + u_blending: blending, ...noiseTexture, // Sizing uniforms diff --git a/packages/shaders/src/shaders/paper-texture.ts b/packages/shaders/src/shaders/paper-texture.ts index 0b341b718..5cec8fcf2 100644 --- a/packages/shaders/src/shaders/paper-texture.ts +++ b/packages/shaders/src/shaders/paper-texture.ts @@ -44,6 +44,7 @@ uniform float u_foldCount; uniform float u_drops; uniform float u_seed; uniform float u_fade; +uniform float u_blending; uniform sampler2D u_noiseTexture; @@ -177,6 +178,13 @@ float lst(float edge0, float edge1, float x) { return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0); } +vec3 blendMultiply(vec3 base, vec3 blend) { + return base*blend; +} +vec3 blendMultiply(vec3 base, vec3 blend, float opacity) { + return (blendMultiply(base, blend) * opacity + base * (1.0 - opacity)); +} + void main() { vec2 imageUV = v_imageUV; @@ -240,7 +248,7 @@ void main() { imageUV += .02 * normalImage; float frame = getUvFrame(imageUV); vec4 image = texture(u_image, imageUV); - image.rgb += .6 * pow(u_contrast, .4) * (res - .7); + image.rgb += .6 * pow(u_contrast, .4) * (.3 - res); frame *= image.a; @@ -253,7 +261,11 @@ void main() { color -= .007 * drops; - color.rgb = mix(color, image.rgb, frame); + float blending = 1. - u_blending; + float blendOpacity = (.5 + .5 * res); + vec3 pic = blendMultiply(color, image.rgb + .3 * blending * length(normalImage), .5 * res + .5 * u_blending); + pic = mix(pic, image.rgb, blending); + color = mix(color, pic, frame); fragColor = vec4(color, opacity); } @@ -275,6 +287,7 @@ export interface PaperTextureUniforms extends ShaderSizingUniforms { u_crumpleSize: number; u_drops: number; u_seed: number; + u_blending: number; } export interface PaperTextureParams extends ShaderSizingParams, ShaderMotionParams { @@ -292,4 +305,5 @@ export interface PaperTextureParams extends ShaderSizingParams, ShaderMotionPara crumpleSize?: number; drops?: number; seed?: number; + blending?: number; } From 453d71772daa6f2a266302ededdf05eaa9b4bfd3 Mon Sep 17 00:00:00 2001 From: Ksenia Kondrashova Date: Fri, 31 Oct 2025 16:35:06 +0000 Subject: [PATCH 3/6] params order swap --- docs/src/app/(shaders)/paper-texture/page.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/app/(shaders)/paper-texture/page.tsx b/docs/src/app/(shaders)/paper-texture/page.tsx index c9685d31c..21a40e169 100644 --- a/docs/src/app/(shaders)/paper-texture/page.tsx +++ b/docs/src/app/(shaders)/paper-texture/page.tsx @@ -69,7 +69,7 @@ const PaperTextureWithControls = () => { return { colorBack: { value: toHsla(defaults.colorBack), order: 100 }, colorFront: { value: toHsla(defaults.colorFront), order: 101 }, - contrast: { value: defaults.contrast, min: 0, max: 1, order: 200 }, + contrast: { value: defaults.contrast, min: 0, max: 1, order: 199 }, roughness: { value: defaults.roughness, min: 0, max: 1, order: 201 }, fiber: { value: defaults.fiber, min: 0, max: 1, order: 202 }, fiberSize: { value: defaults.fiberSize, min: 0.01, max: 1, order: 203 }, @@ -79,7 +79,7 @@ const PaperTextureWithControls = () => { foldCount: { value: defaults.foldCount, min: 1, max: 15, step: 1, order: 207 }, drops: { value: defaults.drops, min: 0, max: 1, order: 209 }, fade: { value: defaults.fade, min: 0, max: 1, order: 208 }, - blending: { value: defaults.blending, min: 0, max: 1, order: 0 }, + blending: { value: defaults.blending, min: 0, max: 1, order: 200 }, seed: { value: defaults.seed, min: 0, step: 1, max: 1000, order: 250 }, scale: { value: defaults.scale, min: 0.5, max: 10, order: 300 }, fit: { value: defaults.fit, options: ['contain', 'cover'] as ShaderFit[], order: 301 }, From 9fc23a4bc3981a34d1d3b6488953ed60e5133b97 Mon Sep 17 00:00:00 2001 From: Ksenia Kondrashova Date: Fri, 31 Oct 2025 16:54:03 +0000 Subject: [PATCH 4/6] opacity added --- docs/src/app/(shaders)/paper-texture/page.tsx | 1 + packages/shaders-react/src/shaders/paper-texture.tsx | 6 ++++++ packages/shaders/src/shaders/paper-texture.ts | 5 ++++- 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/docs/src/app/(shaders)/paper-texture/page.tsx b/docs/src/app/(shaders)/paper-texture/page.tsx index 21a40e169..498405147 100644 --- a/docs/src/app/(shaders)/paper-texture/page.tsx +++ b/docs/src/app/(shaders)/paper-texture/page.tsx @@ -70,6 +70,7 @@ const PaperTextureWithControls = () => { colorBack: { value: toHsla(defaults.colorBack), order: 100 }, colorFront: { value: toHsla(defaults.colorFront), order: 101 }, contrast: { value: defaults.contrast, min: 0, max: 1, order: 199 }, + opacity: { value: defaults.opacity, min: 0, max: 1, order: 199 }, roughness: { value: defaults.roughness, min: 0, max: 1, order: 201 }, fiber: { value: defaults.fiber, min: 0, max: 1, order: 202 }, fiberSize: { value: defaults.fiberSize, min: 0.01, max: 1, order: 203 }, diff --git a/packages/shaders-react/src/shaders/paper-texture.tsx b/packages/shaders-react/src/shaders/paper-texture.tsx index df34f9974..0bc9f4823 100644 --- a/packages/shaders-react/src/shaders/paper-texture.tsx +++ b/packages/shaders-react/src/shaders/paper-texture.tsx @@ -37,6 +37,7 @@ export const defaultPreset: PaperTexturePreset = { colorFront: '#9fadbc', colorBack: '#ffffff', contrast: 0.3, + opacity: 1, roughness: 0.4, fiber: 0.3, fiberSize: 0.2, @@ -62,6 +63,7 @@ export const abstractPreset: PaperTexturePreset = { colorFront: '#00eeff', colorBack: '#ff0a81', contrast: 0.85, + opacity: 1, roughness: 0, fiber: 0.1, fiberSize: 0.2, @@ -87,6 +89,7 @@ export const cardboardPreset: PaperTexturePreset = { colorFront: '#c7b89e', colorBack: '#999180', contrast: 0.4, + opacity: 1, roughness: 0, fiber: 0.35, fiberSize: 0.14, @@ -112,6 +115,7 @@ export const detailsPreset: PaperTexturePreset = { colorFront: '#00000000', colorBack: '#00000000', contrast: 0, + opacity: 1, roughness: 1, fiber: 0.27, fiberSize: 0.22, @@ -140,6 +144,7 @@ export const PaperTexture: React.FC = memo(function PaperText colorBack = defaultPreset.params.colorBack, image = '', contrast = defaultPreset.params.contrast, + opacity = defaultPreset.params.opacity, roughness = defaultPreset.params.roughness, fiber = defaultPreset.params.fiber, crumples = defaultPreset.params.crumples, @@ -178,6 +183,7 @@ export const PaperTexture: React.FC = memo(function PaperText u_colorFront: getShaderColorFromString(colorFront), u_colorBack: getShaderColorFromString(colorBack), u_contrast: contrast, + u_opacity: opacity, u_roughness: roughness, u_fiber: fiber, u_fiberSize: fiberSize, diff --git a/packages/shaders/src/shaders/paper-texture.ts b/packages/shaders/src/shaders/paper-texture.ts index 5cec8fcf2..9f3c584e3 100644 --- a/packages/shaders/src/shaders/paper-texture.ts +++ b/packages/shaders/src/shaders/paper-texture.ts @@ -34,6 +34,7 @@ uniform sampler2D u_image; uniform float u_imageAspectRatio; uniform float u_contrast; +uniform float u_opacity; uniform float u_roughness; uniform float u_fiber; uniform float u_fiberSize; @@ -265,7 +266,7 @@ void main() { float blendOpacity = (.5 + .5 * res); vec3 pic = blendMultiply(color, image.rgb + .3 * blending * length(normalImage), .5 * res + .5 * u_blending); pic = mix(pic, image.rgb, blending); - color = mix(color, pic, frame); + color = mix(color, pic, frame * u_opacity); fragColor = vec4(color, opacity); } @@ -277,6 +278,7 @@ export interface PaperTextureUniforms extends ShaderSizingUniforms { u_colorFront: [number, number, number, number]; u_colorBack: [number, number, number, number]; u_contrast: number; + u_opacity: number; u_roughness: number; u_fiber: number; u_fiberSize: number; @@ -295,6 +297,7 @@ export interface PaperTextureParams extends ShaderSizingParams, ShaderMotionPara colorFront?: string; colorBack?: string; contrast?: number; + opacity?: number; roughness?: number; fiber?: number; fiberSize?: number; From d24cfa360e4bb2993c7f3a924a4da51e26a8dc46 Mon Sep 17 00:00:00 2001 From: Ksenia Kondrashova Date: Fri, 31 Oct 2025 17:51:01 +0000 Subject: [PATCH 5/6] roughness to use save UV as other pattern components --- packages/shaders/src/shaders/paper-texture.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shaders/src/shaders/paper-texture.ts b/packages/shaders/src/shaders/paper-texture.ts index 9f3c584e3..4b9d41f56 100644 --- a/packages/shaders/src/shaders/paper-texture.ts +++ b/packages/shaders/src/shaders/paper-texture.ts @@ -192,7 +192,7 @@ void main() { vec2 patternUV = v_imageUV - .5; patternUV = 5. * (patternUV * vec2(u_imageAspectRatio, 1.)); - vec2 roughnessUv = 1.5 * (gl_FragCoord.xy - .5 * u_resolution) / u_pixelRatio; + vec2 roughnessUv = 120. * patternUV; float roughness = roughness(roughnessUv + vec2(1., 0.)) - roughness(roughnessUv - vec2(1., 0.)); vec2 crumplesUV = fract(patternUV * .02 / u_crumpleSize - u_seed) * 32.; From 9211b7e062fd14a201b447222746032b9745c250 Mon Sep 17 00:00:00 2001 From: Ksenia Kondrashova Date: Mon, 3 Nov 2025 11:10:42 +0000 Subject: [PATCH 6/6] new u_distortion control --- docs/src/app/(shaders)/paper-texture/page.tsx | 5 +++-- packages/shaders-react/src/shaders/paper-texture.tsx | 6 ++++++ packages/shaders/src/shaders/paper-texture.ts | 7 +++++-- 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/docs/src/app/(shaders)/paper-texture/page.tsx b/docs/src/app/(shaders)/paper-texture/page.tsx index 498405147..629dfa1d4 100644 --- a/docs/src/app/(shaders)/paper-texture/page.tsx +++ b/docs/src/app/(shaders)/paper-texture/page.tsx @@ -69,8 +69,9 @@ const PaperTextureWithControls = () => { return { colorBack: { value: toHsla(defaults.colorBack), order: 100 }, colorFront: { value: toHsla(defaults.colorFront), order: 101 }, - contrast: { value: defaults.contrast, min: 0, max: 1, order: 199 }, - opacity: { value: defaults.opacity, min: 0, max: 1, order: 199 }, + contrast: { value: defaults.contrast, min: 0, max: 1, order: 197 }, + opacity: { value: defaults.opacity, min: 0, max: 1, order: 198 }, + distortion: { value: defaults.distortion, min: -1, max: 1, order: 199 }, roughness: { value: defaults.roughness, min: 0, max: 1, order: 201 }, fiber: { value: defaults.fiber, min: 0, max: 1, order: 202 }, fiberSize: { value: defaults.fiberSize, min: 0.01, max: 1, order: 203 }, diff --git a/packages/shaders-react/src/shaders/paper-texture.tsx b/packages/shaders-react/src/shaders/paper-texture.tsx index 0bc9f4823..00019214d 100644 --- a/packages/shaders-react/src/shaders/paper-texture.tsx +++ b/packages/shaders-react/src/shaders/paper-texture.tsx @@ -30,6 +30,7 @@ export const defaultPreset: PaperTexturePreset = { params: { ...defaultObjectSizing, blending: 0, + distortion: 0.5, fit: 'contain', scale: 0.8, speed: 0, @@ -56,6 +57,7 @@ export const abstractPreset: PaperTexturePreset = { params: { ...defaultObjectSizing, blending: 0, + distortion: 0.5, fit: 'contain', speed: 0, frame: 0, @@ -82,6 +84,7 @@ export const cardboardPreset: PaperTexturePreset = { params: { ...defaultObjectSizing, blending: 0, + distortion: 0.5, fit: 'contain', speed: 0, frame: 0, @@ -108,6 +111,7 @@ export const detailsPreset: PaperTexturePreset = { params: { ...defaultObjectSizing, blending: 0, + distortion: 0.5, speed: 0, frame: 0, fit: 'contain', @@ -152,6 +156,7 @@ export const PaperTexture: React.FC = memo(function PaperText drops = defaultPreset.params.drops, seed = defaultPreset.params.seed, blending = defaultPreset.params.blending, + distortion = defaultPreset.params.distortion, // Reworked props fiberScale, @@ -195,6 +200,7 @@ export const PaperTexture: React.FC = memo(function PaperText u_drops: drops, u_seed: seed, u_blending: blending, + u_distortion: distortion, ...noiseTexture, // Sizing uniforms diff --git a/packages/shaders/src/shaders/paper-texture.ts b/packages/shaders/src/shaders/paper-texture.ts index 4b9d41f56..978873999 100644 --- a/packages/shaders/src/shaders/paper-texture.ts +++ b/packages/shaders/src/shaders/paper-texture.ts @@ -46,6 +46,7 @@ uniform float u_drops; uniform float u_seed; uniform float u_fade; uniform float u_blending; +uniform float u_distortion; uniform sampler2D u_noiseTexture; @@ -235,7 +236,7 @@ void main() { normal.xy += u_roughness * 1.5 * roughness; normal.xy += fiber; - normalImage += u_roughness * .75 * roughness; + normalImage += u_roughness * .3 * roughness; normalImage += .2 * fiber; vec3 lightPos = vec3(1., 2., 1.); @@ -246,7 +247,7 @@ void main() { vec3 bgColor = u_colorBack.rgb * u_colorBack.a; float bgOpacity = u_colorBack.a; - imageUV += .02 * normalImage; + imageUV += .1 * u_distortion * normalImage; float frame = getUvFrame(imageUV); vec4 image = texture(u_image, imageUV); image.rgb += .6 * pow(u_contrast, .4) * (.3 - res); @@ -290,6 +291,7 @@ export interface PaperTextureUniforms extends ShaderSizingUniforms { u_drops: number; u_seed: number; u_blending: number; + u_distortion: number; } export interface PaperTextureParams extends ShaderSizingParams, ShaderMotionParams { @@ -309,4 +311,5 @@ export interface PaperTextureParams extends ShaderSizingParams, ShaderMotionPara drops?: number; seed?: number; blending?: number; + distortion?: number; }