https://juejin.cn/post/7290157103674032182 从中可以学习到什么有用的知识点或技巧?
使用Shader实现渐变背景色：文章介绍了如何使用Shader编写渐变色背景的代码，并使用smoothstep函数和UV坐标来实现渐变效果。
利用遮罩纹理创建背景云效果：文章演示了如何使用遮罩纹理和Shader来创建背景云层，并通过采样遮罩纹理的透明度数据来定义颜色和透明度。
实例化网格和渲染优化：文章介绍了如何使用实例化网格（THREE.InstancedMesh）来同时创建大量的网格，并通过同步位置数据来优化渲染性能。
使用噪声生成雾效：文章展示了如何使用噪声函数在Shader中生成雾气的效果，通过调整参数和噪声函数可以实现不同的雾气效果。
后期处理和滤镜效果：文章提到了使用postprocessing库中的辉光滤镜和色调映射滤镜来增强渲染效果。
修改材质的Shader：文章介绍了如何使用three.js的onBeforeCompile方法来修改材质的Shader，以实现自定义的光照效果。
alphardex/kokomi.js: A growing three.js helper library. 特效很多
- 参考了pmndrs/drei：🥉 react-three-fiber的有用助手 实现了很多特效, 如Shaders / MeshReflectorMaterial - Docs ⋅ Storybook
- 官网 kokomi-js.vercel.app/lp/
- 代码 guohong365/kokomi-playground 100多个shader
- 示例 kokomi.js examples --- kokomi.js
- fragment.glsl - alphardex/threejs-playground - GitHub1s
- https://shadertoy-playground.vercel.app/entries/#burning-flame
entries 条目 | burning-flame 燃烧的火焰 | circle-wave 圆波 | cloud 云 | cloudy-sky 多云的天空 | diamond 钻石 | domain-warping 域扭曲 | glass-effect 玻璃效果 | gyroid-ball 陀螺球 | hologram 全息图 | naked-eye 肉眼 | rainbow-ring 彩虹环 | raymarching-intro raymarching 介绍 | refraction 折射 | shader-art-intro 着色器艺术介绍 | the-drive-home 开车回家
- https://kokomi-playground.vercel.app/entries/
entries 条目 | barAnime 酒吧动漫 | bendBox 弯曲盒 | blobSlider 斑点滑块 | canvasBump 画布凹凸 | caustics 焦散 | checkerboardTransition 棋盘过渡 | chestOpenAnime 胸部打开动漫 | chromaticDispersion 色散 | circleMaskText 圆遮罩文本 | circularGallery 圆形画廊 | cityGlobe 城市环球 | coffeeSmoke 咖啡烟 | curlTube 卷管 | cyberpunkStripe 赛博朋克条纹 | cylinderGallery 气缸图库 | cylinderOrbitText 圆柱轨道文本 | distortHover 扭曲悬停 | distortRibbon 扭曲丝带 | DNAParticle DNA粒子 | explodeImage 爆炸图像 | floatBubbles 浮动气泡 | floatPaper 浮纸 | gaussianRipple 高斯波纹 | geojsonMap geojson地图 | ghibliStyle 吉卜力风格 | glassEffect 玻璃效果 | glassFragment 玻璃碎片 | glowModel 发光模型 | gooeyImage 粘糊糊的图片 | gpuParticles GPU粒子 | gradientPlane 渐变平面 | grainEffect 颗粒效应 | gridIcosahedron 网格二十面体 | holoEffect 全息效果 | hyperSpiral 超螺旋 | imageDisp 图像显示 | imageEffect1 图像效果1 | imageFullscreen 图片全屏 | imageFullscreen2 图片全屏2 | imageHoverRGBShift 图像悬停RGB移位 | imageHoverWave 图像悬停波 | imageHoverWavy 图像悬停波浪 | imageListRipple 图像列表波纹 | imageMouseWave 图像鼠标波 | imagePostNoise 图像后噪声 | imagePostScroll 图像后滚动 | imagePostTransition 图像后转换 | imageProject 图像项目 | imageRGBDistort 图像RGB扭曲 | imageSlider1 图像滑块1 | imageSwiper 图像滑动器 | imageTunnel 图像隧道 | imageVortex 图像涡旋 | inputParticleText 输入粒子文本 | interweaveShape 交织形状 | kdTreeAnime kd树动漫 | kineticTextCylinder 动能文本圆柱体 | kineticTextPlane 动力学文本平面 | kineticTextSphere 动能文本球体 | kineticTextTorus 动力学文本环面 | kineticTextTorusKnot 动力学文本圆环结 | kokomiLp1 科科米Lp1 | kpr | lavaGradient 熔岩梯度 | leanGallery 精益画廊 | leanSpeedGallery 精益速度画廊 | lineWave 线波 | liquidCrystal 液晶 | liquidCrystalFollow 液晶Follow | liquidCrystalGallery 液晶画廊 | lycorisGallery 石蒜画廊 | magicalCarpet 魔毯 | mappingTexture 映射纹理 | maskedGallery 蒙面画廊 | meshlineTunnel 网格线隧道 | metaball 元球 | mobiusText 莫比乌斯文本 | morphParticles 变形粒子 | niceTunnel 漂亮的隧道 | noiseBlob 噪声斑点 | noiseMarble 噪音大理石 | noiseMaterial 噪声材料 | noiseShape 噪声形状 | noiseSun 噪音太阳 | particleGalaxy 粒子星系 | particleImage 粒子图像 | particleLoop 粒子循环 | particleLoopGpu 粒子循环GPU | particlesFly 粒子飞翔 | particleSpiral 粒子螺旋 | pencilFilter 铅笔过滤器 | pixelDistort 像素扭曲 | pixelRiver 像素河 | pixijsAnime pixijs动漫 | playStationCloth 游戏机布 | portfolioMobile 投资组合移动 | portfolioPC 投资组合电脑 | rainLove 雨爱 | ribbonGeometry 带状几何 | rippleDistort 波纹扭曲 | rippleWave 波纹波 | rippleZoom 波纹缩放 | rotateImage 旋转图像 | scrollPage 滚动页面 | scrollTransition 滚动过渡 | shapeProject 形状项目 | shapeTransition 形状过渡 | shinyLineObject 闪亮线对象 | shirtDecal 衬衫贴花 | shockWave 冲击波 | sliderWithParticle 带粒子的滑块 | spikyBlob 尖刺斑点 | spriteTransition 精灵过渡 | starTunnel 星隧道 | starTunnel2 星隧道2 | stickyImage 粘性图像 | swollenGallery 肿画廊 | teleportTransition 传送过渡 | textCanvasComposite 文本画布复合 | textSphere 文本球体 | textureRecursion 纹理递归 | thousandFollow 千关注 | timeBreach 时间突破 | toonShader 卡通着色器 | travellingParticles 行进粒子 | triangleAnime 三角形动漫 | twistedColorfulSphere 扭曲多彩球体 | twistJelly 麻花果冻 | unrollImage 展开图像 | volumetricLight 体积光 | volumetricLightImage 体积光图像 | waterCurrent 水流 | wavingFlag 挥动旗帜 | xRay X射线
- https://kokomi-js.vercel.app/examples/#stage
assetManager 资产管理器 | base 根据 | cameraControls 相机控制 | caustics 焦散 | center 中心 | component 成分 | contactShadows 联系阴影 | customEffect 自定义效果 | customMesh 自定义网格 | customPoints 自定义积分 | environment 环境 | firstPersonCamera 第一人称相机 | float 漂浮 | gallery 画廊 | glassMaterial 玻璃材质 | GPUComputer GPU计算机 | html | hyperbolicHelicoid 双曲螺旋线 | imagePanorama 图像全景 | infiniteGallery 无限图库 | joystick 操纵杆 | meshReflectorMaterial 网状反光材料 | meshTransmissionMaterial | 网状传输材料 | moji 莫吉 | orthographicCamera 正交相机 | persistenceEffect 持久效应 | raycastSelector 光线投射选择器 | rayMarchingQuad 射线行进四边形 | renderQuad 渲染四边形 | renderTexture 渲染纹理 | screenCamera 屏幕摄像头 | screenQuad 四屏 | shadertoy 沙德玩具 | sparkles 闪闪发光 | sphube 斯普贝 | stage 阶段 | text3D 文本3D | textMesh 文本网格 | thirdPersonCamera 第三人称相机
- https://kokomi-components.vercel.app/#checkerboardText
checkerboardText 棋盘格文本 | fragmentWorld 碎片世界 | ghibliToonMaterial ghibli卡通素材 | gridIcosahedron 网格二十面体 | hologramFilter 全息滤光片 | imageTunnel 图像隧道 | liquidCrystal 液晶 | pencilFilter 铅笔过滤器 | rgbShiftFilter RGB移位过滤器 | rippleFilter 波纹滤波器 | sphereWordCloud 球体词云 | starTunnel 星隧道 | swellFilter 膨胀过滤器 | template 模板 |
- 参考了pmndrs/drei：🥉 react-three-fiber的有用助手 实现了很多特效, 如Shaders / MeshReflectorMaterial - Docs ⋅ Storybook
stemkoski.github.com/Three.js/js/ParticleEngineExamples.js 大学教授有很多特效