Paper texture 2.0

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(

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,
   ],
 };

packages/shaders-react/src/shaders/paper-texture.tsx

@@ -29,103 +29,159 @@ 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
   },
 };
 
 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<PaperTextureProps> = memo(function PaperTextureImpl({
@@ -137,11 +193,17 @@ export const PaperTexture: React.FC<PaperTextureProps> = 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<PaperTextureProps> = 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