[{"data":1,"prerenderedAt":467},["ShallowReactive",2],{"navigation":3,"/experiments/coffee-smoke":154,"authors":333},[4],{"title":5,"path":6,"stem":7,"children":8,"page":153},"Experiments","/experiments","experiments",[9,13,17,21,25,29,33,37,41,45,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149],{"title":10,"path":11,"stem":12},"Array of cameras","/experiments/array-cameras","experiments/array-cameras",{"title":14,"path":15,"stem":16},"Brickelangelo David","/experiments/brickelangelo-david","experiments/brickelangelo-david",{"title":18,"path":19,"stem":20},"Basic Brownian distribution","/experiments/brownian-distribution","experiments/brownian-distribution",{"title":22,"path":23,"stem":24},"Porsche 911 Car Showcase","/experiments/car-showcase","experiments/car-showcase",{"title":26,"path":27,"stem":28},"Coffee Smoke","/experiments/coffee-smoke","experiments/coffee-smoke",{"title":30,"path":31,"stem":32},"Cube Boy Dancefloor","/experiments/cube-boy-dancefloor","experiments/cube-boy-dancefloor",{"title":34,"path":35,"stem":36},"Cult of the lamb 🐑","/experiments/cult-of-the-lamb","experiments/cult-of-the-lamb",{"title":38,"path":39,"stem":40},"Dancing blob","/experiments/dancing-blob","experiments/dancing-blob",{"title":42,"path":43,"stem":44},"Fireworks Shader","/experiments/fireworks-shader","experiments/fireworks-shader",{"title":46,"path":47,"stem":48},"Galaxy Generator 🪐","/experiments/galaxy-generator","experiments/galaxy-generator",{"title":50,"path":51,"stem":52},"Gelatinous Cube","/experiments/gelatinous-cube","experiments/gelatinous-cube",{"title":54,"path":55,"stem":56},"Glass/Plastic Material","/experiments/glass-material","experiments/glass-material",{"title":58,"path":59,"stem":60},"Grainy Liquid Blobs","/experiments/grainy-liquid","experiments/grainy-liquid",{"title":62,"path":63,"stem":64},"Haunted House","/experiments/haunted-house","experiments/haunted-house",{"title":66,"path":67,"stem":68},"Phone with HTML inside","/experiments/html-phone","experiments/html-phone",{"title":70,"path":71,"stem":72},"Low Poly Planet","/experiments/lowpoly-planet","experiments/lowpoly-planet",{"title":74,"path":75,"stem":76},"Magical Marbles","/experiments/magical-marbles","experiments/magical-marbles",{"title":78,"path":79,"stem":80},"Nuxt Stones","/experiments/nuxt-stones","experiments/nuxt-stones",{"title":82,"path":83,"stem":84},"Particle Pumpkin Shader","/experiments/particle-pumpkin","experiments/particle-pumpkin",{"title":86,"path":87,"stem":88},"Particles Morphing","/experiments/particles-morphing","experiments/particles-morphing",{"title":90,"path":91,"stem":92},"Plexus Particles","/experiments/plexus-particles","experiments/plexus-particles",{"title":94,"path":95,"stem":96},"Portal Journey","/experiments/portal-journey","experiments/portal-journey",{"title":98,"path":99,"stem":100},"Wizard's Potion Classroom","/experiments/potions-classroom","experiments/potions-classroom",{"title":102,"path":103,"stem":104},"Rapier Basketball","/experiments/rapier-basketball","experiments/rapier-basketball",{"title":106,"path":107,"stem":108},"Rapier Vehicle","/experiments/rapier-car","experiments/rapier-car",{"title":110,"path":111,"stem":112},"Rapier Object Clump","/experiments/rapier-object-clump","experiments/rapier-object-clump",{"title":114,"path":115,"stem":116},"Rapier Wrecking Ball","/experiments/rapier-wrecking-ball","experiments/rapier-wrecking-ball",{"title":118,"path":119,"stem":120},"Repulsion Effect","/experiments/repulsion-effect","experiments/repulsion-effect",{"title":122,"path":123,"stem":124},"Shadertoy Museum","/experiments/shadertoy-museum","experiments/shadertoy-museum",{"title":126,"path":127,"stem":128},"Space Game","/experiments/space-game","experiments/space-game",{"title":130,"path":131,"stem":132},"Halloween Spooky-saur 🎃","/experiments/spooky-saur","experiments/spooky-saur",{"title":134,"path":135,"stem":136},"Synthwave Landscape","/experiments/synthwave-landscape","experiments/synthwave-landscape",{"title":138,"path":139,"stem":140},"Texture Particle Cursor","/experiments/texture-particle-cursor","experiments/texture-particle-cursor",{"title":142,"path":143,"stem":144},"Vue Fes Japan 2025","/experiments/vuefes-japan-2025","experiments/vuefes-japan-2025",{"title":146,"path":147,"stem":148},"WebGPU","/experiments/webgpu","experiments/webgpu",{"title":150,"path":151,"stem":152},"World Walker","/experiments/world-walker","experiments/world-walker",false,{"id":155,"title":26,"author":156,"body":157,"date":320,"description":321,"extension":322,"featured":153,"lastUpdated":323,"meta":324,"navigation":325,"path":27,"seo":326,"stem":28,"tags":327,"thumbnail":331,"__hash__":332},"experiments/experiments/coffee-smoke.md","alvarosabu",{"type":158,"value":159,"toc":312},"minimark",[160,177,182,185,219,223,226,269,273,309],[161,162,163,164,168,169,176],"p",{},"This experiment creates a ",[165,166,167],"strong",{},"realistic smoke simulation"," rising from a coffee mug, based on ",[170,171,175],"a",{"href":172,"rel":173},"https://threejs-journey.com/",[174],"nofollow","Bruno Simon's excellent Three.js Journey course"," and implemented in TresJS. The effect uses custom vertex shaders with Perlin noise to create natural-looking smoke with twisting motion and wind effects.",[178,179,181],"h3",{"id":180},"what-youll-see","What You'll See",[161,183,184],{},"An atmospheric coffee scene featuring:",[186,187,188,195,201,207,213],"ul",{},[189,190,191,194],"li",{},[165,192,193],{},"Rising Smoke Particles",": Volumetric smoke effect using a single plane geometry",[189,196,197,200],{},[165,198,199],{},"Twisting Motion",": Rotation-based distortion creating realistic smoke spirals",[189,202,203,206],{},[165,204,205],{},"Wind Simulation",": Horizontal drift using multi-layered Perlin noise",[189,208,209,212],{},[165,210,211],{},"Baked 3D Scene",": Coffee mug and table with pre-computed lighting",[189,214,215,218],{},[165,216,217],{},"Shader-Based Animation",": Custom GLSL shaders for natural smoke movement",[178,220,222],{"id":221},"technical-implementation","Technical Implementation",[161,224,225],{},"This experiment demonstrates advanced shader techniques:",[186,227,228,234,240,246,257,263],{},[189,229,230,233],{},[165,231,232],{},"Custom Vertex Shader",": GLSL code handling position transformations",[189,235,236,239],{},[165,237,238],{},"Perlin Noise Texture",": Used for both twist angle and wind offset calculations",[189,241,242,245],{},[165,243,244],{},"2D Rotation Function",": Modular GLSL function for rotating smoke around vertical axis",[189,247,248,251,252,256],{},[165,249,250],{},"Shader Includes",": Reusable shader chunks using ",[253,254,255],"code",{},"vite-plugin-glsl"," preprocessing",[189,258,259,262],{},[165,260,261],{},"Time-Based Animation",": Continuous movement driven by elapsed time uniforms",[189,264,265,268],{},[165,266,267],{},"Vertical Scaling",": Transform origin manipulation for proper smoke rising effect",[178,270,272],{"id":271},"shader-features","Shader Features",[186,274,275,281,287,297,303],{},[189,276,277,280],{},[165,278,279],{},"Twist Effect",": Noise-driven rotation creating natural smoke spirals",[189,282,283,286],{},[165,284,285],{},"Wind Offset",": Multi-channel Perlin noise for realistic horizontal drift",[189,288,289,292,293,296],{},[165,290,291],{},"Power Curve",": ",[253,294,295],{},"pow(uv.y, 3.0)"," for stronger effects at smoke top",[189,298,299,302],{},[165,300,301],{},"Texture Wrapping",": Repeating Perlin texture for continuous noise patterns",[189,304,305,308],{},[165,306,307],{},"Double-Sided Rendering",": Visible from all angles for volumetric appearance",[161,310,311],{},"This experiment showcases how custom shaders and noise functions can create organic, natural-looking effects, making it perfect for learning about procedural animation and GLSL shader development.",{"title":313,"searchDepth":314,"depth":314,"links":315},"",2,[316,318,319],{"id":180,"depth":317,"text":181},3,{"id":221,"depth":317,"text":222},{"id":271,"depth":317,"text":272},"2025-11-27","Realistic smoke simulation rising from a coffee mug using custom GLSL shaders and Perlin noise.","md","2025-12-03",{},true,{"title":26,"description":321},[328,329,330],"particles","shader","smoke","/experiments/coffee-smoke.webp","pwKzFs4jyLVCLjgqVjkEo4p-XPHzVRXRAxkUnqLGAr0",[334,349,364,381,397,415,432,450],{"id":335,"title":336,"avatar":337,"body":338,"description":313,"email":342,"extension":322,"github":156,"meta":343,"name":156,"navigation":325,"path":344,"seo":345,"slug":156,"stem":346,"twitter":156,"website":347,"__hash__":348},"authors/authors/alvarosabu.md","Alvarosabu","/avatars/alvarosabu.jpeg",{"type":158,"value":339,"toc":340},[],{"title":313,"searchDepth":314,"depth":314,"links":341},[],"hola@alvarosaburido.dev",{},"/authors/alvarosabu",{"description":313},"authors/alvarosabu","https://alvarosabu.dev","kfjqjiPxKR64avAeoJeNF40fMr5laisoEnPnfgFGN_U",{"id":350,"title":351,"avatar":352,"body":353,"description":313,"email":357,"extension":322,"github":358,"meta":359,"name":358,"navigation":325,"path":360,"seo":361,"slug":358,"stem":362,"twitter":357,"website":357,"__hash__":363},"authors/authors/andretchen0.md","Andretchen0","/avatars/andretchen0.jpg",{"type":158,"value":354,"toc":355},[],{"title":313,"searchDepth":314,"depth":314,"links":356},[],null,"andretchen0",{},"/authors/andretchen0",{"description":313},"authors/andretchen0","rztGS5YNlU7jYv1laE9f863gZy-WUFK5r3uuycyiMLY",{"id":365,"title":366,"avatar":367,"body":368,"description":313,"email":372,"extension":322,"github":373,"meta":374,"name":375,"navigation":325,"path":376,"seo":377,"slug":373,"stem":378,"twitter":379,"website":357,"__hash__":380},"authors/authors/damienmontastier.md","Damienmontastier","/avatars/damienmontastier.jpg",{"type":158,"value":369,"toc":370},[],{"title":313,"searchDepth":314,"depth":314,"links":371},[],"montastier.damien@gmail.com","damienmontastier",{},"Damien Montastier","/authors/damienmontastier",{"description":313},"authors/damienmontastier","dammontastier","FqtKh6r8pBEM29DE6GhT098-LIpM3BL7RXSxFjrcwwY",{"id":382,"title":383,"avatar":384,"body":385,"description":313,"email":357,"extension":322,"github":389,"meta":390,"name":391,"navigation":325,"path":392,"seo":393,"slug":389,"stem":394,"twitter":395,"website":357,"__hash__":396},"authors/authors/franciscohermida.md","Franciscohermida","/avatars/franciscohermida.jpg",{"type":158,"value":386,"toc":387},[],{"title":313,"searchDepth":314,"depth":314,"links":388},[],"franciscohermida",{},"Francisco Hermida","/authors/franciscohermida",{"description":313},"authors/franciscohermida","chicohermida","2dGmaA2uS0w2CaErMR8BexRzx0pCgoEowV5tZcITkus",{"id":398,"title":399,"avatar":400,"body":401,"description":313,"email":405,"extension":322,"github":406,"meta":407,"name":399,"navigation":325,"path":408,"seo":409,"slug":410,"stem":411,"twitter":412,"website":413,"__hash__":414},"authors/authors/jaime-torrealba.md","Jaime Torrealba","/avatars/jaime-torrealba.jpg",{"type":158,"value":402,"toc":403},[],{"title":313,"searchDepth":314,"depth":314,"links":404},[],"solucionesinformaticasjtc@gmail.com","JaimeTorrealba",{},"/authors/jaime-torrealba",{"description":313},"jaime-bboyjt","authors/jaime-torrealba","jaimebboyjt","https://jaimetorrealba.com/","WhkdXnej1NkT__thyZfYEil3qYn8wi7qVoQSMzyfrs4",{"id":416,"title":417,"avatar":418,"body":419,"description":313,"email":423,"extension":322,"github":424,"meta":425,"name":426,"navigation":325,"path":427,"seo":428,"slug":426,"stem":429,"twitter":423,"website":430,"__hash__":431},"authors/authors/luckystriike.md","Luckystriike","/avatars/luckystriike.jpg",{"type":158,"value":420,"toc":421},[],{"title":313,"searchDepth":314,"depth":314,"links":422},[],"none","luckystriike22",{},"luckystriike","/authors/luckystriike",{"description":313},"authors/luckystriike","https://github.com/luckystriike22","vmVaU8HAY_jbVnlvpUQiwh3uPcKxGGr6B5PF9xo17X8",{"id":433,"title":434,"avatar":435,"body":436,"description":313,"email":440,"extension":322,"github":441,"meta":442,"name":443,"navigation":325,"path":444,"seo":445,"slug":441,"stem":446,"twitter":447,"website":448,"__hash__":449},"authors/authors/neoprint3d.md","Neoprint3d","/avatars/neoprint3d.jpg",{"type":158,"value":437,"toc":438},[],{"title":313,"searchDepth":314,"depth":314,"links":439},[],"drew@neoprint3d.dev","neoprint3d",{},"Drew Ronsman","/authors/neoprint3d",{"description":313},"authors/neoprint3d","drew_ronsman","https://dronsman.com","w-8rauWEJDRmX_QOi4s2PI7n9EABybGURQ-R_ss9tzo",{"id":451,"title":452,"avatar":453,"body":454,"description":313,"email":458,"extension":322,"github":459,"meta":460,"name":452,"navigation":325,"path":461,"seo":462,"slug":459,"stem":463,"twitter":464,"website":465,"__hash__":466},"authors/authors/neosoulink.md","Neosoulink","/avatars/neosoulink.jpg",{"type":158,"value":455,"toc":456},[],{"title":313,"searchDepth":314,"depth":314,"links":457},[],"neodarksoulink@gmail.com","neosoulink",{},"/authors/neosoulink",{"description":313},"authors/neosoulink","nsl_nathan","https://github.com/Neosoulink","69eGfzorl4NNNe56pFRh6qK3AhnfjnKUvCHO-_9Pa1Y",1787004690995]