Skip to content

[DRAFT] Paper texture adjustments #220

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

[DRAFT] Paper texture adjustments #220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bb08a49
default fit cover => contain
uuuulala Oct 31, 2025
ccf2650
blending param added + default blending improved
uuuulala Oct 31, 2025
453d717
params order swap
uuuulala Oct 31, 2025
9fc23a4
opacity added
uuuulala Oct 31, 2025
d24cfa3
roughness to use save UV as other pattern components
uuuulala Oct 31, 2025
9211b7e
new u_distortion control
uuuulala Nov 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion docs/src/app/(shaders)/paper-texture/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +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: 200 },
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 },
Expand All @@ -79,6 +81,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: 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 },
Expand Down
32 changes: 25 additions & 7 deletions packages/shaders-react/src/shaders/paper-texture.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,16 @@ export const defaultPreset: PaperTexturePreset = {
name: 'Default',
params: {
...defaultObjectSizing,
fit: 'cover',
scale: 0.6,
blending: 0,
distortion: 0.5,
fit: 'contain',
scale: 0.8,
speed: 0,
frame: 0,
colorFront: '#9fadbc',
colorBack: '#ffffff',
contrast: 0.3,
opacity: 1,
roughness: 0.4,
fiber: 0.3,
fiberSize: 0.2,
Expand All @@ -53,13 +56,16 @@ export const abstractPreset: PaperTexturePreset = {
name: 'Abstract',
params: {
...defaultObjectSizing,
fit: 'cover',
blending: 0,
distortion: 0.5,
fit: 'contain',
speed: 0,
frame: 0,
scale: 0.6,
scale: 0.8,
colorFront: '#00eeff',
colorBack: '#ff0a81',
contrast: 0.85,
opacity: 1,
roughness: 0,
fiber: 0.1,
fiberSize: 0.2,
Expand All @@ -77,13 +83,16 @@ export const cardboardPreset: PaperTexturePreset = {
name: 'Cardboard',
params: {
...defaultObjectSizing,
fit: 'cover',
blending: 0,
distortion: 0.5,
fit: 'contain',
speed: 0,
frame: 0,
scale: 0.6,
scale: 0.8,
colorFront: '#c7b89e',
colorBack: '#999180',
contrast: 0.4,
opacity: 1,
roughness: 0,
fiber: 0.35,
fiberSize: 0.14,
Expand All @@ -101,13 +110,16 @@ export const detailsPreset: PaperTexturePreset = {
name: 'Details',
params: {
...defaultObjectSizing,
blending: 0,
distortion: 0.5,
speed: 0,
frame: 0,
fit: 'cover',
fit: 'contain',
scale: 3,
colorFront: '#00000000',
colorBack: '#00000000',
contrast: 0,
opacity: 1,
roughness: 1,
fiber: 0.27,
fiberSize: 0.22,
Expand Down Expand Up @@ -136,12 +148,15 @@ export const PaperTexture: React.FC<PaperTextureProps> = 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,
folds = defaultPreset.params.folds,
drops = defaultPreset.params.drops,
seed = defaultPreset.params.seed,
blending = defaultPreset.params.blending,
distortion = defaultPreset.params.distortion,

// Reworked props
fiberScale,
Expand Down Expand Up @@ -173,6 +188,7 @@ export const PaperTexture: React.FC<PaperTextureProps> = 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,
Expand All @@ -183,6 +199,8 @@ export const PaperTexture: React.FC<PaperTextureProps> = memo(function PaperText
u_fade: fade,
u_drops: drops,
u_seed: seed,
u_blending: blending,
u_distortion: distortion,
...noiseTexture,

// Sizing uniforms
Expand Down
30 changes: 25 additions & 5 deletions packages/shaders/src/shaders/paper-texture.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -44,6 +45,8 @@ uniform float u_foldCount;
uniform float u_drops;
uniform float u_seed;
uniform float u_fade;
uniform float u_blending;
uniform float u_distortion;

uniform sampler2D u_noiseTexture;

Expand Down Expand Up @@ -177,13 +180,20 @@ 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;
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.;
Expand Down Expand Up @@ -226,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.);
Expand All @@ -237,10 +247,10 @@ 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) * (res - .7);
image.rgb += .6 * pow(u_contrast, .4) * (.3 - res);

frame *= image.a;

Expand All @@ -253,7 +263,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 * u_opacity);

fragColor = vec4(color, opacity);
}
Expand All @@ -265,6 +279,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;
Expand All @@ -275,13 +290,16 @@ export interface PaperTextureUniforms extends ShaderSizingUniforms {
u_crumpleSize: number;
u_drops: number;
u_seed: number;
u_blending: number;
u_distortion: number;
}

export interface PaperTextureParams extends ShaderSizingParams, ShaderMotionParams {
image?: HTMLImageElement | string;
colorFront?: string;
colorBack?: string;
contrast?: number;
opacity?: number;
roughness?: number;
fiber?: number;
fiberSize?: number;
Expand All @@ -292,4 +310,6 @@ export interface PaperTextureParams extends ShaderSizingParams, ShaderMotionPara
crumpleSize?: number;
drops?: number;
seed?: number;
blending?: number;
distortion?: number;
}