@firecms/neat 0.4.0 → 0.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +365 -68
- package/dist/NeatGradient.d.ts +105 -0
- package/dist/NeatGradient.js +855 -200
- package/dist/NeatGradient.js.map +1 -1
- package/dist/index.es.js +619 -235
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +139 -115
- package/dist/index.umd.js.map +1 -1
- package/package.json +3 -3
- package/src/NeatGradient.ts +1017 -204
package/dist/index.umd.js
CHANGED
|
@@ -1,39 +1,60 @@
|
|
|
1
|
-
(function(u,d){typeof exports=="object"&&typeof module<"u"?d(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],d):(u=typeof globalThis<"u"?globalThis:u||self,d(u.FireCMS={},u.THREE))})(this,function(u,d){"use strict";function T(t){if(t&&t.__esModule)return t;const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const i=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(e,o,i.get?i:{enumerable:!0,get:()=>t[o]})}}return e.default=t,Object.freeze(e)}const n=T(d),_=50,g=80,D=!0,b=5,k=new n.Clock,F=V();class B{_ref;_speed=-1;_horizontalPressure=-1;_verticalPressure=-1;_waveFrequencyX=-1;_waveFrequencyY=-1;_waveAmplitude=-1;_shadows=-1;_highlights=-1;_saturation=-1;_brightness=-1;_grainScale=-1;_grainIntensity=-1;_grainSparsity=-1;_grainSpeed=-1;_colorBlending=-1;_colors=[];_wireframe=!1;_backgroundColor="#FFFFFF";_backgroundAlpha=1;requestRef=-1;sizeObserver;sceneState;_yOffset=0;constructor(e){const{ref:o,speed:i=4,horizontalPressure:s=3,verticalPressure:a=3,waveFrequencyX:c=5,waveFrequencyY:f=5,waveAmplitude:h=3,colors:l,highlights:v=4,shadows:y=4,colorSaturation:z=0,colorBrightness:P=1,colorBlending:S=5,grainScale:Y=2,grainIntensity:W=.55,grainSparsity:X=0,grainSpeed:J=.1,wireframe:Q=!1,backgroundColor:Z="#FFFFFF",backgroundAlpha:$=1,resolution:ee=1,seed:E,yOffset:te=0}=e;this._ref=o,this.destroy=this.destroy.bind(this),this._initScene=this._initScene.bind(this),this._buildMaterial=this._buildMaterial.bind(this),this.speed=i,this.horizontalPressure=s,this.verticalPressure=a,this.waveFrequencyX=c,this.waveFrequencyY=f,this.waveAmplitude=h,this.colorBlending=S,this.grainScale=Y,this.grainIntensity=W,this.grainSparsity=X,this.grainSpeed=J,this.colors=l,this.shadows=y,this.highlights=v,this.colorSaturation=z,this.colorBrightness=P,this.wireframe=Q,this.backgroundColor=Z,this.backgroundAlpha=$,this.yOffset=te,this.sceneState=this._initScene(ee);let C=E!==void 0?E:U();const R=()=>{const{renderer:m,camera:x,scene:p,meshes:w}=this.sceneState;Math.floor(C*10)%5===0&&G(o),m.setClearColor(this._backgroundColor,this._backgroundAlpha),w.forEach(r=>{const re=this._ref.width,ie=this._ref.height,ne=[...this._colors.map(q=>{let j=new n.Color;return j.setStyle(q.color,""),{is_active:q.enabled,color:j,influence:q.influence}}),...Array.from({length:b-this._colors.length}).map(()=>({is_active:!1,color:new n.Color(0)}))];C+=k.getDelta()*this._speed,r.material.uniforms.u_time.value=C,r.material.uniforms.u_resolution={value:new n.Vector2(re,ie)},r.material.uniforms.u_color_pressure={value:new n.Vector2(this._horizontalPressure,this._verticalPressure)},r.material.uniforms.u_wave_frequency_x={value:this._waveFrequencyX},r.material.uniforms.u_wave_frequency_y={value:this._waveFrequencyY},r.material.uniforms.u_wave_amplitude={value:this._waveAmplitude},r.material.uniforms.u_plane_width={value:_},r.material.uniforms.u_plane_height={value:g},r.material.uniforms.u_color_blending={value:this._colorBlending},r.material.uniforms.u_colors={value:ne},r.material.uniforms.u_colors_count={value:b},r.material.uniforms.u_shadows={value:this._shadows},r.material.uniforms.u_highlights={value:this._highlights},r.material.uniforms.u_saturation={value:this._saturation},r.material.uniforms.u_brightness={value:this._brightness},r.material.uniforms.u_grain_intensity={value:this._grainIntensity},r.material.uniforms.u_grain_sparsity={value:this._grainSparsity},r.material.uniforms.u_grain_speed={value:this._grainSpeed},r.material.uniforms.u_grain_scale={value:this._grainScale},r.material.uniforms.u_y_offset={value:this._yOffset},r.material.wireframe=this._wireframe}),m.render(p,x),this.requestRef=requestAnimationFrame(R)},oe=()=>{const{renderer:m}=this.sceneState,x=m.domElement,p=x.clientWidth,w=x.clientHeight;this.sceneState.renderer.setSize(p,w,!1),A(this.sceneState.camera,p,w)};this.sizeObserver=new ResizeObserver(m=>{oe()}),this.sizeObserver.observe(o),R()}destroy(){this&&(cancelAnimationFrame(this.requestRef),this.sizeObserver.disconnect())}downloadAsPNG(e="neat.png"){console.log("Downloading as PNG",this._ref);const o=this._ref.toDataURL("image/png");console.log("data",o),H(o,e)}set speed(e){this._speed=e/20}set horizontalPressure(e){this._horizontalPressure=e/4}set verticalPressure(e){this._verticalPressure=e/4}set waveFrequencyX(e){this._waveFrequencyX=e*.04}set waveFrequencyY(e){this._waveFrequencyY=e*.04}set waveAmplitude(e){this._waveAmplitude=e*.75}set colors(e){this._colors=e}set highlights(e){this._highlights=e/100}set shadows(e){this._shadows=e/100}set colorSaturation(e){this._saturation=e/10}set colorBrightness(e){this._brightness=e}set colorBlending(e){this._colorBlending=e/10}set grainScale(e){this._grainScale=e==0?1:e}set grainIntensity(e){this._grainIntensity=e}set grainSparsity(e){this._grainSparsity=e}set grainSpeed(e){this._grainSpeed=e}set wireframe(e){this._wireframe=e}set resolution(e){this.sceneState=this._initScene(e)}set backgroundColor(e){this._backgroundColor=e}set backgroundAlpha(e){this._backgroundAlpha=e}set yOffset(e){this._yOffset=e}_initScene(e){const o=this._ref.width,i=this._ref.height,s=new n.WebGLRenderer({alpha:!0,preserveDrawingBuffer:!0,canvas:this._ref});s.setClearColor(16711680,.5),s.setSize(o,i,!1);const a=[],c=new n.Scene,f=this._buildMaterial(o,i),h=new n.PlaneGeometry(_,g,240*e,240*e),l=new n.Mesh(h,f);l.rotation.x=-Math.PI/3.5,l.position.z=-1,a.push(l),c.add(l);const v=new n.OrthographicCamera(0,0,0,0,0,0);return v.position.z=5,A(v,o,i),{renderer:s,camera:v,scene:c,meshes:a,resolution:e}}_buildMaterial(e,o){const i=[...this._colors.map(c=>({is_active:c.enabled,color:new n.Color(c.color),influence:c.influence})),...Array.from({length:b-this._colors.length}).map(()=>({is_active:!1,color:new n.Color(0)}))],s={u_time:{value:0},u_color_pressure:{value:new n.Vector2(this._horizontalPressure,this._verticalPressure)},u_wave_frequency_x:{value:this._waveFrequencyX},u_wave_frequency_y:{value:this._waveFrequencyY},u_wave_amplitude:{value:this._waveAmplitude},u_resolution:{value:new n.Vector2(e,o)},u_colors:{value:i},u_colors_count:{value:this._colors.length},u_plane_width:{value:_},u_plane_height:{value:g},u_shadows:{value:this._shadows},u_highlights:{value:this._highlights},u_grain_intensity:{value:this._grainIntensity},u_grain_sparsity:{value:this._grainSparsity},u_grain_scale:{value:this._grainScale},u_grain_speed:{value:this._grainSpeed}},a=new n.ShaderMaterial({uniforms:s,vertexShader:M()+O()+I()+K(),fragmentShader:M()+I()+O()+L()});return a.wireframe=D,a}}function A(t,e,o){const a=e*o/1e6*_*g/1.5,c=e/o,f=Math.sqrt(a*c),h=a/f,l=-_/2,v=Math.min((l+f)/1.5,_/2),y=g/4,z=Math.max((y-h)/2,-g/4),P=-100,S=1e3;t instanceof n.OrthographicCamera?(t.left=l,t.right=v,t.top=y,t.bottom=z,t.near=P,t.far=S,t.updateProjectionMatrix()):t instanceof n.PerspectiveCamera&&(t.aspect=e/o,t.updateProjectionMatrix())}function K(){return`
|
|
2
|
-
|
|
1
|
+
(function(O,B){typeof exports=="object"&&typeof module<"u"?B(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],B):(O=typeof globalThis<"u"?globalThis:O||self,B(O.FireCMS={},O.THREE))})(this,function(O,B){"use strict";function te(s){if(s&&s.__esModule)return s;const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const o in s)if(o!=="default"){const t=Object.getOwnPropertyDescriptor(s,o);Object.defineProperty(e,o,t.get?t:{enumerable:!0,get:()=>s[o]})}}return e.default=s,Object.freeze(e)}const n=te(B),U=50,D=80,oe=!0,L=6,se=new n.Clock,K=ue();class ie{_ref;_speed=-1;_horizontalPressure=-1;_verticalPressure=-1;_waveFrequencyX=-1;_waveFrequencyY=-1;_waveAmplitude=-1;_shadows=-1;_highlights=-1;_saturation=-1;_brightness=-1;_grainScale=-1;_grainIntensity=-1;_grainSparsity=-1;_grainSpeed=-1;_colorBlending=-1;_colors=[];_wireframe=!1;_backgroundColor="#FFFFFF";_backgroundAlpha=1;_flowDistortionA=0;_flowDistortionB=0;_flowScale=1;_flowEase=0;_flowEnabled=!0;_mouseDistortionStrength=0;_mouseDistortionRadius=.25;_mouseDecayRate=.96;_mouseDarken=0;_mouse=new n.Vector2(-1e3,-1e3);_mouseFBO=null;_sceneMouse=null;_cameraMouse=null;_mouseObjects=[];_currentBrush=0;_mouseBrushBaseScale=1;_enableProceduralTexture=!1;_textureVoidLikelihood=.45;_textureVoidWidthMin=200;_textureVoidWidthMax=486;_textureBandDensity=2.15;_textureColorBlending=.01;_textureSeed=333;_textureEase=.5;_proceduralTexture=null;_proceduralBackgroundColor="#000000";_textureShapeTriangles=20;_textureShapeCircles=15;_textureShapeBars=15;_textureShapeSquiggles=10;requestRef=-1;sizeObserver;sceneState;_cachedUniforms=null;_linkElement=null;_yOffset=0;_yOffsetWaveMultiplier=.004;_yOffsetColorMultiplier=.004;_yOffsetFlowMultiplier=.004;_tempClearColor=new n.Color;_resizeTimeoutId=null;_textureNeedsUpdate=!1;_lastColorUpdate=0;_linkCheckCounter=0;_mouseUpdateScheduled=!1;_pendingMousePosition=null;_colorsChanged=!0;constructor(e){const{ref:o,speed:t=4,horizontalPressure:f=3,verticalPressure:c=3,waveFrequencyX:i=5,waveFrequencyY:p=5,waveAmplitude:m=3,colors:d,highlights:v=4,shadows:u=4,colorSaturation:g=0,colorBrightness:T=1,colorBlending:M=5,grainScale:z=2,grainIntensity:y=.55,grainSparsity:E=0,grainSpeed:C=.1,wireframe:a=!1,backgroundColor:l="#FFFFFF",backgroundAlpha:h=1,resolution:_=1,seed:b,yOffset:q=0,yOffsetWaveMultiplier:j=4,yOffsetColorMultiplier:G=4,yOffsetFlowMultiplier:_e=4,flowDistortionA:he=0,flowDistortionB:fe=0,flowScale:de=1,flowEase:pe=0,flowEnabled:ve=!0,mouseDistortionStrength:ge=0,mouseDistortionRadius:me=.25,mouseDecayRate:xe=.96,mouseDarken:ye=0,enableProceduralTexture:we=!1,textureVoidLikelihood:be=.45,textureVoidWidthMin:Se=200,textureVoidWidthMax:ze=486,textureBandDensity:Ce=2.15,textureColorBlending:Me=.01,textureSeed:Pe=333,textureEase:Oe=.5,proceduralBackgroundColor:Te="#000000",textureShapeTriangles:Fe=20,textureShapeCircles:Be=15,textureShapeBars:Ue=15,textureShapeSquiggles:De=10}=e;this._ref=o,this.destroy=this.destroy.bind(this),this._initScene=this._initScene.bind(this),this._buildMaterial=this._buildMaterial.bind(this),this.speed=t,this.horizontalPressure=f,this.verticalPressure=c,this.waveFrequencyX=i,this.waveFrequencyY=p,this.waveAmplitude=m,this.colorBlending=M,this.grainScale=z,this.grainIntensity=y,this.grainSparsity=E,this.grainSpeed=C,this.colors=d,this.shadows=u,this.highlights=v,this.colorSaturation=g,this.colorBrightness=T,this.wireframe=a,this.backgroundColor=l,this.backgroundAlpha=h,this.yOffset=q,this.yOffsetWaveMultiplier=j,this.yOffsetColorMultiplier=G,this.yOffsetFlowMultiplier=_e,this.flowDistortionA=he,this.flowDistortionB=fe,this.flowScale=de,this.flowEase=pe,this.flowEnabled=ve,this.mouseDistortionStrength=ge,this.mouseDistortionRadius=me,this.mouseDecayRate=xe,this.mouseDarken=ye,this.enableProceduralTexture=we,this.textureVoidLikelihood=be,this.textureVoidWidthMin=Se,this.textureVoidWidthMax=ze,this.textureBandDensity=Ce,this.textureColorBlending=Me,this.textureSeed=Pe,this.textureEase=Oe,this._proceduralBackgroundColor=Te,this._textureShapeTriangles=Fe,this._textureShapeCircles=Be,this._textureShapeBars=Ue,this._textureShapeSquiggles=De,this._setupMouseInteraction(),this.sceneState=this._initScene(_);let $=b!==void 0?b:le();const ee=()=>{const{renderer:w,camera:W,scene:F}=this.sceneState;if(this._linkCheckCounter++,this._linkCheckCounter>=300&&(this._linkCheckCounter=0,(!this._linkElement||!document.contains(this._linkElement))&&(this._linkElement=ne(o))),this._cachedUniforms){const r=this._cachedUniforms;$+=se.getDelta()*this._speed,r.u_time.value=$,r.u_resolution.value.set(this._ref.width,this._ref.height),r.u_color_pressure.value.set(this._horizontalPressure,this._verticalPressure),r.u_wave_frequency_x.value=this._waveFrequencyX,r.u_wave_frequency_y.value=this._waveFrequencyY,r.u_wave_amplitude.value=this._waveAmplitude,r.u_color_blending.value=this._colorBlending,r.u_shadows.value=this._shadows,r.u_highlights.value=this._highlights,r.u_saturation.value=this._saturation,r.u_brightness.value=this._brightness,r.u_grain_intensity.value=this._grainIntensity,r.u_grain_sparsity.value=this._grainSparsity,r.u_grain_speed.value=this._grainSpeed,r.u_grain_scale.value=this._grainScale,r.u_y_offset.value=this._yOffset,r.u_y_offset_wave_multiplier.value=this._yOffsetWaveMultiplier,r.u_y_offset_color_multiplier.value=this._yOffsetColorMultiplier,r.u_y_offset_flow_multiplier.value=this._yOffsetFlowMultiplier,r.u_flow_distortion_a.value=this._flowDistortionA,r.u_flow_distortion_b.value=this._flowDistortionB,r.u_flow_scale.value=this._flowScale,r.u_flow_ease.value=this._flowEase,r.u_flow_enabled.value=this._flowEnabled?1:0,r.u_mouse_distortion_strength.value=this._mouseDistortionStrength,r.u_mouse_distortion_radius.value=this._mouseDistortionRadius,r.u_mouse_darken.value=this._mouseDarken,r.u_enable_procedural_texture.value=this._enableProceduralTexture?1:0,this._textureNeedsUpdate&&this._enableProceduralTexture&&(this._proceduralTexture&&this._proceduralTexture.dispose(),this._proceduralTexture=this._createProceduralTexture(),this._textureNeedsUpdate=!1),r.u_procedural_texture.value=this._proceduralTexture,r.u_texture_ease.value=this._textureEase,this.sceneState.meshes[0].material.wireframe=this._wireframe;const x=Date.now();if(this._colorsChanged||x-this._lastColorUpdate>100){this._lastColorUpdate=x,this._colorsChanged=!1;const V=r.u_colors.value;for(let P=0;P<L;P++)if(P<this._colors.length){const X=this._colors[P];V[P].is_active=X.enabled?1:0,V[P].color.setStyle(X.color,""),V[P].influence=X.influence||0}else V[P].is_active=0;r.u_colors_count.value=L}}if(this._mouseFBO&&this._sceneMouse&&this._cameraMouse&&this._mouseDistortionStrength>0){let r=!1;for(let x=0;x<this._mouseObjects.length;x++){const S=this._mouseObjects[x];S.mesh.visible&&(r=!0,S.mesh.rotation.z+=.01,S.mesh.material instanceof n.MeshBasicMaterial&&(S.mesh.material.opacity*=this._mouseDecayRate,S.mesh.material.opacity<.01&&(S.mesh.visible=!1)))}if(r){w.getClearColor(this._tempClearColor);const x=w.getClearAlpha();w.setClearColor(0,0),w.setRenderTarget(this._mouseFBO),w.clear(),w.render(this._sceneMouse,this._cameraMouse),w.setRenderTarget(null),w.setClearColor(this._tempClearColor,x),this._cachedUniforms&&(this._cachedUniforms.u_mouse_texture.value=this._mouseFBO.texture)}}w.setClearColor(this._backgroundColor,this._backgroundAlpha),w.render(F,W),this.requestRef=requestAnimationFrame(ee)},Ee=()=>{const{renderer:w}=this.sceneState,W=w.domElement,F=W.clientWidth,r=W.clientHeight;if(this.sceneState.renderer.setSize(F,r,!1),H(this.sceneState.camera,F,r),this._mouseFBO&&this._cameraMouse){const x=r/2,S=F/r;this._mouseFBO.setSize(F/2,r/2),this._cameraMouse.left=-x*S,this._cameraMouse.right=x*S,this._cameraMouse.top=x,this._cameraMouse.bottom=-x,this._cameraMouse.updateProjectionMatrix()}};this.sizeObserver=new ResizeObserver(()=>{this._resizeTimeoutId!==null&&clearTimeout(this._resizeTimeoutId),this._resizeTimeoutId=window.setTimeout(()=>{Ee(),this._resizeTimeoutId=null},100)}),this.sizeObserver.observe(o),ee()}destroy(){this&&(cancelAnimationFrame(this.requestRef),this.sizeObserver.disconnect(),this._resizeTimeoutId!==null&&(clearTimeout(this._resizeTimeoutId),this._resizeTimeoutId=null),this.sceneState&&(this.sceneState.renderer.dispose(),this.sceneState.meshes.forEach(e=>{e.geometry.dispose(),Array.isArray(e.material)?e.material.forEach(o=>o.dispose()):e.material.dispose()})),this._mouseFBO&&this._mouseFBO.dispose(),this._proceduralTexture&&this._proceduralTexture.dispose())}downloadAsPNG(e="neat.png"){console.log("Downloading as PNG",this._ref);const o=this._ref.toDataURL("image/png");console.log("data",o),ce(o,e)}set speed(e){this._speed=e/20}set horizontalPressure(e){this._horizontalPressure=e/4}set verticalPressure(e){this._verticalPressure=e/4}set waveFrequencyX(e){this._waveFrequencyX=e*.04}set waveFrequencyY(e){this._waveFrequencyY=e*.04}set waveAmplitude(e){this._waveAmplitude=e*.75}set colors(e){this._colors=e,this._colorsChanged=!0}set highlights(e){this._highlights=e/100}set shadows(e){this._shadows=e/100}set colorSaturation(e){this._saturation=e/10}set colorBrightness(e){this._brightness=e}set colorBlending(e){this._colorBlending=e/10}set grainScale(e){this._grainScale=e==0?1:e}set grainIntensity(e){this._grainIntensity=e}set grainSparsity(e){this._grainSparsity=e}set grainSpeed(e){this._grainSpeed=e}set wireframe(e){this._wireframe=e}set resolution(e){this.sceneState=this._initScene(e)}set backgroundColor(e){this._backgroundColor=e}set backgroundAlpha(e){this._backgroundAlpha=e}set yOffset(e){this._yOffset=e}get yOffsetWaveMultiplier(){return this._yOffsetWaveMultiplier*1e3}set yOffsetWaveMultiplier(e){this._yOffsetWaveMultiplier=e/1e3}get yOffsetColorMultiplier(){return this._yOffsetColorMultiplier*1e3}set yOffsetColorMultiplier(e){this._yOffsetColorMultiplier=e/1e3}get yOffsetFlowMultiplier(){return this._yOffsetFlowMultiplier*1e3}set yOffsetFlowMultiplier(e){this._yOffsetFlowMultiplier=e/1e3}set flowDistortionA(e){this._flowDistortionA=e}set flowDistortionB(e){this._flowDistortionB=e}set flowScale(e){this._flowScale=e}set flowEase(e){this._flowEase=e}set flowEnabled(e){this._flowEnabled=e}get flowEnabled(){return this._flowEnabled}set mouseDistortionStrength(e){this._mouseDistortionStrength=Math.max(0,e)}set mouseDistortionRadius(e){this._mouseDistortionRadius=Math.max(.01,Math.min(e,1)),this._updateBrushScale()}_updateBrushScale(){!this._mouseObjects||this._mouseObjects.length===0||(this._mouseBrushBaseScale=this._mouseDistortionRadius)}set mouseDecayRate(e){this._mouseDecayRate=Math.max(.9,Math.min(e,.99))}set mouseDarken(e){this._mouseDarken=e}set enableProceduralTexture(e){this._enableProceduralTexture=e,e&&!this._proceduralTexture&&(this._textureNeedsUpdate=!0)}set textureVoidLikelihood(e){this._textureVoidLikelihood=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureVoidWidthMin(e){this._textureVoidWidthMin=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureVoidWidthMax(e){this._textureVoidWidthMax=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureBandDensity(e){this._textureBandDensity=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureColorBlending(e){this._textureColorBlending=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureSeed(e){this._textureSeed=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}get textureEase(){return this._textureEase}set textureEase(e){this._textureEase=e}set proceduralBackgroundColor(e){this._proceduralBackgroundColor=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureShapeTriangles(e){this._textureShapeTriangles=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureShapeCircles(e){this._textureShapeCircles=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureShapeBars(e){this._textureShapeBars=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}set textureShapeSquiggles(e){this._textureShapeSquiggles=e,this._enableProceduralTexture&&(this._textureNeedsUpdate=!0)}_initScene(e){const o=this._ref.width,t=this._ref.height;this.sceneState&&this.sceneState.renderer&&(this.sceneState.renderer.dispose(),this.sceneState.meshes.forEach(u=>{u.geometry.dispose(),Array.isArray(u.material)?u.material.forEach(g=>g.dispose()):u.material.dispose()}));const f=new n.WebGLRenderer({alpha:!0,preserveDrawingBuffer:!0,canvas:this._ref});f.setClearColor(16711680,.5),f.setSize(o,t,!1);const c=[],i=new n.Scene,p=this._buildMaterial(o,t),m=new n.PlaneGeometry(U,D,240*e,240*e),d=new n.Mesh(m,p);d.rotation.x=-Math.PI/3.5,d.position.z=-1,c.push(d),i.add(d);const v=new n.OrthographicCamera(0,0,0,0,0,0);return v.position.z=5,H(v,o,t),{renderer:f,camera:v,scene:i,meshes:c,resolution:e}}_buildMaterial(e,o){const t=Array.from({length:L}).map((i,p)=>({is_active:p<this._colors.length&&this._colors[p].enabled?1:0,color:new n.Color(p<this._colors.length?this._colors[p].color:0),influence:p<this._colors.length&&this._colors[p].influence||0})),f={u_time:{value:0},u_color_pressure:{value:new n.Vector2(this._horizontalPressure,this._verticalPressure)},u_wave_frequency_x:{value:this._waveFrequencyX},u_wave_frequency_y:{value:this._waveFrequencyY},u_wave_amplitude:{value:this._waveAmplitude},u_resolution:{value:new n.Vector2(e,o)},u_colors:{value:t},u_colors_count:{value:this._colors.length},u_plane_width:{value:U},u_plane_height:{value:D},u_shadows:{value:this._shadows},u_highlights:{value:this._highlights},u_grain_intensity:{value:this._grainIntensity},u_grain_sparsity:{value:this._grainSparsity},u_grain_scale:{value:this._grainScale},u_grain_speed:{value:this._grainSpeed},u_flow_distortion_a:{value:this._flowDistortionA},u_flow_distortion_b:{value:this._flowDistortionB},u_flow_scale:{value:this._flowScale},u_flow_ease:{value:this._flowEase},u_flow_enabled:{value:this._flowEnabled?1:0},u_y_offset:{value:this._yOffset},u_y_offset_wave_multiplier:{value:this._yOffsetWaveMultiplier},u_y_offset_color_multiplier:{value:this._yOffsetColorMultiplier},u_y_offset_flow_multiplier:{value:this._yOffsetFlowMultiplier},u_mouse_distortion_strength:{value:this._mouseDistortionStrength},u_mouse_distortion_radius:{value:this._mouseDistortionRadius},u_mouse_darken:{value:this._mouseDarken},u_mouse_texture:{value:this._mouseFBO?this._mouseFBO.texture:null},u_procedural_texture:{value:this._proceduralTexture},u_enable_procedural_texture:{value:this._enableProceduralTexture?1:0},u_texture_ease:{value:this._textureEase},u_saturation:{value:this._saturation},u_brightness:{value:this._brightness},u_color_blending:{value:this._colorBlending}},c=new n.ShaderMaterial({uniforms:f,vertexShader:Y()+Z()+J()+re(),fragmentShader:Y()+J()+Z()+ae()});return this._cachedUniforms=f,c.wireframe=oe,c}_setupMouseInteraction(){if(!this._ref)return;const e=this._ref.width,o=this._ref.height;this._mouseFBO=new n.WebGLRenderTarget(e/2,o/2),this._sceneMouse=new n.Scene;const t=o/2,f=e/o;this._cameraMouse=new n.OrthographicCamera(-t*f,t*f,t,-t,0,1e4),this._cameraMouse.position.set(0,0,100);const c=document.createElement("canvas");c.width=128,c.height=128;const i=c.getContext("2d");if(i){const u=i.createRadialGradient(64,64,0,64,64,64);u.addColorStop(0,"rgba(255,255,255,0.8)"),u.addColorStop(.5,"rgba(255,255,255,0.4)"),u.addColorStop(1,"rgba(255,255,255,0)"),i.fillStyle=u,i.fillRect(0,0,128,128)}const p=new n.CanvasTexture(c),m=new n.MeshBasicMaterial({map:p,transparent:!0,opacity:1,depthTest:!1,blending:n.AdditiveBlending}),d=new n.PlaneGeometry(200,200),v=50;for(let u=0;u<v;u++){const g=new n.Mesh(d,m.clone());g.visible=!1,this._sceneMouse.add(g),this._mouseObjects.push({mesh:g,active:!1})}this._updateBrushScale(),this._ref.addEventListener("mousemove",this._onMouseMove.bind(this))}_onMouseMove(e){if(!this._ref||!this._sceneMouse)return;const o=this._ref.getBoundingClientRect(),t=this._ref.width,f=this._ref.height;this._pendingMousePosition={x:e.clientX-o.left-t/2,y:-(e.clientY-o.top-f/2)},this._mouseUpdateScheduled||(this._mouseUpdateScheduled=!0,requestAnimationFrame(()=>{if(this._mouseUpdateScheduled=!1,!this._pendingMousePosition)return;this._mouse.x=this._pendingMousePosition.x,this._mouse.y=this._pendingMousePosition.y;const c=this._mouseObjects[this._currentBrush];c.mesh.scale.set(this._mouseBrushBaseScale,this._mouseBrushBaseScale,1),c.active=!0,c.mesh.visible=!0,c.mesh.position.set(this._mouse.x,this._mouse.y,0),c.mesh.rotation.z=Math.random()*Math.PI*2,c.mesh.material instanceof n.MeshBasicMaterial&&(c.mesh.material.opacity=1),this._currentBrush=(this._currentBrush+1)%this._mouseObjects.length,this._pendingMousePosition=null}))}_createProceduralTexture(){const o=document.createElement("canvas");o.width=1024,o.height=1024;const t=o.getContext("2d",{willReadFrequently:!0});if(!t)return new n.Texture;let f=this._textureSeed;const c=this._textureSeed;function i(){const a=Math.sin(f++)*1e4;return a-Math.floor(a)}const p=a=>{f=c+a},m=this._colors.filter(a=>a.enabled).map(a=>a.color);if(m.length===0)return new n.Texture;function d(a){const l=parseInt(a.replace("#",""),16);return{r:l>>16&255,g:l>>8&255,b:l&255}}function v(a,l,h){return"#"+((1<<24)+(Math.round(a)<<16)+(Math.round(l)<<8)+Math.round(h)).toString(16).slice(1)}const u=()=>{const a=m[Math.floor(i()*m.length)],l=m[Math.floor(i()*m.length)],h=i()*this._textureColorBlending,_=d(a),b=d(l),q=_.r+(b.r-_.r)*h,j=_.g+(b.g-_.g)*h,G=_.b+(b.b-_.b)*h;return v(q,j,G)},g=this._proceduralBackgroundColor||"#000000";t.fillStyle=g,t.fillRect(0,0,1024,1024);const T=t.createLinearGradient(0,0,0,1024);T.addColorStop(0,u()),T.addColorStop(1,u()),t.fillStyle=T,t.fillRect(0,0,1024,1024);for(let a=0;a<this._textureShapeTriangles;a++){t.fillStyle=u(),t.beginPath();const l=i()*1024,h=i()*1024,_=100+i()*300;t.moveTo(l,h),t.lineTo(l+(i()-.5)*_,h+(i()-.5)*_),t.lineTo(l+(i()-.5)*_,h+(i()-.5)*_),t.fill()}for(let a=0;a<this._textureShapeCircles;a++){t.strokeStyle=u(),t.lineWidth=10+i()*50,t.beginPath();const l=i()*1024,h=i()*1024,_=50+i()*150;t.arc(l,h,_,0,Math.PI*2),t.stroke()}for(let a=0;a<this._textureShapeBars;a++)t.fillStyle=u(),t.save(),t.translate(i()*1024,i()*1024),t.rotate(i()*Math.PI),t.fillRect(-150,-25,300,50),t.restore();t.lineWidth=15,t.lineCap="round";for(let a=0;a<this._textureShapeSquiggles;a++){t.strokeStyle=u(),t.beginPath();let l=i()*1024,h=i()*1024;t.moveTo(l,h);for(let _=0;_<4;_++)t.bezierCurveTo(l+(i()-.5)*300,h+(i()-.5)*300,l+(i()-.5)*300,h+(i()-.5)*300,l+(i()-.5)*300,h+(i()-.5)*300),l+=(i()-.5)*300,h+=(i()-.5)*300;t.stroke()}p(5e4);const M=document.createElement("canvas");M.width=1024,M.height=1024;const z=M.getContext("2d",{willReadFrequently:!0});if(!z)return new n.Texture;z.fillStyle=g,z.fillRect(0,0,1024,1024);let y=0;const E=[];for(;y<1024;)if(i()<this._textureVoidLikelihood){const l=this._textureVoidWidthMin+i()*(this._textureVoidWidthMax-this._textureVoidWidthMin);E.push({type:"void",x:y,width:l}),y+=l}else{const l=50+i()*200;E.push({type:"matter",x:y,width:l}),y+=l}for(const a of E)if(a.type==="matter"){const l=a.x,h=Math.min(a.x+a.width,1024);let _=l;for(;_<h;){const b=(2+i()*20)/this._textureBandDensity,q=Math.floor(i()*1024);z.drawImage(o,q,0,b,1024,_,0,b,1024),_+=b}}const C=new n.CanvasTexture(M);return C.minFilter=n.LinearMipmapLinearFilter,C.magFilter=n.LinearFilter,C.wrapS=n.RepeatWrapping,C.wrapT=n.RepeatWrapping,C.anisotropy=16,C.needsUpdate=!0,C}}function H(s,e,o){const c=e*o/1e6*U*D/1.5,i=e/o,p=Math.sqrt(c*i),m=c/p;let d=-U/2,v=Math.min((d+p)/1.5,U/2),u=D/4,g=Math.max((u-m)/2,-D/4);if(i<1){const z=i;d=d*z,v=v*z;const y=1.05;d=d*y,v=v*y,u=u*y,g=g*y}const T=-100,M=1e3;s instanceof n.OrthographicCamera?(s.left=d,s.right=v,s.top=u,s.bottom=g,s.near=T,s.far=M,s.updateProjectionMatrix()):s instanceof n.PerspectiveCamera&&(s.aspect=e/o,s.updateProjectionMatrix())}let R=null,k=null;function re(){return R||(R=`
|
|
3
2
|
void main() {
|
|
4
|
-
|
|
5
3
|
vUv = uv;
|
|
6
4
|
|
|
5
|
+
// SCROLLING LOGIC
|
|
6
|
+
// Separate multipliers for wave, color, and flow offsets
|
|
7
|
+
float waveOffset = -u_y_offset * u_y_offset_wave_multiplier;
|
|
8
|
+
float colorOffset = -u_y_offset * u_y_offset_color_multiplier;
|
|
9
|
+
float flowOffset = -u_y_offset * u_y_offset_flow_multiplier;
|
|
10
|
+
|
|
11
|
+
// 1. DISPLACEMENT (WAVES)
|
|
12
|
+
// We add waveOffset to Y to scroll the wave pattern
|
|
7
13
|
v_displacement_amount = cnoise( vec3(
|
|
8
14
|
u_wave_frequency_x * position.x + u_time,
|
|
9
|
-
u_wave_frequency_y * position.y + u_time,
|
|
15
|
+
u_wave_frequency_y * (position.y + waveOffset) + u_time,
|
|
10
16
|
u_time
|
|
11
17
|
));
|
|
12
18
|
|
|
13
|
-
|
|
19
|
+
// 2. FLOW FIELD
|
|
20
|
+
// Apply flow offset to scroll the flow field mask
|
|
21
|
+
vec2 baseUv = vUv;
|
|
22
|
+
baseUv.y += flowOffset / u_plane_height; // Scale to match wave speed
|
|
23
|
+
vec2 flowUv = baseUv;
|
|
24
|
+
|
|
25
|
+
if (u_flow_enabled > 0.5) {
|
|
26
|
+
if (u_flow_ease > 0.0 || u_flow_distortion_a > 0.0) {
|
|
27
|
+
vec2 ppp = -1.0 + 2.0 * baseUv;
|
|
28
|
+
ppp += 0.1 * cos((1.5 * u_flow_scale) * ppp.yx + 1.1 * u_time + vec2(0.1, 1.1));
|
|
29
|
+
ppp += 0.1 * cos((2.3 * u_flow_scale) * ppp.yx + 1.3 * u_time + vec2(3.2, 3.4));
|
|
30
|
+
ppp += 0.1 * cos((2.2 * u_flow_scale) * ppp.yx + 1.7 * u_time + vec2(1.8, 5.2));
|
|
31
|
+
ppp += u_flow_distortion_a * cos((u_flow_distortion_b * u_flow_scale) * ppp.yx + 1.4 * u_time + vec2(6.3, 3.9));
|
|
32
|
+
|
|
33
|
+
float r = length(ppp);
|
|
34
|
+
flowUv = mix(baseUv, vec2(baseUv.x * (1.0 - u_flow_ease) + r * u_flow_ease, baseUv.y), u_flow_ease);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
14
37
|
|
|
15
|
-
//
|
|
16
|
-
|
|
38
|
+
// Pass the standard flow UV to fragment shader (for mouse/texture)
|
|
39
|
+
vFlowUv = flowUv;
|
|
17
40
|
|
|
18
|
-
//
|
|
19
|
-
|
|
20
|
-
//
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
41
|
+
// 3. COLOR MIXING
|
|
42
|
+
// We take the computed flow UVs and apply the color offset
|
|
43
|
+
// Scale by plane height to match wave offset speed (world space vs UV space)
|
|
44
|
+
vec3 color = u_colors[0].color;
|
|
45
|
+
vec2 adjustedUv = flowUv;
|
|
46
|
+
adjustedUv.y += colorOffset / u_plane_height; // Scroll the color mixing pattern
|
|
24
47
|
|
|
48
|
+
vec2 noise_cord = adjustedUv * u_color_pressure;
|
|
25
49
|
const float minNoise = .0;
|
|
26
50
|
const float maxNoise = .9;
|
|
27
51
|
|
|
28
52
|
for (int i = 1; i < u_colors_count; i++) {
|
|
29
|
-
|
|
30
|
-
if(u_colors[i].is_active == 1.0){
|
|
53
|
+
if(u_colors[i].is_active > 0.5){
|
|
31
54
|
float noiseFlow = (1. + float(i)) / 30.;
|
|
32
55
|
float noiseSpeed = (1. + float(i)) * 0.11;
|
|
33
56
|
float noiseSeed = 13. + float(i) * 7.;
|
|
34
57
|
|
|
35
|
-
int reverseIndex = u_colors_count - i;
|
|
36
|
-
|
|
37
58
|
float noise = snoise(
|
|
38
59
|
vec3(
|
|
39
60
|
noise_cord.x * u_color_pressure.x + u_time * noiseFlow * 2.,
|
|
@@ -43,19 +64,18 @@ void main() {
|
|
|
43
64
|
) - (.1 * float(i)) + (.5 * u_color_blending);
|
|
44
65
|
|
|
45
66
|
noise = clamp(minNoise, maxNoise + float(i) * 0.02, noise);
|
|
46
|
-
|
|
47
|
-
color = mix(color, nextColor, smoothstep(0.0, u_color_blending, noise));
|
|
67
|
+
color = mix(color, u_colors[i].color, smoothstep(0.0, u_color_blending, noise));
|
|
48
68
|
}
|
|
49
69
|
}
|
|
50
70
|
|
|
51
71
|
v_color = color;
|
|
52
72
|
|
|
73
|
+
// 4. VERTEX POSITION
|
|
53
74
|
vec3 newPosition = position + normal * v_displacement_amount * u_wave_amplitude;
|
|
54
75
|
gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
|
|
55
|
-
|
|
56
76
|
v_new_position = gl_Position;
|
|
57
77
|
}
|
|
58
|
-
|
|
78
|
+
`,R)}function ae(){return k||(k=`
|
|
59
79
|
float random(vec2 p) {
|
|
60
80
|
return fract(sin(dot(p, vec2(12.9898,78.233))) * 43758.5453);
|
|
61
81
|
}
|
|
@@ -73,32 +93,71 @@ float fbm(vec3 x) {
|
|
|
73
93
|
}
|
|
74
94
|
|
|
75
95
|
void main() {
|
|
76
|
-
|
|
96
|
+
// MOUSE DISTORTION
|
|
97
|
+
vec2 finalUv = vFlowUv;
|
|
98
|
+
|
|
99
|
+
if (u_mouse_distortion_strength > 0.0) {
|
|
100
|
+
vec4 mouseColor = texture2D(u_mouse_texture, vUv);
|
|
101
|
+
float mouseValue = mouseColor.r;
|
|
102
|
+
|
|
103
|
+
if (mouseValue > 0.001) {
|
|
104
|
+
float distortionAmount = mouseValue * u_mouse_distortion_strength;
|
|
105
|
+
vec2 mouseDisp = vec2(distortionAmount, distortionAmount);
|
|
106
|
+
finalUv -= mouseDisp;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
vec3 baseColor;
|
|
111
|
+
|
|
112
|
+
if (u_enable_procedural_texture > 0.5) {
|
|
113
|
+
// Calculate flow field distance for ease effect
|
|
114
|
+
vec2 ppp = -1.0 + 2.0 * finalUv;
|
|
115
|
+
ppp += 0.1 * cos((1.5 * u_flow_scale) * ppp.yx + 1.1 * u_time + vec2(0.1, 1.1));
|
|
116
|
+
ppp += 0.1 * cos((2.3 * u_flow_scale) * ppp.yx + 1.3 * u_time + vec2(3.2, 3.4));
|
|
117
|
+
ppp += 0.1 * cos((2.2 * u_flow_scale) * ppp.yx + 1.7 * u_time + vec2(1.8, 5.2));
|
|
118
|
+
ppp += u_flow_distortion_a * cos((u_flow_distortion_b * u_flow_scale) * ppp.yx + 1.4 * u_time + vec2(6.3, 3.9));
|
|
119
|
+
float r = length(ppp); // Flow distance
|
|
120
|
+
|
|
121
|
+
// Ease blending: 0 = topographic (flow), 1 = image (UV)
|
|
122
|
+
float vx = (finalUv.x * u_texture_ease) + (r * (1.0 - u_texture_ease));
|
|
123
|
+
float vy = (finalUv.y * u_texture_ease) + (0.0 * (1.0 - u_texture_ease));
|
|
124
|
+
vec2 texUv = vec2(vx, vy);
|
|
125
|
+
|
|
126
|
+
// PARALLAX SCROLLING
|
|
127
|
+
// We manually apply a smaller offset here to make the texture lag behind
|
|
128
|
+
float parallaxFactor = 0.25; // 25% speed of the color mixing
|
|
129
|
+
texUv.y -= (u_y_offset * u_y_offset_color_multiplier / u_plane_height) * parallaxFactor;
|
|
130
|
+
|
|
131
|
+
texUv *= 1.5; // Tiling scale
|
|
132
|
+
|
|
133
|
+
vec4 texSample = texture2D(u_procedural_texture, texUv);
|
|
134
|
+
baseColor = texSample.rgb;
|
|
135
|
+
} else {
|
|
136
|
+
baseColor = v_color;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
vec3 color = baseColor;
|
|
140
|
+
|
|
141
|
+
// Post-processing
|
|
77
142
|
color += pow(v_displacement_amount, 1.0) * u_highlights;
|
|
78
143
|
color -= pow(1.0 - v_displacement_amount, 2.0) * u_shadows;
|
|
79
144
|
color = saturation(color, 1.0 + u_saturation);
|
|
80
145
|
color = color * u_brightness;
|
|
81
146
|
|
|
82
|
-
//
|
|
147
|
+
// Grain
|
|
83
148
|
vec2 noiseCoords = gl_FragCoord.xy / u_grain_scale;
|
|
84
149
|
float grain = (u_grain_speed != 0.0) ? fbm(vec3(noiseCoords, u_time * u_grain_speed)) : fbm(vec3(noiseCoords, 0.0));
|
|
85
150
|
|
|
86
|
-
// Center the grain around zero
|
|
87
151
|
grain = grain * 0.5 + 0.5;
|
|
88
152
|
grain -= 0.5;
|
|
89
|
-
|
|
90
|
-
// Add sparsity control
|
|
91
153
|
grain = (grain > u_grain_sparsity) ? grain : 0.0;
|
|
92
|
-
|
|
93
|
-
// Apply grain intensity
|
|
94
154
|
grain *= u_grain_intensity;
|
|
95
155
|
|
|
96
|
-
// Add grain to color
|
|
97
156
|
color += vec3(grain);
|
|
98
157
|
|
|
99
158
|
gl_FragColor = vec4(color, 1.0);
|
|
100
159
|
}
|
|
101
|
-
|
|
160
|
+
`,k)}let A=null;const Y=()=>A||(A=`
|
|
102
161
|
precision highp float;
|
|
103
162
|
|
|
104
163
|
struct Color {
|
|
@@ -130,81 +189,89 @@ uniform float u_brightness;
|
|
|
130
189
|
uniform float u_color_blending;
|
|
131
190
|
|
|
132
191
|
uniform int u_colors_count;
|
|
133
|
-
uniform Color u_colors[
|
|
192
|
+
uniform Color u_colors[6];
|
|
134
193
|
uniform vec2 u_resolution;
|
|
135
194
|
|
|
136
195
|
uniform float u_y_offset;
|
|
196
|
+
uniform float u_y_offset_wave_multiplier;
|
|
197
|
+
uniform float u_y_offset_color_multiplier;
|
|
198
|
+
uniform float u_y_offset_flow_multiplier;
|
|
199
|
+
|
|
200
|
+
// Flow field uniforms
|
|
201
|
+
uniform float u_flow_distortion_a;
|
|
202
|
+
uniform float u_flow_distortion_b;
|
|
203
|
+
uniform float u_flow_scale;
|
|
204
|
+
uniform float u_flow_ease;
|
|
205
|
+
uniform float u_flow_enabled;
|
|
206
|
+
|
|
207
|
+
// Mouse interaction uniforms
|
|
208
|
+
uniform float u_mouse_distortion_strength;
|
|
209
|
+
uniform float u_mouse_distortion_radius;
|
|
210
|
+
uniform float u_mouse_darken;
|
|
211
|
+
uniform sampler2D u_mouse_texture;
|
|
212
|
+
|
|
213
|
+
// Procedural texture uniforms
|
|
214
|
+
uniform sampler2D u_procedural_texture;
|
|
215
|
+
uniform float u_enable_procedural_texture;
|
|
216
|
+
uniform float u_texture_ease;
|
|
137
217
|
|
|
138
218
|
varying vec2 vUv;
|
|
219
|
+
varying vec2 vFlowUv;
|
|
139
220
|
varying vec4 v_new_position;
|
|
140
221
|
varying vec3 v_color;
|
|
141
222
|
varying float v_displacement_amount;
|
|
142
223
|
|
|
143
|
-
`,
|
|
224
|
+
`,A);let I=null;const Z=()=>I||(I=`
|
|
144
225
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
226
|
+
// 1. REPLACEMENT PERMUTE:
|
|
227
|
+
// Uses a hash function (fract/sin) instead of a modular lookup table.
|
|
228
|
+
vec4 permute(vec4 x) {
|
|
229
|
+
return floor(fract(sin(x) * 43758.5453123) * 289.0);
|
|
148
230
|
}
|
|
149
231
|
|
|
150
|
-
|
|
151
|
-
{
|
|
152
|
-
return x - floor(x * (1.0 / 289.0)) * 289.0;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
vec4 permute(vec4 x)
|
|
156
|
-
{
|
|
157
|
-
return mod289(((x*34.0)+1.0)*x);
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
vec4 taylorInvSqrt(vec4 r)
|
|
161
|
-
{
|
|
232
|
+
// Taylor Inverse Sqrt
|
|
233
|
+
vec4 taylorInvSqrt(vec4 r) {
|
|
162
234
|
return 1.79284291400159 - 0.85373472095314 * r;
|
|
163
235
|
}
|
|
164
236
|
|
|
237
|
+
// Fade function
|
|
165
238
|
vec3 fade(vec3 t) {
|
|
166
239
|
return t*t*t*(t*(t*6.0-15.0)+10.0);
|
|
167
240
|
}
|
|
168
241
|
|
|
169
|
-
|
|
170
|
-
{
|
|
242
|
+
// 3D Simplex Noise
|
|
243
|
+
float snoise(vec3 v) {
|
|
171
244
|
const vec2 C = vec2(1.0/6.0, 1.0/3.0) ;
|
|
172
245
|
const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
|
|
173
246
|
|
|
174
|
-
// First corner
|
|
247
|
+
// First corner
|
|
175
248
|
vec3 i = floor(v + dot(v, C.yyy) );
|
|
176
249
|
vec3 x0 = v - i + dot(i, C.xxx) ;
|
|
177
250
|
|
|
178
|
-
// Other corners
|
|
251
|
+
// Other corners
|
|
179
252
|
vec3 g = step(x0.yzx, x0.xyz);
|
|
180
253
|
vec3 l = 1.0 - g;
|
|
181
254
|
vec3 i1 = min( g.xyz, l.zxy );
|
|
182
255
|
vec3 i2 = max( g.xyz, l.zxy );
|
|
183
256
|
|
|
184
|
-
// x0 = x0 - 0.0 + 0.0 * C.xxx;
|
|
185
|
-
// x1 = x0 - i1 + 1.0 * C.xxx;
|
|
186
|
-
// x2 = x0 - i2 + 2.0 * C.xxx;
|
|
187
|
-
// x3 = x0 - 1.0 + 3.0 * C.xxx;
|
|
188
257
|
vec3 x1 = x0 - i1 + C.xxx;
|
|
189
|
-
vec3 x2 = x0 - i2 + C.yyy;
|
|
190
|
-
vec3 x3 = x0 - D.yyy;
|
|
258
|
+
vec3 x2 = x0 - i2 + C.yyy;
|
|
259
|
+
vec3 x3 = x0 - D.yyy;
|
|
191
260
|
|
|
192
|
-
// Permutations
|
|
193
|
-
i = mod289(i);
|
|
261
|
+
// Permutations
|
|
194
262
|
vec4 p = permute( permute( permute(
|
|
195
263
|
i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
|
|
196
264
|
+ i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
|
|
197
265
|
+ i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
|
|
198
266
|
|
|
199
|
-
// Gradients
|
|
200
|
-
// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
|
|
267
|
+
// Gradients
|
|
201
268
|
float n_ = 0.142857142857; // 1.0/7.0
|
|
202
269
|
vec3 ns = n_ * D.wyz - D.xzx;
|
|
203
270
|
|
|
204
|
-
vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
|
|
271
|
+
vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
|
|
205
272
|
|
|
206
273
|
vec4 x_ = floor(j * ns.z);
|
|
207
|
-
vec4 y_ = floor(j - 7.0 * x_ );
|
|
274
|
+
vec4 y_ = floor(j - 7.0 * x_ );
|
|
208
275
|
|
|
209
276
|
vec4 x = x_ *ns.x + ns.yyyy;
|
|
210
277
|
vec4 y = y_ *ns.x + ns.yyyy;
|
|
@@ -213,8 +280,6 @@ float snoise(vec3 v)
|
|
|
213
280
|
vec4 b0 = vec4( x.xy, y.xy );
|
|
214
281
|
vec4 b1 = vec4( x.zw, y.zw );
|
|
215
282
|
|
|
216
|
-
//vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
|
|
217
|
-
//vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
|
|
218
283
|
vec4 s0 = floor(b0)*2.0 + 1.0;
|
|
219
284
|
vec4 s1 = floor(b1)*2.0 + 1.0;
|
|
220
285
|
vec4 sh = -step(h, vec4(0.0));
|
|
@@ -227,14 +292,14 @@ float snoise(vec3 v)
|
|
|
227
292
|
vec3 p2 = vec3(a1.xy,h.z);
|
|
228
293
|
vec3 p3 = vec3(a1.zw,h.w);
|
|
229
294
|
|
|
230
|
-
//Normalise gradients
|
|
295
|
+
// Normalise gradients
|
|
231
296
|
vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
|
|
232
297
|
p0 *= norm.x;
|
|
233
298
|
p1 *= norm.y;
|
|
234
299
|
p2 *= norm.z;
|
|
235
300
|
p3 *= norm.w;
|
|
236
301
|
|
|
237
|
-
// Mix final noise value
|
|
302
|
+
// Mix final noise value
|
|
238
303
|
vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
|
|
239
304
|
m = m * m;
|
|
240
305
|
return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
|
|
@@ -244,12 +309,11 @@ float snoise(vec3 v)
|
|
|
244
309
|
// Classic Perlin noise
|
|
245
310
|
float cnoise(vec3 P)
|
|
246
311
|
{
|
|
247
|
-
vec3 Pi0 = floor(P);
|
|
248
|
-
vec3 Pi1 = Pi0 + vec3(1.0);
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
vec3
|
|
252
|
-
vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
|
|
312
|
+
vec3 Pi0 = floor(P);
|
|
313
|
+
vec3 Pi1 = Pi0 + vec3(1.0);
|
|
314
|
+
|
|
315
|
+
vec3 Pf0 = fract(P);
|
|
316
|
+
vec3 Pf1 = Pf0 - vec3(1.0);
|
|
253
317
|
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
|
|
254
318
|
vec4 iy = vec4(Pi0.yy, Pi1.yy);
|
|
255
319
|
vec4 iz0 = Pi0.zzzz;
|
|
@@ -310,47 +374,7 @@ float cnoise(vec3 P)
|
|
|
310
374
|
float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
|
|
311
375
|
return 2.2 * n_xyz;
|
|
312
376
|
}
|
|
313
|
-
|
|
314
|
-
// YUV to RGB matrix
|
|
315
|
-
mat3 yuv2rgb = mat3(1.0, 0.0, 1.13983,
|
|
316
|
-
1.0, -0.39465, -0.58060,
|
|
317
|
-
1.0, 2.03211, 0.0);
|
|
318
|
-
|
|
319
|
-
// RGB to YUV matrix
|
|
320
|
-
mat3 rgb2yuv = mat3(0.2126, 0.7152, 0.0722,
|
|
321
|
-
-0.09991, -0.33609, 0.43600,
|
|
322
|
-
0.615, -0.5586, -0.05639);
|
|
323
|
-
|
|
324
|
-
vec3 oklab2rgb(vec3 linear)
|
|
325
|
-
{
|
|
326
|
-
const mat3 im1 = mat3(0.4121656120, 0.2118591070, 0.0883097947,
|
|
327
|
-
0.5362752080, 0.6807189584, 0.2818474174,
|
|
328
|
-
0.0514575653, 0.1074065790, 0.6302613616);
|
|
329
|
-
|
|
330
|
-
const mat3 im2 = mat3(+0.2104542553, +1.9779984951, +0.0259040371,
|
|
331
|
-
+0.7936177850, -2.4285922050, +0.7827717662,
|
|
332
|
-
-0.0040720468, +0.4505937099, -0.8086757660);
|
|
333
|
-
|
|
334
|
-
vec3 lms = im1 * linear;
|
|
335
|
-
|
|
336
|
-
return im2 * (sign(lms) * pow(abs(lms), vec3(1.0/3.0)));
|
|
337
|
-
}
|
|
338
|
-
|
|
339
|
-
vec3 rgb2oklab(vec3 oklab)
|
|
340
|
-
{
|
|
341
|
-
const mat3 m1 = mat3(+1.000000000, +1.000000000, +1.000000000,
|
|
342
|
-
+0.396337777, -0.105561346, -0.089484178,
|
|
343
|
-
+0.215803757, -0.063854173, -1.291485548);
|
|
344
|
-
|
|
345
|
-
const mat3 m2 = mat3(+4.076724529, -1.268143773, -0.004111989,
|
|
346
|
-
-3.307216883, +2.609332323, -0.703476310,
|
|
347
|
-
+0.230759054, -0.341134429, +1.706862569);
|
|
348
|
-
vec3 lms = m1 * oklab;
|
|
349
|
-
|
|
350
|
-
return m2 * (lms * lms * lms);
|
|
351
|
-
}
|
|
352
|
-
|
|
353
|
-
`,I=()=>`
|
|
377
|
+
`,I);let N=null;const J=()=>N||(N=`
|
|
354
378
|
|
|
355
379
|
vec3 saturation(vec3 rgb, float adjustment) {
|
|
356
380
|
const vec3 W = vec3(0.2125, 0.7154, 0.0721);
|
|
@@ -393,5 +417,5 @@ vec3 hsv2rgb(vec3 c)
|
|
|
393
417
|
vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
|
|
394
418
|
return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
|
|
395
419
|
}
|
|
396
|
-
`,N=
|
|
420
|
+
`,N),Q=s=>{s.id=K,s.href="https://neat.firecms.co",s.target="_blank",s.style.position="absolute",s.style.display="block",s.style.bottom="0",s.style.right="0",s.style.padding="10px",s.style.color="#dcdcdc",s.style.opacity="0.8",s.style.fontFamily="sans-serif",s.style.fontSize="16px",s.style.fontWeight="bold",s.style.textDecoration="none",s.style.zIndex="10000",s.innerHTML="NEAT"},ne=s=>{const e=s.parentElement?.getElementsByTagName("a");if(e){for(let t=0;t<e.length;t++)if(e[t].id===K)return Q(e[t]),e[t]}const o=document.createElement("a");return Q(o),s.parentElement?.appendChild(o),o};function le(){const s=new Date,e=s.getMinutes(),o=s.getSeconds();return e*60+o}function ue(s=6){const e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";let o="";for(let t=0;t<s;t++){const f=Math.floor(Math.random()*e.length);o+=e.charAt(f)}return o}function ce(s,e){const o=document.createElement("a");o.download=e,o.href=s,document.body.appendChild(o),o.click(),document.body.removeChild(o)}O.NeatGradient=ie,Object.defineProperties(O,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
397
421
|
//# sourceMappingURL=index.umd.js.map
|