@paper-design/shaders 0.0.0-canary.390a3d9

package/dist/shader-sizing.js

@@ -0,0 +1,230 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+const sizingVariablesDeclaration = `
+in vec2 v_objectUV;
+in vec2 v_responsiveUV;
+in vec2 v_responsiveBoxGivenSize;
+in vec2 v_patternUV;
+in vec2 v_imageUV;`;
+const sizingDebugVariablesDeclaration = `
+in vec2 v_objectBoxSize;
+in vec2 v_objectHelperBox;
+in vec2 v_responsiveBoxSize;
+in vec2 v_responsiveHelperBox;
+in vec2 v_patternBoxSize;
+in vec2 v_patternHelperBox;`;
+const sizingUniformsDeclaration = `
+uniform float u_originX;
+uniform float u_originY;
+uniform float u_worldWidth;
+uniform float u_worldHeight;
+uniform float u_fit;
+
+uniform float u_scale;
+uniform float u_rotation;
+uniform float u_offsetX;
+uniform float u_offsetY;`;
+const sizingUV = `
+
+  vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+  #ifdef USE_PIXELIZATION
+    float pxSize = u_pxSize * u_pixelRatio;
+    vec2 pxSizeUv = gl_FragCoord.xy;
+    pxSizeUv -= .5 * u_resolution;
+    pxSizeUv /= pxSize;
+    uv = floor(pxSizeUv) * pxSize / u_resolution.xy;    
+    uv += .5;
+  #endif
+  uv -= .5;
+
+  
+  // ===================================================
+  // sizing params shared between objects and patterns
+  
+  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);
+  vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);
+  givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;
+  float r = u_rotation * 3.14159265358979323846 / 180.;
+  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));
+  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);
+
+  
+  // ===================================================
+  // Sizing api for objects (graphics with fixed ratio)
+
+  #ifdef USE_OBJECT_SIZING
+    float fixedRatio = 1.;
+    vec2 fixedRatioBoxGivenSize = vec2(
+      (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
+      (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
+    );
+    vec2 objectBoxSize = vec2(0.);
+    // fit = none
+    objectBoxSize.x = fixedRatio * min(fixedRatioBoxGivenSize.x / fixedRatio, fixedRatioBoxGivenSize.y);
+    if (u_fit == 1.) { // fit = contain
+      objectBoxSize.x = fixedRatio * min(u_resolution.x / fixedRatio, u_resolution.y);
+    } else if (u_fit == 2.) {  // fit = cover
+      objectBoxSize.x = fixedRatio * max(u_resolution.x / fixedRatio, u_resolution.y);
+    }
+    objectBoxSize.y = objectBoxSize.x / fixedRatio;
+    vec2 objectWorldScale = u_resolution.xy / objectBoxSize;
+  
+    #ifdef ADD_HELPERS
+      vec2 objectHelperBox = gl_FragCoord.xy / u_resolution.xy;
+      objectHelperBox -= .5;
+      objectHelperBox *= objectWorldScale;
+      objectHelperBox += boxOrigin * (objectWorldScale - 1.);  
+    #endif
+  
+    vec2 objectUV = uv;
+    objectUV *= objectWorldScale;
+    objectUV += boxOrigin * (objectWorldScale - 1.);
+    objectUV += vec2(-u_offsetX, u_offsetY);
+    objectUV /= u_scale;
+    objectUV = graphicRotation * objectUV;
+  #endif
+  
+  // ===================================================
+ 
+  // ===================================================
+  // Sizing api for patterns (graphics respecting u_worldWidth / u_worldHeight ratio)
+  
+  #ifdef USE_PATTERN_SIZING
+    float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;
+    vec2 patternBoxGivenSize = vec2(
+      (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,
+      (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y
+    );
+    vec2 patternBoxSize = vec2(0.);
+    // fit = none
+    patternBoxSize.x = patternBoxRatio * min(patternBoxGivenSize.x / patternBoxRatio, patternBoxGivenSize.y);
+    float patternWorldNoFitBoxWidth = patternBoxSize.x;
+    if (u_fit == 1.) {  // fit = contain
+      patternBoxSize.x = patternBoxRatio * min(u_resolution.x / patternBoxRatio, u_resolution.y);
+    } else if (u_fit == 2.) {  // fit = cover
+      patternBoxSize.x = patternBoxRatio * max(u_resolution.x / patternBoxRatio, u_resolution.y);
+    }
+    patternBoxSize.y = patternBoxSize.x / patternBoxRatio;
+    vec2 patternWorldScale = u_resolution.xy / patternBoxSize;
+  
+    #ifdef ADD_HELPERS  
+      vec2 patternHelperBox = gl_FragCoord.xy / u_resolution.xy;
+      patternHelperBox -= .5;
+      patternHelperBox *= patternWorldScale;
+      patternHelperBox += boxOrigin * (patternWorldScale - 1.);  
+    #endif
+  
+    vec2 patternUV = uv;
+    patternUV += vec2(-u_offsetX, u_offsetY) / patternWorldScale;
+    patternUV += boxOrigin;
+    patternUV -= boxOrigin / patternWorldScale;
+    patternUV *= u_resolution.xy;
+    patternUV /= u_pixelRatio;
+    if (u_fit > 0.) {
+      patternUV *= (patternWorldNoFitBoxWidth / patternBoxSize.x);
+    }
+    patternUV /= u_scale;
+    patternUV = graphicRotation * patternUV;
+    patternUV += boxOrigin / patternWorldScale;
+    patternUV -= boxOrigin;
+    patternUV += .5;
+  #endif
+    
+  // ===================================================
+ 
+  // ===================================================
+  // Sizing api for image filters
+  
+  #ifdef USE_IMAGE_SIZING
+
+    vec2 imageBoxSize;
+    if (u_fit == 1.) { // contain
+      imageBoxSize.x = min(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;
+    } else if (u_fit == 2.) { // cover
+      imageBoxSize.x = max(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;
+    } else {
+      imageBoxSize.x = min(10.0, 10.0 / u_imageAspectRatio * u_imageAspectRatio);
+    }
+    imageBoxSize.y = imageBoxSize.x / u_imageAspectRatio;
+    vec2 imageBoxScale = u_resolution.xy / imageBoxSize;
+
+    #ifdef ADD_HELPERS
+      vec2 imageHelperBox = uv;
+      imageHelperBox *= imageBoxScale;
+      imageHelperBox += boxOrigin * (imageBoxScale - 1.);
+    #endif
+
+    vec2 imageUV = uv;
+    imageUV *= imageBoxScale;
+    imageUV += boxOrigin * (imageBoxScale - 1.);
+    imageUV += graphicOffset;
+    imageUV /= u_scale;
+    imageUV.x *= u_imageAspectRatio;
+    imageUV = graphicRotation * imageUV;
+    imageUV.x /= u_imageAspectRatio;
+    
+    imageUV += .5;
+    imageUV.y = 1. - imageUV.y;
+  #endif
+`;
+const drawSizingHelpers = `
+  vec2 worldBoxDist = abs(helperBox);
+  float boxStroke = (step(max(worldBoxDist.x, worldBoxDist.y), .5) - step(max(worldBoxDist.x, worldBoxDist.y), .495));
+  color.rgb = mix(color.rgb, vec3(1., 0., 0.), boxStroke);
+  opacity += boxStroke;
+
+  vec2 boxOriginCopy = vec2(.5 - u_originX, u_originY - .5);
+  vec2 boxOriginDist = helperBox + boxOriginCopy;
+  boxOriginDist.x *= (boxSize.x / boxSize.y);
+  float boxOriginPoint = 1. - smoothstep(0., .05, length(boxOriginDist));
+  
+  vec2 graphicOriginPointDist = helperBox + vec2(-u_offsetX, u_offsetY);
+  graphicOriginPointDist.x *= (boxSize.x / boxSize.y);
+  float graphicOriginPoint = 1. - smoothstep(0., .05, length(graphicOriginPointDist));
+  
+  color.rgb = mix(color.rgb, vec3(0., 1., 0.), boxOriginPoint);
+  opacity += boxOriginPoint;
+  color.rgb = mix(color.rgb, vec3(0., 0., 1.), graphicOriginPoint);
+  opacity += graphicOriginPoint;
+`;
+const defaultObjectSizing = {
+  fit: "contain",
+  scale: 1,
+  rotation: 0,
+  offsetX: 0,
+  offsetY: 0,
+  originX: 0.5,
+  originY: 0.5,
+  worldWidth: 0,
+  worldHeight: 0
+};
+const defaultPatternSizing = {
+  fit: "none",
+  scale: 1,
+  rotation: 0,
+  offsetX: 0,
+  offsetY: 0,
+  originX: 0.5,
+  originY: 0.5,
+  worldWidth: 0,
+  worldHeight: 0
+};
+const ShaderFitOptions = {
+  none: 0,
+  contain: 1,
+  cover: 2
+};
+export {
+  ShaderFitOptions,
+  defaultObjectSizing,
+  defaultPatternSizing,
+  drawSizingHelpers,
+  sizingDebugVariablesDeclaration,
+  sizingUV,
+  sizingUniformsDeclaration,
+  sizingVariablesDeclaration
+};
+//# sourceMappingURL=shader-sizing.js.map

package/dist/shader-sizing.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/shader-sizing.ts"],
+  "sourcesContent": ["/*\n ===================================================================\n The space coordinates passed from the vertex shader.\n\n `sizingVariablesDeclaration` must be included in every fragment\n shader\u2014unless we want to apply sizing to the coordinates directly\n in the fragment shader.\n\n So far, the only exception is when we need to apply pixelization\n before sizing (e.g., to make dithering pixels independent of sizing).\n*/\nexport const sizingVariablesDeclaration = `\nin vec2 v_objectUV;\nin vec2 v_responsiveUV;\nin vec2 v_responsiveBoxGivenSize;\nin vec2 v_patternUV;\nin vec2 v_imageUV;`;\n\n/*\n ===================================================================\n Additional variables used only for drawing a sizing overlay.\n*/\nexport const sizingDebugVariablesDeclaration = `\nin vec2 v_objectBoxSize;\nin vec2 v_objectHelperBox;\nin vec2 v_responsiveBoxSize;\nin vec2 v_responsiveHelperBox;\nin vec2 v_patternBoxSize;\nin vec2 v_patternHelperBox;`;\n\n/*\n ===================================================================\n In most cases, sizing UNIFORMS are used only in the vertex shader.\n But there are cases where we need to pass them to the fragment shader\n as well:\n  - dithering pixelization where all the sizing happens in fragment\n  - drawing the sizing helpers\n*/\nexport const sizingUniformsDeclaration = `\nuniform float u_originX;\nuniform float u_originY;\nuniform float u_worldWidth;\nuniform float u_worldHeight;\nuniform float u_fit;\n\nuniform float u_scale;\nuniform float u_rotation;\nuniform float u_offsetX;\nuniform float u_offsetY;`;\n\n/*\n ===================================================================\n In most cases, sizing TRANSFORMS are applied in the vertex shader.\n For exceptions (e.g., dithering pixelization), the operations below\n need to be included in the fragment shader instead.\n\n The transforms are identical to those in the vertex shader,\n except for the `USE_PIXELIZATION` part we insert at start.\n*/\n\n\nexport const sizingUV = `\n\n  vec2 uv = gl_FragCoord.xy / u_resolution.xy;\n  #ifdef USE_PIXELIZATION\n    float pxSize = u_pxSize * u_pixelRatio;\n    vec2 pxSizeUv = gl_FragCoord.xy;\n    pxSizeUv -= .5 * u_resolution;\n    pxSizeUv /= pxSize;\n    uv = floor(pxSizeUv) * pxSize / u_resolution.xy;    \n    uv += .5;\n  #endif\n  uv -= .5;\n\n  \n  // ===================================================\n  // sizing params shared between objects and patterns\n  \n  vec2 boxOrigin = vec2(.5 - u_originX, u_originY - .5);\n  vec2 givenBoxSize = vec2(u_worldWidth, u_worldHeight);\n  givenBoxSize = max(givenBoxSize, vec2(1.)) * u_pixelRatio;\n  float r = u_rotation * 3.14159265358979323846 / 180.;\n  mat2 graphicRotation = mat2(cos(r), sin(r), -sin(r), cos(r));\n  vec2 graphicOffset = vec2(-u_offsetX, u_offsetY);\n\n  \n  // ===================================================\n  // Sizing api for objects (graphics with fixed ratio)\n\n  #ifdef USE_OBJECT_SIZING\n    float fixedRatio = 1.;\n    vec2 fixedRatioBoxGivenSize = vec2(\n      (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n      (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n    );\n    vec2 objectBoxSize = vec2(0.);\n    // fit = none\n    objectBoxSize.x = fixedRatio * min(fixedRatioBoxGivenSize.x / fixedRatio, fixedRatioBoxGivenSize.y);\n    if (u_fit == 1.) { // fit = contain\n      objectBoxSize.x = fixedRatio * min(u_resolution.x / fixedRatio, u_resolution.y);\n    } else if (u_fit == 2.) {  // fit = cover\n      objectBoxSize.x = fixedRatio * max(u_resolution.x / fixedRatio, u_resolution.y);\n    }\n    objectBoxSize.y = objectBoxSize.x / fixedRatio;\n    vec2 objectWorldScale = u_resolution.xy / objectBoxSize;\n  \n    #ifdef ADD_HELPERS\n      vec2 objectHelperBox = gl_FragCoord.xy / u_resolution.xy;\n      objectHelperBox -= .5;\n      objectHelperBox *= objectWorldScale;\n      objectHelperBox += boxOrigin * (objectWorldScale - 1.);  \n    #endif\n  \n    vec2 objectUV = uv;\n    objectUV *= objectWorldScale;\n    objectUV += boxOrigin * (objectWorldScale - 1.);\n    objectUV += vec2(-u_offsetX, u_offsetY);\n    objectUV /= u_scale;\n    objectUV = graphicRotation * objectUV;\n  #endif\n  \n  // ===================================================\n \n  // ===================================================\n  // Sizing api for patterns (graphics respecting u_worldWidth / u_worldHeight ratio)\n  \n  #ifdef USE_PATTERN_SIZING\n    float patternBoxRatio = givenBoxSize.x / givenBoxSize.y;\n    vec2 patternBoxGivenSize = vec2(\n      (u_worldWidth == 0.) ? u_resolution.x : givenBoxSize.x,\n      (u_worldHeight == 0.) ? u_resolution.y : givenBoxSize.y\n    );\n    vec2 patternBoxSize = vec2(0.);\n    // fit = none\n    patternBoxSize.x = patternBoxRatio * min(patternBoxGivenSize.x / patternBoxRatio, patternBoxGivenSize.y);\n    float patternWorldNoFitBoxWidth = patternBoxSize.x;\n    if (u_fit == 1.) {  // fit = contain\n      patternBoxSize.x = patternBoxRatio * min(u_resolution.x / patternBoxRatio, u_resolution.y);\n    } else if (u_fit == 2.) {  // fit = cover\n      patternBoxSize.x = patternBoxRatio * max(u_resolution.x / patternBoxRatio, u_resolution.y);\n    }\n    patternBoxSize.y = patternBoxSize.x / patternBoxRatio;\n    vec2 patternWorldScale = u_resolution.xy / patternBoxSize;\n  \n    #ifdef ADD_HELPERS  \n      vec2 patternHelperBox = gl_FragCoord.xy / u_resolution.xy;\n      patternHelperBox -= .5;\n      patternHelperBox *= patternWorldScale;\n      patternHelperBox += boxOrigin * (patternWorldScale - 1.);  \n    #endif\n  \n    vec2 patternUV = uv;\n    patternUV += vec2(-u_offsetX, u_offsetY) / patternWorldScale;\n    patternUV += boxOrigin;\n    patternUV -= boxOrigin / patternWorldScale;\n    patternUV *= u_resolution.xy;\n    patternUV /= u_pixelRatio;\n    if (u_fit > 0.) {\n      patternUV *= (patternWorldNoFitBoxWidth / patternBoxSize.x);\n    }\n    patternUV /= u_scale;\n    patternUV = graphicRotation * patternUV;\n    patternUV += boxOrigin / patternWorldScale;\n    patternUV -= boxOrigin;\n    patternUV += .5;\n  #endif\n    \n  // ===================================================\n \n  // ===================================================\n  // Sizing api for image filters\n  \n  #ifdef USE_IMAGE_SIZING\n\n    vec2 imageBoxSize;\n    if (u_fit == 1.) { // contain\n      imageBoxSize.x = min(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;\n    } else if (u_fit == 2.) { // cover\n      imageBoxSize.x = max(u_resolution.x / u_imageAspectRatio, u_resolution.y) * u_imageAspectRatio;\n    } else {\n      imageBoxSize.x = min(10.0, 10.0 / u_imageAspectRatio * u_imageAspectRatio);\n    }\n    imageBoxSize.y = imageBoxSize.x / u_imageAspectRatio;\n    vec2 imageBoxScale = u_resolution.xy / imageBoxSize;\n\n    #ifdef ADD_HELPERS\n      vec2 imageHelperBox = uv;\n      imageHelperBox *= imageBoxScale;\n      imageHelperBox += boxOrigin * (imageBoxScale - 1.);\n    #endif\n\n    vec2 imageUV = uv;\n    imageUV *= imageBoxScale;\n    imageUV += boxOrigin * (imageBoxScale - 1.);\n    imageUV += graphicOffset;\n    imageUV /= u_scale;\n    imageUV.x *= u_imageAspectRatio;\n    imageUV = graphicRotation * imageUV;\n    imageUV.x /= u_imageAspectRatio;\n    \n    imageUV += .5;\n    imageUV.y = 1. - imageUV.y;\n  #endif\n`;\n\n/*\n ===================================================================\n Helpers used to draw the sizing (box, box origin and graphic origin)\n over the shader. Can be used with both vertex sizing and vector sizing\n\n helperBox and boxSize should be defined before inserting the code\n*/\nexport const drawSizingHelpers = `\n  vec2 worldBoxDist = abs(helperBox);\n  float boxStroke = (step(max(worldBoxDist.x, worldBoxDist.y), .5) - step(max(worldBoxDist.x, worldBoxDist.y), .495));\n  color.rgb = mix(color.rgb, vec3(1., 0., 0.), boxStroke);\n  opacity += boxStroke;\n\n  vec2 boxOriginCopy = vec2(.5 - u_originX, u_originY - .5);\n  vec2 boxOriginDist = helperBox + boxOriginCopy;\n  boxOriginDist.x *= (boxSize.x / boxSize.y);\n  float boxOriginPoint = 1. - smoothstep(0., .05, length(boxOriginDist));\n  \n  vec2 graphicOriginPointDist = helperBox + vec2(-u_offsetX, u_offsetY);\n  graphicOriginPointDist.x *= (boxSize.x / boxSize.y);\n  float graphicOriginPoint = 1. - smoothstep(0., .05, length(graphicOriginPointDist));\n  \n  color.rgb = mix(color.rgb, vec3(0., 1., 0.), boxOriginPoint);\n  opacity += boxOriginPoint;\n  color.rgb = mix(color.rgb, vec3(0., 0., 1.), graphicOriginPoint);\n  opacity += graphicOriginPoint;\n`;\n\nexport interface ShaderSizingUniforms {\n  u_fit: (typeof ShaderFitOptions)[ShaderFit];\n  u_scale: number;\n  u_rotation: number;\n  u_originX: number;\n  u_originY: number;\n  u_offsetX: number;\n  u_offsetY: number;\n  u_worldWidth: number;\n  u_worldHeight: number;\n}\n\nexport interface ShaderSizingParams {\n  fit?: 'none' | 'contain' | 'cover';\n  scale?: number;\n  rotation?: number;\n  originX?: number;\n  originY?: number;\n  offsetX?: number;\n  offsetY?: number;\n  worldWidth?: number;\n  worldHeight?: number;\n}\n\nexport const defaultObjectSizing: Required<ShaderSizingParams> = {\n  fit: 'contain',\n  scale: 1,\n  rotation: 0,\n  offsetX: 0,\n  offsetY: 0,\n  originX: 0.5,\n  originY: 0.5,\n  worldWidth: 0,\n  worldHeight: 0,\n};\n\nexport const defaultPatternSizing: Required<ShaderSizingParams> = {\n  fit: 'none',\n  scale: 1,\n  rotation: 0,\n  offsetX: 0,\n  offsetY: 0,\n  originX: 0.5,\n  originY: 0.5,\n  worldWidth: 0,\n  worldHeight: 0,\n};\n\nexport const ShaderFitOptions = {\n  none: 0,\n  contain: 1,\n  cover: 2,\n} as const;\n\nexport type ShaderFit = keyof typeof ShaderFitOptions;\n"],
+  "mappings": ";;;;;AAWO,MAAM,6BAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAWnC,MAAM,kCAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBxC,MAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBlC,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuJjB,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6C1B,MAAM,sBAAoD;AAAA,EAC/D,KAAK;AAAA,EACL,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,aAAa;AACf;AAEO,MAAM,uBAAqD;AAAA,EAChE,KAAK;AAAA,EACL,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,aAAa;AACf;AAEO,MAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AACT;",
+  "names": []
+}

package/dist/shader-utils.d.ts

@@ -0,0 +1,10 @@
+export declare const declarePI = "\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n";
+export declare const rotation2 = "\nvec2 rotate(vec2 uv, float th) {\n  return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;\n}\n";
+export declare const proceduralHash11 = "\n  float hash11(float p) {\n    p = fract(p * 0.3183099) + 0.1;\n    p *= p + 19.19;\n    return fract(p * p);\n  }\n";
+export declare const proceduralHash21 = "\n  float hash21(vec2 p) {\n    p = fract(p * vec2(0.3183099, 0.3678794)) + 0.1;\n    p += dot(p, p + 19.19);\n    return fract(p.x * p.y);\n  }\n";
+export declare const proceduralHash22 = "\n  vec2 hash22(vec2 p) {\n    p = fract(p * vec2(0.3183099, 0.3678794)) + 0.1;\n    p += dot(p, p.yx + 19.19);\n    return fract(vec2(p.x * p.y, p.x + p.y));\n  }\n";
+export declare const textureRandomizerR = "\n  float randomR(vec2 p) {\n    vec2 uv = floor(p) / 100. + .5;\n    return texture(u_noiseTexture, fract(uv)).r;\n  }\n";
+export declare const textureRandomizerGB = "\n  vec2 randomGB(vec2 p) {\n    vec2 uv = floor(p) / 100. + .5;\n    return texture(u_noiseTexture, fract(uv)).gb;\n  }\n";
+export declare const colorBandingFix = "\n  color += 1. / 256. * (fract(sin(dot(.014 * gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453123) - .5);\n";
+export declare const simplexNoise = "\nvec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }\nfloat snoise(vec2 v) {\n  const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n    -0.577350269189626, 0.024390243902439);\n  vec2 i = floor(v + dot(v, C.yy));\n  vec2 x0 = v - i + dot(i, C.xx);\n  vec2 i1;\n  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n  vec4 x12 = x0.xyxy + C.xxzz;\n  x12.xy -= i1;\n  i = mod(i, 289.0);\n  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))\n    + i.x + vec3(0.0, i1.x, 1.0));\n  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy),\n      dot(x12.zw, x12.zw)), 0.0);\n  m = m * m;\n  m = m * m;\n  vec3 x = 2.0 * fract(p * C.www) - 1.0;\n  vec3 h = abs(x) - 0.5;\n  vec3 ox = floor(x + 0.5);\n  vec3 a0 = x - ox;\n  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);\n  vec3 g;\n  g.x = a0.x * x0.x + h.x * x0.y;\n  g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n  return 130.0 * dot(m, g);\n}\n";
+export declare const fiberNoise = "\nfloat fiberRandom(vec2 p) {\n  vec2 uv = floor(p) / 100.;\n  return texture(u_noiseTexture, fract(uv)).b;\n}\n\nfloat fiberValueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = fiberRandom(i);\n  float b = fiberRandom(i + vec2(1.0, 0.0));\n  float c = fiberRandom(i + vec2(0.0, 1.0));\n  float d = fiberRandom(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\n\nfloat fiberNoiseFbm(in vec2 n, vec2 seedOffset) {\n  float total = 0.0, amplitude = 1.;\n  for (int i = 0; i < 4; i++) {\n    n = rotate(n, .7);\n    total += fiberValueNoise(n + seedOffset) * amplitude;\n    n *= 2.;\n    amplitude *= 0.6;\n  }\n  return total;\n}\n\nfloat fiberNoise(vec2 uv, vec2 seedOffset) {\n  float epsilon = 0.001;\n  float n1 = fiberNoiseFbm(uv + vec2(epsilon, 0.0), seedOffset);\n  float n2 = fiberNoiseFbm(uv - vec2(epsilon, 0.0), seedOffset);\n  float n3 = fiberNoiseFbm(uv + vec2(0.0, epsilon), seedOffset);\n  float n4 = fiberNoiseFbm(uv - vec2(0.0, epsilon), seedOffset);\n  return length(vec2(n1 - n2, n3 - n4)) / (2.0 * epsilon);\n}\n";

package/dist/shader-utils.js

@@ -0,0 +1,131 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+const declarePI = `
+#define TWO_PI 6.28318530718
+#define PI 3.14159265358979323846
+`;
+const rotation2 = `
+vec2 rotate(vec2 uv, float th) {
+  return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;
+}
+`;
+const proceduralHash11 = `
+  float hash11(float p) {
+    p = fract(p * 0.3183099) + 0.1;
+    p *= p + 19.19;
+    return fract(p * p);
+  }
+`;
+const proceduralHash21 = `
+  float hash21(vec2 p) {
+    p = fract(p * vec2(0.3183099, 0.3678794)) + 0.1;
+    p += dot(p, p + 19.19);
+    return fract(p.x * p.y);
+  }
+`;
+const proceduralHash22 = `
+  vec2 hash22(vec2 p) {
+    p = fract(p * vec2(0.3183099, 0.3678794)) + 0.1;
+    p += dot(p, p.yx + 19.19);
+    return fract(vec2(p.x * p.y, p.x + p.y));
+  }
+`;
+const textureRandomizerR = `
+  float randomR(vec2 p) {
+    vec2 uv = floor(p) / 100. + .5;
+    return texture(u_noiseTexture, fract(uv)).r;
+  }
+`;
+const textureRandomizerGB = `
+  vec2 randomGB(vec2 p) {
+    vec2 uv = floor(p) / 100. + .5;
+    return texture(u_noiseTexture, fract(uv)).gb;
+  }
+`;
+const colorBandingFix = `
+  color += 1. / 256. * (fract(sin(dot(.014 * gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453123) - .5);
+`;
+const simplexNoise = `
+vec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }
+float snoise(vec2 v) {
+  const vec4 C = vec4(0.211324865405187, 0.366025403784439,
+    -0.577350269189626, 0.024390243902439);
+  vec2 i = floor(v + dot(v, C.yy));
+  vec2 x0 = v - i + dot(i, C.xx);
+  vec2 i1;
+  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+  vec4 x12 = x0.xyxy + C.xxzz;
+  x12.xy -= i1;
+  i = mod(i, 289.0);
+  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))
+    + i.x + vec3(0.0, i1.x, 1.0));
+  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy),
+      dot(x12.zw, x12.zw)), 0.0);
+  m = m * m;
+  m = m * m;
+  vec3 x = 2.0 * fract(p * C.www) - 1.0;
+  vec3 h = abs(x) - 0.5;
+  vec3 ox = floor(x + 0.5);
+  vec3 a0 = x - ox;
+  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);
+  vec3 g;
+  g.x = a0.x * x0.x + h.x * x0.y;
+  g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+  return 130.0 * dot(m, g);
+}
+`;
+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);
+}
+`;
+export {
+  colorBandingFix,
+  declarePI,
+  fiberNoise,
+  proceduralHash11,
+  proceduralHash21,
+  proceduralHash22,
+  rotation2,
+  simplexNoise,
+  textureRandomizerGB,
+  textureRandomizerR
+};
+//# sourceMappingURL=shader-utils.js.map

package/dist/shader-utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/shader-utils.ts"],
+  "sourcesContent": ["// language=GLSL\nexport const declarePI = `\n#define TWO_PI 6.28318530718\n#define PI 3.14159265358979323846\n`;\n\n// language=GLSL\nexport const rotation2 = `\nvec2 rotate(vec2 uv, float th) {\n  return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;\n}\n`;\n\n// language=GLSL\nexport const proceduralHash11 = `\n  float hash11(float p) {\n    p = fract(p * 0.3183099) + 0.1;\n    p *= p + 19.19;\n    return fract(p * p);\n  }\n`;\n\n// language=GLSL\nexport const proceduralHash21 = `\n  float hash21(vec2 p) {\n    p = fract(p * vec2(0.3183099, 0.3678794)) + 0.1;\n    p += dot(p, p + 19.19);\n    return fract(p.x * p.y);\n  }\n`;\n\n// language=GLSL\nexport const proceduralHash22 = `\n  vec2 hash22(vec2 p) {\n    p = fract(p * vec2(0.3183099, 0.3678794)) + 0.1;\n    p += dot(p, p.yx + 19.19);\n    return fract(vec2(p.x * p.y, p.x + p.y));\n  }\n`;\n\n// language=GLSL\nexport const textureRandomizerR = `\n  float randomR(vec2 p) {\n    vec2 uv = floor(p) / 100. + .5;\n    return texture(u_noiseTexture, fract(uv)).r;\n  }\n`;\n\n// language=GLSL\nexport const textureRandomizerGB = `\n  vec2 randomGB(vec2 p) {\n    vec2 uv = floor(p) / 100. + .5;\n    return texture(u_noiseTexture, fract(uv)).gb;\n  }\n`;\n\n// language=GLSL\nexport const colorBandingFix = `\n  color += 1. / 256. * (fract(sin(dot(.014 * gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453123) - .5);\n`;\n\n// language=GLSL\nexport const simplexNoise = `\nvec3 permute(vec3 x) { return mod(((x * 34.0) + 1.0) * x, 289.0); }\nfloat snoise(vec2 v) {\n  const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n    -0.577350269189626, 0.024390243902439);\n  vec2 i = floor(v + dot(v, C.yy));\n  vec2 x0 = v - i + dot(i, C.xx);\n  vec2 i1;\n  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n  vec4 x12 = x0.xyxy + C.xxzz;\n  x12.xy -= i1;\n  i = mod(i, 289.0);\n  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0))\n    + i.x + vec3(0.0, i1.x, 1.0));\n  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy),\n      dot(x12.zw, x12.zw)), 0.0);\n  m = m * m;\n  m = m * m;\n  vec3 x = 2.0 * fract(p * C.www) - 1.0;\n  vec3 h = abs(x) - 0.5;\n  vec3 ox = floor(x + 0.5);\n  vec3 a0 = x - ox;\n  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);\n  vec3 g;\n  g.x = a0.x * x0.x + h.x * x0.y;\n  g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n  return 130.0 * dot(m, g);\n}\n`;\n\n// language=GLSL\nexport const fiberNoise = `\nfloat fiberRandom(vec2 p) {\n  vec2 uv = floor(p) / 100.;\n  return texture(u_noiseTexture, fract(uv)).b;\n}\n\nfloat fiberValueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = fiberRandom(i);\n  float b = fiberRandom(i + vec2(1.0, 0.0));\n  float c = fiberRandom(i + vec2(0.0, 1.0));\n  float d = fiberRandom(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\n\nfloat fiberNoiseFbm(in vec2 n, vec2 seedOffset) {\n  float total = 0.0, amplitude = 1.;\n  for (int i = 0; i < 4; i++) {\n    n = rotate(n, .7);\n    total += fiberValueNoise(n + seedOffset) * amplitude;\n    n *= 2.;\n    amplitude *= 0.6;\n  }\n  return total;\n}\n\nfloat fiberNoise(vec2 uv, vec2 seedOffset) {\n  float epsilon = 0.001;\n  float n1 = fiberNoiseFbm(uv + vec2(epsilon, 0.0), seedOffset);\n  float n2 = fiberNoiseFbm(uv - vec2(epsilon, 0.0), seedOffset);\n  float n3 = fiberNoiseFbm(uv + vec2(0.0, epsilon), seedOffset);\n  float n4 = fiberNoiseFbm(uv - vec2(0.0, epsilon), seedOffset);\n  return length(vec2(n1 - n2, n3 - n4)) / (2.0 * epsilon);\n}\n`;\n"],
+  "mappings": ";;;;;AACO,MAAM,YAAY;AAAA;AAAA;AAAA;AAMlB,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAOlB,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASzB,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASzB,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASzB,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ3B,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ5B,MAAM,kBAAkB;AAAA;AAAA;AAKxB,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BrB,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/shaders/color-panels.d.ts

@@ -0,0 +1,50 @@
+import type { vec4 } from '../types.js';
+import type { ShaderMotionParams } from '../shader-mount.js';
+import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
+export declare const colorPanelsMeta: {
+    readonly maxColorCount: 7;
+};
+/**
+ * Pseudo-3D panels rotating around a central axis
+ *
+ * Uniforms include:
+ * - u_colorBack (RGBA)
+ * - u_colors (vec4[]), u_colorsCount (float used as integer)
+ * - u_density: angle between every 2 panels
+ * - u_angle1, u_angle2: skew angle applied to all panes
+ * - u_length: panel length (relative to total height)
+ * - u_edges: faking edges effect
+ * - u_blur: side blur (0 for sharp edges)
+ * - u_fadeIn: transparency near central axis
+ * - u_fadeOut: transparency near viewer
+ * - u_gradient: color mixing within panes (0 = single color, 1 = two colors)
+ *
+ */
+export declare const colorPanelsFragmentShader: string;
+export interface ColorPanelsUniforms extends ShaderSizingUniforms {
+    u_colors: vec4[];
+    u_colorsCount: number;
+    u_colorBack: [number, number, number, number];
+    u_angle1: number;
+    u_angle2: number;
+    u_length: number;
+    u_edges: boolean;
+    u_blur: number;
+    u_fadeIn: number;
+    u_fadeOut: number;
+    u_density: number;
+    u_gradient: number;
+}
+export interface ColorPanelsParams extends ShaderSizingParams, ShaderMotionParams {
+    colors?: string[];
+    colorBack?: string;
+    angle1?: number;
+    angle2?: number;
+    length?: number;
+    edges?: boolean;
+    blur?: number;
+    fadeIn?: number;
+    fadeOut?: number;
+    density?: number;
+    gradient?: number;
+}