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';
@@ -69,19 +69,26 @@ 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 },
+      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/app/(shaders)/water/page.tsx

@@ -68,7 +68,6 @@ const WaterWithControls = () => {
     );
     return {
       colorBack: { value: toHsla(defaults.colorBack), order: 100 },
-      colorHighlight: { value: toHsla(defaults.colorHighlight), order: 101 },
       highlights: { value: defaults.highlights, min: 0, max: 1, order: 200 },
       layering: { value: defaults.layering, min: 0, max: 1, order: 201 },
       edges: { value: defaults.edges, min: 0, max: 1, order: 202 },

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

@@ -29,12 +29,27 @@ export const paperTextureDef: ShaderDef = {
       description: 'Foreground color',
     },
     {
-      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 paper ink), needs image',
+    },
+    {
+      name: 'distortion',
+      type: 'number',
+      min: -1,
+      max: 1,
+      defaultValue: defaultParams.distortion,
+      description: 'Amount of image distortion following the paper surface (needs image)',
+    },
+    {
+      name: 'background',
+      type: 'boolean',
+      defaultValue: defaultParams.background,
+      description: 'Shows or hides the paper texture outside the image frame (needs image)',
     },
     {
       name: 'roughness',
@@ -44,6 +59,14 @@ export const paperTextureDef: ShaderDef = {
       defaultValue: defaultParams.roughness,
       description: 'Pixel noise, related to canvas (not scalable)',
     },
+    {
+      name: 'roughnessSize',
+      type: 'number',
+      min: 0,
+      max: 1,
+      defaultValue: defaultParams.roughnessSize,
+      description: 'Scale of the roughness noise (needs roughness > 0)',
+    },
     {
       name: 'fiber',
       type: 'number',
@@ -55,51 +78,75 @@ export const paperTextureDef: ShaderDef = {
     {
       name: 'fiberSize',
       type: 'number',
-      min: 0.01,
+      min: 0,
       max: 1,
       defaultValue: defaultParams.fiberSize,
       description: 'Curly-shaped noise scale (needs fiber > 0)',
     },
     {
-      name: 'crumples',
+      name: 'folds',
       type: 'number',
       min: 0,
       max: 1,
-      defaultValue: defaultParams.crumples,
-      description: 'Cell-based crumple pattern',
+      defaultValue: defaultParams.folds,
+      description: 'Depth of the radial folds',
     },
     {
-      name: 'crumpleSize',
+      name: 'foldCount',
       type: 'number',
-      min: 0.01,
+      min: 1,
+      max: 20,
+      step: 1,
+      defaultValue: defaultParams.foldCount,
+      description: 'Number of radial folds (20 max), needs folds > 0',
+    },
+    {
+      name: 'creases',
+      type: 'number',
+      min: 0,
       max: 1,
-      defaultValue: defaultParams.crumpleSize,
-      description: 'Cell-based crumple pattern scale (needs crumples > 0)',
+      defaultValue: defaultParams.creases,
+      description: 'Depth of the creases, an independent layer over the radial folds',
     },
     {
-      name: 'folds',
+      name: 'creaseSizeX',
       type: 'number',
       min: 0,
       max: 1,
-      defaultValue: defaultParams.folds,
-      description: 'Depth of the folds (needs contrast > 0 to shade the surface)',
+      defaultValue: defaultParams.creaseSizeX,
+      description: 'Size of the vertical creases (needs creases > 0)',
     },
     {
-      name: 'foldCount',
+      name: 'creaseSizeY',
       type: 'number',
-      min: 1,
-      max: 15,
-      step: 1,
-      defaultValue: defaultParams.foldCount,
-      description: 'Number of folds (15 max), needs folds > 0',
+      min: 0,
+      max: 1,
+      defaultValue: defaultParams.creaseSizeY,
+      description: 'Size of the horizontal creases running across them (needs creases > 0)',
     },
     {
-      name: 'fade',
+      name: 'creaseOffsetX',
       type: 'number',
       min: 0,
       max: 1,
-      defaultValue: defaultParams.fade,
-      description: 'Big-scale noise mask applied to the pattern',
+      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 folded surface is lit from, clockwise from the top of the canvas, in degrees',
     },
     {
       name: 'drops',
@@ -115,7 +162,7 @@ export const paperTextureDef: ShaderDef = {
       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,