Paper texture 2.0

docs/src/app/(shaders)/paper-texture/page.tsx

@@ -5,7 +5,7 @@ import { useControls, button, folder } from 'leva';
 import { setParamsSafe, useResetLevaParams } from '@/helpers/use-reset-leva-params';
 import { usePresetHighlight } from '@/helpers/use-preset-highlight';
 import { cleanUpLevaParams } from '@/helpers/clean-up-leva-params';
-import { ShaderFit } from '@paper-design/shaders';
+import { ShaderFit, paperTextureMeta } from '@paper-design/shaders';
 import { levaImageButton, levaDeleteImageButton } from '@/helpers/leva-image-button';
 import { useState, useEffect, useCallback } from 'react';
 import { toHsla } from '@/helpers/color-utils';
@@ -68,20 +68,27 @@ 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 },
-      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 },
-      scale: { value: defaults.scale, min: 0.1, max: 4, order: 300 },
-      fit: { value: defaults.fit, options: ['contain', 'cover'] as ShaderFit[], order: 301 },
+      colorShadow: { value: toHsla(defaults.colorShadow), order: 101 },
+      seed: { value: defaults.seed, min: 0, step: 1, max: 1000, order: 200 },
+      lightAngle: { value: defaults.lightAngle, min: 0, max: 360, order: 201 },
+      roughness: { value: defaults.roughness, min: 0, max: 1, order: 300 },
+      roughnessSize: { value: defaults.roughnessSize, min: 0, max: 1, order: 301 },
+      fiber: { value: defaults.fiber, min: 0, max: 1, order: 310 },
+      fiberSize: { value: defaults.fiberSize, min: 0, max: 1, order: 311 },
+      folds: { value: defaults.folds, min: 0, max: 1, order: 320 },
+      foldCount: { value: defaults.foldCount, min: 1, max: paperTextureMeta.maxFoldCount, step: 1, order: 321 },
+      creases: { value: defaults.creases, min: 0, max: 1, order: 330 },
+      creaseSizeX: { value: defaults.creaseSizeX, min: 0, max: 1, order: 331 },
+      creaseOffsetX: { value: defaults.creaseOffsetX, min: 0, max: 1, order: 332 },
+      creaseSizeY: { value: defaults.creaseSizeY, min: 0, max: 1, order: 333 },
+      creaseOffsetY: { value: defaults.creaseOffsetY, min: 0, max: 1, order: 334 },
+      drops: { value: defaults.drops, min: 0, max: 1, order: 340 },
+      blending: { value: defaults.blending, min: 0, max: 1, order: 350 },
+      distortion: { value: defaults.distortion, min: -1, max: 1, order: 351 },
+      background: { value: defaults.background, order: 352 },
+
+      scale: { value: defaults.scale, min: 0.5, max: 10, order: 400 },
+      fit: { value: defaults.fit, options: ['contain', 'cover'] as ShaderFit[], order: 401 },
       Image: folder(
         {
           'Upload image': levaImageButton(setImageWithoutStatus),

docs/src/shader-defs/paper-texture-def.ts

@@ -7,7 +7,7 @@ const defaultParams = paperTexturePresets[0].params;
 export const paperTextureDef: ShaderDef = {
   name: 'Paper Texture',
   description:
-    'A static texture built from multiple noise layers, usable for a realistic paper and cardboard surfaces. Can be used as a image filter or as a texture.',
+    'Static paper-like texture built from a combination of grain, noise and multiple fold patterns. Works as an image filter or as a standalone texture.',
   params: [
     {
       name: 'image',
@@ -19,70 +19,78 @@ export const paperTextureDef: ShaderDef = {
       type: 'string',
       defaultValue: defaultParams.colorBack,
       isColor: true,
-      description: 'Background color',
+      description: 'The color behind the image, usually light',
     },
     {
-      name: 'colorFront',
+      name: 'colorShadow',
       type: 'string',
-      defaultValue: defaultParams.colorFront,
+      defaultValue: defaultParams.colorShadow,
       isColor: true,
-      description: 'Foreground color',
+      description: 'The color used for folds, creases, grain and speckles, blends into the image',
     },
     {
-      name: 'contrast',
+      name: 'blending',
       type: 'number',
       min: 0,
       max: 1,
-      defaultValue: defaultParams.contrast,
-      description: 'Blending behavior (sharper vs. smoother color transitions)',
+      defaultValue: defaultParams.blending,
+      description:
+        'How much the image is printed into the paper (0 = exact image, 1 = image multiplied with the pattern), needs image',
     },
     {
-      name: 'roughness',
+      name: 'distortion',
       type: 'number',
-      min: 0,
+      min: -1,
       max: 1,
-      defaultValue: defaultParams.roughness,
-      description: 'Pixel noise, related to canvas (not scalable)',
+      defaultValue: defaultParams.distortion,
+      description:
+        'How much the image bends with the paper surface; negative values bend it the opposite direction (needs image)',
     },
     {
-      name: 'fiber',
+      name: 'background',
+      type: 'boolean',
+      defaultValue: defaultParams.background,
+      description: 'Shows or hides the paper texture outside the distorted image frame (needs image)',
+    },
+    {
+      name: 'roughness',
       type: 'number',
       min: 0,
       max: 1,
-      defaultValue: defaultParams.fiber,
-      description: 'Curly-shaped noise',
+      defaultValue: defaultParams.roughness,
+      description: 'Grain noise, sized independently of scaling, with its level of detail depending on the scale',
     },
     {
-      name: 'fiberSize',
+      name: 'roughnessSize',
       type: 'number',
-      min: 0.01,
+      min: 0,
       max: 1,
-      defaultValue: defaultParams.fiberSize,
-      description: 'Curly-shaped noise scale (needs fiber > 0)',
+      defaultValue: defaultParams.roughnessSize,
+      description: 'Scale of the roughness noise (needs roughness > 0)',
     },
     {
-      name: 'crumples',
+      name: 'fiber',
       type: 'number',
       min: 0,
       max: 1,
-      defaultValue: defaultParams.crumples,
-      description: 'Cell-based crumple pattern',
+      defaultValue: defaultParams.fiber,
+      description: 'Curly fiber noise, simulating the real paper',
     },
     {
-      name: 'crumpleSize',
+      name: 'fiberSize',
       type: 'number',
-      min: 0.01,
+      min: 0,
       max: 1,
-      defaultValue: defaultParams.crumpleSize,
-      description: 'Cell-based crumple pattern scale (needs crumples > 0)',
+      defaultValue: defaultParams.fiberSize,
+      description: 'Scale of the fiber noise (needs fiber > 0)',
     },
     {
       name: 'folds',
       type: 'number',
       min: 0,
       max: 1,
       defaultValue: defaultParams.folds,
-      description: 'Depth of the folds (needs contrast > 0 to shade the surface)',
+      description: 'Depth of the centered, irregular field of facets across the sheet',
     },
     {
       name: 'foldCount',
@@ -94,28 +102,69 @@ export const paperTextureDef: ShaderDef = {
       description: 'Number of folds (15 max), needs folds > 0',
     },
     {
-      name: 'fade',
+      name: 'creases',
       type: 'number',
       min: 0,
       max: 1,
-      defaultValue: defaultParams.fade,
-      description: 'Big-scale noise mask applied to the pattern',
+      defaultValue: defaultParams.creases,
+      description: 'Depth of the straight creases, alternating between ridges and valleys',
+    },
+    {
+      name: 'creaseSizeX',
+      type: 'number',
+      min: 0,
+      max: 1,
+      defaultValue: defaultParams.creaseSizeX,
+      description: 'Size of the vertical creases (needs creases > 0)',
+    },
+    {
+      name: 'creaseSizeY',
+      type: 'number',
+      min: 0,
+      max: 1,
+      defaultValue: defaultParams.creaseSizeY,
+      description: 'Size of the horizontal creases (needs creases > 0)',
+    },
+    {
+      name: 'creaseOffsetX',
+      type: 'number',
+      min: 0,
+      max: 1,
+      defaultValue: defaultParams.creaseOffsetX,
+      description: 'Shifts the vertical creases across the surface (needs creases > 0)',
+    },
+    {
+      name: 'creaseOffsetY',
+      type: 'number',
+      min: 0,
+      max: 1,
+      defaultValue: defaultParams.creaseOffsetY,
+      description: 'Shifts the horizontal creases across the surface (needs creases > 0)',
+    },
+    {
+      name: 'lightAngle',
+      type: 'number',
+      min: 0,
+      max: 360,
+      defaultValue: defaultParams.lightAngle,
+      description:
+        'Direction the surface is lit from, clockwise from the top of the canvas, needs folds or creases > 0',
     },
     {
       name: 'drops',
       type: 'number',
       min: 0,
       max: 1,
       defaultValue: defaultParams.drops,
-      description: 'The visibility of speckle pattern',
+      description: 'Visibility of the speckle pattern',
     },
     {
       name: 'seed',
       type: 'number',
       min: 0,
       max: 1000,
       defaultValue: defaultParams.seed,
-      description: 'Seed applied to folds, crumples, dots and fade',
+      description: 'Seed applied to folds and drops',
     },
     ...staticImageCommonParams,
   ],

packages/shaders-react/src/index.ts

@@ -133,6 +133,7 @@ export {
   grainGradientMeta,
   meshGradientMeta,
   metaballsMeta,
+  paperTextureMeta,
   pulsingBorderMeta,
   simplexNoiseMeta,
   smokeRingMeta,