@paper-design/shaders - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/index.d.ts

 /** The core Shader Mounting class. Pass it a canvas element and a fragment shader to get started. */
 export { ShaderMount } from './shader-mount';
 /** An example fragment shader that renders a grainy texture over top of blobby animated clouds */
-export { grainCloudsFragmentShader } from './shaders/grain-clouds';
+export { grainCloudsFragmentShader, type GrainCloudsUniforms, } from './shaders/grain-clouds';
 export { getShaderColorFromString } from './shader-mount';

dist/index.js

@@ -6,3 +6,3 @@ var p=class{canvas;gl;program=null;uniformLocations={};fragmentShader;rafId=null;lastFrameTime=0;totalAnimationTime=0;isAnimated;providedUniforms;hasBeenDisposed=!1;resolutionChanged=!0;constructor(e,r,i={},n,s=!0){this.canvas=e,this.fragmentShader=r,this.providedUniforms=i,this.isAnimated=s;let o=e.getContext("webgl",n);if(!o)throw new Error("WebGL not supported");this.gl=o,this.initWebGL(),this.setupResizeObserver(),this.isAnimated?this.startAnimating():this.render(performance.now())}initWebGL=()=>{let e=x(this.gl,v,this.fragmentShader);e&&(this.program=e,this.setupPositionAttribute(),this.setupUniforms())};setupPositionAttribute=()=>{let e=this.gl.getAttribLocation(this.program,"a_position"),r=this.gl.createBuffer();this.gl.bindBuffer(this.gl.ARRAY_BUFFER,r);let i=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1];this.gl.bufferData(this.gl.ARRAY_BUFFER,new Float32Array(i),this.gl.STATIC_DRAW),this.gl.enableVertexAttribArray(e),this.gl.vertexAttribPointer(e,2,this.gl.FLOAT,!1,0,0)};setupUniforms=()=>{this.uniformLocations={u_time:this.gl.getUniformLocation(this.program,"u_time"),u_resolution:this.gl.getUniformLocation(this.program,"u_resolution"),...Object.fromEntries(Object.keys(this.providedUniforms).map(e=>[e,this.gl.getUniformLocation(this.program,e)]))}};resizeObserver=null;setupResizeObserver=()=>{this.resizeObserver=new ResizeObserver(()=>this.handleResize()),this.resizeObserver.observe(this.canvas),this.handleResize()};handleResize=()=>{let e=this.canvas.clientWidth,r=this.canvas.clientHeight;(this.canvas.width!==e||this.canvas.height!==r)&&(this.canvas.width=e,this.canvas.height=r,this.resolutionChanged=!0,this.gl.viewport(0,0,this.gl.canvas.width,this.gl.canvas.height),this.render(performance.now()))};render=e=>{if(this.hasBeenDisposed)return;let r=e-this.lastFrameTime;this.lastFrameTime=e,this.isAnimated&&(this.totalAnimationTime+=r),this.gl.useProgram(this.program),this.gl.uniform1f(this.uniformLocations.u_time,this.totalAnimationTime*.001),this.resolutionChanged&&(this.gl.uniform2f(this.uniformLocations.u_resolution,this.gl.canvas.width,this.gl.canvas.height),this.resolutionChanged=!1),this.gl.drawArrays(this.gl.TRIANGLES,0,6),this.isAnimated?this.requestRender():this.rafId=null};requestRender=()=>{this.rafId!==null&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame(this.render)};updateProvidedUniforms=()=>{this.gl.useProgram(this.program),Object.entries(this.providedUniforms).forEach(([e,r])=>{let i=this.uniformLocations[e];if(i)if(Array.isArray(r))switch(r.length){case 2:this.gl.uniform2fv(i,r);break;case 3:this.gl.uniform3fv(i,r);break;case 4:this.gl.uniform4fv(i,r);break;default:r.length===9?this.gl.uniformMatrix3fv(i,!1,r):r.length===16?this.gl.uniformMatrix4fv(i,!1,r):console.warn(`Unsupported uniform array length: ${r.length}`)}else typeof r=="number"?this.gl.uniform1f(i,r):typeof r=="boolean"?this.gl.uniform1i(i,r?1:0):console.warn(`Unsupported uniform type for ${e}: ${typeof r}`)})};startAnimating=()=>{this.isAnimated=!0,this.lastFrameTime=performance.now(),this.rafId=requestAnimationFrame(this.render)};stopAnimating=()=>{this.isAnimated=!1,this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null)};setUniforms=e=>{this.providedUniforms={...this.providedUniforms,...e},this.updateProvidedUniforms(),this.render(performance.now())};dispose=()=>{this.hasBeenDisposed=!0,this.stopAnimating(),this.gl&&this.program&&(this.gl.deleteProgram(this.program),this.program=null,this.gl.bindBuffer(this.gl.ARRAY_BUFFER,null),this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER,null),this.gl.bindRenderbuffer(this.gl.RENDERBUFFER,null),this.gl.bindFramebuffer(this.gl.FRAMEBUFFER,null),this.gl.getError()),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.uniformLocations={}}},v=`
   }
-`;function b(t,e,r){let i=t.createShader(e);return i?(t.shaderSource(i,r),t.compileShader(i),t.getShaderParameter(i,t.COMPILE_STATUS)?i:(console.error("An error occurred compiling the shaders: "+t.getShaderInfoLog(i)),t.deleteShader(i),null)):null}function x(t,e,r){let i=b(t,t.VERTEX_SHADER,e),n=b(t,t.FRAGMENT_SHADER,r);if(!i||!n)return null;let s=t.createProgram();return s?(t.attachShader(s,i),t.attachShader(s,n),t.linkProgram(s),t.getProgramParameter(s,t.LINK_STATUS)?(t.detachShader(s,i),t.detachShader(s,n),t.deleteShader(i),t.deleteShader(n),s):(console.error("Unable to initialize the shader program: "+t.getProgramInfoLog(s)),t.deleteProgram(s),t.deleteShader(i),t.deleteShader(n),null)):null}function A(t){let e,r,i;if(t.startsWith("#"))[e,r,i]=_(t);else if(t.startsWith("rgb"))[e,r,i]=R(t);else if(t.startsWith("hsl"))[e,r,i]=L(S(t));else return console.error("Unsupported color format"),[0,0,0];return[e,r,i]}function _(t){let e=parseInt(t.slice(1),16),r=(e>>16&255)/255,i=(e>>8&255)/255,n=(e&255)/255;return[r,i,n]}function R(t){let e=t.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);return e?[parseInt(e[1]??"0")/255,parseInt(e[2]??"0")/255,parseInt(e[3]??"0")/255]:[0,0,0]}function S(t){let e=t.match(/^hsl\s*\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*\)$/i);return e?[parseInt(e[1]??"0"),parseInt(e[2]??"0"),parseInt(e[3]??"0")]:[0,0,0]}function L(t){let[e,r,i]=t,n=e/360,s=r/100,o=i/100,m,l,c;if(r===0)m=l=c=o;else{let f=(h,g,a)=>(a<0&&(a+=1),a>1&&(a-=1),a<.16666666666666666?h+(g-h)*6*a:a<.5?g:a<.6666666666666666?h+(g-h)*(.6666666666666666-a)*6:h),u=o<.5?o*(1+s):o+s-o*s,d=2*o-u;m=f(d,u,n+1/3),l=f(d,u,n),c=f(d,u,n-1/3)}return[m,l,c]}var y=`
+`;function b(t,e,r){let i=t.createShader(e);return i?(t.shaderSource(i,r),t.compileShader(i),t.getShaderParameter(i,t.COMPILE_STATUS)?i:(console.error("An error occurred compiling the shaders: "+t.getShaderInfoLog(i)),t.deleteShader(i),null)):null}function x(t,e,r){let i=b(t,t.VERTEX_SHADER,e),n=b(t,t.FRAGMENT_SHADER,r);if(!i||!n)return null;let s=t.createProgram();return s?(t.attachShader(s,i),t.attachShader(s,n),t.linkProgram(s),t.getProgramParameter(s,t.LINK_STATUS)?(t.detachShader(s,i),t.detachShader(s,n),t.deleteShader(i),t.deleteShader(n),s):(console.error("Unable to initialize the shader program: "+t.getProgramInfoLog(s)),t.deleteProgram(s),t.deleteShader(i),t.deleteShader(n),null)):null}function A(t){let e,r,i;if(t.startsWith("#"))[e,r,i]=_(t);else if(t.startsWith("rgb"))[e,r,i]=R(t);else if(t.startsWith("hsl"))[e,r,i]=y(S(t));else return console.error("Unsupported color format"),[0,0,0];return[e,r,i]}function _(t){let e=parseInt(t.slice(1),16),r=(e>>16&255)/255,i=(e>>8&255)/255,n=(e&255)/255;return[r,i,n]}function R(t){let e=t.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);return e?[parseInt(e[1]??"0")/255,parseInt(e[2]??"0")/255,parseInt(e[3]??"0")/255]:[0,0,0]}function S(t){let e=t.match(/^hsl\s*\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*\)$/i);return e?[parseInt(e[1]??"0"),parseInt(e[2]??"0"),parseInt(e[3]??"0")]:[0,0,0]}function y(t){let[e,r,i]=t,n=e/360,s=r/100,o=i/100,m,l,c;if(r===0)m=l=c=o;else{let f=(h,g,a)=>(a<0&&(a+=1),a>1&&(a-=1),a<.16666666666666666?h+(g-h)*6*a:a<.5?g:a<.6666666666666666?h+(g-h)*(.6666666666666666-a)*6:h),u=o<.5?o*(1+s):o+s-o*s,d=2*o-u;m=f(d,u,n+1/3),l=f(d,u,n),c=f(d,u,n-1/3)}return[m,l,c]}var L=`
   precision highp float;
@@ -80,3 +80,3 @@ uniform vec2 u_resolution;
   }
-`;export{p as ShaderMount,A as getShaderColorFromString,y as grainCloudsFragmentShader};
+`;export{p as ShaderMount,A as getShaderColorFromString,L as grainCloudsFragmentShader};
 //# sourceMappingURL=index.js.map

dist/shaders/grain-clouds.d.ts

@@ -13,2 +13,9 @@ /**
  */
+export type GrainCloudsUniforms = {
+    color1: [number, number, number];
+    color2: [number, number, number];
+    noiseScale: number;
+    noiseSpeed: number;
+    grainAmount: number;
+};
 export declare const grainCloudsFragmentShader = "\n  precision highp float;\n  uniform vec2 u_resolution;\n  uniform float u_time;\n  uniform vec3 u_color1;\n  uniform vec3 u_color2;\n  uniform float u_noiseScale;\n  uniform float u_noiseSpeed;\n  uniform float u_grainAmount;\n\n  // Simplex 2D noise\n  vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }\n\n  float 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  void main() {\n    vec2 st = gl_FragCoord.xy / u_resolution.xy;\n\n    // Calculate the aspect ratio of the shader\n    float shaderAspect = u_resolution.x / u_resolution.y;\n\n    // Define the aspect ratio of your content (e.g., 1.0 for square)\n    float contentAspect = 1.0;\n\n    // Adjust st to maintain content aspect ratio\n    if (shaderAspect > contentAspect) {\n      float scale = shaderAspect / contentAspect;\n      st.x = (st.x - 0.5) * scale + 0.5;\n    } else {\n      float scale = contentAspect / shaderAspect;\n      st.y = (st.y - 0.5) * scale + 0.5;\n    }\n\n    // Create blobby texture\n    float n = snoise(st * u_noiseScale + u_time * u_noiseSpeed);\n    n += 0.5 * snoise(st * u_noiseScale * 2.0 - u_time * u_noiseSpeed * 0.5);\n    n += 0.25 * snoise(st * u_noiseScale * 4.0 + u_time * u_noiseSpeed * 0.25);\n    n = n * 0.5 + 0.5;\n\n    // Color interpolation\n    vec3 color = mix(u_color1, u_color2, n);\n\n    // Add grain\n    float grain = fract(sin(dot(st * 1000.0, vec2(12.9898, 78.233))) * 43758.5453);\n    color += (grain - 0.5) * u_grainAmount;\n\n    gl_FragColor = vec4(color, 1.0);\n  }\n";

package.json

 {
   "name": "@paper-design/shaders",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "license": "MIT",
@@ -5,0 +5,0 @@ "type": "module",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38107

increased by1.07%

Lines of code

164

increased by4.46%

No dependency changes