├── debug.log ├── babel.config.js ├── src ├── shaders │ ├── noiseMarble │ │ ├── vertexTop.glsl │ │ ├── fragment.glsl │ │ ├── vertexMain.glsl │ │ ├── fragmentColor.glsl │ │ ├── fragmentTop.glsl │ │ └── fragmentMain.glsl │ ├── floatBubbles │ │ └── vertex │ │ │ ├── noise.glsl │ │ │ ├── uniforms.glsl │ │ │ └── vertex.glsl │ ├── hyperbolicHelicoid │ │ ├── function │ │ │ └── fragment.glsl │ │ └── color │ │ │ └── fragment.glsl │ ├── modules │ │ ├── SineEggCarton.glsl │ │ ├── blackAndWhite.glsl │ │ ├── invert.glsl │ │ ├── diffuse.glsl │ │ ├── circle.glsl │ │ ├── roundedBoxNormal.glsl │ │ ├── sdRoundBox.glsl │ │ ├── hash.glsl │ │ ├── centerUv.glsl │ │ ├── getWorldNormal.glsl │ │ ├── fresnel.glsl │ │ ├── twist.glsl │ │ ├── qinticInOutAbs.glsl │ │ ├── getNDC.glsl │ │ ├── orthogonal.glsl │ │ ├── hash22.glsl │ │ ├── getRayDirection.glsl │ │ ├── getWorldPosition.glsl │ │ ├── rotateByOrigin.glsl │ │ ├── setCamera.glsl │ │ ├── computeNormal.glsl │ │ ├── edgeFactorTri.glsl │ │ ├── sdEquilateralTriangle.glsl │ │ ├── getEyeVector.glsl │ │ ├── deformationCurve.glsl │ │ ├── firePalette.glsl │ │ ├── RGBShift.glsl │ │ ├── getScatter.glsl │ │ ├── fixNormal.glsl │ │ ├── capIntersect.glsl │ │ ├── curlNoise.glsl │ │ ├── readDepth.glsl │ │ └── roundedboxIntersectModified.glsl │ ├── shapeTransition │ │ ├── fragment.glsl │ │ └── vertex.glsl │ ├── texProjection │ │ ├── vertex.glsl │ │ └── fragment.glsl │ ├── transmissionMaterial │ │ ├── vertex.glsl │ │ └── fragment.glsl │ ├── templateParticle │ │ ├── fragment.glsl │ │ └── vertex.glsl │ ├── FBOParticles │ │ ├── basic │ │ │ ├── fragment.glsl │ │ │ └── vertex.glsl │ │ └── gpu │ │ │ └── fragment.glsl │ ├── shoeConfig │ │ ├── fragment.glsl │ │ └── vertex.glsl │ ├── template │ │ ├── fragment.glsl │ │ └── vertex.glsl │ ├── timeTravel │ │ ├── fragment.glsl │ │ └── vertex.glsl │ ├── dominosEffect │ │ ├── fragment.glsl │ │ └── vertex.glsl │ ├── lineWave │ │ ├── fragment.glsl │ │ └── vertex.glsl │ ├── bouncyBalloon │ │ ├── fragment.glsl │ │ └── vertex.glsl │ ├── wavinFlag │ │ ├── fragment.glsl │ │ └── vertex.glsl │ ├── floatPaper │ │ ├── postprocessing │ │ │ ├── fragment.glsl │ │ │ └── vertex.glsl │ │ └── main │ │ │ ├── fragment.glsl │ │ │ └── vertex.glsl │ ├── gooeyImage │ │ ├── postprocessing │ │ │ ├── fragment.glsl │ │ │ └── vertex.glsl │ │ └── main │ │ │ ├── vertex.glsl │ │ │ └── fragment.glsl │ ├── imageCloth │ │ ├── postprocessing │ │ │ ├── fragment.glsl │ │ │ └── vertex.glsl │ │ └── main │ │ │ ├── fragment.glsl │ │ │ └── vertex.glsl │ ├── imagePlane │ │ ├── postprocessing │ │ │ ├── fragment.glsl │ │ │ └── vertex.glsl │ │ └── main │ │ │ ├── fragment.glsl │ │ │ └── vertex.glsl │ ├── nakedEye │ │ ├── vertex.glsl │ │ └── fragment.glsl │ ├── templatePostprocessing │ │ ├── fragment.glsl │ │ └── vertex.glsl │ ├── imageRipple │ │ ├── postprocessing │ │ │ ├── fragment.glsl │ │ │ └── vertex.glsl │ │ └── main │ │ │ ├── fragment.glsl │ │ │ └── vertex.glsl │ ├── rayMarching │ │ └── vertex.glsl │ ├── unrollImages │ │ ├── postprocessing │ │ │ ├── fragment.glsl │ │ │ └── vertex.glsl │ │ └── main │ │ │ └── fragment.glsl │ ├── DNAParticle │ │ ├── ca │ │ │ ├── vertex.glsl │ │ │ └── fragment.glsl │ │ └── main │ │ │ ├── vertex.glsl │ │ │ └── fragment.glsl │ ├── leanGallery │ │ ├── postprocessing │ │ │ ├── vertex.glsl │ │ │ └── fragment.glsl │ │ └── main │ │ │ ├── fragment.glsl │ │ │ └── vertex.glsl │ ├── pixelRiver │ │ ├── postprocessing │ │ │ ├── vertex.glsl │ │ │ └── fragment.glsl │ │ └── main │ │ │ ├── fragment.glsl │ │ │ └── vertex.glsl │ ├── twistedShape │ │ ├── fragment.glsl │ │ └── vertex.glsl │ ├── distortImage │ │ ├── postprocessing │ │ │ ├── noise │ │ │ │ ├── vertex.glsl │ │ │ │ └── fragment.glsl │ │ │ ├── default │ │ │ │ ├── vertex.glsl │ │ │ │ └── fragment.glsl │ │ │ └── scroll │ │ │ │ ├── vertex.glsl │ │ │ │ └── fragment.glsl │ │ └── main │ │ │ ├── hoverwave │ │ │ ├── vertex.glsl │ │ │ └── fragment.glsl │ │ │ ├── mousewave │ │ │ ├── fragment.glsl │ │ │ └── vertex.glsl │ │ │ └── twist │ │ │ ├── vertex.glsl │ │ │ └── fragment.glsl │ ├── gridIcosahedron │ │ ├── postprocessing │ │ │ ├── vertex.glsl │ │ │ └── fragment.glsl │ │ ├── edge │ │ │ ├── fragment.glsl │ │ │ └── vertex.glsl │ │ └── shape │ │ │ ├── vertex.glsl │ │ │ └── fragment.glsl │ ├── twistedGallery │ │ ├── postprocessing │ │ │ ├── vertex.glsl │ │ │ └── fragment.glsl │ │ └── main │ │ │ ├── fragment.glsl │ │ │ └── vertex.glsl │ ├── particleExplode │ │ ├── fragment.glsl │ │ └── vertex.glsl │ ├── cloudySky │ │ ├── vertex.glsl │ │ └── fragment.glsl │ ├── noiseWave │ │ ├── vertex.glsl │ │ └── fragment.glsl │ ├── rayTracing │ │ └── vertex.glsl │ ├── simpleFBM │ │ ├── vertex.glsl │ │ └── fragment.glsl │ ├── sun │ │ ├── noise │ │ │ ├── vertex.glsl │ │ │ └── fragment.glsl │ │ ├── ring │ │ │ ├── vertex.glsl │ │ │ └── fragment.glsl │ │ └── shape │ │ │ ├── fragment.glsl │ │ │ └── vertex.glsl │ ├── vueLogo │ │ ├── vertex.glsl │ │ └── fragment.glsl │ ├── rayMarchingBall │ │ └── vertex.glsl │ ├── rayMarchingFire │ │ └── vertex.glsl │ ├── cylinderOrbitText │ │ ├── vertex.glsl │ │ └── fragment.glsl │ ├── kineticText │ │ ├── cylinder │ │ │ ├── vertex.glsl │ │ │ └── fragment.glsl │ │ ├── sphere │ │ │ ├── vertex.glsl │ │ │ └── fragment.glsl │ │ ├── torus │ │ │ ├── vertex.glsl │ │ │ └── fragment.glsl │ │ ├── torusKnot │ │ │ ├── vertex.glsl │ │ │ └── fragment.glsl │ │ └── plane │ │ │ ├── vertex.glsl │ │ │ └── fragment.glsl │ ├── templateRayMarching │ │ └── vertex.glsl │ ├── rayMarchingPlayground │ │ └── vertex.glsl │ ├── travellingParticles │ │ ├── fragment.glsl │ │ └── vertex.glsl │ ├── morphParticles │ │ ├── fragment.glsl │ │ └── vertex.glsl │ ├── particleShape │ │ ├── fragment.glsl │ │ └── vertex.glsl │ ├── twistedColorfulSphere │ │ ├── fragment.glsl │ │ └── vertex.glsl │ ├── curlTube │ │ ├── vertex.glsl │ │ └── fragment.glsl │ ├── waveCloth │ │ ├── fragment.glsl │ │ └── vertex.glsl │ ├── spikyBlob │ │ ├── fragment.glsl │ │ └── vertex.glsl │ ├── noiseMaterial │ │ ├── vertex.glsl │ │ └── fragment.glsl │ ├── thousandFollow │ │ ├── vertex.glsl │ │ └── fragment.glsl │ └── liquidCrystal │ │ └── fragment.glsl ├── types │ ├── global.d.ts │ └── index.d.ts ├── consts │ ├── DNAParticle.ts │ ├── FBOParticles.ts │ ├── lineWave.ts │ ├── shoeConfig.ts │ ├── texProjection.ts │ ├── timeTravel.ts │ ├── wavingFlag.ts │ ├── rayMarching.ts │ ├── glitchImage.ts │ ├── distortImage.ts │ ├── gridIcosahedron.ts │ ├── noiseMaterial.ts │ ├── kineticText.ts │ ├── cylinderOrbitText.ts │ ├── transmissionMaterial.ts │ ├── nakedEye.ts │ ├── hyperbolicHelicoid.ts │ ├── menu.ts │ ├── floatBubbles.ts │ ├── floatWorld.ts │ ├── thousandFollow.ts │ ├── sunshineSimulation.ts │ ├── bellStrike.ts │ └── noiseMarble.ts ├── assets │ ├── bell-strike │ │ ├── bg.png │ │ ├── hint.png │ │ └── loading.gif │ ├── lean-gallery │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ └── 4.jpg │ ├── panorama │ │ ├── logo.png │ │ ├── hotspot │ │ │ ├── up.png │ │ │ ├── down.png │ │ │ ├── left.png │ │ │ ├── point.png │ │ │ ├── right.png │ │ │ └── right-2.png │ │ ├── textures │ │ │ ├── cf.jpg │ │ │ ├── ct.jpg │ │ │ ├── cw.jpg │ │ │ ├── cw2.jpg │ │ │ ├── etf.jpg │ │ │ ├── gd.jpg │ │ │ ├── kt.jpg │ │ │ ├── rh.jpg │ │ │ ├── yt.jpg │ │ │ ├── zw.jpg │ │ │ ├── zw2.jpg │ │ │ └── zwymj.jpg │ │ └── thumbs │ │ │ ├── ciwei.jpg │ │ │ ├── ciwo.jpg │ │ │ ├── guodao.jpg │ │ │ ├── keting.jpg │ │ │ ├── ruhu.jpg │ │ │ ├── zhuwei.jpg │ │ │ ├── zhuwo.jpg │ │ │ ├── canting.jpg │ │ │ ├── chufang.jpg │ │ │ ├── yangtai.jpg │ │ │ ├── ertongfang.jpg │ │ │ └── zhuwoyimaojian.jpg │ ├── pixel-river │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ ├── 7.jpg │ │ ├── 8.jpg │ │ └── 9.jpg │ ├── distort-image │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── ocean.jpg │ │ ├── header.jpg │ │ └── header1.jpg │ ├── twisted-gallery │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ └── 6.jpg │ ├── wave-cloth │ │ └── logo.jpg │ └── particle-explode │ │ └── 1.jpg ├── shims-vue.d.ts ├── views │ ├── NotFound.vue │ ├── Sun.vue │ ├── Base.vue │ ├── VueLogo.vue │ ├── CurlTube.vue │ ├── LineWave.vue │ ├── NakedEye.vue │ ├── CloudySky.vue │ ├── NoiseWave.vue │ ├── SimpleFBM.vue │ ├── SpikyBlob.vue │ ├── Template.vue │ ├── RayTracing.vue │ ├── TimeTravel.vue │ ├── CurveRacing.vue │ ├── FloatBubbles.vue │ ├── KineticText.vue │ ├── FBOParticles.vue │ ├── NoiseMarble.vue │ ├── RayMarching.vue │ ├── TwistedShape.vue │ ├── DNAParticle.vue │ ├── GridWave.vue │ ├── LiquidCrystal.vue │ ├── ParticleShape.vue │ ├── DominosEffect.vue │ ├── NoiseMaterial.vue │ ├── Buildings.vue │ ├── ThousandFollow.vue │ ├── MorphParticles.vue │ ├── TexProjection.vue │ ├── WavinFlag.vue │ ├── GridIcosahedron.vue │ ├── RayMarchingBall.vue │ ├── RayMarchingFire.vue │ ├── ShapeTransition.vue │ ├── BouncyBalloon.vue │ ├── FloatWorld.vue │ ├── CylinderOrbitText.vue │ ├── HyperbolicHelicoid.vue │ ├── TwistedColorfulSphere.vue │ ├── RayMarchingPlayground.vue │ ├── TransmissionMaterial.vue │ ├── ParticleExplode.vue │ ├── GooeyImage.vue │ ├── ImageCloth.vue │ ├── Menu.vue │ ├── FloatPaper.vue │ ├── ImagePlane.vue │ ├── ImageRipple.vue │ ├── DistortImage.vue │ ├── PixelRiver.vue │ ├── UnrollImages.vue │ └── LeanGallery.vue ├── main.ts ├── templates │ ├── vertexShader.hbs │ ├── fragmentShader.hbs │ └── view.hbs ├── utils │ ├── alert.ts │ ├── parametric.ts │ ├── noise.ts │ ├── timer.ts │ └── math.ts ├── scenes │ ├── panorama.ts │ └── shoeConfig.ts ├── components │ ├── NavBar.vue │ └── NavMenu.vue └── hooks │ └── useDialog.ts ├── public ├── static │ ├── audios │ │ └── bell.mp3 │ ├── cubemap │ │ ├── nx.png │ │ ├── ny.png │ │ ├── nz.png │ │ ├── px.png │ │ ├── py.png │ │ └── pz.png │ ├── hdrs │ │ ├── orbita.hdr │ │ └── warehouse.hdr │ ├── models │ │ ├── dna.glb │ │ ├── face.glb │ │ ├── cloud.fbx │ │ └── shoe-draco.glb │ ├── noisemaps │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ ├── 6.png │ │ ├── 7.png │ │ ├── 8.png │ │ ├── 9.png │ │ ├── 1.jpeg │ │ └── 5.jpeg │ ├── textures │ │ ├── bg.jpg │ │ ├── uv.jpg │ │ ├── bell.jpg │ │ ├── bump.jpg │ │ ├── dog.jpg │ │ ├── mount.jpg │ │ ├── noise.png │ │ ├── ocean.jpg │ │ ├── plane.jpg │ │ ├── ruin.jpg │ │ ├── sky.jpg │ │ ├── wood.jpg │ │ ├── normal.jpg │ │ ├── sci-fi.png │ │ ├── flag-china.jpg │ │ ├── matcap-1.png │ │ ├── matcap-2.png │ │ ├── matcap-3.png │ │ ├── sci-fi-2.png │ │ ├── mount_depth.png │ │ └── perlin-noise.png │ ├── draco │ │ ├── draco_decoder.wasm │ │ ├── gltf │ │ │ └── draco_decoder.wasm │ │ └── README.md │ └── bmfonts │ │ └── OpenSans-SemiBold.png └── index.html ├── .gitignore ├── vue.config.js ├── README.md ├── tsconfig.json └── plopfile.js /debug.log: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/debug.log -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/cli-plugin-babel/preset"] 3 | }; 4 | -------------------------------------------------------------------------------- /src/shaders/noiseMarble/vertexTop.glsl: -------------------------------------------------------------------------------- 1 | varying vec3 vPosition; 2 | varying vec3 vDirection; -------------------------------------------------------------------------------- /src/shaders/floatBubbles/vertex/noise.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:snoise=require(glsl-noise/simplex/3d) -------------------------------------------------------------------------------- /src/shaders/noiseMarble/fragment.glsl: -------------------------------------------------------------------------------- 1 | vec3 result=vNormal*.5+.5; 2 | vec4 diffuseColor=vec4(result,1.); -------------------------------------------------------------------------------- /src/types/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.glsl"; 2 | 3 | declare module "nice-color-palettes"; 4 | -------------------------------------------------------------------------------- /src/shaders/noiseMarble/vertexMain.glsl: -------------------------------------------------------------------------------- 1 | vPosition=position; 2 | vDirection=position-cameraPosition; 3 | -------------------------------------------------------------------------------- /src/consts/DNAParticle.ts: -------------------------------------------------------------------------------- 1 | const DNAModelUrl = "./static/models/dna.glb"; 2 | 3 | export { DNAModelUrl }; 4 | -------------------------------------------------------------------------------- /src/consts/FBOParticles.ts: -------------------------------------------------------------------------------- 1 | const faceModelUrl = "./static/models/face.glb"; 2 | 3 | export { faceModelUrl }; 4 | -------------------------------------------------------------------------------- /src/consts/lineWave.ts: -------------------------------------------------------------------------------- 1 | const faceModelUrl = "./static/models/face.glb"; 2 | 3 | export { faceModelUrl }; 4 | -------------------------------------------------------------------------------- /src/consts/shoeConfig.ts: -------------------------------------------------------------------------------- 1 | const shoeModelUrl = "./static/models/shoe-draco.glb"; 2 | 3 | export { shoeModelUrl }; 4 | -------------------------------------------------------------------------------- /public/static/audios/bell.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/audios/bell.mp3 -------------------------------------------------------------------------------- /public/static/cubemap/nx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/cubemap/nx.png -------------------------------------------------------------------------------- /public/static/cubemap/ny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/cubemap/ny.png -------------------------------------------------------------------------------- /public/static/cubemap/nz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/cubemap/nz.png -------------------------------------------------------------------------------- /public/static/cubemap/px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/cubemap/px.png -------------------------------------------------------------------------------- /public/static/cubemap/py.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/cubemap/py.png -------------------------------------------------------------------------------- /public/static/cubemap/pz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/cubemap/pz.png -------------------------------------------------------------------------------- /public/static/hdrs/orbita.hdr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/hdrs/orbita.hdr -------------------------------------------------------------------------------- /public/static/models/dna.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/models/dna.glb -------------------------------------------------------------------------------- /public/static/models/face.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/models/face.glb -------------------------------------------------------------------------------- /public/static/noisemaps/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/noisemaps/2.png -------------------------------------------------------------------------------- /public/static/noisemaps/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/noisemaps/3.png -------------------------------------------------------------------------------- /public/static/noisemaps/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/noisemaps/4.png -------------------------------------------------------------------------------- /public/static/noisemaps/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/noisemaps/6.png -------------------------------------------------------------------------------- /public/static/noisemaps/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/noisemaps/7.png -------------------------------------------------------------------------------- /public/static/noisemaps/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/noisemaps/8.png -------------------------------------------------------------------------------- /public/static/noisemaps/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/noisemaps/9.png -------------------------------------------------------------------------------- /public/static/textures/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/textures/bg.jpg -------------------------------------------------------------------------------- /public/static/textures/uv.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/textures/uv.jpg -------------------------------------------------------------------------------- /src/assets/bell-strike/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/bell-strike/bg.png -------------------------------------------------------------------------------- /src/assets/lean-gallery/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/lean-gallery/1.jpg -------------------------------------------------------------------------------- /src/assets/lean-gallery/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/lean-gallery/2.jpg -------------------------------------------------------------------------------- /src/assets/lean-gallery/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/lean-gallery/3.jpg -------------------------------------------------------------------------------- /src/assets/lean-gallery/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/lean-gallery/4.jpg -------------------------------------------------------------------------------- /src/assets/panorama/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/logo.png -------------------------------------------------------------------------------- /src/assets/pixel-river/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/pixel-river/1.jpg -------------------------------------------------------------------------------- /src/assets/pixel-river/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/pixel-river/2.jpg -------------------------------------------------------------------------------- /src/assets/pixel-river/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/pixel-river/3.jpg -------------------------------------------------------------------------------- /src/assets/pixel-river/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/pixel-river/4.jpg -------------------------------------------------------------------------------- /src/assets/pixel-river/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/pixel-river/5.jpg -------------------------------------------------------------------------------- /src/assets/pixel-river/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/pixel-river/6.jpg -------------------------------------------------------------------------------- /src/assets/pixel-river/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/pixel-river/7.jpg -------------------------------------------------------------------------------- /src/assets/pixel-river/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/pixel-river/8.jpg -------------------------------------------------------------------------------- /src/assets/pixel-river/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/pixel-river/9.jpg -------------------------------------------------------------------------------- /src/consts/texProjection.ts: -------------------------------------------------------------------------------- 1 | const projectTexUrl = "./static/textures/ocean.jpg"; 2 | 3 | export { projectTexUrl }; 4 | -------------------------------------------------------------------------------- /src/consts/timeTravel.ts: -------------------------------------------------------------------------------- 1 | const tunnelTexture = "./static/textures/sci-fi.png"; 2 | 3 | export { tunnelTexture }; 4 | -------------------------------------------------------------------------------- /src/consts/wavingFlag.ts: -------------------------------------------------------------------------------- 1 | const flagTextureUrl = "./static/textures/flag-china.jpg"; 2 | 3 | export { flagTextureUrl }; 4 | -------------------------------------------------------------------------------- /public/static/hdrs/warehouse.hdr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/hdrs/warehouse.hdr -------------------------------------------------------------------------------- /public/static/models/cloud.fbx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/models/cloud.fbx -------------------------------------------------------------------------------- /public/static/noisemaps/1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/noisemaps/1.jpeg -------------------------------------------------------------------------------- /public/static/noisemaps/5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/noisemaps/5.jpeg -------------------------------------------------------------------------------- /public/static/textures/bell.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/textures/bell.jpg -------------------------------------------------------------------------------- /public/static/textures/bump.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/textures/bump.jpg -------------------------------------------------------------------------------- /public/static/textures/dog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/textures/dog.jpg -------------------------------------------------------------------------------- /public/static/textures/mount.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/textures/mount.jpg -------------------------------------------------------------------------------- /public/static/textures/noise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/textures/noise.png -------------------------------------------------------------------------------- /public/static/textures/ocean.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/textures/ocean.jpg -------------------------------------------------------------------------------- /public/static/textures/plane.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/textures/plane.jpg -------------------------------------------------------------------------------- /public/static/textures/ruin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/textures/ruin.jpg -------------------------------------------------------------------------------- /public/static/textures/sky.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/textures/sky.jpg -------------------------------------------------------------------------------- /public/static/textures/wood.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/textures/wood.jpg -------------------------------------------------------------------------------- /src/assets/bell-strike/hint.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/bell-strike/hint.png -------------------------------------------------------------------------------- /src/assets/distort-image/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/distort-image/1.jpg -------------------------------------------------------------------------------- /src/assets/distort-image/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/distort-image/2.jpg -------------------------------------------------------------------------------- /src/assets/distort-image/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/distort-image/3.jpg -------------------------------------------------------------------------------- /src/assets/distort-image/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/distort-image/4.jpg -------------------------------------------------------------------------------- /src/assets/twisted-gallery/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/twisted-gallery/1.jpg -------------------------------------------------------------------------------- /src/assets/twisted-gallery/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/twisted-gallery/2.jpg -------------------------------------------------------------------------------- /src/assets/twisted-gallery/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/twisted-gallery/3.jpg -------------------------------------------------------------------------------- /src/assets/twisted-gallery/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/twisted-gallery/4.jpg -------------------------------------------------------------------------------- /src/assets/twisted-gallery/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/twisted-gallery/5.jpg -------------------------------------------------------------------------------- /src/assets/twisted-gallery/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/twisted-gallery/6.jpg -------------------------------------------------------------------------------- /src/assets/wave-cloth/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/wave-cloth/logo.jpg -------------------------------------------------------------------------------- /src/consts/rayMarching.ts: -------------------------------------------------------------------------------- 1 | const matcapTextureUrl = "./static/textures/matcap-1.png"; 2 | 3 | export { matcapTextureUrl }; 4 | -------------------------------------------------------------------------------- /src/shaders/hyperbolicHelicoid/function/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform sampler2D uTexture; 2 | 3 | #pragma glslify:matcap=require(matcap) -------------------------------------------------------------------------------- /public/static/textures/normal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/textures/normal.jpg -------------------------------------------------------------------------------- /public/static/textures/sci-fi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/textures/sci-fi.png -------------------------------------------------------------------------------- /src/assets/bell-strike/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/bell-strike/loading.gif -------------------------------------------------------------------------------- /src/assets/distort-image/ocean.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/distort-image/ocean.jpg -------------------------------------------------------------------------------- /src/assets/panorama/hotspot/up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/hotspot/up.png -------------------------------------------------------------------------------- /src/assets/particle-explode/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/particle-explode/1.jpg -------------------------------------------------------------------------------- /src/consts/glitchImage.ts: -------------------------------------------------------------------------------- 1 | const glitchImageTextureUrl = "./static/textures/ocean.jpg"; 2 | 3 | export { glitchImageTextureUrl }; 4 | -------------------------------------------------------------------------------- /public/static/models/shoe-draco.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/models/shoe-draco.glb -------------------------------------------------------------------------------- /public/static/textures/flag-china.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/textures/flag-china.jpg -------------------------------------------------------------------------------- /public/static/textures/matcap-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/textures/matcap-1.png -------------------------------------------------------------------------------- /public/static/textures/matcap-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/textures/matcap-2.png -------------------------------------------------------------------------------- /public/static/textures/matcap-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/textures/matcap-3.png -------------------------------------------------------------------------------- /public/static/textures/sci-fi-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/textures/sci-fi-2.png -------------------------------------------------------------------------------- /src/assets/distort-image/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/distort-image/header.jpg -------------------------------------------------------------------------------- /src/assets/distort-image/header1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/distort-image/header1.jpg -------------------------------------------------------------------------------- /src/assets/panorama/hotspot/down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/hotspot/down.png -------------------------------------------------------------------------------- /src/assets/panorama/hotspot/left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/hotspot/left.png -------------------------------------------------------------------------------- /src/assets/panorama/hotspot/point.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/hotspot/point.png -------------------------------------------------------------------------------- /src/assets/panorama/hotspot/right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/hotspot/right.png -------------------------------------------------------------------------------- /src/assets/panorama/textures/cf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/textures/cf.jpg -------------------------------------------------------------------------------- /src/assets/panorama/textures/ct.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/textures/ct.jpg -------------------------------------------------------------------------------- /src/assets/panorama/textures/cw.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/textures/cw.jpg -------------------------------------------------------------------------------- /src/assets/panorama/textures/cw2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/textures/cw2.jpg -------------------------------------------------------------------------------- /src/assets/panorama/textures/etf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/textures/etf.jpg -------------------------------------------------------------------------------- /src/assets/panorama/textures/gd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/textures/gd.jpg -------------------------------------------------------------------------------- /src/assets/panorama/textures/kt.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/textures/kt.jpg -------------------------------------------------------------------------------- /src/assets/panorama/textures/rh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/textures/rh.jpg -------------------------------------------------------------------------------- /src/assets/panorama/textures/yt.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/textures/yt.jpg -------------------------------------------------------------------------------- /src/assets/panorama/textures/zw.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/textures/zw.jpg -------------------------------------------------------------------------------- /src/assets/panorama/textures/zw2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/textures/zw2.jpg -------------------------------------------------------------------------------- /src/assets/panorama/thumbs/ciwei.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/thumbs/ciwei.jpg -------------------------------------------------------------------------------- /src/assets/panorama/thumbs/ciwo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/thumbs/ciwo.jpg -------------------------------------------------------------------------------- /src/assets/panorama/thumbs/guodao.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/thumbs/guodao.jpg -------------------------------------------------------------------------------- /src/assets/panorama/thumbs/keting.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/thumbs/keting.jpg -------------------------------------------------------------------------------- /src/assets/panorama/thumbs/ruhu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/thumbs/ruhu.jpg -------------------------------------------------------------------------------- /src/assets/panorama/thumbs/zhuwei.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/thumbs/zhuwei.jpg -------------------------------------------------------------------------------- /src/assets/panorama/thumbs/zhuwo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/thumbs/zhuwo.jpg -------------------------------------------------------------------------------- /src/consts/distortImage.ts: -------------------------------------------------------------------------------- 1 | const distortImageTextureUrl = "./static/textures/ocean.jpg"; 2 | 3 | export { distortImageTextureUrl }; 4 | -------------------------------------------------------------------------------- /public/static/draco/draco_decoder.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/draco/draco_decoder.wasm -------------------------------------------------------------------------------- /public/static/textures/mount_depth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/textures/mount_depth.png -------------------------------------------------------------------------------- /public/static/textures/perlin-noise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/textures/perlin-noise.png -------------------------------------------------------------------------------- /src/assets/panorama/hotspot/right-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/hotspot/right-2.png -------------------------------------------------------------------------------- /src/assets/panorama/textures/zwymj.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/textures/zwymj.jpg -------------------------------------------------------------------------------- /src/assets/panorama/thumbs/canting.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/thumbs/canting.jpg -------------------------------------------------------------------------------- /src/assets/panorama/thumbs/chufang.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/thumbs/chufang.jpg -------------------------------------------------------------------------------- /src/assets/panorama/thumbs/yangtai.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/thumbs/yangtai.jpg -------------------------------------------------------------------------------- /src/consts/gridIcosahedron.ts: -------------------------------------------------------------------------------- 1 | const gridIcosahedronTextureUrl = "./static/textures/sky.jpg"; 2 | 3 | export { gridIcosahedronTextureUrl }; 4 | -------------------------------------------------------------------------------- /src/consts/noiseMaterial.ts: -------------------------------------------------------------------------------- 1 | const perlinNoiseTextureUrl = "./static/textures/perlin-noise.png"; 2 | 3 | export { perlinNoiseTextureUrl }; 4 | -------------------------------------------------------------------------------- /src/assets/panorama/thumbs/ertongfang.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/thumbs/ertongfang.jpg -------------------------------------------------------------------------------- /public/static/bmfonts/OpenSans-SemiBold.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/bmfonts/OpenSans-SemiBold.png -------------------------------------------------------------------------------- /public/static/draco/gltf/draco_decoder.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/public/static/draco/gltf/draco_decoder.wasm -------------------------------------------------------------------------------- /src/assets/panorama/thumbs/zhuwoyimaojian.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alphardex/threejs-playground/HEAD/src/assets/panorama/thumbs/zhuwoyimaojian.jpg -------------------------------------------------------------------------------- /src/shaders/floatBubbles/vertex/uniforms.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform float uDistortion; 3 | uniform float uRadius; 4 | uniform float uVelocity; 5 | -------------------------------------------------------------------------------- /src/shaders/modules/SineEggCarton.glsl: -------------------------------------------------------------------------------- 1 | float sineEggCarton(vec3 p){ 2 | return 1.2*abs(sin(p.x)-cos(p.y)+sin(p.z)); 3 | } 4 | #pragma glslify:export(sineEggCarton) -------------------------------------------------------------------------------- /src/shaders/floatBubbles/vertex/vertex.glsl: -------------------------------------------------------------------------------- 1 | float noise=snoise(vec3(position/2.+uTime*uVelocity)); 2 | vec3 transformed=vec3(position*(noise*pow(uDistortion,2.)+uRadius)); -------------------------------------------------------------------------------- /src/shaders/modules/blackAndWhite.glsl: -------------------------------------------------------------------------------- 1 | vec3 blackAndWhite(vec3 color){ 2 | return vec3((color.r+color.g+color.b)/5.); 3 | } 4 | 5 | #pragma glslify:export(blackAndWhite) -------------------------------------------------------------------------------- /src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import type { DefineComponent } from 'vue' 3 | const component: DefineComponent 4 | export default component 5 | } 6 | -------------------------------------------------------------------------------- /src/shaders/modules/invert.glsl: -------------------------------------------------------------------------------- 1 | float invert(float n){ 2 | return 1.-n; 3 | } 4 | 5 | vec3 invert(vec3 n){ 6 | return 1.-n; 7 | } 8 | 9 | #pragma glslify:export(invert) -------------------------------------------------------------------------------- /src/views/NotFound.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/consts/kineticText.ts: -------------------------------------------------------------------------------- 1 | const fontFile = "./static/bmfonts/OpenSans-SemiBold.fnt"; 2 | const fontAtlas = "./static/bmfonts/OpenSans-SemiBold.png"; 3 | 4 | export { fontFile, fontAtlas }; 5 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import App from "./App.vue"; 3 | import router from "./router"; 4 | 5 | const app = createApp(App) 6 | .use(router) 7 | .mount("#app"); 8 | -------------------------------------------------------------------------------- /src/shaders/shapeTransition/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform vec3 uColor; 2 | 3 | void main(){ 4 | vec3 color=uColor; 5 | vec4 finalColor=vec4(color,1.)*.3; 6 | gl_FragColor=finalColor; 7 | } -------------------------------------------------------------------------------- /src/templates/vertexShader.hbs: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vec3 p=position; 5 | gl_Position=projectionMatrix*modelViewMatrix*vec4(p,1.); 6 | 7 | vUv=uv; 8 | } -------------------------------------------------------------------------------- /src/shaders/texProjection/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vec3 p=position; 5 | gl_Position=projectionMatrix*modelViewMatrix*vec4(p,1.); 6 | 7 | vUv=uv; 8 | } -------------------------------------------------------------------------------- /src/consts/cylinderOrbitText.ts: -------------------------------------------------------------------------------- 1 | const fontFile = "./static/bmfonts/OpenSans-SemiBold.fnt"; 2 | const fontAtlas = "./static/bmfonts/OpenSans-SemiBold.png"; 3 | 4 | export { fontFile, fontAtlas }; 5 | -------------------------------------------------------------------------------- /src/shaders/modules/diffuse.glsl: -------------------------------------------------------------------------------- 1 | // https://www.shadertoy.com/view/Ms2SD1 2 | float diffuse(vec3 l,vec3 n,float p){ 3 | return pow(dot(n,l)*.4+.6,p); 4 | } 5 | #pragma glslify:export(diffuse); 6 | -------------------------------------------------------------------------------- /src/shaders/hyperbolicHelicoid/color/fragment.glsl: -------------------------------------------------------------------------------- 1 | float diff=dot(vec3(1.),vNormal); 2 | vec2 matcapUv=matcap(vec3(diff),vNormal); 3 | vec3 color=texture2D(uTexture,matcapUv).rgb; 4 | diffuseColor.rgb=color; -------------------------------------------------------------------------------- /src/shaders/modules/circle.glsl: -------------------------------------------------------------------------------- 1 | float circle(vec2 st,float r){ 2 | vec2 dist=st-vec2(.5); 3 | return 1.-smoothstep(r-(r*1.15),r,dot(dist,dist)*4.); 4 | } 5 | #pragma glslify:export(circle); 6 | -------------------------------------------------------------------------------- /src/shaders/transmissionMaterial/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vec3 p=position; 5 | gl_Position=projectionMatrix*modelViewMatrix*vec4(p,1.); 6 | 7 | vUv=uv; 8 | } -------------------------------------------------------------------------------- /src/shaders/modules/roundedBoxNormal.glsl: -------------------------------------------------------------------------------- 1 | vec3 roundedboxNormal(in vec3 pos,in vec3 siz,in float rad){ 2 | return normalize(sign(pos)*max(abs(pos)-siz,0.)); 3 | } 4 | #pragma glslify:export(roundedboxNormal) -------------------------------------------------------------------------------- /src/shaders/modules/sdRoundBox.glsl: -------------------------------------------------------------------------------- 1 | float sdRoundBox(vec3 p,vec3 b,float r) 2 | { 3 | vec3 q=abs(p)-b; 4 | return length(max(q,0.))+min(max(q.x,max(q.y,q.z)),0.)-r; 5 | } 6 | #pragma glslify:export(sdRoundBox) -------------------------------------------------------------------------------- /src/shaders/noiseMarble/fragmentColor.glsl: -------------------------------------------------------------------------------- 1 | vec3 ro=vPosition; 2 | vec3 rd=normalize(vDirection); 3 | float depth=rayMarch(ro,rd); 4 | vec3 result=mix(uColor1,uColor2,depth); 5 | vec4 diffuseColor=vec4(result,1.); -------------------------------------------------------------------------------- /src/utils/alert.ts: -------------------------------------------------------------------------------- 1 | import Swal from "sweetalert2"; 2 | const Alert = Swal.mixin({ 3 | customClass: { popup: "alert-popup", title: "alert-title" }, 4 | confirmButtonText: "好的", 5 | }); 6 | export default Alert; 7 | -------------------------------------------------------------------------------- /src/shaders/modules/hash.glsl: -------------------------------------------------------------------------------- 1 | // https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83 2 | float hash(vec2 p){return fract(1e4*sin(17.*p.x+p.y*.1)*(.1+abs(sin(p.y*13.+p.x))));} 3 | 4 | #pragma glslify:export(hash) -------------------------------------------------------------------------------- /src/shaders/modules/centerUv.glsl: -------------------------------------------------------------------------------- 1 | vec2 centerUv(vec2 uv,vec2 resolution){ 2 | uv=2.*uv-1.; 3 | float aspect=resolution.x/resolution.y; 4 | uv.x*=aspect; 5 | return uv; 6 | } 7 | 8 | #pragma glslify:export(centerUv); -------------------------------------------------------------------------------- /src/shaders/modules/getWorldNormal.glsl: -------------------------------------------------------------------------------- 1 | vec4 getWorldNormal(mat4 modelMat,vec3 normal){ 2 | vec4 worldNormal=normalize((modelMat*vec4(normal,0.))); 3 | return worldNormal; 4 | } 5 | 6 | #pragma glslify:export(getWorldNormal) -------------------------------------------------------------------------------- /src/shaders/modules/fresnel.glsl: -------------------------------------------------------------------------------- 1 | // https://www.shadertoy.com/view/4scSW4 2 | float fresnel(float bias,float scale,float power,vec3 I,vec3 N) 3 | { 4 | return bias+scale*pow(1.+dot(I,N),power); 5 | } 6 | 7 | #pragma glslify:export(fresnel) -------------------------------------------------------------------------------- /src/consts/transmissionMaterial.ts: -------------------------------------------------------------------------------- 1 | const bgUrl = "./static/textures/ruin.jpg"; 2 | 3 | const hdrUrl = "./static/hdrs/warehouse.hdr"; 4 | 5 | const normalMapUrl = "./static/textures/normal.jpg"; 6 | 7 | export { bgUrl, hdrUrl, normalMapUrl }; 8 | -------------------------------------------------------------------------------- /src/shaders/modules/twist.glsl: -------------------------------------------------------------------------------- 1 | vec3 opTwist(vec3 p,float k) 2 | { 3 | float c=cos(k*p.y); 4 | float s=sin(k*p.y); 5 | mat2 m=mat2(c,-s,s,c); 6 | vec3 q=vec3(m*p.xz,p.y); 7 | return q; 8 | } 9 | #pragma glslify:export(opTwist); -------------------------------------------------------------------------------- /src/consts/nakedEye.ts: -------------------------------------------------------------------------------- 1 | const nakedEyeImgUrl = "./static/textures/mount.jpg"; 2 | // https://3dphoto.io/uploader/ 3 | const nakedEyeDepthMapImgUrl = "./static/textures/mount_depth.png"; 4 | 5 | export { nakedEyeImgUrl, nakedEyeDepthMapImgUrl }; 6 | -------------------------------------------------------------------------------- /src/shaders/modules/qinticInOutAbs.glsl: -------------------------------------------------------------------------------- 1 | // https://github.com/glslify/glsl-easings 2 | float qinticInOutAbs(float t){ 3 | return t<.5 4 | ?+16.*pow(t,5.) 5 | :-.5*abs(pow(2.*t-2.,5.))+1.; 6 | } 7 | 8 | #pragma glslify:export(qinticInOutAbs) -------------------------------------------------------------------------------- /src/templates/fragmentShader.hbs: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | 5 | varying vec2 vUv; 6 | 7 | void main(){ 8 | vec3 color=vec3(vUv.x,vUv.y,1.); 9 | gl_FragColor=vec4(color,1.); 10 | } -------------------------------------------------------------------------------- /src/shaders/texProjection/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | 5 | varying vec2 vUv; 6 | 7 | void main(){ 8 | vec3 color=vec3(vUv.x,vUv.y,1.); 9 | gl_FragColor=vec4(color,1.); 10 | } -------------------------------------------------------------------------------- /src/shaders/modules/getNDC.glsl: -------------------------------------------------------------------------------- 1 | // https://community.khronos.org/t/please-help-gl-fraggl_Position-to-world-gl_Positioninates/66010 2 | vec3 getNDC(){ 3 | vec3 ndc=gl_Position.xyz/gl_Position.w; 4 | return ndc; 5 | } 6 | 7 | #pragma glslify:export(getNDC) -------------------------------------------------------------------------------- /src/shaders/templateParticle/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | 5 | varying vec2 vUv; 6 | 7 | void main(){ 8 | vec3 color=vec3(vUv.x,vUv.y,1.); 9 | gl_FragColor=vec4(color,1.); 10 | } -------------------------------------------------------------------------------- /src/shaders/transmissionMaterial/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | 5 | varying vec2 vUv; 6 | 7 | void main(){ 8 | vec3 color=vec3(vUv.x,vUv.y,1.); 9 | gl_FragColor=vec4(color,1.); 10 | } -------------------------------------------------------------------------------- /src/shaders/FBOParticles/basic/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | 5 | varying vec2 vUv; 6 | varying vec3 vPosition; 7 | 8 | void main(){ 9 | vec3 color=vec3(0.); 10 | gl_FragColor=vec4(color,1.); 11 | } -------------------------------------------------------------------------------- /src/shaders/modules/orthogonal.glsl: -------------------------------------------------------------------------------- 1 | // http://lolengine.net/blog/2013/09/21/picking-orthogonal-vector-combing-coconuts 2 | vec3 orthogonal(vec3 v){ 3 | return normalize(abs(v.x)>abs(v.z)?vec3(-v.y,v.x,0.) 4 | :vec3(0.,-v.z,v.y)); 5 | } 6 | #pragma glslify:export(orthogonal); -------------------------------------------------------------------------------- /src/shaders/shoeConfig/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | 5 | varying vec2 vUv; 6 | varying vec3 vPosition; 7 | 8 | void main(){ 9 | vec3 color=vec3(vUv.x,vUv.y,1.); 10 | gl_FragColor=vec4(color,1.); 11 | } -------------------------------------------------------------------------------- /src/shaders/template/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | 5 | varying vec2 vUv; 6 | varying vec3 vPosition; 7 | 8 | void main(){ 9 | vec3 color=vec3(vUv.x,vUv.y,1.); 10 | gl_FragColor=vec4(color,1.); 11 | } -------------------------------------------------------------------------------- /src/shaders/timeTravel/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | 5 | varying vec2 vUv; 6 | varying vec3 vPosition; 7 | 8 | void main(){ 9 | vec3 color=vec3(vUv.x,vUv.y,1.); 10 | gl_FragColor=vec4(color,1.); 11 | } -------------------------------------------------------------------------------- /src/shaders/dominosEffect/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | 5 | varying vec2 vUv; 6 | varying vec3 vPosition; 7 | 8 | void main(){ 9 | vec3 color=vec3(vUv.x,vUv.y,1.); 10 | gl_FragColor=vec4(color,1.); 11 | } -------------------------------------------------------------------------------- /src/shaders/modules/hash22.glsl: -------------------------------------------------------------------------------- 1 | // http://glslsandbox.com/e#47182.0 2 | vec2 hash22(vec2 p){ 3 | p=fract(p*vec2(5.3983,5.4427)); 4 | p+=dot(p.yx,p.xy+vec2(21.5351,14.3137)); 5 | return fract(vec2(p.x*p.y*95.4337,p.x*p.y*97.597)); 6 | } 7 | 8 | #pragma glslify:export(hash22) -------------------------------------------------------------------------------- /src/shaders/lineWave/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform vec3 uFaceColor; 2 | uniform vec3 uLineColor; 3 | 4 | varying float vDepth; 5 | 6 | void main(){ 7 | float toMix=smoothstep(.2,1.,vDepth); 8 | vec3 color=mix(uFaceColor,uLineColor,toMix); 9 | gl_FragColor=vec4(color,1.); 10 | } -------------------------------------------------------------------------------- /src/shaders/bouncyBalloon/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | 5 | varying vec2 vUv; 6 | varying vec3 vPosition; 7 | 8 | void main(){ 9 | vec3 color=vec3(vUv.x,vUv.y,1.); 10 | gl_FragColor=vec4(color,1.); 11 | } -------------------------------------------------------------------------------- /src/consts/hyperbolicHelicoid.ts: -------------------------------------------------------------------------------- 1 | const hyperbolicHelicoidMatcapTextureUrl1 = "./static/textures/matcap-3.png"; 2 | const hyperbolicHelicoidMatcapTextureUrl2 = "./static/textures/matcap-1.png"; 3 | export { 4 | hyperbolicHelicoidMatcapTextureUrl1, 5 | hyperbolicHelicoidMatcapTextureUrl2, 6 | }; 7 | -------------------------------------------------------------------------------- /src/shaders/modules/getRayDirection.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:setCamera=require(./setCamera) 2 | 3 | vec3 getRayDirection(vec2 p,vec3 ro,vec3 ta,float fl){ 4 | mat3 ca=setCamera(ro,ta,0.); 5 | vec3 rd=ca*normalize(vec3(p,fl)); 6 | return rd; 7 | } 8 | 9 | #pragma glslify:export(getRayDirection) -------------------------------------------------------------------------------- /src/shaders/wavinFlag/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform vec3 uColor; 2 | uniform sampler2D uTexture; 3 | 4 | varying vec2 vUv; 5 | varying float vElevation; 6 | 7 | void main(){ 8 | vec4 textureColor=texture2D(uTexture,vUv); 9 | textureColor.rgb*=vElevation*2.+.5; 10 | gl_FragColor=textureColor; 11 | } -------------------------------------------------------------------------------- /src/shaders/modules/getWorldPosition.glsl: -------------------------------------------------------------------------------- 1 | // https://tympanus.net/codrops/2019/10/29/real-time-multiside-refraction-in-three-steps/ 2 | vec4 getWorldPosition(mat4 modelMat,vec3 pos){ 3 | vec4 worldPosition=modelMat*vec4(pos,1.); 4 | return worldPosition; 5 | } 6 | 7 | #pragma glslify:export(getWorldPosition) -------------------------------------------------------------------------------- /src/shaders/modules/rotateByOrigin.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:rotate=require(glsl-rotate) 2 | 3 | vec3 rotateByOrigin(vec3 v,vec3 axis,float angle,vec3 origin){ 4 | v-=origin; 5 | v=rotate(v,axis,angle); 6 | v+=origin; 7 | return v; 8 | } 9 | 10 | #pragma glslify:export(rotateByOrigin) -------------------------------------------------------------------------------- /src/shaders/floatPaper/postprocessing/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | uniform sampler2D tDiffuse; 5 | 6 | varying vec2 vUv; 7 | 8 | void main(){ 9 | vec2 newUv=vUv; 10 | vec4 color=texture2D(tDiffuse,newUv); 11 | gl_FragColor=color; 12 | } -------------------------------------------------------------------------------- /src/shaders/gooeyImage/postprocessing/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | uniform sampler2D tDiffuse; 5 | 6 | varying vec2 vUv; 7 | 8 | void main(){ 9 | vec2 newUv=vUv; 10 | vec4 color=texture2D(tDiffuse,newUv); 11 | gl_FragColor=color; 12 | } -------------------------------------------------------------------------------- /src/shaders/imageCloth/postprocessing/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | uniform sampler2D tDiffuse; 5 | 6 | varying vec2 vUv; 7 | 8 | void main(){ 9 | vec2 newUv=vUv; 10 | vec4 color=texture2D(tDiffuse,newUv); 11 | gl_FragColor=color; 12 | } -------------------------------------------------------------------------------- /src/shaders/imagePlane/postprocessing/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | uniform sampler2D tDiffuse; 5 | 6 | varying vec2 vUv; 7 | 8 | void main(){ 9 | vec2 newUv=vUv; 10 | vec4 color=texture2D(tDiffuse,newUv); 11 | gl_FragColor=color; 12 | } -------------------------------------------------------------------------------- /src/shaders/nakedEye/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vec4 modelPosition=modelMatrix*vec4(position,1.); 5 | vec4 viewPosition=viewMatrix*modelPosition; 6 | vec4 projectedPosition=projectionMatrix*viewPosition; 7 | gl_Position=projectedPosition; 8 | 9 | vUv=uv; 10 | } -------------------------------------------------------------------------------- /src/shaders/templatePostprocessing/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | uniform sampler2D tDiffuse; 5 | 6 | varying vec2 vUv; 7 | 8 | void main(){ 9 | vec2 newUv=vUv; 10 | vec4 color=texture2D(tDiffuse,newUv); 11 | gl_FragColor=color; 12 | } -------------------------------------------------------------------------------- /src/shaders/imageRipple/postprocessing/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | uniform sampler2D tDiffuse; 5 | 6 | varying vec2 vUv; 7 | 8 | void main(){ 9 | vec2 newUv=vUv; 10 | vec4 color=texture2D(tDiffuse,newUv); 11 | gl_FragColor=color; 12 | } -------------------------------------------------------------------------------- /src/shaders/modules/setCamera.glsl: -------------------------------------------------------------------------------- 1 | mat3 setCamera(in vec3 ro,in vec3 ta,float cr) 2 | { 3 | vec3 cw=normalize(ta-ro); 4 | vec3 cp=vec3(sin(cr),cos(cr),0.); 5 | vec3 cu=normalize(cross(cw,cp)); 6 | vec3 cv=(cross(cu,cw)); 7 | return mat3(cu,cv,cw); 8 | } 9 | 10 | #pragma glslify:export(setCamera) -------------------------------------------------------------------------------- /src/shaders/rayMarching/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vec4 modelPosition=modelMatrix*vec4(position,1.); 5 | vec4 viewPosition=viewMatrix*modelPosition; 6 | vec4 projectedPosition=projectionMatrix*viewPosition; 7 | gl_Position=projectedPosition; 8 | 9 | vUv=uv; 10 | } -------------------------------------------------------------------------------- /src/shaders/unrollImages/postprocessing/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | uniform sampler2D tDiffuse; 5 | 6 | varying vec2 vUv; 7 | 8 | void main(){ 9 | vec2 newUv=vUv; 10 | vec4 color=texture2D(tDiffuse,newUv); 11 | gl_FragColor=color; 12 | } -------------------------------------------------------------------------------- /src/shaders/DNAParticle/ca/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vec4 modelPosition=modelMatrix*vec4(position,1.); 5 | vec4 viewPosition=viewMatrix*modelPosition; 6 | vec4 projectedPosition=projectionMatrix*viewPosition; 7 | gl_Position=projectedPosition; 8 | 9 | vUv=uv; 10 | } -------------------------------------------------------------------------------- /src/shaders/modules/computeNormal.glsl: -------------------------------------------------------------------------------- 1 | // https://community.khronos.org/t/getting-the-normal-with-dfdx-and-dfdy/70177 2 | vec3 computeNormal(vec3 normal){ 3 | vec3 X=dFdx(normal); 4 | vec3 Y=dFdy(normal); 5 | vec3 cNormal=normalize(cross(X,Y)); 6 | return cNormal; 7 | } 8 | 9 | #pragma glslify:export(computeNormal) -------------------------------------------------------------------------------- /src/shaders/templatePostprocessing/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vec4 modelPosition=modelMatrix*vec4(position,1.); 5 | vec4 viewPosition=viewMatrix*modelPosition; 6 | vec4 projectedPosition=projectionMatrix*viewPosition; 7 | gl_Position=projectedPosition; 8 | 9 | vUv=uv; 10 | } -------------------------------------------------------------------------------- /src/shaders/floatPaper/postprocessing/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vec4 modelPosition=modelMatrix*vec4(position,1.); 5 | vec4 viewPosition=viewMatrix*modelPosition; 6 | vec4 projectedPosition=projectionMatrix*viewPosition; 7 | gl_Position=projectedPosition; 8 | 9 | vUv=uv; 10 | } -------------------------------------------------------------------------------- /src/shaders/gooeyImage/postprocessing/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vec4 modelPosition=modelMatrix*vec4(position,1.); 5 | vec4 viewPosition=viewMatrix*modelPosition; 6 | vec4 projectedPosition=projectionMatrix*viewPosition; 7 | gl_Position=projectedPosition; 8 | 9 | vUv=uv; 10 | } -------------------------------------------------------------------------------- /src/shaders/imageCloth/postprocessing/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vec4 modelPosition=modelMatrix*vec4(position,1.); 5 | vec4 viewPosition=viewMatrix*modelPosition; 6 | vec4 projectedPosition=projectionMatrix*viewPosition; 7 | gl_Position=projectedPosition; 8 | 9 | vUv=uv; 10 | } -------------------------------------------------------------------------------- /src/shaders/imagePlane/postprocessing/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vec4 modelPosition=modelMatrix*vec4(position,1.); 5 | vec4 viewPosition=viewMatrix*modelPosition; 6 | vec4 projectedPosition=projectionMatrix*viewPosition; 7 | gl_Position=projectedPosition; 8 | 9 | vUv=uv; 10 | } -------------------------------------------------------------------------------- /src/shaders/imageRipple/postprocessing/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vec4 modelPosition=modelMatrix*vec4(position,1.); 5 | vec4 viewPosition=viewMatrix*modelPosition; 6 | vec4 projectedPosition=projectionMatrix*viewPosition; 7 | gl_Position=projectedPosition; 8 | 9 | vUv=uv; 10 | } -------------------------------------------------------------------------------- /src/shaders/leanGallery/postprocessing/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vec4 modelPosition=modelMatrix*vec4(position,1.); 5 | vec4 viewPosition=viewMatrix*modelPosition; 6 | vec4 projectedPosition=projectionMatrix*viewPosition; 7 | gl_Position=projectedPosition; 8 | 9 | vUv=uv; 10 | } -------------------------------------------------------------------------------- /src/shaders/modules/edgeFactorTri.glsl: -------------------------------------------------------------------------------- 1 | // https://threejs.org/examples/?q=wire#webgl_materials_wireframe 2 | float edgeFactorTri(vec3 center,float width){ 3 | vec3 d=fwidth(center); 4 | vec3 a3=smoothstep(d*(width-.5),d*(width+.5),center); 5 | return min(min(a3.x,a3.y),a3.z); 6 | } 7 | 8 | #pragma glslify:export(edgeFactorTri) -------------------------------------------------------------------------------- /src/shaders/pixelRiver/postprocessing/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vec4 modelPosition=modelMatrix*vec4(position,1.); 5 | vec4 viewPosition=viewMatrix*modelPosition; 6 | vec4 projectedPosition=projectionMatrix*viewPosition; 7 | gl_Position=projectedPosition; 8 | 9 | vUv=uv; 10 | } -------------------------------------------------------------------------------- /src/shaders/twistedShape/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:fresnel=require(../modules/fresnel) 2 | 3 | uniform vec3 uColor; 4 | 5 | varying vec3 vNormal; 6 | varying vec3 vEyeVector; 7 | 8 | void main(){ 9 | float F=fresnel(0.,.6,2.,vEyeVector,vNormal); 10 | vec3 color=uColor+F; 11 | gl_FragColor=vec4(color,1.); 12 | } -------------------------------------------------------------------------------- /src/shaders/unrollImages/postprocessing/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vec4 modelPosition=modelMatrix*vec4(position,1.); 5 | vec4 viewPosition=viewMatrix*modelPosition; 6 | vec4 projectedPosition=projectionMatrix*viewPosition; 7 | gl_Position=projectedPosition; 8 | 9 | vUv=uv; 10 | } -------------------------------------------------------------------------------- /src/shaders/distortImage/postprocessing/noise/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vec4 modelPosition=modelMatrix*vec4(position,1.); 5 | vec4 viewPosition=viewMatrix*modelPosition; 6 | vec4 projectedPosition=projectionMatrix*viewPosition; 7 | gl_Position=projectedPosition; 8 | 9 | vUv=uv; 10 | } -------------------------------------------------------------------------------- /src/shaders/gridIcosahedron/postprocessing/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vec4 modelPosition=modelMatrix*vec4(position,1.); 5 | vec4 viewPosition=viewMatrix*modelPosition; 6 | vec4 projectedPosition=projectionMatrix*viewPosition; 7 | gl_Position=projectedPosition; 8 | 9 | vUv=uv; 10 | } -------------------------------------------------------------------------------- /src/shaders/twistedGallery/postprocessing/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vec4 modelPosition=modelMatrix*vec4(position,1.); 5 | vec4 viewPosition=viewMatrix*modelPosition; 6 | vec4 projectedPosition=projectionMatrix*viewPosition; 7 | gl_Position=projectedPosition; 8 | 9 | vUv=uv; 10 | } -------------------------------------------------------------------------------- /src/consts/menu.ts: -------------------------------------------------------------------------------- 1 | const menuFontUrl = "./static/fonts/droid_sans_mono_regular.typeface.json"; 2 | const menuFontConfig = { 3 | size: 3, 4 | height: 0.4, 5 | curveSegments: 24, 6 | bevelEnabled: true, 7 | bevelThickness: 0.9, 8 | bevelSize: 0.3, 9 | bevelSegments: 10, 10 | }; 11 | export { menuFontUrl, menuFontConfig }; 12 | -------------------------------------------------------------------------------- /src/shaders/distortImage/postprocessing/default/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vec4 modelPosition=modelMatrix*vec4(position,1.); 5 | vec4 viewPosition=viewMatrix*modelPosition; 6 | vec4 projectedPosition=projectionMatrix*viewPosition; 7 | gl_Position=projectedPosition; 8 | 9 | vUv=uv; 10 | } -------------------------------------------------------------------------------- /src/shaders/distortImage/postprocessing/scroll/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vec4 modelPosition=modelMatrix*vec4(position,1.); 5 | vec4 viewPosition=viewMatrix*modelPosition; 6 | vec4 projectedPosition=projectionMatrix*viewPosition; 7 | gl_Position=projectedPosition; 8 | 9 | vUv=uv; 10 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /src/consts/floatBubbles.ts: -------------------------------------------------------------------------------- 1 | const cubeMapUrls = [ 2 | "./static/cubemap/px.png", 3 | "./static/cubemap/nx.png", 4 | "./static/cubemap/py.png", 5 | "./static/cubemap/ny.png", 6 | "./static/cubemap/pz.png", 7 | "./static/cubemap/nz.png", 8 | ]; 9 | const bumpMapUrl = "./static/textures/bump.jpg"; 10 | export { cubeMapUrls, bumpMapUrl }; 11 | -------------------------------------------------------------------------------- /src/shaders/floatPaper/main/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | uniform sampler2D uTexture; 5 | 6 | varying vec2 vUv; 7 | varying vec3 vPosition; 8 | 9 | void main(){ 10 | vec4 texture=texture2D(uTexture,vUv); 11 | vec3 color=texture.rgb; 12 | gl_FragColor=vec4(color,1.); 13 | } -------------------------------------------------------------------------------- /src/shaders/imageCloth/main/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | uniform sampler2D uTexture; 5 | 6 | varying vec2 vUv; 7 | varying vec3 vPosition; 8 | 9 | void main(){ 10 | vec4 texture=texture2D(uTexture,vUv); 11 | vec3 color=texture.rgb; 12 | gl_FragColor=vec4(color,1.); 13 | } -------------------------------------------------------------------------------- /src/shaders/imagePlane/main/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | uniform sampler2D uTexture; 5 | 6 | varying vec2 vUv; 7 | varying vec3 vPosition; 8 | 9 | void main(){ 10 | vec4 texture=texture2D(uTexture,vUv); 11 | vec3 color=texture.rgb; 12 | gl_FragColor=vec4(color,1.); 13 | } -------------------------------------------------------------------------------- /src/shaders/imageRipple/main/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | uniform sampler2D uTexture; 5 | 6 | varying vec2 vUv; 7 | varying vec3 vPosition; 8 | 9 | void main(){ 10 | vec4 texture=texture2D(uTexture,vUv); 11 | vec3 color=texture.rgb; 12 | gl_FragColor=vec4(color,1.); 13 | } -------------------------------------------------------------------------------- /src/shaders/leanGallery/main/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | uniform sampler2D uTexture; 5 | 6 | varying vec2 vUv; 7 | varying vec3 vPosition; 8 | 9 | void main(){ 10 | vec4 texture=texture2D(uTexture,vUv); 11 | vec3 color=texture.rgb; 12 | gl_FragColor=vec4(color,1.); 13 | } -------------------------------------------------------------------------------- /src/shaders/pixelRiver/main/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | uniform sampler2D uTexture; 5 | 6 | varying vec2 vUv; 7 | varying vec3 vPosition; 8 | 9 | void main(){ 10 | vec4 texture=texture2D(uTexture,vUv); 11 | vec3 color=texture.rgb; 12 | gl_FragColor=vec4(color,1.); 13 | } -------------------------------------------------------------------------------- /src/shaders/distortImage/postprocessing/default/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | uniform sampler2D tDiffuse; 5 | uniform float uScrollSpeed; 6 | 7 | varying vec2 vUv; 8 | 9 | void main(){ 10 | vec2 newUv=vUv; 11 | vec4 color=texture2D(tDiffuse,newUv); 12 | gl_FragColor=color; 13 | } -------------------------------------------------------------------------------- /src/shaders/modules/sdEquilateralTriangle.glsl: -------------------------------------------------------------------------------- 1 | float sdEquilateralTriangle(in vec2 p) 2 | { 3 | const float k=sqrt(3.); 4 | p.x=abs(p.x)-1.; 5 | p.y=p.y+1./k; 6 | if(p.x+k*p.y>0.)p=vec2(p.x-k*p.y,-k*p.x-p.y)/2.; 7 | p.x-=clamp(p.x,-2.,0.); 8 | return-length(p)*sign(p.y); 9 | } 10 | #pragma glslify:export(sdEquilateralTriangle); 11 | -------------------------------------------------------------------------------- /src/shaders/particleExplode/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | uniform sampler2D uTexture; 5 | 6 | varying vec2 vUv; 7 | 8 | void main(){ 9 | vec4 color=texture2D(uTexture,vUv); 10 | if(color.r<.1&&color.g<.1&&color.b<.1){ 11 | discard; 12 | } 13 | gl_FragColor=color; 14 | } -------------------------------------------------------------------------------- /src/shaders/distortImage/main/hoverwave/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vec3 newPos=position; 5 | vec4 modelPosition=modelMatrix*vec4(newPos,1.); 6 | vec4 viewPosition=viewMatrix*modelPosition; 7 | vec4 projectedPosition=projectionMatrix*viewPosition; 8 | gl_Position=projectedPosition; 9 | 10 | vUv=uv; 11 | } -------------------------------------------------------------------------------- /src/shaders/cloudySky/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | void main(){ 5 | vec4 modelPosition=modelMatrix*vec4(position,1.); 6 | vec4 viewPosition=viewMatrix*modelPosition; 7 | vec4 projectedPosition=projectionMatrix*viewPosition; 8 | gl_Position=projectedPosition; 9 | 10 | vUv=uv; 11 | vPosition=position; 12 | } -------------------------------------------------------------------------------- /src/shaders/noiseWave/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | void main(){ 5 | vec4 modelPosition=modelMatrix*vec4(position,1.); 6 | vec4 viewPosition=viewMatrix*modelPosition; 7 | vec4 projectedPosition=projectionMatrix*viewPosition; 8 | gl_Position=projectedPosition; 9 | 10 | vUv=uv; 11 | vPosition=position; 12 | } -------------------------------------------------------------------------------- /src/shaders/rayTracing/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | void main(){ 5 | vec4 modelPosition=modelMatrix*vec4(position,1.); 6 | vec4 viewPosition=viewMatrix*modelPosition; 7 | vec4 projectedPosition=projectionMatrix*viewPosition; 8 | gl_Position=projectedPosition; 9 | 10 | vUv=uv; 11 | vPosition=position; 12 | } -------------------------------------------------------------------------------- /src/shaders/shoeConfig/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | void main(){ 5 | vec4 modelPosition=modelMatrix*vec4(position,1.); 6 | vec4 viewPosition=viewMatrix*modelPosition; 7 | vec4 projectedPosition=projectionMatrix*viewPosition; 8 | gl_Position=projectedPosition; 9 | 10 | vUv=uv; 11 | vPosition=position; 12 | } -------------------------------------------------------------------------------- /src/shaders/simpleFBM/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | void main(){ 5 | vec4 modelPosition=modelMatrix*vec4(position,1.); 6 | vec4 viewPosition=viewMatrix*modelPosition; 7 | vec4 projectedPosition=projectionMatrix*viewPosition; 8 | gl_Position=projectedPosition; 9 | 10 | vUv=uv; 11 | vPosition=position; 12 | } -------------------------------------------------------------------------------- /src/shaders/sun/noise/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | void main(){ 5 | vec4 modelPosition=modelMatrix*vec4(position,1.); 6 | vec4 viewPosition=viewMatrix*modelPosition; 7 | vec4 projectedPosition=projectionMatrix*viewPosition; 8 | gl_Position=projectedPosition; 9 | 10 | vUv=uv; 11 | vPosition=position; 12 | } -------------------------------------------------------------------------------- /src/shaders/sun/ring/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | void main(){ 5 | vec4 modelPosition=modelMatrix*vec4(position,1.); 6 | vec4 viewPosition=viewMatrix*modelPosition; 7 | vec4 projectedPosition=projectionMatrix*viewPosition; 8 | gl_Position=projectedPosition; 9 | 10 | vUv=uv; 11 | vPosition=position; 12 | } -------------------------------------------------------------------------------- /src/shaders/template/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | void main(){ 5 | vec4 modelPosition=modelMatrix*vec4(position,1.); 6 | vec4 viewPosition=viewMatrix*modelPosition; 7 | vec4 projectedPosition=projectionMatrix*viewPosition; 8 | gl_Position=projectedPosition; 9 | 10 | vUv=uv; 11 | vPosition=position; 12 | } -------------------------------------------------------------------------------- /src/shaders/templateParticle/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main(){ 4 | vec4 modelPosition=modelMatrix*vec4(position,1.); 5 | vec4 viewPosition=viewMatrix*modelPosition; 6 | vec4 projectedPosition=projectionMatrix*viewPosition; 7 | gl_Position=projectedPosition; 8 | gl_PointSize=100.*(1./-viewPosition.z); 9 | 10 | vUv=uv; 11 | } -------------------------------------------------------------------------------- /src/shaders/timeTravel/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | void main(){ 5 | vec4 modelPosition=modelMatrix*vec4(position,1.); 6 | vec4 viewPosition=viewMatrix*modelPosition; 7 | vec4 projectedPosition=projectionMatrix*viewPosition; 8 | gl_Position=projectedPosition; 9 | 10 | vUv=uv; 11 | vPosition=position; 12 | } -------------------------------------------------------------------------------- /src/shaders/vueLogo/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | void main(){ 5 | vec4 modelPosition=modelMatrix*vec4(position,1.); 6 | vec4 viewPosition=viewMatrix*modelPosition; 7 | vec4 projectedPosition=projectionMatrix*viewPosition; 8 | gl_Position=projectedPosition; 9 | 10 | vUv=uv; 11 | vPosition=position; 12 | } -------------------------------------------------------------------------------- /src/shaders/dominosEffect/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | void main(){ 5 | vec4 modelPosition=modelMatrix*vec4(position,1.); 6 | vec4 viewPosition=viewMatrix*modelPosition; 7 | vec4 projectedPosition=projectionMatrix*viewPosition; 8 | gl_Position=projectedPosition; 9 | 10 | vUv=uv; 11 | vPosition=position; 12 | } -------------------------------------------------------------------------------- /src/shaders/gooeyImage/main/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | void main(){ 5 | vec4 modelPosition=modelMatrix*vec4(position,1.); 6 | vec4 viewPosition=viewMatrix*modelPosition; 7 | vec4 projectedPosition=projectionMatrix*viewPosition; 8 | gl_Position=projectedPosition; 9 | 10 | vUv=uv; 11 | vPosition=position; 12 | } -------------------------------------------------------------------------------- /src/shaders/imageCloth/main/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | void main(){ 5 | vec4 modelPosition=modelMatrix*vec4(position,1.); 6 | vec4 viewPosition=viewMatrix*modelPosition; 7 | vec4 projectedPosition=projectionMatrix*viewPosition; 8 | gl_Position=projectedPosition; 9 | 10 | vUv=uv; 11 | vPosition=position; 12 | } -------------------------------------------------------------------------------- /src/shaders/imagePlane/main/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | void main(){ 5 | vec4 modelPosition=modelMatrix*vec4(position,1.); 6 | vec4 viewPosition=viewMatrix*modelPosition; 7 | vec4 projectedPosition=projectionMatrix*viewPosition; 8 | gl_Position=projectedPosition; 9 | 10 | vUv=uv; 11 | vPosition=position; 12 | } -------------------------------------------------------------------------------- /src/shaders/pixelRiver/main/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | void main(){ 5 | vec4 modelPosition=modelMatrix*vec4(position,1.); 6 | vec4 viewPosition=viewMatrix*modelPosition; 7 | vec4 projectedPosition=projectionMatrix*viewPosition; 8 | gl_Position=projectedPosition; 9 | 10 | vUv=uv; 11 | vPosition=position; 12 | } -------------------------------------------------------------------------------- /src/shaders/rayMarchingBall/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | void main(){ 5 | vec4 modelPosition=modelMatrix*vec4(position,1.); 6 | vec4 viewPosition=viewMatrix*modelPosition; 7 | vec4 projectedPosition=projectionMatrix*viewPosition; 8 | gl_Position=projectedPosition; 9 | 10 | vUv=uv; 11 | vPosition=position; 12 | } -------------------------------------------------------------------------------- /src/shaders/rayMarchingFire/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | void main(){ 5 | vec4 modelPosition=modelMatrix*vec4(position,1.); 6 | vec4 viewPosition=viewMatrix*modelPosition; 7 | vec4 projectedPosition=projectionMatrix*viewPosition; 8 | gl_Position=projectedPosition; 9 | 10 | vUv=uv; 11 | vPosition=position; 12 | } -------------------------------------------------------------------------------- /src/shaders/cylinderOrbitText/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | void main(){ 5 | vec4 modelPosition=modelMatrix*vec4(position,1.); 6 | vec4 viewPosition=viewMatrix*modelPosition; 7 | vec4 projectedPosition=projectionMatrix*viewPosition; 8 | gl_Position=projectedPosition; 9 | 10 | vUv=uv; 11 | vPosition=position; 12 | } -------------------------------------------------------------------------------- /src/shaders/kineticText/cylinder/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | void main(){ 5 | vec4 modelPosition=modelMatrix*vec4(position,1.); 6 | vec4 viewPosition=viewMatrix*modelPosition; 7 | vec4 projectedPosition=projectionMatrix*viewPosition; 8 | gl_Position=projectedPosition; 9 | 10 | vUv=uv; 11 | vPosition=position; 12 | } -------------------------------------------------------------------------------- /src/shaders/kineticText/sphere/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | void main(){ 5 | vec4 modelPosition=modelMatrix*vec4(position,1.); 6 | vec4 viewPosition=viewMatrix*modelPosition; 7 | vec4 projectedPosition=projectionMatrix*viewPosition; 8 | gl_Position=projectedPosition; 9 | 10 | vUv=uv; 11 | vPosition=position; 12 | } -------------------------------------------------------------------------------- /src/shaders/kineticText/torus/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | void main(){ 5 | vec4 modelPosition=modelMatrix*vec4(position,1.); 6 | vec4 viewPosition=viewMatrix*modelPosition; 7 | vec4 projectedPosition=projectionMatrix*viewPosition; 8 | gl_Position=projectedPosition; 9 | 10 | vUv=uv; 11 | vPosition=position; 12 | } -------------------------------------------------------------------------------- /src/shaders/leanGallery/main/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | void main(){ 5 | vec4 modelPosition=modelMatrix*vec4(position,1.); 6 | vec4 viewPosition=viewMatrix*modelPosition; 7 | vec4 projectedPosition=projectionMatrix*viewPosition; 8 | gl_Position=projectedPosition; 9 | 10 | vUv=uv; 11 | vPosition=position; 12 | } -------------------------------------------------------------------------------- /src/shaders/templateRayMarching/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | void main(){ 5 | vec4 modelPosition=modelMatrix*vec4(position,1.); 6 | vec4 viewPosition=viewMatrix*modelPosition; 7 | vec4 projectedPosition=projectionMatrix*viewPosition; 8 | gl_Position=projectedPosition; 9 | 10 | vUv=uv; 11 | vPosition=position; 12 | } -------------------------------------------------------------------------------- /src/shaders/bouncyBalloon/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | void main(){ 5 | vec4 modelPosition=modelMatrix*vec4(position,1.); 6 | vec4 viewPosition=viewMatrix*modelPosition; 7 | vec4 projectedPosition=projectionMatrix*viewPosition; 8 | gl_Position=projectedPosition; 9 | 10 | vUv=uv; 11 | vPosition=position; 12 | } -------------------------------------------------------------------------------- /src/shaders/kineticText/torusKnot/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | void main(){ 5 | vec4 modelPosition=modelMatrix*vec4(position,1.); 6 | vec4 viewPosition=viewMatrix*modelPosition; 7 | vec4 projectedPosition=projectionMatrix*viewPosition; 8 | gl_Position=projectedPosition; 9 | 10 | vUv=uv; 11 | vPosition=position; 12 | } -------------------------------------------------------------------------------- /src/shaders/rayMarchingPlayground/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | void main(){ 5 | vec4 modelPosition=modelMatrix*vec4(position,1.); 6 | vec4 viewPosition=viewMatrix*modelPosition; 7 | vec4 projectedPosition=projectionMatrix*viewPosition; 8 | gl_Position=projectedPosition; 9 | 10 | vUv=uv; 11 | vPosition=position; 12 | } -------------------------------------------------------------------------------- /src/consts/floatWorld.ts: -------------------------------------------------------------------------------- 1 | const floatWorldFontUrl = "./static/fonts/droid_sans_mono_regular.typeface.json"; 2 | const floatWorldFontConfig = { 3 | size: 0.5, 4 | height: 0.2, 5 | curveSegments: 12, 6 | bevelEnabled: true, 7 | bevelThickness: 0.03, 8 | bevelSize: 0.02, 9 | bevelOffset: 0, 10 | bevelSegments: 5, 11 | }; 12 | export { floatWorldFontUrl, floatWorldFontConfig }; 13 | -------------------------------------------------------------------------------- /src/shaders/noiseMarble/fragmentTop.glsl: -------------------------------------------------------------------------------- 1 | uniform sampler2D uHeightMap; 2 | uniform vec3 uColor1; 3 | uniform vec3 uColor2; 4 | uniform float uDepth; 5 | uniform float uSmooth; 6 | uniform float uTime; 7 | uniform float uSpeed; 8 | uniform sampler2D uDisplacementMap; 9 | uniform float uStrength; 10 | uniform float uSlice; 11 | 12 | varying vec3 vPosition; 13 | varying vec3 vDirection; -------------------------------------------------------------------------------- /src/shaders/travellingParticles/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:invert=require(../modules/invert.glsl) 2 | 3 | varying float vOpacity; 4 | 5 | uniform vec3 uColor; 6 | 7 | void main(){ 8 | vec2 uv=vec2(gl_PointCoord.x,invert(gl_PointCoord.y)); 9 | vec2 cUv=2.*uv-1.; 10 | vec4 color=vec4(1./length(cUv)); 11 | color*=vOpacity; 12 | color.rgb*=uColor; 13 | gl_FragColor=color; 14 | } -------------------------------------------------------------------------------- /src/shaders/twistedGallery/main/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | uniform sampler2D uTexture; 5 | 6 | varying vec2 vUv; 7 | varying float vNoise; 8 | 9 | void main(){ 10 | vec2 newUv=vUv; 11 | vec4 texture=texture2D(uTexture,newUv); 12 | vec3 color=texture.rgb; 13 | color.rgb+=.1*vNoise; 14 | gl_FragColor=vec4(color,1.); 15 | } -------------------------------------------------------------------------------- /src/shaders/distortImage/main/mousewave/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | uniform sampler2D uTexture; 5 | 6 | varying vec2 vUv; 7 | varying float vNoise; 8 | 9 | void main(){ 10 | vec2 newUv=vUv; 11 | vec4 texture=texture2D(uTexture,newUv); 12 | vec3 color=texture.rgb; 13 | color.rgb+=.1*vNoise; 14 | gl_FragColor=vec4(color,1.); 15 | } -------------------------------------------------------------------------------- /src/consts/thousandFollow.ts: -------------------------------------------------------------------------------- 1 | const thousandFollowFontUrl = 2 | "./static/fonts/droid_sans_mono_regular.typeface.json"; 3 | const thousandFollowFontConfig = { 4 | size: 0.5, 5 | height: 0.2, 6 | curveSegments: 120, 7 | bevelEnabled: true, 8 | bevelThickness: 0.03, 9 | bevelSize: 0.02, 10 | bevelOffset: 0, 11 | bevelSegments: 5, 12 | }; 13 | export { thousandFollowFontUrl, thousandFollowFontConfig }; 14 | -------------------------------------------------------------------------------- /src/shaders/morphParticles/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | 5 | varying vec2 vUv; 6 | varying vec3 vPosition; 7 | 8 | uniform vec3 uColor; 9 | 10 | void main(){ 11 | vec2 uv=vec2(gl_PointCoord.x,1.-gl_PointCoord.y); 12 | vec2 cUv=2.*uv-1.; 13 | vec3 color=vec3(1./length(cUv)); 14 | color.rgb*=uColor; 15 | gl_FragColor=vec4(color,1.); 16 | } -------------------------------------------------------------------------------- /src/shaders/unrollImages/main/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | uniform sampler2D uTexture; 5 | 6 | uniform float uProgress; 7 | 8 | varying vec2 vUv; 9 | varying vec3 vPosition; 10 | 11 | void main(){ 12 | vec4 texture=texture2D(uTexture,vUv); 13 | vec3 color=texture.rgb; 14 | float alpha=clamp(uProgress*5.,0.,1.); 15 | gl_FragColor=vec4(color,alpha); 16 | } -------------------------------------------------------------------------------- /src/shaders/modules/getEyeVector.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:getWorldPosition=require(./getWorldPosition) 2 | 3 | // https://tympanus.net/codrops/2019/10/29/real-time-multiside-refraction-in-three-steps/ 4 | vec3 getEyeVector(mat4 modelMat,vec3 pos,vec3 camPos){ 5 | vec4 worldPosition=getWorldPosition(modelMat,pos); 6 | vec3 eyeVector=normalize(worldPosition.xyz-camPos); 7 | return eyeVector; 8 | } 9 | 10 | #pragma glslify:export(getEyeVector) -------------------------------------------------------------------------------- /src/shaders/travellingParticles/vertex.glsl: -------------------------------------------------------------------------------- 1 | attribute float aOpacity; 2 | 3 | uniform float uSize; 4 | 5 | varying float vOpacity; 6 | 7 | void main(){ 8 | vec4 modelPosition=modelMatrix*vec4(position,1.); 9 | vec4 viewPosition=viewMatrix*modelPosition; 10 | vec4 projectedPosition=projectionMatrix*viewPosition; 11 | gl_Position=projectedPosition; 12 | gl_PointSize*=(uSize/-viewPosition.z); 13 | 14 | vOpacity=aOpacity; 15 | } -------------------------------------------------------------------------------- /src/shaders/twistedGallery/postprocessing/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform sampler2D tDiffuse; 2 | uniform float uRadius; 3 | uniform float uPower; 4 | 5 | varying vec2 vUv; 6 | 7 | void main(){ 8 | vec2 pivot=vec2(.5); 9 | vec2 d=vUv-pivot; 10 | float rDist=length(d); 11 | float gr=pow(rDist/uRadius,uPower); 12 | float mag=2.-cos(gr-1.); 13 | vec2 uvR=pivot+d*mag; 14 | vec4 color=texture2D(tDiffuse,uvR); 15 | gl_FragColor=color; 16 | } -------------------------------------------------------------------------------- /src/shaders/modules/deformationCurve.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:PI=require(glsl-constants/PI) 2 | 3 | // https://tympanus.net/codrops/2019/10/21/how-to-create-motion-hover-effects-with-image-distortions-using-three-js/ 4 | vec3 deformationCurve(vec3 position,vec2 uv,vec2 offset){ 5 | position.x=position.x+(sin(uv.y*PI)*offset.x); 6 | position.y=position.y+(sin(uv.x*PI)*offset.y); 7 | return position; 8 | } 9 | 10 | #pragma glslify:export(deformationCurve) -------------------------------------------------------------------------------- /src/shaders/modules/firePalette.glsl: -------------------------------------------------------------------------------- 1 | // https://www.shadertoy.com/view/XlSSzK 2 | vec3 firePalette(float i){ 3 | float T=1400.+1300.*i;// Temperature range (in Kelvin). 4 | vec3 L=vec3(7.4,5.6,4.4);// Red, green, blue wavelengths (in hundreds of nanometers). 5 | L=pow(L,vec3(5.))*(exp(1.43876719683e5/(T*L))-1.); 6 | return 1.-exp(-5e8/L);// Exposure level. Set to "50." For "70," change the "5" to a "7," etc. 7 | } 8 | 9 | #pragma glslify:export(firePalette) -------------------------------------------------------------------------------- /src/scenes/panorama.ts: -------------------------------------------------------------------------------- 1 | import "pannellum"; 2 | 3 | let pannellum: any; 4 | 5 | class Panorama { 6 | config: Record; 7 | viewer: any; 8 | constructor(config: Record) { 9 | this.config = config; 10 | this.viewer = null; 11 | } 12 | init() { 13 | const { config } = this; 14 | const viewer = pannellum.viewer(config.id, config.data); 15 | this.viewer = viewer; 16 | } 17 | } 18 | 19 | export default Panorama; 20 | -------------------------------------------------------------------------------- /src/shaders/leanGallery/postprocessing/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:RGBShift=require(../../modules/RGBShift) 2 | 3 | uniform sampler2D tDiffuse; 4 | uniform float uRGBShiftStrength; 5 | 6 | varying vec2 vUv; 7 | 8 | void main(){ 9 | vec2 offset=vec2(1.,0.)*uRGBShiftStrength; 10 | vec2 rUv=vUv+offset; 11 | vec2 gUv=vUv; 12 | vec2 bUv=vUv-offset; 13 | vec4 texture=RGBShift(tDiffuse,rUv,gUv,bUv,0.); 14 | vec4 color=texture; 15 | gl_FragColor=color; 16 | } -------------------------------------------------------------------------------- /src/shaders/nakedEye/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | 5 | varying vec2 vUv; 6 | varying vec3 vPosition; 7 | 8 | uniform sampler2D uTexture; 9 | uniform sampler2D uDepthMap; 10 | 11 | void main(){ 12 | vec4 depth=texture2D(uDepthMap,vUv); 13 | vec2 parallax=uMouse*depth.r*.025; 14 | vec2 newUv=vUv+parallax; 15 | vec4 texture=texture2D(uTexture,newUv); 16 | vec4 color=texture; 17 | gl_FragColor=color; 18 | } -------------------------------------------------------------------------------- /src/shaders/distortImage/main/hoverwave/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | uniform sampler2D uTexture; 5 | uniform float uHoverState; 6 | 7 | varying vec2 vUv; 8 | 9 | void main(){ 10 | vec2 newUv=vUv; 11 | float x=uHoverState; 12 | x=smoothstep(.0,1.,(x*2.+newUv.y-1.)); 13 | vec4 color=mix( 14 | texture2D(uTexture,(newUv-.5)*(1.-x)+.5), 15 | texture2D(uTexture,(newUv-.5)*x+.5), 16 | x); 17 | gl_FragColor=color; 18 | } -------------------------------------------------------------------------------- /src/components/NavBar.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 23 | -------------------------------------------------------------------------------- /src/shaders/distortImage/postprocessing/scroll/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | uniform sampler2D tDiffuse; 5 | uniform float uScrollSpeedTarget; 6 | 7 | varying vec2 vUv; 8 | 9 | void main(){ 10 | vec2 newUv=vUv; 11 | float area=smoothstep(.4,.0,vUv.y); 12 | area=pow(area,4.); 13 | newUv.x-=(vUv.x-.5)*.1*area*uScrollSpeedTarget; 14 | vec4 color=texture2D(tDiffuse,newUv); 15 | // vec4 color=vec4(area,0.,0.,1.); 16 | gl_FragColor=color; 17 | } -------------------------------------------------------------------------------- /src/shaders/particleShape/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:snoise2=require(glsl-noise/simplex/2d) 2 | 3 | uniform float uTime; 4 | uniform vec2 uMouse; 5 | uniform vec2 uResolution; 6 | uniform vec3 uColor1; 7 | uniform vec3 uColor2; 8 | uniform float uXVelocity; 9 | uniform float uYVelocity; 10 | 11 | varying vec2 vUv; 12 | varying vec3 vPosition; 13 | 14 | void main(){ 15 | float noise=snoise2(vec2(vUv.x+uTime*uXVelocity,vUv.y+uTime*uYVelocity)); 16 | vec3 color=mix(uColor1,uColor2,noise); 17 | gl_FragColor=vec4(color,1.); 18 | } -------------------------------------------------------------------------------- /src/shaders/gridIcosahedron/edge/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:edgeFactorTri=require(../../modules/edgeFactorTri) 2 | #pragma glslify:invert=require(../../modules/invert.glsl) 3 | 4 | uniform float uTime; 5 | uniform vec2 uMouse; 6 | uniform vec2 uResolution; 7 | uniform float uWidth; 8 | 9 | varying vec2 vUv; 10 | varying vec3 vCenter; 11 | 12 | void main(){ 13 | float line=invert(edgeFactorTri(vCenter,uWidth)); 14 | if(line<.1){ 15 | discard; 16 | } 17 | vec4 color=vec4(vec3(line),1.); 18 | gl_FragColor=color; 19 | } -------------------------------------------------------------------------------- /src/shaders/FBOParticles/basic/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | uniform sampler2D uPositionTexture; 4 | uniform float uPointSize; 5 | 6 | attribute vec2 reference; 7 | 8 | void main(){ 9 | vec3 pos=texture2D(uPositionTexture,reference).xyz; 10 | vec4 modelPosition=modelMatrix*vec4(pos,1.); 11 | vec4 viewPosition=viewMatrix*modelPosition; 12 | vec4 projectedPosition=projectionMatrix*viewPosition; 13 | gl_Position=projectedPosition; 14 | gl_PointSize=uPointSize*(1./-viewPosition.z); 15 | 16 | vUv=reference; 17 | } -------------------------------------------------------------------------------- /src/views/Sun.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/shaders/sun/ring/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:invert=require(../../modules/invert) 2 | #pragma glslify:firePalette=require(../../modules/firePalette) 3 | 4 | uniform float uTime; 5 | uniform vec2 uMouse; 6 | uniform vec2 uResolution; 7 | 8 | varying vec2 vUv; 9 | varying vec3 vPosition; 10 | 11 | void main(){ 12 | float radial=invert(vPosition.z); 13 | radial=pow(radial,3.); 14 | float brightness=(1.+radial*.83)*radial*.4; 15 | vec3 ringColor=firePalette(brightness); 16 | vec4 color=vec4(ringColor,radial); 17 | gl_FragColor=color; 18 | } -------------------------------------------------------------------------------- /src/shaders/FBOParticles/gpu/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:curlNoise=require(../../modules/curlNoise) 2 | 3 | uniform sampler2D texturePosition; 4 | 5 | uniform float uTime; 6 | uniform float uAmplitude; 7 | 8 | void main(){ 9 | 10 | vec2 uv=gl_FragCoord.xy/resolution.xy; 11 | vec4 tmpPos=texture2D(texturePosition,uv); 12 | vec3 position=tmpPos.xyz; 13 | float freq=1.; 14 | vec3 p=position*freq+vec3(uTime*.05); 15 | vec3 noise=curlNoise(p); 16 | vec3 newPos=position+uAmplitude*noise; 17 | 18 | gl_FragColor=vec4(newPos,1.); 19 | } -------------------------------------------------------------------------------- /src/views/Base.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/shaders/distortImage/main/twist/vertex.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:deformationCurve=require(../../../modules/deformationCurve) 2 | 3 | uniform float uTime; 4 | uniform float uScrollSpeed; 5 | 6 | varying vec2 vUv; 7 | 8 | void main(){ 9 | vec3 newPos=position; 10 | newPos=deformationCurve(newPos,uv,vec2(0.,uScrollSpeed*15.)); 11 | vec4 modelPosition=modelMatrix*vec4(newPos,1.); 12 | vec4 viewPosition=viewMatrix*modelPosition; 13 | vec4 projectedPosition=projectionMatrix*viewPosition; 14 | gl_Position=projectedPosition; 15 | 16 | vUv=uv; 17 | } -------------------------------------------------------------------------------- /src/views/VueLogo.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/hooks/useDialog.ts: -------------------------------------------------------------------------------- 1 | import { ref } from "vue"; 2 | 3 | export default () => { 4 | const showBackdrop = ref(false); 5 | const isBackdropClosable = ref(true); 6 | 7 | const closeAllDialog = () => { 8 | showBackdrop.value = false; 9 | }; 10 | 11 | const openDialog = 12 | (fn: Function, closable = true) => 13 | () => { 14 | showBackdrop.value = true; 15 | isBackdropClosable.value = closable; 16 | fn(); 17 | }; 18 | 19 | return { 20 | showBackdrop, 21 | isBackdropClosable, 22 | closeAllDialog, 23 | openDialog, 24 | }; 25 | }; 26 | -------------------------------------------------------------------------------- /src/shaders/particleShape/vertex.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:rotation2d=require(glsl-rotate/rotation-2d.glsl) 2 | 3 | uniform float uTime; 4 | uniform float uPointSize; 5 | uniform float uVelocity; 6 | 7 | varying vec2 vUv; 8 | 9 | void main(){ 10 | vec3 newPos=position; 11 | newPos.xz*=rotation2d(uTime*uVelocity); 12 | vec4 modelPosition=modelMatrix*vec4(newPos,1.); 13 | vec4 viewPosition=viewMatrix*modelPosition; 14 | vec4 projectedPosition=projectionMatrix*viewPosition; 15 | gl_Position=projectedPosition; 16 | gl_PointSize=uPointSize; 17 | 18 | vUv=uv; 19 | } -------------------------------------------------------------------------------- /src/shaders/twistedColorfulSphere/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:cosPalette=require(glsl-cos-palette) 2 | 3 | uniform float uTime; 4 | uniform vec2 uMouse; 5 | uniform vec2 uResolution; 6 | uniform float uIntensity; 7 | uniform vec3 uBrightness; 8 | uniform vec3 uContrast; 9 | uniform vec3 uOscilation; 10 | uniform vec3 uPhase; 11 | 12 | varying vec2 vUv; 13 | varying vec3 vNormal; 14 | varying float vNoise; 15 | 16 | void main(){ 17 | float noise=vNoise*uIntensity; 18 | vec3 color=cosPalette(noise,uBrightness,uContrast,uOscilation,uPhase); 19 | gl_FragColor=vec4(color,1.); 20 | } -------------------------------------------------------------------------------- /src/views/CurlTube.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/views/LineWave.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/views/NakedEye.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/shaders/curlTube/vertex.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:getWorldPosition=require(../modules/getWorldPosition) 2 | 3 | varying vec2 vUv; 4 | varying vec3 vPosition; 5 | varying vec3 vNormal; 6 | varying vec3 vWorldPosition; 7 | 8 | void main(){ 9 | vec4 modelPosition=modelMatrix*vec4(position,1.); 10 | vec4 viewPosition=viewMatrix*modelPosition; 11 | vec4 projectedPosition=projectionMatrix*viewPosition; 12 | gl_Position=projectedPosition; 13 | 14 | vUv=uv; 15 | vPosition=position; 16 | vNormal=normal; 17 | vWorldPosition=getWorldPosition(modelMatrix,position).xyz; 18 | } -------------------------------------------------------------------------------- /src/shaders/cylinderOrbitText/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | uniform sampler2D uTexture; 5 | uniform float uVelocity; 6 | uniform float uCylinderOpacity; 7 | 8 | varying vec2 vUv; 9 | varying vec3 vPosition; 10 | 11 | void main(){ 12 | vec2 repeat=vec2(1.,1.); 13 | vec2 repeatedUv=vUv*repeat; 14 | vec2 displacement=vec2(uTime*uVelocity,0.); 15 | vec2 uv=fract(repeatedUv+displacement); 16 | vec3 texture=texture2D(uTexture,uv).rgb; 17 | vec3 color=vec3(texture); 18 | gl_FragColor=vec4(color,uCylinderOpacity); 19 | } -------------------------------------------------------------------------------- /src/shaders/modules/RGBShift.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:blackAndWhite=require(./blackAndWhite) 2 | 3 | vec4 RGBShift(sampler2D t,vec2 rUv,vec2 gUv,vec2 bUv,float isBlackWhite){ 4 | vec4 color1=texture2D(t,rUv); 5 | vec4 color2=texture2D(t,gUv); 6 | vec4 color3=texture2D(t,bUv); 7 | if(isBlackWhite==1.){ 8 | color1.rgb=blackAndWhite(color1.rgb); 9 | color2.rgb=blackAndWhite(color2.rgb); 10 | color3.rgb=blackAndWhite(color3.rgb); 11 | } 12 | vec4 color=vec4(color1.r,color2.g,color3.b,color2.a); 13 | return color; 14 | } 15 | 16 | #pragma glslify:export(RGBShift) -------------------------------------------------------------------------------- /src/views/CloudySky.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/views/NoiseWave.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/views/SimpleFBM.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/views/SpikyBlob.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/views/Template.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/shaders/distortImage/main/twist/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:RGBShift=require(../../../modules/RGBShift) 2 | 3 | uniform float uTime; 4 | uniform vec2 uMouse; 5 | uniform vec2 uResolution; 6 | uniform sampler2D uTexture; 7 | uniform float uScrollSpeed; 8 | 9 | varying vec2 vUv; 10 | 11 | void main(){ 12 | vec2 newUv=vUv; 13 | vec2 rUv=newUv+vec2(.02)*uScrollSpeed/1.; 14 | vec2 gUv=newUv+vec2(.02)*uScrollSpeed/2.; 15 | vec2 bUv=newUv+vec2(.02)*uScrollSpeed/4.; 16 | vec4 texture=RGBShift(uTexture,rUv,gUv,bUv,0.); 17 | vec3 color=texture.rgb; 18 | gl_FragColor=vec4(color,1.); 19 | } -------------------------------------------------------------------------------- /src/shaders/waveCloth/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:computeNormal=require(../modules/computeNormal) 2 | #pragma glslify:fresnel=require(../modules/fresnel) 3 | 4 | uniform float uTime; 5 | uniform vec2 uMouse; 6 | uniform vec2 uResolution; 7 | 8 | varying vec2 vUv; 9 | varying vec3 vPosition; 10 | 11 | void main(){ 12 | // color 13 | vec3 color=vec3(1.); 14 | 15 | // alpha 16 | vec3 cNormal=computeNormal(vPosition); 17 | vec3 eyeVector=vec3(0.,0.,-1.); 18 | float F=fresnel(0.,.5,4.,eyeVector,cNormal); 19 | float alpha=F*.5; 20 | 21 | gl_FragColor=vec4(color,alpha); 22 | } -------------------------------------------------------------------------------- /src/views/RayTracing.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/views/TimeTravel.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/shaders/wavinFlag/vertex.glsl: -------------------------------------------------------------------------------- 1 | uniform vec2 uFrequency; 2 | uniform float uTime; 3 | 4 | varying vec2 vUv; 5 | varying float vElevation; 6 | 7 | void main(){ 8 | vec4 modelPosition=modelMatrix*vec4(position,1.); 9 | 10 | float elevation=sin(modelPosition.x*uFrequency.x-uTime)*.1; 11 | elevation+=sin(modelPosition.y*uFrequency.y-uTime)*.1; 12 | modelPosition.z+=elevation; 13 | 14 | vec4 viewPostion=viewMatrix*modelPosition; 15 | vec4 projectedPosition=projectionMatrix*viewPostion; 16 | gl_Position=projectedPosition; 17 | 18 | vUv=uv; 19 | vElevation=elevation; 20 | } -------------------------------------------------------------------------------- /src/shaders/modules/getScatter.glsl: -------------------------------------------------------------------------------- 1 | // https://ijdykeman.github.io/graphics/simple_fog_shader 2 | // https://lusion.co/ 3 | float getScatter(vec3 start,vec3 dir,vec3 lightPos,float d,float lightDivider,float lightPow){ 4 | // light to ray origin 5 | vec3 q=start-lightPos; 6 | 7 | // coefficients 8 | float b=dot(dir,q); 9 | float c=dot(q,q); 10 | 11 | // evaluate integral 12 | float t=c-b*b; 13 | float s=1./sqrt(max(.0001,t)); 14 | float l=s*(atan((d+b)*s)-atan(b*s)); 15 | 16 | return pow(max(0.,l/lightDivider),lightPow); 17 | } 18 | 19 | #pragma glslify:export(getScatter) -------------------------------------------------------------------------------- /src/views/CurveRacing.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/views/FloatBubbles.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/views/KineticText.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/views/FBOParticles.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/views/NoiseMarble.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/views/RayMarching.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/views/TwistedShape.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/templates/view.hbs: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/shaders/kineticText/plane/vertex.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform float uVelocity; 3 | uniform float uFrequency; 4 | 5 | varying vec2 vUv; 6 | varying vec3 vPosition; 7 | varying float vWave; 8 | 9 | void main(){ 10 | vec3 pos=position; 11 | float displacement=sin((pos.x-pos.y)*uFrequency-uTime*uVelocity); 12 | pos.z+=displacement; 13 | vec4 modelPosition=modelMatrix*vec4(pos,1.); 14 | vec4 viewPosition=viewMatrix*modelPosition; 15 | vec4 projectedPosition=projectionMatrix*viewPosition; 16 | gl_Position=projectedPosition; 17 | 18 | vUv=uv; 19 | vPosition=pos; 20 | vWave=pos.z; 21 | } -------------------------------------------------------------------------------- /src/shaders/twistedGallery/main/vertex.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uHoverUv; 3 | uniform float uHoverState; 4 | 5 | varying vec2 vUv; 6 | varying float vNoise; 7 | 8 | void main(){ 9 | vec3 newPos=position; 10 | float dist=distance(uv,uHoverUv); 11 | newPos.z+=10.*sin(10.*dist+uTime)*uHoverState; 12 | float noise=sin(10.*dist-uTime)*uHoverState; 13 | vec4 modelPosition=modelMatrix*vec4(newPos,1.); 14 | vec4 viewPosition=viewMatrix*modelPosition; 15 | vec4 projectedPosition=projectionMatrix*viewPosition; 16 | gl_Position=projectedPosition; 17 | 18 | vUv=uv; 19 | vNoise=noise; 20 | } -------------------------------------------------------------------------------- /src/views/DNAParticle.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/views/GridWave.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/views/LiquidCrystal.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/views/ParticleShape.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/views/DominosEffect.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/views/NoiseMaterial.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/shaders/distortImage/main/mousewave/vertex.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uHoverUv; 3 | uniform float uHoverState; 4 | 5 | varying vec2 vUv; 6 | varying float vNoise; 7 | 8 | void main(){ 9 | vec3 newPos=position; 10 | float dist=distance(uv,uHoverUv); 11 | newPos.z+=10.*sin(10.*dist+uTime)*uHoverState; 12 | float noise=sin(10.*dist-uTime)*uHoverState; 13 | vec4 modelPosition=modelMatrix*vec4(newPos,1.); 14 | vec4 viewPosition=viewMatrix*modelPosition; 15 | vec4 projectedPosition=projectionMatrix*viewPosition; 16 | gl_Position=projectedPosition; 17 | 18 | vUv=uv; 19 | vNoise=noise; 20 | } -------------------------------------------------------------------------------- /src/shaders/gridIcosahedron/edge/vertex.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:cnoise=require(glsl-noise/classic/3d) 2 | 3 | varying vec2 vUv; 4 | varying vec3 vCenter; 5 | 6 | attribute vec3 aCenter; 7 | 8 | uniform float uNoiseDensity; 9 | 10 | void main(){ 11 | // 噪声扭曲顶点 12 | vec3 noise=pow(cnoise(normal),3.)*normal*uNoiseDensity; 13 | vec3 newPos=position+noise; 14 | 15 | vec4 modelPosition=modelMatrix*vec4(newPos,1.); 16 | vec4 viewPosition=viewMatrix*modelPosition; 17 | vec4 projectedPosition=projectionMatrix*viewPosition; 18 | gl_Position=projectedPosition; 19 | 20 | vUv=uv; 21 | 22 | vCenter=aCenter; 23 | } -------------------------------------------------------------------------------- /src/views/Buildings.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/views/ThousandFollow.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/views/MorphParticles.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/views/TexProjection.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/views/WavinFlag.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/shaders/particleExplode/vertex.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:curlNoise=require(../modules/curlNoise) 2 | 3 | uniform float uTime; 4 | uniform float uProgress; 5 | varying vec2 vUv; 6 | 7 | void main(){ 8 | vec3 noise=curlNoise(vec3(position.x*.02,position.y*.008,uTime*.05)); 9 | vec3 distortion=vec3(position.x*2.,position.y,1.)*noise*uProgress; 10 | vec3 newPos=position+distortion; 11 | vec4 modelPosition=modelMatrix*vec4(newPos,1.); 12 | vec4 viewPosition=viewMatrix*modelPosition; 13 | vec4 projectedPosition=projectionMatrix*viewPosition; 14 | gl_Position=projectedPosition; 15 | gl_PointSize=2.; 16 | 17 | vUv=uv; 18 | } -------------------------------------------------------------------------------- /src/views/GridIcosahedron.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/views/RayMarchingBall.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/views/RayMarchingFire.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/views/ShapeTransition.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/shaders/distortImage/postprocessing/noise/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:cnoise=require(glsl-noise/classic/3d) 2 | 3 | uniform float uTime; 4 | uniform vec2 uMouse; 5 | uniform vec2 uResolution; 6 | uniform sampler2D tDiffuse; 7 | 8 | varying vec2 vUv; 9 | 10 | void main(){ 11 | vec2 newUv=vUv; 12 | float area=2.*smoothstep(1.,.8,vUv.y)-1.; 13 | float noise=.5*(cnoise(vec3(newUv*10.,uTime))+1.); 14 | float smoothedNoise=smoothstep(.5,.51,noise+area/2.); 15 | vec4 texture=texture2D(tDiffuse,newUv); 16 | // vec4 color=vec4(smoothedNoise,0.,0.,1.); 17 | vec4 color=mix(vec4(1.),texture,smoothedNoise); 18 | gl_FragColor=color; 19 | } -------------------------------------------------------------------------------- /src/views/BouncyBalloon.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/views/FloatWorld.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require("webpack"); 2 | 3 | module.exports = { 4 | productionSourceMap: false, 5 | publicPath: "/", 6 | chainWebpack: (config) => { 7 | config.module 8 | .rule("raw") 9 | .test(/\.(glsl|vs|fs|vert|frag)$/) 10 | .use("raw-loader") 11 | .loader("raw-loader") 12 | .end(); 13 | config.module 14 | .rule("glslify") 15 | .test(/\.(glsl|vs|fs|vert|frag)$/) 16 | .use("glslify-loader") 17 | .loader("glslify-loader") 18 | .end(); 19 | config.plugin("provide").use(webpack.ProvidePlugin, [ 20 | { 21 | THREE: "three", 22 | }, 23 | ]); 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /src/shaders/kineticText/torus/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:invert=require(../../modules/invert.glsl) 2 | 3 | uniform sampler2D uTexture; 4 | uniform float uTime; 5 | uniform float uVelocity; 6 | uniform float uShadow; 7 | 8 | varying vec2 vUv; 9 | varying vec3 vPosition; 10 | 11 | void main(){ 12 | vec2 repeat=vec2(6.,6.); 13 | vec2 repeatedUv=vUv*repeat; 14 | vec2 displacement=vec2(0.,uTime*uVelocity); 15 | vec2 uv=fract(repeatedUv+displacement); 16 | vec3 texture=texture2D(uTexture,uv).rgb; 17 | // texture*=vec3(uv.x,uv.y,1.); 18 | float shadow=vPosition.z/uShadow; 19 | vec3 color=vec3(texture*shadow); 20 | gl_FragColor=vec4(color,1.); 21 | } -------------------------------------------------------------------------------- /src/shaders/spikyBlob/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:snoise3=require(glsl-noise/simplex/3d) 2 | #pragma glslify:PI=require(glsl-constants/PI) 3 | 4 | uniform float uTime; 5 | uniform vec2 uMouse; 6 | uniform vec2 uResolution; 7 | uniform vec3 uColor1; 8 | uniform vec3 uColor2; 9 | uniform float uSpikeLength; 10 | 11 | varying vec2 vUv; 12 | varying vec3 vPosition; 13 | varying float vNoise; 14 | 15 | void main(){ 16 | float strength=snoise3(vec3(vUv*8.,uTime*.02))*.5+.5; 17 | vec3 color=mix(uColor1,uColor2,strength); 18 | float sine=sin(vUv.x*PI); 19 | float darkness=vNoise/uSpikeLength+1.; 20 | color*=(sine*.6+.4)*darkness; 21 | gl_FragColor=vec4(color,1.); 22 | } -------------------------------------------------------------------------------- /src/shaders/kineticText/cylinder/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:invert=require(../../modules/invert.glsl) 2 | 3 | uniform sampler2D uTexture; 4 | uniform float uTime; 5 | uniform float uVelocity; 6 | uniform float uShadow; 7 | 8 | varying vec2 vUv; 9 | varying vec3 vPosition; 10 | 11 | void main(){ 12 | vec2 repeat=vec2(12.,12.); 13 | vec2 repeatedUv=vUv*repeat; 14 | vec2 displacement=vec2(uTime*uVelocity+vUv.y,0.); 15 | vec2 uv=fract(repeatedUv+displacement); 16 | vec3 texture=texture2D(uTexture,uv).rgb; 17 | // texture*=vec3(uv.x,uv.y,1.); 18 | float shadow=vPosition.z/uShadow; 19 | vec3 color=vec3(texture*shadow); 20 | gl_FragColor=vec4(color,1.); 21 | } -------------------------------------------------------------------------------- /src/shaders/kineticText/sphere/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:invert=require(../../modules/invert.glsl) 2 | 3 | uniform sampler2D uTexture; 4 | uniform float uTime; 5 | uniform float uVelocity; 6 | uniform float uShadow; 7 | 8 | varying vec2 vUv; 9 | varying vec3 vPosition; 10 | 11 | void main(){ 12 | vec2 repeat=vec2(12.,12.); 13 | vec2 repeatedUv=vUv*repeat; 14 | vec2 displacement=vec2(sin(vUv.y)*5.,uTime*uVelocity); 15 | vec2 uv=fract(repeatedUv+displacement); 16 | vec3 texture=texture2D(uTexture,uv).rgb; 17 | // texture*=vec3(uv.x,uv.y,1.); 18 | float shadow=vPosition.z/uShadow; 19 | vec3 color=vec3(texture*shadow); 20 | gl_FragColor=vec4(color,1.); 21 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # h5-boilerplate-vue-ts 2 | 3 | 目录结构： 4 | 5 | - apis: 各种接口请求函数 6 | - assets: 图片素材 7 | - components: 组件 8 | - consts: 常量，如配置 9 | - hooks: 钩子，即可复用的函数 10 | - mock: 模拟请求数据 11 | - router: 路由 12 | - types: 类型 13 | - utils: 工具，如提示、请求等 14 | - views: 视图 15 | 16 | ## Project setup 17 | 18 | ``` 19 | npm install 20 | ``` 21 | 22 | ### Compiles and hot-reloads for development 23 | 24 | ``` 25 | npm run serve 26 | ``` 27 | 28 | ### Compiles and minifies for production 29 | 30 | ``` 31 | npm run build 32 | ``` 33 | 34 | ### Lints and fixes files 35 | 36 | ``` 37 | npm run lint 38 | ``` 39 | 40 | ### Customize configuration 41 | 42 | See [Configuration Reference](https://cli.vuejs.org/config/). 43 | -------------------------------------------------------------------------------- /src/shaders/shapeTransition/vertex.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:TWO_PI=require(glsl-constants/TWO_PI) 2 | 3 | attribute vec3 aPositionShape2; 4 | attribute vec3 aJitter; 5 | 6 | uniform float uTime; 7 | uniform float uChromaticBlur; 8 | 9 | void main(){ 10 | float phase=0.; 11 | phase=.5*(1.+cos(.8*(uTime+uChromaticBlur)+aJitter.x*.1*TWO_PI)); 12 | phase=smoothstep(.1,.9,phase); 13 | vec3 finalPosition=mix(position,aPositionShape2,phase); 14 | 15 | vec4 modelPosition=modelMatrix*vec4(finalPosition,1.); 16 | vec4 viewPosition=viewMatrix*modelPosition; 17 | vec4 projectedPosition=projectionMatrix*viewPosition; 18 | gl_Position=projectedPosition; 19 | gl_PointSize=2.; 20 | } -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 |
16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/shaders/morphParticles/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | attribute vec3 aPositionBox; 5 | attribute vec3 aPositionTorus; 6 | 7 | uniform float uTransition1; 8 | uniform float uTransition2; 9 | 10 | void main(){ 11 | vec3 transition1=mix(position,aPositionBox,uTransition1); 12 | vec3 transition2=mix(transition1,aPositionTorus,uTransition2); 13 | vec3 finalPos=transition2; 14 | vec4 modelPosition=modelMatrix*vec4(finalPos,1.); 15 | vec4 viewPosition=viewMatrix*modelPosition; 16 | vec4 projectedPosition=projectionMatrix*viewPosition; 17 | gl_Position=projectedPosition; 18 | gl_PointSize=3.; 19 | 20 | vUv=uv; 21 | vPosition=position; 22 | } -------------------------------------------------------------------------------- /src/views/CylinderOrbitText.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/shaders/kineticText/torusKnot/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:invert=require(../../modules/invert.glsl) 2 | 3 | uniform sampler2D uTexture; 4 | uniform float uTime; 5 | uniform float uVelocity; 6 | uniform float uShadow; 7 | 8 | varying vec2 vUv; 9 | varying vec3 vPosition; 10 | 11 | void main(){ 12 | vec2 repeat=vec2(12.,3.); 13 | vec2 repeatedUv=vUv*repeat; 14 | vec2 displacement=vec2(uTime*uVelocity,0.); 15 | vec2 uv=fract(repeatedUv+displacement); 16 | vec3 texture=texture2D(uTexture,uv).rgb; 17 | // texture*=vec3(uv.x,uv.y,1.); 18 | float shadow=clamp(vPosition.z/uShadow,0.,1.);// farther darker (to 0). 19 | vec3 color=vec3(texture*shadow); 20 | gl_FragColor=vec4(color,1.); 21 | } -------------------------------------------------------------------------------- /src/shaders/noiseMaterial/vertex.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:getNDC=require(../modules/getNDC) 2 | #pragma glslify:getEyeVector=require(../modules/getEyeVector) 3 | 4 | varying vec2 vUv; 5 | varying vec3 vPosition; 6 | varying vec3 vNdc; 7 | varying vec3 vNormal; 8 | varying vec3 vEyeVector; 9 | 10 | void main(){ 11 | vec4 modelPosition=modelMatrix*vec4(position,1.); 12 | vec4 viewPosition=viewMatrix*modelPosition; 13 | vec4 projectedPosition=projectionMatrix*viewPosition; 14 | gl_Position=projectedPosition; 15 | 16 | vUv=uv; 17 | vPosition=position; 18 | vNdc=getNDC(); 19 | vNormal=normalize(mat3(modelMatrix)*normal); 20 | vEyeVector=getEyeVector(modelMatrix,position,cameraPosition); 21 | } -------------------------------------------------------------------------------- /src/views/HyperbolicHelicoid.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/shaders/gridIcosahedron/postprocessing/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:hash=require(../../modules/hash) 2 | #pragma glslify:RGBShift=require(../../modules/RGBShift) 3 | 4 | uniform float uTime; 5 | uniform vec2 uMouse; 6 | uniform vec2 uResolution; 7 | uniform sampler2D tDiffuse; 8 | uniform float uRGBShift; 9 | 10 | varying vec2 vUv; 11 | 12 | void main(){ 13 | vec2 newUv=vUv; 14 | 15 | // RGB扭曲 16 | vec2 rUv=vUv+vec2(.01)*uRGBShift; 17 | vec2 gUv=vUv+vec2(0.); 18 | vec2 bUv=vUv+vec2(.01)*uRGBShift*-1.; 19 | vec4 color=RGBShift(tDiffuse,rUv,gUv,bUv,1.); 20 | 21 | // 噪声背景 22 | float noise=hash(newUv+uTime)*.15; 23 | color.rgb+=vec3(noise); 24 | 25 | gl_FragColor=color; 26 | } -------------------------------------------------------------------------------- /src/views/TwistedColorfulSphere.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/shaders/floatPaper/main/vertex.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform float uFloat; 3 | 4 | varying vec2 vUv; 5 | varying vec3 vPosition; 6 | 7 | vec3 distort(vec3 p){ 8 | float freq=.25; 9 | float angle=(uTime*10.+uv.x*20.-uv.y*10.)*freq; 10 | float amp=uFloat*10.; 11 | float strength=sin(angle)*amp; 12 | p.z+=strength; 13 | return p; 14 | } 15 | 16 | void main(){ 17 | vec3 newPos=position; 18 | vec3 distortedPos=distort(newPos); 19 | vec4 modelPosition=modelMatrix*vec4(distortedPos,1.); 20 | vec4 viewPosition=viewMatrix*modelPosition; 21 | vec4 projectedPosition=projectionMatrix*viewPosition; 22 | gl_Position=projectedPosition; 23 | 24 | vUv=uv; 25 | vPosition=position; 26 | } -------------------------------------------------------------------------------- /src/shaders/kineticText/plane/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:map=require(glsl-map) 2 | #pragma glslify:invert=require(../../modules/invert.glsl) 3 | 4 | uniform sampler2D uTexture; 5 | uniform float uTime; 6 | uniform float uVelocity; 7 | uniform float uShadow; 8 | 9 | varying vec2 vUv; 10 | varying vec3 vPosition; 11 | varying float vWave; 12 | 13 | void main(){ 14 | vec2 repeat=vec2(4.,16.); 15 | vec2 repeatedUv=vUv*repeat; 16 | vec2 uv=fract(repeatedUv); 17 | vec3 texture=texture2D(uTexture,uv).rgb; 18 | // texture*=vec3(uv.x,uv.y,1.); 19 | float wave=vWave; 20 | wave=map(wave,-1.,1.,0.,.1); 21 | float shadow=invert(wave); 22 | vec3 color=vec3(texture*shadow); 23 | gl_FragColor=vec4(color,1.); 24 | } -------------------------------------------------------------------------------- /src/shaders/thousandFollow/vertex.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:getWorldPosition=require(../modules/getWorldPosition) 2 | #pragma glslify:getEyeVector=require(../modules/getEyeVector) 3 | 4 | varying vec2 vUv; 5 | varying vec3 vWorldPosition; 6 | varying vec3 vNormal; 7 | varying vec3 vEyeVector; 8 | 9 | void main(){ 10 | vec4 modelPosition=modelMatrix*vec4(position,1.); 11 | vec4 viewPosition=viewMatrix*modelPosition; 12 | vec4 projectedPosition=projectionMatrix*viewPosition; 13 | gl_Position=projectedPosition; 14 | 15 | vUv=uv; 16 | vWorldPosition=getWorldPosition(modelMatrix,position).xyz; 17 | vNormal=normalize(mat3(modelMatrix)*normal); 18 | vEyeVector=getEyeVector(modelMatrix,position,cameraPosition); 19 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "strict": false, 6 | "jsx": "preserve", 7 | "importHelpers": true, 8 | "moduleResolution": "node", 9 | "skipLibCheck": true, 10 | "esModuleInterop": true, 11 | "allowSyntheticDefaultImports": true, 12 | "sourceMap": true, 13 | "baseUrl": ".", 14 | "types": ["webpack-env"], 15 | "paths": { 16 | "@/*": ["src/*"] 17 | }, 18 | "lib": ["esnext", "dom", "dom.iterable", "scripthost"] 19 | }, 20 | "include": [ 21 | "src/**/*.ts", 22 | "src/**/*.tsx", 23 | "src/**/*.vue", 24 | "tests/**/*.ts", 25 | "tests/**/*.tsx" 26 | ], 27 | "exclude": ["node_modules"] 28 | } 29 | -------------------------------------------------------------------------------- /src/views/RayMarchingPlayground.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/shaders/simpleFBM/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:centerUv=require(../modules/centerUv) 2 | #pragma glslify:snoise=require(glsl-noise/simplex/2d) 3 | 4 | uniform float uTime; 5 | uniform vec2 uMouse; 6 | uniform vec2 uResolution; 7 | 8 | varying vec2 vUv; 9 | varying vec3 vPosition; 10 | 11 | #define OCTAVES 6 12 | 13 | float fbm(vec2 p){ 14 | float sum=0.; 15 | float amp=.5; 16 | for(int i=0;i 2 |
5 | 6 | 7 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /src/shaders/imageRipple/main/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | varying vec3 vPosition; 3 | 4 | uniform vec2 uResolution; 5 | uniform float uProgress; 6 | 7 | float transition(vec2 st,float progress){ 8 | vec2 p=2.*st-1.; 9 | float l=pow(length(p)/2.,.5)/sqrt(2.); 10 | float r=smoothstep(l-.04,l+.04,progress); 11 | return r; 12 | } 13 | 14 | void main(){ 15 | vec3 newPos=position; 16 | float scale=800.; 17 | newPos.z+=uProgress*scale*(transition(uv,uProgress)-uProgress); 18 | vec4 modelPosition=modelMatrix*vec4(newPos,1.); 19 | vec4 viewPosition=viewMatrix*modelPosition; 20 | 21 | vec4 projectedPosition=projectionMatrix*viewPosition; 22 | gl_Position=projectedPosition; 23 | 24 | vUv=uv; 25 | vPosition=position; 26 | } -------------------------------------------------------------------------------- /src/shaders/gridIcosahedron/shape/vertex.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:cnoise=require(glsl-noise/classic/3d) 2 | #pragma glslify:getEyeVector=require(../../modules/getEyeVector) 3 | 4 | varying vec2 vUv; 5 | varying vec3 vNormal; 6 | varying vec3 vEyeVector; 7 | 8 | uniform float uNoiseDensity; 9 | 10 | void main(){ 11 | // 噪声扭曲顶点 12 | vec3 noise=pow(cnoise(normal),3.)*normal*uNoiseDensity; 13 | vec3 newPos=position+noise; 14 | 15 | vec4 modelPosition=modelMatrix*vec4(newPos,1.); 16 | vec4 viewPosition=viewMatrix*modelPosition; 17 | vec4 projectedPosition=projectionMatrix*viewPosition; 18 | gl_Position=projectedPosition; 19 | 20 | vUv=uv; 21 | 22 | // 获取N和I 23 | vNormal=normalize(normalMatrix*normal); 24 | vEyeVector=getEyeVector(modelMatrix,position,cameraPosition); 25 | } -------------------------------------------------------------------------------- /src/shaders/sun/noise/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:snoise4=require(glsl-noise/simplex/4d) 2 | 3 | #define OCTAVES 6 4 | 5 | uniform float uTime; 6 | uniform vec2 uMouse; 7 | uniform vec2 uResolution; 8 | 9 | varying vec2 vUv; 10 | varying vec3 vPosition; 11 | 12 | float fbm4d(vec4 p){ 13 | float sum=0.; 14 | float amp=1.; 15 | float scale=1.; 16 | for(int i=0;i { 20 | Object.entries(pos).forEach(([key, value]) => { 21 | pos[key] = 22 | value * (key === "x" ? xGap : yGap) + 23 | randomGap * ky.randomNumberInRange(0, 1); 24 | }); 25 | }); 26 | 27 | export { availableJieQis, buildingModelUrl, buildingPositions }; 28 | -------------------------------------------------------------------------------- /src/views/ParticleExplode.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /src/shaders/modules/capIntersect.glsl: -------------------------------------------------------------------------------- 1 | float capIntersect(in vec3 ro,in vec3 rd,in vec3 pa,in vec3 pb,in float ra) 2 | { 3 | vec3 ba=pb-pa; 4 | vec3 oa=ro-pa; 5 | float baba=dot(ba,ba); 6 | float bard=dot(ba,rd); 7 | float baoa=dot(ba,oa); 8 | float rdoa=dot(rd,oa); 9 | float oaoa=dot(oa,oa); 10 | float a=baba-bard*bard; 11 | float b=baba*rdoa-baoa*bard; 12 | float c=baba*oaoa-baoa*baoa-ra*ra*baba; 13 | float h=b*b-a*c; 14 | if(h>=0.) 15 | { 16 | float t=(-b-sqrt(h))/a; 17 | float y=baoa+t*bard; 18 | // body 19 | if(y>0.&&y0.)return-b-sqrt(h); 26 | } 27 | return 1e15; 28 | } 29 | #pragma glslify:export(capIntersect) -------------------------------------------------------------------------------- /src/shaders/modules/curlNoise.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:snoise=require(glsl-noise/simplex/3d) 2 | 3 | vec3 snoiseVec3(vec3 x){ 4 | return vec3(snoise(vec3(x)*2.-1.), 5 | snoise(vec3(x.y-19.1,x.z+33.4,x.x+47.2))*2.-1., 6 | snoise(vec3(x.z+74.2,x.x-124.5,x.y+99.4)*2.-1.) 7 | ); 8 | } 9 | 10 | vec3 curlNoise(vec3 p){ 11 | const float e=.1; 12 | vec3 dx=vec3(e,0.,0.); 13 | vec3 dy=vec3(0.,e,0.); 14 | vec3 dz=vec3(0.,0.,e); 15 | 16 | vec3 p_x0=snoiseVec3(p-dx); 17 | vec3 p_x1=snoiseVec3(p+dx); 18 | vec3 p_y0=snoiseVec3(p-dy); 19 | vec3 p_y1=snoiseVec3(p+dy); 20 | vec3 p_z0=snoiseVec3(p-dz); 21 | vec3 p_z1=snoiseVec3(p+dz); 22 | 23 | float x=p_y1.z-p_y0.z-p_z1.y+p_z0.y; 24 | float y=p_z1.x-p_z0.x-p_x1.z+p_x0.z; 25 | float z=p_x1.y-p_x0.y-p_y1.x+p_y0.x; 26 | 27 | const float divisor=1./(2.*e); 28 | return normalize(vec3(x,y,z)*divisor); 29 | } 30 | 31 | #pragma glslify:export(curlNoise) -------------------------------------------------------------------------------- /src/shaders/lineWave/vertex.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:snoise=require(glsl-noise/simplex/3d) 2 | #pragma glslify:invert=require(../modules/invert.glsl) 3 | #pragma glslify:readDepth=require(../modules/readDepth.glsl) 4 | 5 | uniform float cameraNear; 6 | uniform float cameraFar; 7 | uniform sampler2D uDepth; 8 | uniform float uTime; 9 | uniform float uDepthScale; 10 | 11 | varying float vDepth; 12 | 13 | attribute float aY; 14 | 15 | void main(){ 16 | vec2 newUv=vec2(uv.x,aY); 17 | float depth=readDepth(uDepth,newUv,cameraNear,cameraFar); 18 | vec3 pos=position; 19 | pos.z+=invert(depth)*uDepthScale; 20 | pos.y+=.01*snoise(vec3(newUv*30.,uTime/2.)); 21 | vec4 modelPosition=modelMatrix*vec4(pos,1.); 22 | vec4 viewPosition=viewMatrix*modelPosition; 23 | vec4 projectedPosition=projectionMatrix*viewPosition; 24 | gl_Position=projectedPosition; 25 | 26 | vDepth=depth; 27 | } -------------------------------------------------------------------------------- /src/consts/bellStrike.ts: -------------------------------------------------------------------------------- 1 | const bellModelUrl = "./static/models/bell.gltf"; 2 | const woodTextureUrl = "./static/textures/wood.jpg"; 3 | const bellAudioUrl = "./static/audios/bell.mp3"; 4 | const pavilionModelUrl = "./static/models/pavilion.gltf"; 5 | const planeTextureUrl = "./static/textures/plane.jpg"; 6 | const cloudModelUrl = "./static/models/cloud.fbx"; 7 | const bgTextureUrl = "./static/textures/bg.jpg"; 8 | const bellTextureUrl = "./static/textures/bell.jpg"; 9 | const skyParams = { 10 | turbidity: 10, 11 | rayleigh: 3, 12 | mieCoefficient: 0.005, 13 | mieDirectionalG: 0.7, 14 | inclination: 0.49, // elevation / inclination 15 | azimuth: 0.25, // Facing front, 16 | exposure: 0.5, 17 | }; 18 | export { 19 | bellModelUrl, 20 | woodTextureUrl, 21 | bellAudioUrl, 22 | pavilionModelUrl, 23 | planeTextureUrl, 24 | cloudModelUrl, 25 | skyParams, 26 | bgTextureUrl, 27 | bellTextureUrl, 28 | }; 29 | -------------------------------------------------------------------------------- /src/shaders/pixelRiver/postprocessing/fragment.glsl: -------------------------------------------------------------------------------- 1 | uniform float uTime; 2 | uniform vec2 uMouse; 3 | uniform vec2 uResolution; 4 | uniform sampler2D tDiffuse; 5 | uniform float uProgress; 6 | uniform float uWaveScale; 7 | uniform float uDistA; 8 | uniform float uDistB; 9 | 10 | varying vec2 vUv; 11 | 12 | void main(){ 13 | vec2 newUv=vUv; 14 | vec2 p=2.*newUv-1.; 15 | 16 | p+=.11*cos((1.3*uWaveScale)*p.yx+1.3*uTime+vec2(.4,1.7)); 17 | p+=.12*cos((2.5*uWaveScale)*p.yx+1.5*uTime+vec2(2.7,3.9)); 18 | p+=.13*cos((2.4*uWaveScale)*p.yx+1.9*uTime+vec2(2.3,4.6)); 19 | p+=uDistA*cos((uDistB*uWaveScale)*p.yx+1.4*uTime+vec2(5.8,4.2)); 20 | 21 | float ring=length(p); 22 | 23 | float dUvX=mix(vUv.x,ring,uProgress); 24 | float dUvY=mix(vUv.y,0.,uProgress); 25 | vec2 distortedUv=vec2(dUvX,dUvY); 26 | 27 | vec4 color=texture2D(tDiffuse,distortedUv); 28 | gl_FragColor=color; 29 | } -------------------------------------------------------------------------------- /src/shaders/modules/readDepth.glsl: -------------------------------------------------------------------------------- 1 | // From: three.js\src\renderers\shaders\ShaderChunk\packing.glsl.js 2 | float viewZToPerspectiveDepth(const in float viewZ,const in float near,const in float far){ 3 | return((near+viewZ)*far)/((far-near)*viewZ); 4 | } 5 | 6 | float viewZToOrthographicDepth(const in float viewZ,const in float near,const in float far){ 7 | return(viewZ+near)/(near-far); 8 | } 9 | 10 | float perspectiveDepthToViewZ(const in float invClipZ,const in float near,const in float far){ 11 | return(near*far)/((far-near)*invClipZ-far); 12 | } 13 | 14 | // From: three.js\examples\webgl_depth_texture.html 15 | float readDepth(sampler2D depthSampler,vec2 coord,float camNear,float camFar){ 16 | float fragCoordZ=texture2D(depthSampler,coord).x; 17 | float viewZ=perspectiveDepthToViewZ(fragCoordZ,camNear,camFar); 18 | return viewZToOrthographicDepth(viewZ,camNear,camFar); 19 | } 20 | 21 | #pragma glslify:export(readDepth) -------------------------------------------------------------------------------- /src/shaders/waveCloth/vertex.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:vnoise=require(../modules/vnoise) 2 | 3 | uniform float uTime; 4 | 5 | varying vec2 vUv; 6 | varying vec3 vPosition; 7 | 8 | float xmbNoise(vec3 x){ 9 | return cos(x.z*4.)*cos(x.z+uTime/10.+x.x); 10 | } 11 | 12 | void main(){ 13 | vec3 p=vec3(position.x,0.,position.y); 14 | 15 | // noise wave 16 | p.y=xmbNoise(p)/8.; 17 | 18 | // distort 19 | vec3 p2=p; 20 | p2.x-=uTime/5.; 21 | p2.x/=4.; 22 | p2.y-=uTime/100.; 23 | p2.z-=uTime/10.; 24 | p.y-=vnoise(p2*8.)/12.+cos(p.x*2.-uTime/2.)/5.-.3; 25 | p.z-=vnoise(p2*8.)/12.; 26 | 27 | // vec4 modelPosition=modelMatrix*vec4(position,1.); 28 | vec4 modelPosition=modelMatrix*vec4(p,1.); 29 | vec4 viewPosition=viewMatrix*modelPosition; 30 | vec4 projectedPosition=projectionMatrix*viewPosition; 31 | gl_Position=projectedPosition; 32 | 33 | vUv=uv; 34 | vPosition=p; 35 | } -------------------------------------------------------------------------------- /src/consts/noiseMarble.ts: -------------------------------------------------------------------------------- 1 | // https://polyhaven.com/ 2 | const hdrUrl = "./static/hdrs/orbita.hdr"; 3 | 4 | const heightMapUrl = "./static/noisemaps/1.jpeg"; 5 | const displacementMapUrl = "./static/noisemaps/5.jpeg"; 6 | 7 | // http://kitfox.com/projects/perlinNoiseMaker/ 8 | // const heightMapUrl = "./static/noisemaps/2.png"; 9 | // const displacementMapUrl = "./static/noisemaps/4.png"; 10 | 11 | // const heightMapUrl = "./static/noisemaps/6.png"; 12 | // const displacementMapUrl = "./static/noisemaps/5.jpeg"; 13 | 14 | // const heightMapUrl = "./static/noisemaps/7.png"; 15 | // const displacementMapUrl = "./static/noisemaps/5.jpeg"; 16 | 17 | // const heightMapUrl = "./static/noisemaps/8.png"; 18 | // const displacementMapUrl = "./static/noisemaps/5.jpeg"; 19 | 20 | // const heightMapUrl = "./static/noisemaps/9.png"; 21 | // const displacementMapUrl = "./static/noisemaps/5.jpeg"; 22 | 23 | export { hdrUrl, heightMapUrl, displacementMapUrl }; 24 | -------------------------------------------------------------------------------- /src/shaders/twistedColorfulSphere/vertex.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:cnoise=require(glsl-noise/classic/3d) 2 | #pragma glslify:rotateY=require(glsl-rotate/rotateY) 3 | 4 | uniform float uTime; 5 | uniform float uSpeed; 6 | uniform float uNoiseStrength; 7 | uniform float uNoiseDensity; 8 | uniform float uAmplitude; 9 | uniform float uFrequency; 10 | 11 | varying vec2 vUv; 12 | varying vec3 vNormal; 13 | varying float vNoise; 14 | 15 | void main(){ 16 | float displacement=uTime*uSpeed; 17 | float noise=cnoise((normal+displacement)*uNoiseDensity)*uNoiseStrength; 18 | vec3 newPos=position+(normal*noise); 19 | float angle=uAmplitude*sin(uFrequency*uv.y+uTime); 20 | newPos=rotateY(newPos,angle); 21 | vec4 modelPosition=modelMatrix*vec4(newPos,1.); 22 | vec4 viewPosition=viewMatrix*modelPosition; 23 | vec4 projectedPosition=projectionMatrix*viewPosition; 24 | gl_Position=projectedPosition; 25 | 26 | vUv=uv; 27 | vNormal=normal; 28 | vNoise=noise; 29 | } -------------------------------------------------------------------------------- /src/shaders/liquidCrystal/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:snoise=require(glsl-noise/simplex/3d) 2 | #pragma glslify:invert=require(../modules/invert) 3 | 4 | uniform float uTime; 5 | uniform vec2 uMouse; 6 | uniform vec2 uResolution; 7 | uniform sampler2D uIriMap; 8 | uniform float uIriBoost; 9 | 10 | varying vec2 vUv; 11 | varying vec3 vWorldNormal; 12 | 13 | void main(){ 14 | vec2 newUv=vUv; 15 | 16 | // pbr 17 | float noise=snoise(vWorldNormal*5.)*.3; 18 | vec3 N=normalize(vWorldNormal+vec3(noise)); 19 | vec3 V=normalize(cameraPosition); 20 | float NdotV=max(dot(N,V),0.); 21 | float colorStrength=smoothstep(0.,.8,NdotV); 22 | vec3 color=invert(vec3(colorStrength)); 23 | 24 | // iri 25 | vec3 airy=texture2D(uIriMap,vec2(NdotV*.99,0.)).rgb; 26 | airy*=airy; 27 | vec3 specularLight=vWorldNormal*airy*uIriBoost; 28 | 29 | float mixStrength=smoothstep(.3,.6,NdotV); 30 | vec3 finalColor=mix(specularLight,color,mixStrength); 31 | 32 | gl_FragColor=vec4(finalColor,0.); 33 | } -------------------------------------------------------------------------------- /src/shaders/sun/shape/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:fresnel=require(../../modules/fresnel) 2 | #pragma glslify:firePalette=require(../../modules/firePalette) 3 | 4 | uniform float uTime; 5 | uniform vec2 uMouse; 6 | uniform vec2 uResolution; 7 | uniform samplerCube uNoiseTexture; 8 | uniform float uBrightness; 9 | 10 | varying vec2 vUv; 11 | varying vec3 vPosition; 12 | varying vec3 vLayer1; 13 | varying vec3 vLayer2; 14 | varying vec3 vLayer3; 15 | varying vec3 vNormal; 16 | varying vec3 vEyeVector; 17 | 18 | float layerSum(){ 19 | float sum=0.; 20 | sum+=textureCube(uNoiseTexture,vLayer1).r; 21 | sum+=textureCube(uNoiseTexture,vLayer2).r; 22 | sum+=textureCube(uNoiseTexture,vLayer3).r; 23 | sum*=uBrightness; 24 | return sum; 25 | } 26 | 27 | void main(){ 28 | float brightness=layerSum(); 29 | brightness=4.*brightness+1.; 30 | float F=fresnel(0.,1.,2.,vEyeVector,vNormal); 31 | brightness+=F; 32 | brightness*=.5; 33 | vec4 color=vec4(firePalette(brightness),1.); 34 | gl_FragColor=color; 35 | } -------------------------------------------------------------------------------- /src/shaders/DNAParticle/main/vertex.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:random=require(glsl-random) 2 | #pragma glslify:quinticInOut=require(glsl-easings/quintic-in-out) 3 | 4 | varying vec2 vUv; 5 | varying vec3 vPosition; 6 | 7 | varying float vRandColor; 8 | varying float vRandAlpha; 9 | 10 | uniform float uSize; 11 | uniform float uProgress; 12 | 13 | void main(){ 14 | // rand particle color and alpha 15 | float randColor=random(uv); 16 | float randAlpha=random(uv+50.); 17 | float randAnimeOffset=random(uv); 18 | 19 | vec3 newPos=position; 20 | 21 | // anime 22 | // newPos.y+=quinticInOut(clamp(0.,1.,(uProgress-uv.y*.6)/.4)); 23 | 24 | vec4 modelPosition=modelMatrix*vec4(newPos,1.); 25 | vec4 viewPosition=viewMatrix*modelPosition; 26 | vec4 projectedPosition=projectionMatrix*viewPosition; 27 | 28 | gl_Position=projectedPosition; 29 | gl_PointSize=uSize*(1./-viewPosition.z); 30 | 31 | vUv=uv; 32 | vPosition=position; 33 | vRandColor=randColor; 34 | vRandAlpha=randAlpha; 35 | } -------------------------------------------------------------------------------- /src/shaders/DNAParticle/main/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:circle=require(../../modules/circle) 2 | 3 | uniform float uTime; 4 | uniform vec2 uMouse; 5 | uniform vec2 uResolution; 6 | 7 | uniform vec3 uColor1; 8 | uniform vec3 uColor2; 9 | uniform vec3 uColor3; 10 | uniform float uGradInner; 11 | uniform float uGradMaskTop; 12 | uniform float uGradMaskBottom; 13 | 14 | varying vec2 vUv; 15 | varying vec3 vPosition; 16 | 17 | varying float vRandColor; 18 | varying float vRandAlpha; 19 | 20 | void main(){ 21 | // rand particle color 22 | vec3 color=uColor1; 23 | if(vRandColor>0.&&vRandColor<.33){ 24 | color=uColor2; 25 | }else if(vRandColor>.33&&vRandColor<.66){ 26 | color=uColor3; 27 | } 28 | color*=vRandAlpha; 29 | 30 | // circle alpha 31 | float alpha=circle(gl_PointCoord,1.); 32 | 33 | // vertical grad mask 34 | float gradMask=smoothstep(uGradMaskTop,uGradMaskBottom,vUv.y); 35 | alpha*=gradMask; 36 | 37 | vec4 finalColor=vec4(color,1.)*alpha; 38 | gl_FragColor=finalColor; 39 | } -------------------------------------------------------------------------------- /src/shaders/noiseMarble/fragmentMain.glsl: -------------------------------------------------------------------------------- 1 | float rayMarch(vec3 eye,vec3 ray){ 2 | float iter=64.; 3 | float ratio=1./iter; 4 | vec3 p=eye; 5 | float depth=0.; 6 | 7 | for(float i=0.;i 2 |
5 |
6 |
7 | 13 |
14 |
15 | 16 | 17 | 34 | 35 | 44 | -------------------------------------------------------------------------------- /src/types/index.d.ts: -------------------------------------------------------------------------------- 1 | import * as THREE from "three"; 2 | 3 | declare module "@alphardex/aqua.sp/dist/aqua.sp.min.css"; 4 | 5 | export interface NavItem { 6 | to: Path; 7 | text: string; 8 | } 9 | 10 | export interface Path { 11 | name?: string; 12 | path?: string; 13 | query?: Record; 14 | } 15 | 16 | export interface MeshObject { 17 | geometry?: THREE.Geometry | THREE.BufferGeometry; 18 | material?: THREE.Material; 19 | position?: THREE.Vector3; 20 | } 21 | 22 | export interface Point3D { 23 | x: number; 24 | y: number; 25 | z: number; 26 | } 27 | 28 | export interface SunshineInfo { 29 | time: string; 30 | pos: SunshinePos; 31 | } 32 | 33 | export interface SunshinePos { 34 | sunshinePos: any; 35 | sunshinePosCalc: Point3D; 36 | } 37 | 38 | export interface PerspectiveCameraParams { 39 | fov?: number; 40 | near?: number; 41 | far?: number; 42 | } 43 | 44 | export interface OrthographicCameraParams { 45 | top?: number; 46 | right?: number; 47 | bottom?: number; 48 | left?: number; 49 | zoom?: number; 50 | near?: number; 51 | far?: number; 52 | } 53 | -------------------------------------------------------------------------------- /plopfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function (plop) { 2 | // create your generators here 3 | plop.setGenerator("scene", { 4 | description: "generate a three.js scene", 5 | prompts: [ 6 | { type: "input", name: "name", message: "scene name" }, 7 | { type: "input", name: "nameUpper", message: "scene name (uppercase)" }, 8 | { type: "input", name: "nameKecab", message: "scene name (kecab-case)" }, 9 | ], // array of inquirer prompts 10 | actions: [ 11 | { 12 | type: "add", 13 | path: "src/scenes/{{name}}.ts", 14 | templateFile: "src/templates/scene.hbs", 15 | }, 16 | { 17 | type: "add", 18 | path: "src/shaders/{{name}}/vertex.glsl", 19 | templateFile: "src/templates/vertexShader.hbs", 20 | }, 21 | { 22 | type: "add", 23 | path: "src/shaders/{{name}}/fragment.glsl", 24 | templateFile: "src/templates/fragmentShader.hbs", 25 | }, 26 | { 27 | type: "add", 28 | path: "src/views/{{nameUpper}}.vue", 29 | templateFile: "src/templates/view.hbs", 30 | }, 31 | ], // array of actions 32 | }); 33 | }; 34 | -------------------------------------------------------------------------------- /src/shaders/cloudySky/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:centerUv=require(../modules/centerUv) 2 | #pragma glslify:snoise=require(glsl-noise/simplex/3d) 3 | #pragma glslify:invert=require(../modules/invert) 4 | 5 | uniform float uTime; 6 | uniform vec2 uMouse; 7 | uniform vec2 uResolution; 8 | uniform float uVelocity; 9 | uniform vec3 uSkyColor; 10 | 11 | varying vec2 vUv; 12 | varying vec3 vPosition; 13 | 14 | #define OCTAVES 6 15 | 16 | float fbm(vec3 p){ 17 | float sum=0.; 18 | float amp=1.; 19 | for(int i=0;i { 9 | u = Math.PI * 2 * (u - 0.5); 10 | v = Math.PI * 2 * (v - 0.5); 11 | const tau = 5; 12 | const bottom = 1 + Math.cosh(u) * Math.cosh(v); 13 | const x = (Math.sinh(v) * Math.cos(tau * u)) / bottom; 14 | const y = (Math.sinh(v) * Math.sin(tau * u)) / bottom; 15 | const z = (Math.cosh(v) * Math.sinh(u)) / bottom; 16 | target.set(x, z, y); 17 | }; 18 | 19 | // https://arxiv.org/pdf/1604.02174.pdf 20 | const sphubeFunction = (u1, v1, target) => { 21 | const s = 0.6; 22 | const r = 1; 23 | const theta = 2 * u1 * Math.PI; 24 | const phi = v1 * 2 * Math.PI; 25 | 26 | const u = Math.cos(theta) * Math.cos(phi); 27 | const v = Math.cos(theta) * Math.sin(phi); 28 | const w = Math.sin(theta); 29 | 30 | const z = (r * u) / Math.sqrt(1 - s * v ** 2 - s * w ** 2); 31 | const x = (r * v) / Math.sqrt(1 - s * u ** 2 - s * w ** 2); 32 | const y = (r * w) / Math.sqrt(1 - s * Math.cos(theta) ** 2); 33 | 34 | target.set(x, y, z); 35 | }; 36 | 37 | export { hyperbolicHelicoidFunction, sphubeFunction }; 38 | -------------------------------------------------------------------------------- /src/shaders/gooeyImage/main/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:centerUv=require(../../modules/centerUv) 2 | #pragma glslify:snoise=require(glsl-noise/simplex/3d) 3 | 4 | uniform float uTime; 5 | uniform vec2 uMouse; 6 | uniform vec2 uResolution; 7 | uniform sampler2D uTexture; 8 | 9 | uniform sampler2D uTexture2; 10 | uniform vec2 uHoverUv; 11 | 12 | varying vec2 vUv; 13 | varying vec3 vPosition; 14 | 15 | void main(){ 16 | vec2 uv=vUv; 17 | vec4 texture1=texture2D(uTexture,uv); 18 | vec4 texture2=texture2D(uTexture2,uv); 19 | vec3 colorA=texture1.rgb; 20 | vec3 colorB=texture2.rgb; 21 | 22 | vec2 cUv=centerUv(vUv,uResolution); 23 | vec2 cHoverUv=centerUv(uHoverUv,uResolution); 24 | 25 | // circle 26 | float circleShape=1.-distance(cUv,cHoverUv); 27 | 28 | // noise 29 | float uvX=cUv.x+sin(cUv.y+uTime*.1); 30 | float uvY=cUv.y-uTime*.1; 31 | vec3 distortedUv=vec3(uvX,uvY,uTime*.1)*8.; 32 | float noise=snoise(distortedUv)-1.; 33 | 34 | // final 35 | float mask=circleShape*2.5+noise*.5; 36 | float finalMask=smoothstep(.4,.5,mask); 37 | vec3 finalColor=mix(colorA,colorB,finalMask); 38 | // finalColor=vec3(finalMask); 39 | 40 | gl_FragColor=vec4(finalColor,1.); 41 | } -------------------------------------------------------------------------------- /src/shaders/modules/roundedboxIntersectModified.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:capIntersect=require(./capIntersect) 2 | 3 | float roundedboxIntersectModified(in vec3 rayOrigin,in vec3 rayDirection,in vec3 size,in float rad){ 4 | // bounding box 5 | vec3 m=1./rayDirection; 6 | vec3 n=m*rayOrigin; 7 | vec3 k=abs(m)*(size+rad); 8 | vec3 t1=-n-k; 9 | vec3 t2=-n+k; 10 | float tN=max(max(t1.x,t1.y),t1.z); 11 | float tF=min(min(t2.x,t2.y),t2.z); 12 | if(tN>tF||tF<0.){ 13 | return 1e15; 14 | } 15 | float t=tN; 16 | 17 | // convert to first octant 18 | vec3 pos=rayOrigin+t*rayDirection; 19 | vec3 s=sign(pos); 20 | vec3 ro=rayOrigin*s; 21 | vec3 rd=rayDirection*s; 22 | pos*=s; 23 | 24 | // faces 25 | pos-=size; 26 | pos=max(pos.xyz,pos.yzx); 27 | if(min(min(pos.x,pos.y),pos.z)<0.){ 28 | return t; 29 | } 30 | 31 | t=capIntersect(ro,rd,vec3(size.x,-size.y,size.z),vec3(size.x,size.y,size.z),rad); 32 | t=min(t,capIntersect(ro,rd,vec3(size.x,size.y,-size.z),vec3(size.x,size.y,size.z),rad)); 33 | t=min(t,capIntersect(ro,rd,vec3(-size.x,size.y,size.z),vec3(size.x,size.y,size.z),rad)); 34 | 35 | return t; 36 | } 37 | #pragma glslify:export(roundedboxIntersectModified) -------------------------------------------------------------------------------- /src/shaders/gridIcosahedron/shape/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:computeNormal=require(../../modules/computeNormal) 2 | #pragma glslify:hash22=require(../../modules/hash22) 3 | #pragma glslify:fresnel=require(../../modules/fresnel) 4 | #pragma glslify:invert=require(../../modules/invert.glsl) 5 | 6 | uniform float uTime; 7 | uniform vec2 uMouse; 8 | uniform vec2 uResolution; 9 | uniform sampler2D uTexture; 10 | uniform float uRefractionStrength; 11 | 12 | varying vec2 vUv; 13 | varying vec3 vNormal; 14 | varying vec3 vEyeVector; 15 | 16 | void main(){ 17 | vec2 newUv=vUv; 18 | 19 | // 平滑着色 20 | vec3 cNormal=computeNormal(vNormal); 21 | 22 | // 漫反射 23 | float diffuse=dot(cNormal,vec3(1.)); 24 | 25 | // 折射随机度 26 | vec2 rand=hash22(vec2(floor(diffuse*10.))); 27 | vec2 strength=vec2(sign((rand.x-.5))+(rand.x-.5)*.6,sign((rand.y-.5))+(rand.y-.5)*.6); 28 | newUv=strength*gl_FragCoord.xy/vec2(1000.); 29 | 30 | // 折射 31 | vec3 refraction=.3*refract(vEyeVector,cNormal,1./3.); 32 | newUv+=refraction.xy; 33 | 34 | // 材质贴图 35 | vec4 texture=texture2D(uTexture,newUv); 36 | vec4 color=texture; 37 | 38 | // 菲涅尔反射 39 | float F=fresnel(0.,1.,2.,vEyeVector,cNormal); 40 | color*=(1.-F); 41 | 42 | gl_FragColor=color; 43 | } -------------------------------------------------------------------------------- /src/views/ImageCloth.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 42 | 43 | 52 | -------------------------------------------------------------------------------- /src/shaders/sun/shape/vertex.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:rotate=require(glsl-rotate) 2 | #pragma glslify:getEyeVector=require(../../modules/getEyeVector) 3 | 4 | uniform float uTime; 5 | uniform float uVelocity; 6 | uniform float uStagger; 7 | 8 | varying vec2 vUv; 9 | varying vec3 vPosition; 10 | varying vec3 vLayer1; 11 | varying vec3 vLayer2; 12 | varying vec3 vLayer3; 13 | varying vec3 vNormal; 14 | varying vec3 vEyeVector; 15 | 16 | void main(){ 17 | vec4 modelPosition=modelMatrix*vec4(position,1.); 18 | vec4 viewPosition=viewMatrix*modelPosition; 19 | vec4 projectedPosition=projectionMatrix*viewPosition; 20 | gl_Position=projectedPosition; 21 | 22 | vec3 pos=position; 23 | float displacement1=uVelocity*uTime; 24 | float displacement2=uVelocity*(uTime*1.5+uStagger*1.); 25 | float displacement3=uVelocity*(uTime*2.+uStagger*2.); 26 | vec3 xy=vec3(1.,1.,0.); 27 | vec3 xz=vec3(1.,0.,1.); 28 | vec3 yz=vec3(0.,1.,1.); 29 | vec3 layer1=rotate(pos,xy,displacement1); 30 | vec3 layer2=rotate(pos,xz,displacement2); 31 | vec3 layer3=rotate(pos,yz,displacement3); 32 | 33 | vUv=uv; 34 | vPosition=position; 35 | vLayer1=layer1; 36 | vLayer2=layer2; 37 | vLayer3=layer3; 38 | vNormal=normal; 39 | vEyeVector=getEyeVector(modelMatrix,position,cameraPosition); 40 | } -------------------------------------------------------------------------------- /src/views/Menu.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /src/views/FloatPaper.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 37 | 38 | 59 | -------------------------------------------------------------------------------- /src/views/ImagePlane.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 37 | 38 | 59 | -------------------------------------------------------------------------------- /src/views/ImageRipple.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 37 | 38 | 59 | -------------------------------------------------------------------------------- /src/views/DistortImage.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 37 | 38 | 59 | -------------------------------------------------------------------------------- /src/views/PixelRiver.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 38 | 39 | 60 | -------------------------------------------------------------------------------- /src/views/UnrollImages.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 37 | 38 | 60 | -------------------------------------------------------------------------------- /src/shaders/noiseWave/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:centerUv=require(../modules/centerUv) 2 | #pragma glslify:vnoise=require(../modules/vnoise) 3 | #pragma glslify:cosPalette=require(glsl-cos-palette) 4 | 5 | #define OCTAVES 8 6 | 7 | uniform float uTime; 8 | uniform float uVelocity; 9 | uniform vec2 uMouse; 10 | uniform vec2 uResolution; 11 | uniform vec3 uBrightness; 12 | uniform vec3 uContrast; 13 | uniform vec3 uOscilation; 14 | uniform vec3 uPhase; 15 | 16 | varying vec2 vUv; 17 | varying vec3 vPosition; 18 | 19 | float fbm(in vec2 p){ 20 | float sum=0.; 21 | float amp=.5; 22 | float scale=1.; 23 | for(int i=0;i { 8 | let eps = 0.0001; 9 | 10 | let curl = new THREE.Vector3(); 11 | 12 | //Find rate of change in YZ plane 13 | let n1 = simplex.noise3D(x, y + eps, z); 14 | let n2 = simplex.noise3D(x, y - eps, z); 15 | //Average to find approximate derivative 16 | let a = (n1 - n2) / (2 * eps); 17 | n1 = simplex.noise3D(x, y, z + eps); 18 | n2 = simplex.noise3D(x, y, z - eps); 19 | //Average to find approximate derivative 20 | let b = (n1 - n2) / (2 * eps); 21 | curl.x = a - b; 22 | 23 | //Find rate of change in XZ plane 24 | n1 = simplex.noise3D(x, y, z + eps); 25 | n2 = simplex.noise3D(x, y, z - eps); 26 | a = (n1 - n2) / (2 * eps); 27 | n1 = simplex.noise3D(x + eps, y, z); 28 | n2 = simplex.noise3D(x + eps, y, z); 29 | b = (n1 - n2) / (2 * eps); 30 | curl.y = a - b; 31 | 32 | //Find rate of change in XY plane 33 | n1 = simplex.noise3D(x + eps, y, z); 34 | n2 = simplex.noise3D(x - eps, y, z); 35 | a = (n1 - n2) / (2 * eps); 36 | n1 = simplex.noise3D(x, y + eps, z); 37 | n2 = simplex.noise3D(x, y - eps, z); 38 | b = (n1 - n2) / (2 * eps); 39 | curl.z = a - b; 40 | 41 | return curl; 42 | }; 43 | 44 | export { computeCurl }; 45 | -------------------------------------------------------------------------------- /src/shaders/thousandFollow/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:getScatter=require(../modules/getScatter.glsl) 2 | #pragma glslify:fresnel=require(../modules/fresnel) 3 | 4 | uniform float uTime; 5 | uniform vec2 uMouse; 6 | uniform vec2 uResolution; 7 | uniform vec3 uSpotLight; 8 | uniform float uScatterDivider; 9 | uniform float uScatterPow; 10 | uniform float uIsPlane; 11 | uniform float uIsText; 12 | uniform vec3 uPlaneColor; 13 | uniform vec3 uSpotColor; 14 | uniform vec3 uTextColor; 15 | uniform float uUseFresnel; 16 | 17 | varying vec2 vUv; 18 | varying vec3 vWorldPosition; 19 | varying vec3 vNormal; 20 | varying vec3 vEyeVector; 21 | 22 | void main(){ 23 | vec3 cameraToWorld=vWorldPosition-cameraPosition; 24 | vec3 cameraToWorldDirection=normalize(cameraToWorld); 25 | float cameraToWorldDistance=length(cameraToWorld); 26 | float scatter=getScatter(cameraPosition,cameraToWorldDirection,uSpotLight,cameraToWorldDistance,uScatterDivider,uScatterPow); 27 | 28 | vec3 color=vec3(0.,0.,0.); 29 | 30 | if(uIsPlane==1.){ 31 | color+=uPlaneColor; 32 | color+=mix(vec3(0.),uSpotColor,scatter); 33 | } 34 | 35 | if(uIsText==1.){ 36 | color+=mix(vec3(0.),uTextColor,scatter); 37 | 38 | if(uUseFresnel==1.){ 39 | float F=fresnel(0.,.5,3.,vEyeVector,vNormal); 40 | color+=F; 41 | } 42 | } 43 | 44 | gl_FragColor=vec4(color,1.); 45 | } -------------------------------------------------------------------------------- /src/shaders/spikyBlob/vertex.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:snoise4=require(glsl-noise/simplex/4d) 2 | 3 | uniform float uSpikeCount; 4 | uniform float uSpikeLength; 5 | uniform vec2 uImpulse; 6 | uniform float uSceneRotationY; 7 | 8 | varying vec2 vUv; 9 | varying vec3 vPosition; 10 | varying float vNoise; 11 | 12 | vec3 impulsePos(vec3 pos,vec2 impulse,float intensity){ 13 | // hor x,z 14 | float angleH=atan(pos.z,pos.x); 15 | float hLength=length(vec2(pos.z,pos.x)); 16 | float xStrength=intensity*impulse.x; 17 | float xPos=hLength*cos(angleH+xStrength); 18 | float zPos=hLength*sin(angleH+xStrength); 19 | // ver y 20 | float zPos2=hLength*sin(angleH+xStrength-uSceneRotationY); 21 | float yStrength=intensity*impulse.y; 22 | float angleV=atan(zPos2,pos.y)-yStrength; 23 | float vLength=length(vec2(zPos2,pos.y)); 24 | float yPos=vLength*cos(angleV); 25 | pos=vec3(xPos,yPos,zPos); 26 | return pos; 27 | } 28 | 29 | void main(){ 30 | float noise=snoise4(vec4(position*uSpikeCount,10.)*uSpikeLength)*.5; 31 | vec3 newPos=position+noise*normal; 32 | float intensity=noise*5.; 33 | newPos=impulsePos(newPos,uImpulse,intensity); 34 | vec4 modelPosition=modelMatrix*vec4(newPos,1.); 35 | vec4 viewPosition=viewMatrix*modelPosition; 36 | vec4 projectedPosition=projectionMatrix*viewPosition; 37 | gl_Position=projectedPosition; 38 | 39 | vUv=uv; 40 | vPosition=position; 41 | vNoise=noise; 42 | } -------------------------------------------------------------------------------- /src/views/LeanGallery.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 43 | 44 | 49 | -------------------------------------------------------------------------------- /src/shaders/curlTube/fragment.glsl: -------------------------------------------------------------------------------- 1 | #pragma glslify:getScatter=require(../modules/getScatter.glsl) 2 | 3 | uniform float uTime; 4 | uniform vec2 uMouse; 5 | uniform vec2 uResolution; 6 | uniform vec3 uSpotLight; 7 | uniform float uScatterDivider; 8 | uniform float uScatterPow; 9 | uniform float uIsTube; 10 | uniform float uIsPlane; 11 | uniform vec3 uPlaneColor; 12 | uniform vec3 uTubeColor; 13 | uniform vec3 uSpotColor; 14 | uniform float uVelocity; 15 | uniform float uTubeThreshold; 16 | 17 | varying vec2 vUv; 18 | varying vec3 vPosition; 19 | varying vec3 vNormal; 20 | varying vec3 vWorldPosition; 21 | 22 | void main(){ 23 | // scatter 24 | vec3 cameraToWorld=vWorldPosition-cameraPosition; 25 | vec3 cameraToWorldDirection=normalize(cameraToWorld); 26 | float cameraToWorldDistance=length(cameraToWorld); 27 | float scatter=getScatter(cameraPosition,cameraToWorldDirection,uSpotLight,cameraToWorldDistance,uScatterDivider,uScatterPow); 28 | 29 | // color 30 | vec3 color=vec3(0.,0.,0.); 31 | if(uIsTube==1.){ 32 | color+=mix(vec3(0.),uTubeColor,scatter); 33 | } 34 | if(uIsPlane==1.){ 35 | color+=uPlaneColor; 36 | color+=mix(vec3(0.),uSpotColor,scatter); 37 | } 38 | 39 | // tube movement 40 | if(uIsTube==1.){ 41 | float tubeMovement=sin(vUv.x*5.+uTime*uVelocity); 42 | if(tubeMovement= 0 ? totalMs : 0; 30 | } 31 | start() { 32 | const timer = setInterval(() => { 33 | let { totalMs } = this; 34 | const duration = ky.formatDuration(totalMs); 35 | this.padDuration(duration); 36 | this.duration = duration; 37 | totalMs -= 10; 38 | this.totalMs = totalMs; 39 | if (totalMs < 0) { 40 | this.totalMs = 0; 41 | clearInterval(this.timer); 42 | } 43 | }, 10); 44 | this.timer = timer; 45 | } 46 | padDuration(duration: any) { 47 | if (this.isPadZero) { 48 | Object.entries(duration).forEach(([key, value]) => { 49 | (duration as any)[key] = ky.padNumber(value as any, 2); 50 | }); 51 | } 52 | } 53 | } 54 | 55 | export { Timer }; 56 | -------------------------------------------------------------------------------- /src/shaders/DNAParticle/ca/fragment.glsl: -------------------------------------------------------------------------------- 1 | // Credit: https://github.com/spite/Wagner/blob/master/fragment-shaders/chromatic-aberration-fs.glsl 2 | 3 | uniform float uTime; 4 | uniform vec2 uMouse; 5 | uniform vec2 uResolution; 6 | uniform sampler2D tDiffuse; 7 | 8 | uniform float uCAMaxDistortion; 9 | uniform float uCASize; 10 | 11 | varying vec2 vUv; 12 | 13 | vec2 barrelDistortion(vec2 coord,float amt){ 14 | vec2 cc=coord-.5; 15 | float dist=dot(cc,cc); 16 | return coord+cc*dist*amt; 17 | } 18 | 19 | float sat(float t) 20 | { 21 | return clamp(t,0.,1.); 22 | } 23 | 24 | float linterp(float t){ 25 | return sat(1.-abs(2.*t-1.)); 26 | } 27 | 28 | float remap(float t,float a,float b){ 29 | return sat((t-a)/(b-a)); 30 | } 31 | 32 | vec4 spectrum_offset(float t){ 33 | vec4 ret; 34 | float lo=step(t,.5); 35 | float hi=1.-lo; 36 | float w=linterp(remap(t,1./6.,5./6.)); 37 | ret=vec4(lo,1.,hi,1.)*vec4(1.-w,w,1.-w,1.); 38 | 39 | return pow(ret,vec4(1./2.2)); 40 | } 41 | 42 | void main(){ 43 | vec2 uv=vUv; 44 | 45 | float max_distort=uCAMaxDistortion; 46 | float size=uCASize; 47 | int num_iter=9; 48 | float reci_num_iter_f=1./float(num_iter); 49 | 50 | vec4 sumcol=vec4(0.); 51 | vec4 sumw=vec4(0.); 52 | for(int i=0;i new Point({ x: arr[0], y: arr[1], z: arr[2] }); 19 | 20 | // 点转化为数组 21 | const point2Array = (point) => [point.x, point.y, point.z]; 22 | 23 | // 多个数组转化为多个点 24 | const arrays2Point = (arrs) => arrs.map((item) => array2Point(item)); 25 | 26 | // 点转化为Three.js的向量 27 | const point2ThreeVector = (point) => 28 | new THREE.Vector3(point.x, point.y, point.z); 29 | 30 | // 点转化为Cannon.js的向量 31 | const point2CannonVec = (point) => new CANNON.Vec3(point.x, point.y, point.z); 32 | 33 | // 点转化为Three.js的Euler 34 | const point2ThreeEuler = (point) => new THREE.Euler(point.x, point.y, point.z); 35 | 36 | // 2PI 37 | const TAU = 2 * Math.PI; 38 | 39 | // 泊松分布 40 | const poisson = ({ range, minRadius, maxRadius }) => { 41 | const scale = (n) => n * 100; 42 | const scaleInvert = (n) => n / 100; 43 | 44 | const rangeScaled = range.map(scale); 45 | return new PoissonDiskSampling({ 46 | shape: rangeScaled, 47 | minDistance: minRadius, 48 | maxDistance: maxRadius, 49 | tries: 10, 50 | }) 51 | .fill() 52 | .map((p) => p.map(scaleInvert)); 53 | }; 54 | 55 | export { 56 | Point, 57 | array2Point, 58 | point2Array, 59 | arrays2Point, 60 | point2ThreeVector, 61 | point2CannonVec, 62 | point2ThreeEuler, 63 | TAU, 64 | poisson, 65 | }; 66 | -------------------------------------------------------------------------------- /src/components/NavMenu.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | 68 | --------------------------------------------------------------------------------