1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2433],{31738:(e,n,r)=>{function o(e,n,r,o){return new(r||(r=Promise))(function(t,i){function a(e){try{c(o.next(e))}catch(e){i(e)}}function s(e){try{c(o.throw(e))}catch(e){i(e)}}function c(e){var n;e.done?t(e.value):((n=e.value)instanceof r?n:new r(function(e){e(n)})).then(a,s)}c((o=o.apply(e,n||[])).next())})}r.d(n,{A:()=>f}),"function"==typeof SuppressedError&&SuppressedError;let t=["geforce 320m","geforce 8600","geforce 8600m gt","geforce 8800 gs","geforce 8800 gt","geforce 9400","geforce 9400m g","geforce 9400m","geforce 9600m gt","geforce 9600m","geforce fx go5200","geforce gt 120","geforce gt 130","geforce gt 330m","geforce gtx 285","google swiftshader","intel g41","intel g45","intel gma 4500mhd","intel gma x3100","intel hd 3000","intel q45","legacy","mali-2","mali-3","mali-4","quadro fx 1500","quadro fx 4","quadro fx 5","radeon hd 2400","radeon hd 2600","radeon hd 4670","radeon hd 4850","radeon hd 4870","radeon hd 5670","radeon hd 5750","radeon hd 6290","radeon hd 6300","radeon hd 6310","radeon hd 6320","radeon hd 6490m","radeon hd 6630m","radeon hd 6750m","radeon hd 6770m","radeon hd 6970m","sgx 543","sgx543"];function i(e){return e.toLowerCase().replace(/.*angle ?\((.+)\)(?: on vulkan [0-9.]+)?$/i,"$1").replace(/\s(\d{1,2}gb|direct3d.+$)|\(r\)| \([^)]+\)$/g,"").replace(/(?:vulkan|opengl) \d+\.\d+(?:\.\d+)?(?: \((.*)\))?/,"$1")}let a="undefined"==typeof window,s=(()=>{if(a)return;let{userAgent:e,platform:n,maxTouchPoints:r}=window.navigator,o=/(iphone|ipod|ipad)/i.test(e),t="iPad"===n||"MacIntel"===n&&r>0&&!window.MSStream;return{isIpad:t,isMobile:/android/i.test(e)||o||t,isSafari12:/Version\/12.+Safari/.test(e),isFirefox:/Firefox/.test(e)}})();class c extends Error{constructor(e){super(e),Object.setPrototypeOf(this,new.target.prototype)}}let l=[],m=[];function v(e){return null!=e}var d=r(16466);let f=()=>
1{let[e,n]=d.useState(0),[r,f]=d.useState(!0);return d.useEffect(()=>{(({mobileTiers:e=[0,15,30,60],desktopTiers:n=[0,15,30,60],override:r={},glContext:d,failIfMajorPerformanceCaveat:f=!1,benchmarksURL:u="https://unpkg.com/[email protected]/dist/benchmarks"}={})=>o(void 0,void 0,void 0,function*(){let g={};if(a)return{tier:0,type:"SSR"};let{isIpad:h=!!(null==s?void 0:s.isIpad),isMobile:x=!!(null==s?void 0:s.isMobile),screenSize:p=window.screen,loadBenchmarks:y=e=>o(void 0,void 0,void 0,function*(){let n=yield fetch(`${u}/${e}`).then(e=>e.json());if(4>parseInt(n.shift().split(".")[0],10))throw new c("Detect GPU benchmark data is out of date. Please update to version 4x");return n})}=r,{renderer:P}=r,w=(e,n,r,o,t)=>({device:t,fps:o,gpu:r,isMobile:x,tier:e,type:n}),_,S="";if(P)_=[P=i(P)];else{var C;let e=d||function(e,n=!1){let r={alpha:!1,antialias:!1,depth:!1,failIfMajorPerformanceCaveat:n,powerPreference:"high-performance",stencil:!1};e&&delete r.powerPreference;let o=window.document.createElement("canvas"),t=o.getContext("webgl",r)||o.getContext("experimental-webgl",r);return null!=t?t:void 0}(null==s?void 0:s.isSafari12,f);if(!e)return w(0,"WEBGL_UNSUPPORTED");let n=(null==s?void 0:s.isFirefox)?null:e.getExtension("WEBGL_debug_renderer_info");if(!(P=n?e.getParameter(n.UNMASKED_RENDERER_WEBGL):e.getParameter(e.RENDERER)))return w(1,"FALLBACK");S=P,P=i(P),_="apple gpu"===(C=P)?function(e,n,r){let o;if(!r)return[n];let t=function(e){let n=e.createShader(35633),r=e.createShader(35632),o=e.createProgram();if(!(r&&n&&o))return;e.shaderSource(n,"\n precision highp float;\n attribute vec3 aPosition;\n varying float vvv;\n void main() {\n vvv = 0.31622776601683794;
1\n gl_Position = vec4(aPosition, 1.0);\n }\n "),e.shaderSource(r,"\n precision highp float;\n varying float vvv;\n void main() {\n vec4 enc = vec4(1.0, 255.0, 65025.0, 16581375.0) * vvv;\n enc = fract(enc);\n enc -= enc.yzww * vec4(1.0 / 255.0, 1.0 / 255.0, 1.0 / 255.0, 0.0);\n gl_FragColor = enc;\n }\n "),e.compileShader(n),e.compileShader(r),e.attachShader(o,n),e.attachShader(o,r),e.linkProgram(o),e.detachShader(o,n),e.detachShader(o,r),e.deleteShader(n),e.deleteShader(r),e.useProgram(o);let t=e.createBuffer();e.bindBuffer(34962,t),e.bufferData(34962,new Float32Array([-1,-1,0,3,-1,0,-1,3,0]),35044);let i=e.getAttribLocation(o,"aPosition");e.vertexAttribPointer(i,3,5126,!1,0,0),e.enableVertexAttribArray(i),e.clearColor(1,1,1,1),e.clear(16384),e.viewport(0,0,1,1),e.drawArrays(4,0,3);let a=new Uint8Array(4);return e.readPixels(0,0,1,1,6408,5121,a),e.deleteProgram(o),e.deleteBuffer(t),a.join("")}(e),i="801621810",a="8016218135",c="80162181161",l=(null==s?void 0:s.isIpad)?[["a7",c,12],["a8",a,15],["a8x",a,15],["a9",a,15],["a9x",a,15],["a10",a,15],["a10x",a,15],["a12",i,15],["a12x",i,15],["a12z",i,15],["a14",i,15],["a15",i,15],["m1",i,15],["m2",i,15]]:[["a7",c,12],["a8",a,12],["a9",a,15],["a10",a,15],["a11",i,15],["a12",i,15],["a13",i,15],["a14",i,15],["a15",i,15],["a16",i,15],["a17",i,15]];return"80162181255"===t?o=l.filter(([,,e])=>e>=14):(o=l.filter(([,e])=>e===t)).length||(o=l),o.map(([e])=>`apple ${e} gpu`)}(e,C,x):[C]}let b=(yield Promise.all(_.map(function(e){var n;return o(this,void 0,void 0,function*(){let r,o=(e=>{for(let n of x?["adreno","apple","mali-t","mali","nvidia","powervr","samsung"]:["intel","apple","amd","radeon","nvidia","geforce","adreno"])if(e.includes(n))return n})(e);if(!o)return;let t=`${x?"m":"d"}-${o}${h?"-ipad":""}.json`,i=g[t]=null!=(n=g[t])?n:y(t);try{r=yield i}catch(e){if(e instanceof c)throw e;return}let a=function(e){var n;let r=(e=e.replace(/\([^)]+\)/,"")).match(/\d+/)||e.match(/(\W|^)([A-Za-z]{1,3})(\W|$)/g);return null!=(n=null==r?void 0:r.join("").replace(/\W|amd/g,""))?n:""}(e),s=r.filter(([,e])=>e===a);s.length||(s=r.filter(([n])=>n.includes(e)));let v=s.length;if(0===v)return;let d=e.split(/[.,()\[\]/\s]/g).sort().filter((e,n,r)=>0===n||e!==r[n-1]).join(" "),f,[u,,,,P]=v>1?s.map(e=>[e,function(e,n){if(e===n)return 0;let r=e;e.length>n.length&&(e=n,n=r);let o=e.length,t=n.length;for(;o>0&&e.charCodeAt(~-o)===n.charCodeAt(~-t);)o--,t--;let i,a=0;for(;a<o&&e.charCodeAt(a)===n.charCodeAt(a);)a++;if(o-=a,t-=a,0===o)return t;let s,c,v=0,d=0,f=0;for(;d<o;)m[d]=e.charCodeAt(a+d),l[d]=++d;for(;f<t;)for(i=n.charCodeAt(a+f),s=f++,v=f,d=0;d<o;d++)c=i===m[d]?s:s+1,s=l[d],v=l[d]=s>v?c>v?v+1:c:c>s?s+1:c;return v}(d,e[2])]).sort(([,e],[,n])=>e-n)[0][0]:s[0],w=Number.MAX_VALUE,{devicePixelRatio:_}=window,S=p.width*_*p.height*_;for(let e of P){let[n,r]=e,o=Math.abs(S-n*r);o<w&&(w=o,f=e)}if(!f)return;let[,,C,b]=f;return[w,C,u,b]})}))).filter(v).sort(([e=Number.MAX_VALUE,n],[r=Number.MAX_VALUE,o])=>e===r?n-o:e-r);if(!b.length){let e=t.find(e=>P.includes(e));return e?w(0,"BLOCKLISTED",e):w(1,"FALLBACK",`${P} (${S})`)}let[,z,M,A]=b[0];if(-1===z)return w(0,"BLOCKLISTED",M,z,A);let F=x?e:n,E=0;for(let e=0;e<F.length;e++)z>=F[e]&&(E=e);return w(E,"BENCHMARK",M,z,A)}))().then(e=>{let{tier:r}=e;n(r),f(!1)})},[n]),{tier:e,loading:r}}},82433:(e,n,r)=>{r.r(n),r.d(n,{default:()=>m});var o=r(67002),t=r(77809),i=r(67445),a=r(16466),s=r(91173),c=r(31738);let l={scene1:{"/App.js":{code:'import { OrbitControls } from "@react-three/drei";\nimport { Canvas, useFrame } from "@react-three/fiber";\nimport { useMemo, useRef } from "react";\nimport { Color } from "three";\nimport \'./scene.css\';\n\nimport vertexShader from "!!raw-loader!./vertexShader.glsl";\nimport fragmentShader from "!!raw-loader!./fragmentShader.glsl";\n\nconst Flag = () => {\n // This reference will give us direct access to the mesh\n const mesh = useRef();\n\n return (\n <mesh ref={mesh} position={[0, 0, 0]} rotation={[-Math.PI / 2, 0, 0]} scale={1.5}>\n <planeGeometry args={[1, 1, 32, 32]} />\n <shaderMaterial\n fragmentShader={fragmentShader}\n vertexShader={vertexShader}\n wireframe\n />\n </mesh>\n );\n};\n\nconst Scene = () => {\n return (\n <Canvas camera={{ position: [1.0, 1.0, 1.0] }}>\n <Flag />\n <axesHelper />\n <OrbitControls />\n </Canvas>\n );\n};\n\n\nexport default Scene;\n'},"/vertexShader.glsl":{code:"\nvoid main() {\n vec4 modelPosition = modelMatrix * vec4(position, 1.0
1);\n modelPosition.y += sin(modelPosition.x * 4.0) * 0.2;\n\n vec4 viewPosition = viewMatrix * modelPosition;\n vec4 projectedPosition = projectionMatrix * viewPosition;\n\n gl_Position = projectedPosition;\n}\n",active:!0},"/fragmentShader.glsl":{code:"\nvoid main() {\n gl_FragColor = vec4(0.0, 0.3, 1.0, 1.0);\n}\n",hidden:!0}},scene2:{"/App.js":{code:'import { OrbitControls } from "@react-three/drei";\nimport { Canvas, useFrame } from "@react-three/fiber";\nimport { useMemo, useRef } from "react";\nimport { Color } from "three";\nimport \'./scene.css\';\n\nimport vertexShader from "!!raw-loader!./vertexShader.glsl";\nimport fragmentShader from "!!raw-loader!./fragmentShader.glsl";\n\nconst Fragment = () => {\n // This reference will give us direct access to the mesh\n const mesh = useRef();\n\n return (\n <mesh ref={mesh} position={[0, 0, 0]} scale={1.0}>\n <planeGeometry args={[1, 1, 32, 32]} />\n <shaderMaterial\n fragmentShader={fragmentShader}\n vertexShader={vertexShader}\n />\n </mesh>\n );\n};\n\nconst Scene = () => {\n return (\n <Canvas camera={{ position: [0.0, 0.0, 1.0] }}>\n <Fragment />\n <OrbitControls />\n </Canvas>\n );\n};\n\n\nexport default Scene;\n'},"/vertexShader.glsl":{code:"varying vec2 vUv;\n\nvoid main() {\n vUv = uv;\n vec4 modelPosition = modelMatrix * vec4(position, 1.0);\n vec4 viewPosition = viewMatrix * modelPosition;\n vec4 projectedPosition = projectionMatrix * viewPosition;\n\n gl_Position = projectedPosition;\n}\n"},"/fragmentShader.glsl":{code:'varying vec2 vUv;\n\nvec3 colorA = vec3(0.912,0.191,0.652);\nvec3 colorB = vec3(1.000,0.777,0.052);\n\nvoid main() {\n // "Normalizing" with an arbitrary value\n // We\'ll see a cleaner technique later :) \n vec2 normalizedPixel = gl_FragCoord.xy/600.0;\n vec3 color = mix(colorA, colorB, normalizedPixel.x);\n\n gl_FragColor = vec4(color,1.0);\n}\n',active:!0}},scene3:{"/App.js":{code:'import { OrbitControls } from "@react-three/drei";\nimport { Canvas, useFrame } from "@react-three/fiber";\nimport { useMemo, useRef } from "react";\nimport { Color } from "three";\nimport \'./scene.css\';\n\nimport vertexShader from "!!raw-loader!./vertexShader.glsl";\nimport fragmentShader from "!!raw-loader!./fragmentShader.glsl";\n\nconst MovingPlane = () => {\n // This reference will give us direct access to the mesh\n const mesh = useRef();\n\n const uniforms = useMemo(\n () =>
1 ({\n u_time: {\n value: 0.0,\n },\n }), []\n );\n\n useFrame((state) => {\n const { clock } = state;\n mesh.current.material.uniforms.u_time.value = clock.getElapsedTime();\n });\n\n return (\n <mesh ref={mesh} position={[0, 0, 0]} rotation={[-Math.PI / 2, 0, 0]} scale={1.5}>\n <planeGeometry args={[1, 1, 32, 32]} />\n <shaderMaterial\n fragmentShader={fragmentShader}\n vertexShader={vertexShader}\n uniforms={uniforms}\n wireframe\n />\n </mesh>\n );\n};\n\nconst Scene = () => {\n return (\n <Canvas camera={{ position: [1.0, 1.5, 1.0] }}>\n <MovingPlane />\n <axesHelper />\n <OrbitControls />\n </Canvas>\n );\n};\n\n\nexport default Scene;\n'},"/vertexShader.glsl":{code:"uniform float u_time;\n\nvarying vec2 vUv;\n\nvoid main() {\n vec4 modelPosition = modelMatrix * vec4(position, 1.0);\n modelPosition.y += sin(modelPosition.x * 4.0 + u_time * 2.0) * 0.2;\n \n // Uncomment the code and hit the refresh button below for a more complex effect \uD83E\uDE84\n // modelPosition.y += sin(modelPosition.z * 6.0 + u_time * 2.0) * 0.1;\n\n vec4 viewPosition = viewMatrix * modelPosition;\n vec4 projectedPosition = projectionMatrix * viewPosition;\n\n gl_Position = projectedPosition;\n}\n",active:!0},"/fragmentShader.glsl":{code:"varying vec2 vUv;\n\nvec3 colorA = vec3(0.008,0.895,0.940);\nvec3 colorB = vec3(0.129,0.299,1.000);\n\nvoid main() {\n vec2 normalizedPixel = gl_FragCoord.xy/500.0;\n vec3 color = mix(colorA, colorB, normalizedPixel.x);\n\n gl_FragColor = vec4(color,1.0);\n}\n",hidden:!0}},scene4:{"/App.js":{code:'import { OrbitControls } from "@react-three/drei";\nimport { Canvas, useFrame } from "@react-three/fiber";\nimport { useMemo, useRef } from "react";\nimport { Color } from "three";\nimport \'./scene.css\';\n\nimport vertexShader from "!!raw-loader!./vertexShader.glsl";\nimport fragmentShader from "!!raw-loader!./fragmentShader.glsl";\n\nconst MovingPlane = () => {\n // This reference will give us direct access to the mesh\n const mesh = useRef();\n\n return (\n <mesh ref={mesh} position={[0, 0, 0]} scale={1.0}>\n <planeGeometry args={[1, 1, 32, 32]} />\n <shaderMaterial\n fragmentShader={fragmentShader}\n vertexShader={vertexShader}\n />\n </mesh>\n );\n};\n\nconst Scene = () => {\n return (\n <Canvas camera={{ position: [0.0, 0.0, 1.0] }}>\n <MovingPlane />\n <OrbitControls />\n </Canvas>\n );\n};\n\n\nexport default Scene;\n'},"/vertexShader.glsl":{code:"varying vec2 vUv;\n\nvoid main() {\n vUv = uv;\n vec4 modelPosition = modelMatrix * vec4(position, 1.0);\n vec4 viewPosition = viewMatrix * modelPosition;\n vec4 projectedPosition = projectionMatrix * viewPosition;\n\n gl_Position = projectedPosition;\n}\n"},"/fragmentShader.glsl":{code:"varying vec2 vUv;\n\nvec3 colorA = vec3(0.912,0.191,0.652);\nvec3 colorB = vec3(1.000,0.777,0.052);\n\nvoid main() {\n vec3 color = mix(colorA, colorB, vUv.x);\n\n gl_FragColor = vec4(color,1.0);\n}\n",active:!0}},scene5:{"/App.js":{code:'import { Canvas, useFrame } from "@react-three/fiber";\nimport { useMemo, useRef } from "react";\nimport { Color } from "three";\nimport \'./scene.css\';\n\nimport vertexShader from "!!raw-loader!./vertexShader.glsl";\nimport fragmentShader from "!!raw-loader!./fragmentShader.glsl";\n\nconst MovingPlane = () => {\n // This reference will give us direct access to the mesh\n const mesh = useRef();\n\n const uniforms = useMemo(\n () =>
1 ({\n u_time: {\n value: 0.0,\n },\n u_colorA: { value: new Color("#FFE486") },\n u_colorB: { value: new Color("#FEB3D9") },\n }), []\n );\n\n useFrame((state) => {\n const { clock } = state;\n mesh.current.material.uniforms.u_time.value = clock.getElapsedTime();\n });\n\n return (\n <mesh ref={mesh} position={[0, 0, 0]} rotation={[-Math.PI / 2, 0, 0]} scale={1.5}>\n <planeGeometry args={[1, 1, 16, 16]} />\n <shaderMaterial\n fragmentShader={fragmentShader}\n vertexShader={vertexShader}\n uniforms={uniforms}\n wireframe={false}\n />\n </mesh>\n );\n};\n\nconst Scene = () => {\n return (\n <Canvas camera={{ position: [1.0, 1.0, 1.0] }}>\n <MovingPlane />\n </Canvas>\n );\n};\n\n\nexport default Scene;\n'},"/vertexShader.glsl":{code:"uniform float u_time;\n\nvarying float vZ;\n\nvoid main() {\n vec4 modelPosition = modelMatrix * vec4(position, 1.0);\n \n modelPosition.y += sin(modelPosition.x * 5.0 + u_time * 3.0) * 0.1;\n modelPosition.y += sin(modelPosition.z * 6.0 + u_time * 2.0) * 0.1;\n \n vZ = modelPosition.y;\n\n vec4 viewPosition = viewMatrix * modelPosition;\n vec4 projectedPosition = projectionMatrix * viewPosition;\n\n gl_Position = projectedPosition;\n}\n"},"/fragmentShader.glsl":{code:"uniform vec3 u_colorA;\nuniform vec3 u_colorB;\nvarying float vZ;\n\n\nvoid main() {\n vec3 color = mix(u_colorA, u_colorB, vZ * 2.0 + 0.5); \n gl_FragColor = vec4(color, 1.0);\n}\n"}},scene6:{"/App.js":{code:'import { OrbitControls } from "@react-three/drei";\nimport { Canvas, useFrame } from "@react-three/fiber";\nimport { useMemo, useRef } from "react";\nimport { MathUtils } from "three";\nimport \'./scene.css\';\n\nimport vertexShader from "!!raw-loader!./vertexShader.glsl";\nimport fragmentShader from "!!raw-loader!./fragmentShader.glsl";\n\nconst Blob = () => {\n // This reference will give us direct access to the mesh\n const mesh = useRef();\n const hover = useRef(false);\n\n const uniforms = useMemo(\n () => ({\n u_intensity: {\n value: 0.3,\n }
1,\n u_time: {\n value: 0.0,\n },\n }),\n []\n );\n\n useFrame((state) => {\n const { clock } = state;\n mesh.current.material.uniforms.u_time.value = 0.4 * clock.getElapsedTime();\n\n mesh.current.material.uniforms.u_intensity.value = MathUtils.lerp(\n mesh.current.material.uniforms.u_intensity.value,\n hover.current ? 0.85 : 0.15,\n 0.02\n );\n });\n\n return (\n <mesh\n ref={mesh}\n position={[0, 0, 0]}\n scale={1.5}\n onPointerOver={() => (hover.current = true)}\n onPointerOut={() => (hover.current = false)}\n >\n <icosahedronGeometry args={[2, 20]} />\n <shaderMaterial\n fragmentShader={fragmentShader}\n vertexShader={vertexShader}\n uniforms={uniforms}\n wireframe={false}\n />\n </mesh>\n );\n};\n\nconst Scene = () => {\n return (\n <Canvas camera={{ position: [0.0, 0.0, 8.0] }}>\n <Blob />\n <axesHelper />\n <OrbitControls />\n </Canvas>\n );\n};\n\nexport default Scene;\n'},"/vertexShader.glsl":{code:"uniform float u_intensity;\nuniform float u_time;\n\nvarying vec2 vUv;\nvarying float vDisplacement;\n\n".concat("\n// Classic Perlin 3D Noise \n// by Stefan Gustavson\n//\nvec4 permute(vec4 x) {\n return mod(((x*34.0)+1.0)*x, 289.0);\n}\n\nvec4 taylorInvSqrt(vec4 r) {\n return 1.79284291400159 - 0.85373472095314 * r;\n}\n\nvec3 fade(vec3 t) {\n return t*t*t*(t*(t*6.0-15.0)+10.0);\n}\n\nfloat cnoise(vec3 P) {\n vec3 Pi0 = floor(P); // Integer part for indexing\n vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1\n Pi0 = mod(Pi0, 289.0);\n Pi1 = mod(Pi1, 289.0);\n vec3 Pf0 = fract(P); // Fractional part for interpolation\n vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0\n vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);\n vec4 iy = vec4(Pi0.yy, Pi1.yy);\n vec4 iz0 = Pi0.zzzz;\n vec4 iz1 = Pi1.zzzz;\n\n vec4 ixy = permute(permute(ix) + iy);\n vec4 ixy0 = permute(ixy + iz0);\n vec4 ixy1 = permute(ixy + iz1);\n\n vec4 gx0 = ixy0 / 7.0;\n vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;\n gx0 = fract(gx0);\n vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);\n vec4 sz0 = step(gz0, vec4(0.0));\n gx0 -= sz0 * (step(0.0, gx0) - 0.5);\n gy0 -= sz0 * (step(0.0, gy0) - 0.5);\n\n vec4 gx1 = ixy1 / 7.0;\n vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;\n gx1 = fract(gx1);\n vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);\n vec4 sz1 = step(gz1, vec4(0.0));\n gx1 -= sz1 * (step(0.0, gx1) - 0.5);\n gy1 -= sz1 * (step(0.0, gy1) - 0.5);\n\n vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);\n vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);\n vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);\n vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);\n vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);\n vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);\n vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);\n vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);\n\n vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));\n g000 *= norm0.x;\n g010 *= norm0.y;\n g100 *= norm0.z;\n g110 *= norm0.w;\n vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));\n g001 *= norm1.x;\n g011 *= norm1.y;\n g101 *= norm1.z;\n g111 *= norm1.w;\n\n float n000 = dot(g000, Pf0);\n float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));\n float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));\n float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));\n float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));\n float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));\n float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));\n float n111 = dot(g111, Pf1);\n\n vec3 fade_xyz = fade(Pf0);\n vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);\n vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);\n float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); \n return 2.2 * n_xyz;\n}\n\n// End of Perlin Noise Code","\n\nvoid main() {\n vUv = uv;\n\n vDisplacement = cnoise(position + vec3(2.0 * u_time));\n\n vec3 newPosition = position + normal * (u_intensity * vDisplacement);
1\n\n vec4 modelPosition = modelMatrix * vec4(newPosition, 1.0);\n vec4 viewPosition = viewMatrix * modelPosition;\n vec4 projectedPosition = projectionMatrix * viewPosition;\n\n gl_Position = projectedPosition;\n}\n")},"/fragmentShader.glsl":{code:"uniform float u_intensity;\nuniform float u_time;\n\nvarying vec2 vUv;\nvarying float vDisplacement;\n\nvoid main() {\n float distort = 2.0 * vDisplacement * u_intensity;\n\n vec3 color = vec3(abs(vUv - 0.5) * 2.0 * (1.0 - distort), 1.0);\n \n gl_FragColor = vec4(color ,1.0);\n}\n"}},scene7:{"/App.js":{code:'import { OrbitControls } from "@react-three/drei";\nimport { Canvas, useFrame } from "@react-three/fiber";\nimport { useEffect, useMemo, useRef, useCallback } from "react";\nimport { Vector2, Color } from "three";\nimport \'./scene.css\';\n\nimport vertexShader from "!!raw-loader!./vertexShader.glsl";\nimport fragmentShader from "!!raw-loader!./fragmentShader.glsl";\n\nconst Gradient = () => {\n // This reference will give us direct access to the mesh\n const mesh = useRef();\n const mousePosition = useRef({ x: 0, y: 0 });\n\n const updateMousePosition = useCallback((e) => {\n mousePosition.current = { x: e.pageX, y: e.pageY };\n }, []);\n\n const uniforms = useMemo(\n () =>
1 ({\n u_time: {\n value: 0.0,\n },\n u_mouse: { value: new Vector2(0, 0) },\n u_bg: {\n value: new Color("#A1A3F7"),\n },\n u_colorA: { value: new Color("#9FBAF9") },\n u_colorB: { value: new Color("#FEB3D9") },\n }),\n []\n );\n\n useEffect(() => {\n window.addEventListener("mousemove", updateMousePosition, false);\n\n return () => {\n window.removeEventListener("mousemove", updateMousePosition, false);\n };\n }, [updateMousePosition]);\n\n useFrame((state) => {\n const { clock } = state;\n\n mesh.current.material.uniforms.u_time.value = clock.getElapsedTime();\n mesh.current.material.uniforms.u_mouse.value = new Vector2(\n mousePosition.current.x,\n mousePosition.current.y\n );\n });\n\n return (\n <mesh ref={mesh} position={[0, 0, 0]} scale={1.5}>\n <planeGeometry args={[1, 1, 32, 32]} />\n <shaderMaterial\n fragmentShader={fragmentShader}\n vertexShader={vertexShader}\n uniforms={uniforms}\n wireframe={false}\n />\n </mesh>\n );\n};\n\nconst Scene = () => {\n return (\n <Canvas camera={{ position: [0.0, 0.0, 1.5] }}>\n <Gradient />\n </Canvas>\n );\n};\n\nexport default Scene;\n'},"/vertexShader.glsl":{code:"varying vec2 vUv;\n\nvoid main() {\n vUv = uv;\n\n vec4 modelPosition = modelMatrix * vec4(position, 1.0);\n vec4 viewPosition = viewMatrix * modelPosition;\n vec4 projectedPosition = projectionMatrix * viewPosition;\n\n gl_Position = projectedPosition;\n}\n"},"/fragmentShader.glsl":{code:"uniform float u_time;\nuniform vec3 u_bg;\nuniform vec3 u_colorA;\nuniform vec3 u_colorB;\nuniform vec2 u_mouse;\n\nvarying vec2 vUv;\n\n".concat("//\n// Description : Array and textureless GLSL 2D simplex noise function.\n// Author : Ian McEwan, Ashima Arts.\n// Maintainer : ijm\n// Lastmod : 20110822 (ijm)\n// License : Copyright (C) 2011 Ashima Arts. All rights reserved.\n// Distributed under the MIT License. See LICENSE file.\n// https://github.com/ashima/webgl-noise\n//\n\n// https://github.com/hughsk/glsl-noise/blob/master/simplex/2d.glsl\n\nvec3 mod289(vec3 x) {\n return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec2 mod289(vec2 x) {\n return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec3 permute(vec3 x) {\n return mod289(((x*34.0)+1.0)*x);\n}\n\nfloat snoise(vec2 v)\n {\n const vec4 C = vec4(0.211324865405187, // (3.0-sqrt(3.0))/6.0\n 0.366025403784439, // 0.5*(sqrt(3.0)-1.0)\n -0.577350269189626, // -1.0 + 2.0 * C.x\n 0.024390243902439); // 1.0 / 41.0\n// First corner\n vec2 i = floor(v + dot(v, C.yy) );\n vec2 x0 = v - i + dot(i, C.xx);\n\n// Other corners\n vec2 i1;\n //i1.x = step( x0.y, x0.x ); // x0.x > x0.y ? 1.0 : 0.0\n //i1.y = 1.0 - i1.x;\n i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n // x0 = x0 - 0.0 + 0.0 * C.xx ;\n // x1 = x0 - i1 + 1.0 * C.xx ;\n // x2 = x0 - 1.0 + 2.0 * C.xx ;\n vec4 x12 = x0.xyxy + C.xxzz;\n x12.xy -= i1;\n\n// Permutations\n i = mod289(i); // Avoid truncation effects in permutation\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\n vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);\n m = m*m ;\n m = m*m ;\n\n// Gradients: 41 points uniformly over a line, mapped onto a diamond.\n// The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287)\n\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\n// Normalise gradients implicitly by scaling m\n// Approximation of: m *= inversesqrt( a0*a0 + h*h );\n m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );\n\n// Compute final noise value at P\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// End of Simplex Noise Code\n","\n\nvoid main() {\n vec3 color = u_bg;\n\n float noise1 = snoise(vUv + u_time * (sin(u_mouse.x * 0.001) + 0.2));\n float noise2 = snoise(vUv + u_time * (sin(u_mouse.y * 0.001) + 0.2));\n\n color = mix(color, u_colorA, noise1);\n color = mix(color, u_colorB, noise2);\n \n gl_FragColor = vec4(color ,1.0);\n}\n")}},scene8:{"/App.js":{code:'import { OrbitControls } from "@react-three/drei";\nimport { Canvas, useFrame, extend } from "@react-three/fiber";\nimport { LayerMaterial, Depth, Fresnel } from "lamina";\nimport { useMemo, useRef } from "react";\nimport \'./scene.css\';\n\nimport CustomLayer from \'./CustomLayer\';\n\nextend({ CustomLayer });\n\nconst Planet = () => {\n const materialRef = useRef();\n\n useFrame((state) => {\n const { clock } = state;\n materialRef.current.time = clock.getElapsedTime();\n });\n\n return (\n <mesh position={[0, 0, 0]} rotation={[0, Math.PI, 0]} scale={1.5}>\n <icosahedronGeometry args={[2, 11]} />\n <LayerMaterial lighting="lambert">\n {/* First layer is our own custom layer that\'s based of the FBM shader */}\n {/* \n Notice how we can use *any* uniforms as prop here \uD83D\uDC47\n You can tweak the colors by adding a colorA or colorB prop!\n */}\n <customLayer ref={materialRef} time={0.0} lacunarity={2.3} />\n {/* Second layer is a depth based gradient that we "add" on top of our custom layer*/}
1\n <Depth colorA="blue" colorB="aqua" alpha={0.9} mode="add" />\n {/* Third Layer is a Fresnel shading effect that we add on*/}\n <Fresnel color="#FEB3D9" mode="add" />\n </LayerMaterial>\n </mesh>\n );\n};\n\nconst Scene = () => {\n return (\n <Canvas camera={{ position: [0.0, 0.0, 8.0] }}>\n <ambientLight intensity={0.03} />\n <directionalLight position={[0.3, 0.15, 0.0]} intensity={2} />\n <Planet />\n <OrbitControls />\n </Canvas>\n );\n};\n\nexport default Scene;\n'},"/CustomLayer.js":{code:'\nimport { Abstract } from "lamina/vanilla";\n\nclass CustomLayer extends Abstract {\n // Define stuff as static properties!\n\n // Uniforms: Must begin with prefix "u_".\n // Assign them their default value.\n // Any unifroms here will automatically be set as properties on the class as setters and getters.\n // There setters and getters will update the underlying unifrom.\n static u_colorA = "#124dd8";\n static u_colorB = "#2bffe7";\n static u_cloudTint = "#001741";\n static u_gain = 0.5;\n static u_lacunarity = 2.0;\n static u_time = 0.0;\n\n // Define your fragment shader just like you already do!\n // Only difference is, you must return the final color of this layer\n static fragmentShader = ` \n uniform float u_time;\n uniform float u_lacunarity;\n uniform float u_gain;\n uniform vec3 u_colorA;\n uniform vec3 u_colorB;\n uniform vec3 u_cloudTint;\n\n varying vec2 v_Uv;\n\n vec4 mod289(vec4 x)\n {\n return x - floor(x * (1.0 / 289.0)) * 289.0;\n }\n \n vec4 permute(vec4 x)\n {\n return mod289(((x*34.0)+1.0)*x);\n }\n \n vec4 taylorInvSqrt(vec4 r)\n {\n return 1.79284291400159 - 0.85373472095314 * r;\n }\n \n vec2 fade(vec2 t) {\n return t*t*t*(t*(t*6.0-15.0)+10.0);\n }\n \n // Classic Perlin noise\n float cnoise(vec2 P)\n {\n vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);\n vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);\n Pi = mod289(Pi); // To avoid truncation effects in permutation\n vec4 ix = Pi.xzxz;\n vec4 iy = Pi.yyww;\n vec4 fx = Pf.xzxz;\n vec4 fy = Pf.yyww;\n \n vec4 i = permute(permute(ix) + iy);\n \n vec4 gx = fract(i * (1.0 / 41.0)) * 2.0 - 1.0 ;\n vec4 gy = abs(gx) - 0.5 ;\n vec4 tx = floor(gx + 0.5);\n gx = gx - tx;\n \n vec2 g00 = vec2(gx.x,gy.x);\n vec2 g10 = vec2(gx.y,gy.y);\n vec2 g01 = vec2(gx.z,gy.z);\n vec2 g11 = vec2(gx.w,gy.w);\n \n vec4 norm = taylorInvSqrt(vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11)));\n g00 *= norm.x;\n g01 *= norm.y;\n g10 *= norm.z;\n g11 *= norm.w;\n \n float n00 = dot(g00, vec2(fx.x, fy.x));\n float n10 = dot(g10, vec2(fx.y, fy.y));\n float n01 = dot(g01, vec2(fx.z, fy.z));\n float n11 = dot(g11, vec2(fx.w, fy.w));\n \n vec2 fade_xy = fade(Pf.xy);\n vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);\n float n_xy = mix(n_x.x, n_x.y, fade_xy.y);\n return 2.3 * n_xy;\n }\n\n float fbm(vec2 st) {\n const int OCTAVES = 5;\n // Initial values\n float value = 0.0;\n float amplitude = 0.6;\n // float frequency = 0.5;\n // Loop of octaves\n for (int i = 0; i < OCTAVES; i++) {\n value += amplitude * abs(cnoise(st));\n st *= u_lacunarity;\n amplitude *= u_gain;\n }\n return value;\n}\n \n void main() {\n vec3 f_color = vec3(0.0);\n vec2 st = v_Uv * 0.250;\n float speed = 0.1;\n float f_time = u_time * speed;\n\n vec2 q = vec2(0.);\n q.x = fbm( st + 0.00 * f_time);\n q.y = fbm( st + vec2(1.0));\n\n vec2 r = vec2(0.);\n r.x = fbm( st + 1.0 * q + vec2(1.7,9.2)+ 0.15 * f_time );\n r.y = fbm( st + 1.0 * q + vec2(8.3,2.8)+ 0.126 * f_time);\n\n float f = fbm(st+r);\n\n f_color = mix(vec3(u_colorA),\n vec3(u_colorB),\n clamp((f*f)*4.0,0.0,1.0));\n\n f_color = mix(f_color,\n u_cloudTint,\n clamp(length(q),0.0,1.0));\n\n f_color *= mix(f_color,\n u_colorA,\n clamp(length(r.x),0.0,1.0));\n\n\n vec4 f_colorfrag = vec4(f_color,1.0);\n return f_colorfrag;\n }\n `;\n\n // Optionally Define a vertex shader!\n // Same rules as fragment shaders, except no blend modes.\n // Return a non-projected vec3 position.\n static vertexShader = ` \n varying vec2 v_Uv;\n\n void main() {\n v_Uv = uv;\n return position;\n }\n `;\n\n constructor(props) {\n // You MUST call \'super\' with the current constructor as the first argument.\n // Second argument is optional and provides non-uniform parameters like blend mode, name and visibility.\n super(CustomLayer, {\n name: "CustomLayer",\n ...props,\n });\n }\n}\n\nexport default CustomLayer;\n'}}},m=e=>{let{scene:n}=e,r=(0,a.useRef)(null),m=(0,i.W)(r),{tier:v,loading:d}=(0,c.A)();return(0,o.jsx)(t.a,{ref:r,children:m&&!d?(0,o.jsx)(s.A,{autorun:v>2,template:"react",dependencies:{"@react-three/drei":"9.11.3","@react-three/fiber"
1:"8.0.20",lamina:"1.1.20",three:"0.142.0"},files:{...l[n],"/scene.css":{code:"\nhtml {\n background: black;\n}\n\ncanvas {\n width: 100vw;\n height: 100vh;\n}",hidden:!0}}}):(0,o.jsx)(t.a,{css:{height:"620px"}})})}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.