diff --git a/docs/src/app/(shaders)/paper-texture/page.tsx b/docs/src/app/(shaders)/paper-texture/page.tsx index a8ec94dc..31924d70 100644 --- a/docs/src/app/(shaders)/paper-texture/page.tsx +++ b/docs/src/app/(shaders)/paper-texture/page.tsx @@ -69,17 +69,23 @@ 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 }, + blending: { value: defaults.blending, min: 0, max: 1, order: 198 }, + distortion: { value: defaults.distortion, min: 0, max: 1, order: 199 }, + seed: { value: defaults.seed, min: 0, step: 1, max: 1000, order: 200 }, 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 }, - crumples: { value: defaults.crumples, min: 0, max: 1, order: 204 }, - crumpleSize: { value: defaults.crumpleSize, min: 0.01, max: 1, order: 205 }, - folds: { value: defaults.folds, min: 0, max: 1, order: 206 }, - 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 }, - seed: { value: defaults.seed, min: 0, step: 1, max: 1000, order: 250 }, + roughnessSize: { value: defaults.roughnessSize, min: 0, max: 1, order: 202 }, + fiber: { value: defaults.fiber, min: 0, max: 1, order: 210 }, + fiberSize: { value: defaults.fiberSize, min: 0, max: 1, order: 211 }, + crumples: { value: defaults.crumples, min: 0, max: 1, order: 220 }, + crumpleSize: { value: defaults.crumpleSize, min: 0, max: 1, order: 221 }, + folds: { value: defaults.folds, min: 0, max: 1, order: 230 }, + foldCount: { value: defaults.foldCount, min: 1, max: 15, step: 1, order: 231 }, + grid: { value: defaults.grid, min: 0, max: 1, order: 240 }, + gridShape: { value: defaults.gridShape, min: 0, max: 1, order: 241 }, + gridCount: { value: defaults.gridCount, min: 1, max: 20, order: 242 }, + drops: { value: defaults.drops, min: 0, max: 1, order: 250 }, + fade: { value: defaults.fade, min: 0, max: 1, order: 260 }, scale: { value: defaults.scale, min: 0.5, max: 10, order: 300 }, fit: { value: defaults.fit, options: ['contain', 'cover'] as ShaderFit[], order: 301 }, Image: folder( diff --git a/docs/src/shader-defs/paper-texture-def.ts b/docs/src/shader-defs/paper-texture-def.ts index 63369b23..36dfec27 100644 --- a/docs/src/shader-defs/paper-texture-def.ts +++ b/docs/src/shader-defs/paper-texture-def.ts @@ -28,95 +28,6 @@ export const paperTextureDef: ShaderDef = { isColor: true, description: 'Foreground color', }, - { - name: 'contrast', - type: 'number', - min: 0, - max: 1, - defaultValue: defaultParams.contrast, - description: 'Blending behavior (sharper vs. smoother color transitions)', - }, - { - name: 'roughness', - type: 'number', - min: 0, - max: 1, - defaultValue: defaultParams.roughness, - description: 'Pixel noise, related to canvas (not scalable)', - }, - { - name: 'fiber', - type: 'number', - min: 0, - max: 1, - defaultValue: defaultParams.fiber, - description: 'Curly-shaped noise', - }, - { - name: 'fiberSize', - type: 'number', - min: 0, - max: 1, - defaultValue: defaultParams.fiberSize, - description: 'Curly-shaped noise scale', - }, - { - name: 'crumples', - type: 'number', - min: 0, - max: 1, - defaultValue: defaultParams.crumples, - description: 'Cell-based crumple pattern', - }, - { - name: 'crumpleSize', - type: 'number', - min: 0, - max: 1, - defaultValue: defaultParams.crumpleSize, - description: 'Cell-based crumple pattern scale', - }, - { - name: 'folds', - type: 'number', - min: 0, - max: 1, - defaultValue: defaultParams.folds, - description: 'Depth of the folds', - }, - { - name: 'foldCount', - type: 'number', - min: 1, - max: 15, - step: 1, - defaultValue: defaultParams.foldCount, - description: 'Number of folds (15 max)', - }, - { - name: 'fade', - type: 'number', - min: 0, - max: 1, - defaultValue: defaultParams.fade, - description: 'Big-scale noise mask applied to the pattern', - }, - { - name: 'drops', - type: 'number', - min: 0, - max: 1, - defaultValue: defaultParams.drops, - description: 'The visibility of speckle pattern', - }, - { - name: 'seed', - type: 'number', - min: 0, - max: 1000, - defaultValue: defaultParams.seed, - description: 'Seed applied to folds, crumples and dots', - }, ...staticImageCommonParams, ], }; diff --git a/packages/shaders-react/src/shaders/paper-texture.tsx b/packages/shaders-react/src/shaders/paper-texture.tsx index aba693e9..e280bc8b 100644 --- a/packages/shaders-react/src/shaders/paper-texture.tsx +++ b/packages/shaders-react/src/shaders/paper-texture.tsx @@ -29,47 +29,59 @@ 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', + colorFront: '#bbbfc4', colorBack: '#ffffff', contrast: 0.3, roughness: 0.4, - fiber: 0.3, - fiberSize: 0.2, + roughnessSize: 0.5, + fiber: 0.2, + fiberSize: 0.5, crumples: 0.3, - crumpleSize: 0.35, + crumpleSize: 0.5, folds: 0.65, - foldCount: 5, + foldCount: 12, + grid: 0, + gridShape: 0.35, + gridCount: 3, fade: 0, drops: 0.2, - seed: 5.8, + seed: 43, }, }; -export const abstractPreset: PaperTexturePreset = { - name: 'Abstract', +export const fiberPreset: PaperTexturePreset = { + name: 'Fiber', params: { ...defaultObjectSizing, - fit: 'cover', - speed: 0, - frame: 0, - scale: 0.6, - colorFront: '#00eeff', - colorBack: '#ff0a81', - contrast: 0.85, - roughness: 0, - fiber: 0.1, - fiberSize: 0.2, + colorBack: "#eaffe0", + colorFront: "#c19ac6", + contrast: 0.05, + blending: 0.4, + distortion: 0.4, + seed: 180, + roughness: 0.63, + roughnessSize: 0.50, + fiber: 0.76, + fiberSize: 0.61, crumples: 0, - crumpleSize: 0.3, - folds: 1, + crumpleSize: 0.30, + folds: 0, foldCount: 3, - fade: 0, - drops: 0.2, - seed: 2.2, + grid: 0, + gridShape: 0.50, + gridCount: 10, + drops: 1, + fade: 1, + scale: 0.80, + fit: "contain", + speed: 0, + frame: 0 }, }; @@ -77,55 +89,99 @@ export const cardboardPreset: PaperTexturePreset = { name: 'Cardboard', params: { ...defaultObjectSizing, - fit: 'cover', + blending: 0.5, + distortion: 0.5, + fit: 'contain', speed: 0, frame: 0, - scale: 0.6, - colorFront: '#c7b89e', - colorBack: '#999180', - contrast: 0.4, - roughness: 0, + scale: 0.8, + colorBack: "#dcc593", + colorFront: "#685327", + contrast: 0.27, + roughness: 0.1, + roughnessSize: 0.50, fiber: 0.35, fiberSize: 0.14, - crumples: 0.7, + crumples: 0., crumpleSize: 0.1, folds: 0, foldCount: 1, + grid: 0.25, + gridShape: 0.28, + gridCount: 20, fade: 0, drops: 0.1, seed: 1.6, }, }; -export const detailsPreset: PaperTexturePreset = { - name: 'Details', +export const spreadPreset: PaperTexturePreset = { + name: 'Spread', params: { ...defaultObjectSizing, - speed: 0, - frame: 0, - fit: 'cover', - scale: 3, - colorFront: '#00000000', - colorBack: '#00000000', - contrast: 0, - roughness: 1, - fiber: 0.27, - fiberSize: 0.22, - crumples: 1, - crumpleSize: 0.5, - folds: 1, - foldCount: 15, - fade: 0, + colorBack: "#ffffff", + colorFront: "#c0c4c0", + contrast: 0.47, + blending: 0.36, + distortion: 0.50, + seed: 280, + roughness: 0.4, + roughnessSize: 0.4, + fiber: 0.24, + fiberSize: 0.5, + crumples: 0.2, + crumpleSize: 0.42, + folds: 0.3, + foldCount: 4, + grid: 0.7, + gridShape: 0.48, + gridCount: 1, drops: 0, - seed: 6, + fade: 0.68, + scale: 0.8, + fit: "contain", + speed: 0, + frame: 0 + }, +}; + + +export const flatPreset: PaperTexturePreset = { + name: 'Flat', + params: { + ...defaultObjectSizing, + colorBack: '#fff3e0', + colorFront: '#9c9c9c', + contrast: 0.79, + blending: 0.19, + distortion: 0.33, + seed: 415, + roughness: 0.31, + roughnessSize: 1.0, + fiber: 0, + fiberSize: 0.61, + crumples: 0.7, + crumpleSize: 0.2, + folds: 0, + foldCount: 6, + grid: 0.0, + gridShape: 0.30, + gridCount: 20.0, + drops: 0.20, + fade: 0.75, + scale: 0.8, + fit: 'contain', + speed: 0, + frame: 0 }, }; export const paperTexturePresets: PaperTexturePreset[] = [ defaultPreset, + spreadPreset, cardboardPreset, - abstractPreset, - detailsPreset, + fiberPreset, + flatPreset ] as const; export const PaperTexture: React.FC = memo(function PaperTextureImpl({ @@ -137,11 +193,17 @@ export const PaperTexture: React.FC = memo(function PaperText image = '', contrast = defaultPreset.params.contrast, roughness = defaultPreset.params.roughness, + roughnessSize = defaultPreset.params.roughnessSize, fiber = defaultPreset.params.fiber, crumples = defaultPreset.params.crumples, folds = defaultPreset.params.folds, + grid = defaultPreset.params.grid, + gridShape = defaultPreset.params.gridShape, + gridCount = defaultPreset.params.gridCount, drops = defaultPreset.params.drops, seed = defaultPreset.params.seed, + blending = defaultPreset.params.blending, + distortion = defaultPreset.params.distortion, // Reworked props fiberScale, @@ -174,15 +236,21 @@ export const PaperTexture: React.FC = memo(function PaperText u_colorBack: getShaderColorFromString(colorBack), u_contrast: contrast, u_roughness: roughness, + u_roughnessSize: roughnessSize, u_fiber: fiber, u_fiberSize: fiberSize, u_crumples: crumples, u_crumpleSize: crumpleSize, u_foldCount: foldCount, u_folds: folds, + u_grid: grid, + u_gridShape: gridShape, + u_gridCount: gridCount, u_fade: fade, u_drops: drops, u_seed: seed, + u_blending: blending, + u_distortion: distortion, ...noiseTexture, // Sizing uniforms diff --git a/packages/shaders/src/shader-utils.ts b/packages/shaders/src/shader-utils.ts index c816fc71..124aea9c 100644 --- a/packages/shaders/src/shader-utils.ts +++ b/packages/shaders/src/shader-utils.ts @@ -88,45 +88,4 @@ float snoise(vec2 v) { g.yz = a0.yz * x12.xz + h.yz * x12.yw; return 130.0 * dot(m, g); } -`; - -// language=GLSL -export const fiberNoise = ` -float fiberRandom(vec2 p) { - vec2 uv = floor(p) / 100.; - return texture(u_noiseTexture, fract(uv)).b; -} - -float fiberValueNoise(vec2 st) { - vec2 i = floor(st); - vec2 f = fract(st); - float a = fiberRandom(i); - float b = fiberRandom(i + vec2(1.0, 0.0)); - float c = fiberRandom(i + vec2(0.0, 1.0)); - float d = fiberRandom(i + vec2(1.0, 1.0)); - vec2 u = f * f * (3.0 - 2.0 * f); - float x1 = mix(a, b, u.x); - float x2 = mix(c, d, u.x); - return mix(x1, x2, u.y); -} - -float fiberNoiseFbm(in vec2 n, vec2 seedOffset) { - float total = 0.0, amplitude = 1.; - for (int i = 0; i < 4; i++) { - n = rotate(n, .7); - total += fiberValueNoise(n + seedOffset) * amplitude; - n *= 2.; - amplitude *= 0.6; - } - return total; -} - -float fiberNoise(vec2 uv, vec2 seedOffset) { - float epsilon = 0.001; - float n1 = fiberNoiseFbm(uv + vec2(epsilon, 0.0), seedOffset); - float n2 = fiberNoiseFbm(uv - vec2(epsilon, 0.0), seedOffset); - float n3 = fiberNoiseFbm(uv + vec2(0.0, epsilon), seedOffset); - float n4 = fiberNoiseFbm(uv - vec2(0.0, epsilon), seedOffset); - return length(vec2(n1 - n2, n3 - n4)) / (2.0 * epsilon); -} -`; +`; \ No newline at end of file diff --git a/packages/shaders/src/shaders/paper-texture.ts b/packages/shaders/src/shaders/paper-texture.ts index f251eb95..46899e83 100644 --- a/packages/shaders/src/shaders/paper-texture.ts +++ b/packages/shaders/src/shaders/paper-texture.ts @@ -1,6 +1,6 @@ import type { ShaderMotionParams } from '../shader-mount.js'; import { sizingVariablesDeclaration, type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js'; -import { rotation2, declarePI, fiberNoise, textureRandomizerR } from '../shader-utils.js'; +import { rotation2, declarePI, textureRandomizerR } from '../shader-utils.js'; /** * A static texture built from multiple noise layers, usable for realistic paper and cardboard surfaces. @@ -14,16 +14,22 @@ import { rotation2, declarePI, fiberNoise, textureRandomizerR } from '../shader- * - u_colorFront (vec4): Foreground color in RGBA * - u_colorBack (vec4): Background color in RGBA * - u_contrast (float): Blending behavior, sharper vs smoother color transitions (0 to 1) - * - u_roughness (float): Pixel noise, related to canvas and not scalable (0 to 1) + * - u_roughness (float): Hi-freq grain-like distortion intensity (0 to 1) + * - u_roughnessSize (float): Scale of the roughness pattern (0 to 1) * - u_fiber (float): Curly-shaped noise intensity (0 to 1) * - u_fiberSize (float): Curly-shaped noise scale (0 to 1) * - u_crumples (float): Cell-based crumple pattern intensity (0 to 1) * - u_crumpleSize (float): Cell-based crumple pattern scale (0 to 1) * - u_folds (float): Depth of the folds (0 to 1) * - u_foldCount (float): Number of folds (1 to 15) - * - u_fade (float): Big-scale noise mask applied to the pattern (0 to 1) - * - u_drops (float): Visibility of speckle pattern (0 to 1) + * - u_grid (float): Intensity of the grid / crease pattern (0 to 1) + * - u_gridShape (float): Shape/width of the grid creases (0 to 1) + * - u_gridCount (float): Number/density of grid creases (0 to N) + * - u_drops (float): Visibility of speckle / drop pattern (0 to 1) * - u_seed (float): Seed applied to folds, crumples and dots (0 to 1000) + * - u_fade (float): Large-scale noise mask applied to the pattern (0 to 1) + * - u_blending (float): Amount of image-to-paper blending, 0 for original color, 1 for mix with colorBack (0 to 1) + * - u_distortion (float): Amount of distortion of the image by the paper normals (0 to 1) * - u_noiseTexture (sampler2D): Pre-computed randomizer source texture * * Vertex shader outputs (used in fragment shader): @@ -59,6 +65,7 @@ uniform sampler2D u_image; uniform float u_imageAspectRatio; uniform float u_contrast; +uniform float u_roughnessSize; uniform float u_roughness; uniform float u_fiber; uniform float u_fiberSize; @@ -66,9 +73,14 @@ uniform float u_crumples; uniform float u_crumpleSize; uniform float u_folds; uniform float u_foldCount; +uniform float u_grid; +uniform float u_gridShape; +uniform float u_gridCount; uniform float u_drops; uniform float u_seed; uniform float u_fade; +uniform float u_blending; +uniform float u_distortion; uniform sampler2D u_noiseTexture; @@ -129,16 +141,53 @@ float roughness(vec2 p) { mix(randomG(w.zy), randomG(w.zw), f.y), f.x); o += .2 / exp(2. * abs(sin(.2 * p.x + .5 * p.y))); - } + } return o / 3.; } -${ fiberNoise } +float fiberRandom(vec2 p) { + vec2 uv = floor(p) / 100.; + return texture(u_noiseTexture, fract(uv)).b; +} + +float fiberValueNoise(vec2 st) { + vec2 i = floor(st); + vec2 f = fract(st); + float a = fiberRandom(i); + float b = fiberRandom(i + vec2(1.0, 0.0)); + float c = fiberRandom(i + vec2(0.0, 1.0)); + float d = fiberRandom(i + vec2(1.0, 1.0)); + vec2 u = f * f * (3.0 - 2.0 * f); + float x1 = mix(a, b, u.x); + float x2 = mix(c, d, u.x); + return mix(x1, x2, u.y); +} + +float fiberNoiseFbm(vec2 n, vec2 seedOffset) { + float total = 0.0, amplitude = 1.; + for (int i = 0; i < 4; i++) { + n = rotate(n, .7); + total += fiberValueNoise(n + seedOffset) * amplitude; + n *= 2.; + amplitude *= 0.6; + } + return total; +} + +float fiberNoise(vec2 uv, vec2 seedOffset) { + float epsilon = 0.001; + float n1 = fiberNoiseFbm(uv + vec2(epsilon, 0.0), seedOffset); + float n2 = fiberNoiseFbm(uv - vec2(epsilon, 0.0), seedOffset); + float n3 = fiberNoiseFbm(uv + vec2(0.0, epsilon), seedOffset); + float n4 = fiberNoiseFbm(uv - vec2(0.0, epsilon), seedOffset); + return length(vec2(n1 - n2, n3 - n4)) / (2.0 * epsilon); +} vec2 randomGB(vec2 p) { vec2 uv = floor(p) / 50. + .5; return texture(u_noiseTexture, fract(uv)).gb; } + float crumpledNoise(vec2 t, float pw) { vec2 p = floor(t); float wsum = 0.; @@ -157,11 +206,11 @@ float crumpledNoise(vec2 t, float pw) { } return pow(wsum != 0.0 ? cl / wsum : 0.0, .5) * 2.; } + float crumplesShape(vec2 uv) { return crumpledNoise(uv * .25, 16.) * crumpledNoise(uv * .5, 2.); } - vec2 folds(vec2 uv) { vec3 pp = vec3(0.); float l = 9.; @@ -178,7 +227,7 @@ vec2 folds(vec2 uv) { pp.z = dist; } } - return mix(pp.xy, vec2(0.), pow(pp.z, .25)); + return mix(pp.xy, vec2(0.), pow(pp.z, .15)); } float drops(vec2 uv) { @@ -202,29 +251,37 @@ 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.)); + patternUV *= 5. * vec2(u_imageAspectRatio, 1.); - vec2 roughnessUv = 1.5 * (gl_FragCoord.xy - .5 * u_resolution) / u_pixelRatio; - float roughness = roughness(roughnessUv + vec2(1., 0.)) - roughness(roughnessUv - vec2(1., 0.)); + vec2 roughnessUv = mix(330., 130., u_roughnessSize) * patternUV; + float roughness = u_roughness * (roughness(roughnessUv + vec2(1., 0.)) - roughness(roughnessUv - vec2(1., 0.))); - vec2 crumplesUV = fract(patternUV * .02 / u_crumpleSize - u_seed) * 32.; - float crumples = u_crumples * (crumplesShape(crumplesUV + vec2(.05, 0.)) - crumplesShape(crumplesUV)); + vec2 crumplesUV = fract(mix(.45, .02, pow(u_crumpleSize, .3)) * patternUV - u_seed) * 32.; + float crumples = u_crumples * (crumplesShape(crumplesUV + vec2(.02, 0.)) - crumplesShape(crumplesUV)); - vec2 fiberUV = 2. / u_fiberSize * patternUV; + vec2 fiberUV = mix(25., 8., u_fiberSize) * patternUV; float fiber = fiberNoise(fiberUV, vec2(0.)); fiber = .5 * u_fiber * (fiber - 1.); vec2 normal = vec2(0.); vec2 normalImage = vec2(0.); - vec2 foldsUV = patternUV * .12; + vec2 foldsUV = patternUV * .18; foldsUV = rotate(foldsUV, 4. * u_seed); vec2 w = folds(foldsUV); - foldsUV = rotate(foldsUV + .007 * cos(u_seed), .01 * sin(u_seed)); + foldsUV = rotate(foldsUV + .005 * cos(u_seed), .01 * sin(u_seed)); vec2 w2 = folds(foldsUV); float drops = u_drops * drops(patternUV * 2.); @@ -239,33 +296,65 @@ void main() { fiber *= mix(1., .5, fade); roughness *= mix(1., .5, fade); - normal.xy += u_folds * min(5. * u_contrast, 1.) * 4. * max(vec2(0.), w + w2); - normalImage.xy += u_folds * 2. * w; + vec3 lightPos = vec3(.5, 1., .5); + float grid = 0.; + { + vec2 gridUV = patternUV; + gridUV.x = fract(gridUV.x * .1 * u_gridCount + .5); + float foldX = .5; + + float dx = gridUV.x - foldX; + + drops *= (.2 + .8 * step(0., dx)); + + float foldWidth = u_gridShape; - normal.xy += crumples; - normalImage.xy += 1.5 * crumples; + float foldAmount = 1. - smoothstep(0.0, foldWidth, abs(dx)); + float angle = sign(dx) * 1.1345 * foldAmount; + float creaseDark = mix(.9, 1., smoothstep(0., foldWidth * .5, abs(dx))); + + vec3 n = vec3(0.0, 0.0, 1.0); + mat3 rotY = mat3( + cos(angle), 0.0, sin(angle), + 0.0, 1.0, 0.0, + -sin(angle), 0.0, cos(angle) + ); + n = rotY * n; + + grid = max(dot(n, lightPos), 0.); + grid *= creaseDark; + grid = u_grid * smoothstep(0., 1., grid) * smoothstep(0., .3, u_contrast); + } + + normal -= 3. * u_folds * (w + w2); + normalImage += u_folds * w; - normal.xy += 3. * drops; - normalImage.xy += .2 * drops; + normal += 1.5 * crumples; + normalImage += .4 * crumples; - normal.xy += u_roughness * 1.5 * roughness; - normal.xy += fiber; + normal += 2.5 * drops; + normalImage += .2 * drops; - normalImage += u_roughness * .75 * roughness; - normalImage += .2 * fiber; + normal += 1.5 * roughness; + normalImage += .1 * roughness; + + normal += fiber; + normalImage += .1 * fiber; - vec3 lightPos = vec3(1., 2., 1.); - float res = dot(normalize(vec3(normal, 9.5 - 9. * pow(u_contrast, .1))), normalize(lightPos)); + normal += grid; + normalImage += .2 * grid; + + float res = dot(normalize(vec3(normal, mix(7.5, .5, pow(u_contrast, .1)))), lightPos); vec3 fgColor = u_colorFront.rgb * u_colorFront.a; float fgOpacity = u_colorFront.a; 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 += .4 * pow(u_contrast, .4) * (.3 - res); frame *= image.a; @@ -278,7 +367,10 @@ void main() { color -= .007 * drops; - color.rgb = mix(color, image.rgb, frame); + float blendOpacity = (.5 + .5 * res); + vec3 pic = blendMultiply(color, image.rgb + .2 * 1. - u_blending * length(normalImage), .5 * res + .2 * u_blending); + pic = mix(image.rgb, pic, .5 * u_blending); + color = mix(color, pic, frame); fragColor = vec4(color, opacity); } @@ -291,15 +383,21 @@ export interface PaperTextureUniforms extends ShaderSizingUniforms { u_colorBack: [number, number, number, number]; u_contrast: number; u_roughness: number; + u_roughnessSize: number; u_fiber: number; u_fiberSize: number; u_crumples: number; u_foldCount: number; u_folds: number; + u_grid: number; + u_gridShape: number; + u_gridCount: number; u_fade: number; u_crumpleSize: number; u_drops: number; u_seed: number; + u_blending: number; + u_distortion: number; } export interface PaperTextureParams extends ShaderSizingParams, ShaderMotionParams { @@ -308,13 +406,19 @@ export interface PaperTextureParams extends ShaderSizingParams, ShaderMotionPara colorBack?: string; contrast?: number; roughness?: number; + roughnessSize?: number; fiber?: number; fiberSize?: number; crumples?: number; foldCount?: number; folds?: number; + grid?: number; + gridShape?: number; + gridCount?: number; fade?: number; crumpleSize?: number; drops?: number; seed?: number; + blending?: number; + distortion?: number; }