[{"data":1,"prerenderedAt":430},["ShallowReactive",2],{"navigation":3,"/experiments/coffee-smoke":134,"authors":313},[4],{"title":5,"path":6,"stem":7,"children":8,"page":133},"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],{"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},"Glass/Plastic Material","/experiments/glass-material","experiments/glass-material",{"title":54,"path":55,"stem":56},"Grainy Liquid Blobs","/experiments/grainy-liquid","experiments/grainy-liquid",{"title":58,"path":59,"stem":60},"Haunted House","/experiments/haunted-house","experiments/haunted-house",{"title":62,"path":63,"stem":64},"Phone with HTML inside","/experiments/html-phone","experiments/html-phone",{"title":66,"path":67,"stem":68},"Low Poly Planet","/experiments/lowpoly-planet","experiments/lowpoly-planet",{"title":70,"path":71,"stem":72},"Magical Marbles","/experiments/magical-marbles","experiments/magical-marbles",{"title":74,"path":75,"stem":76},"Nuxt Stones","/experiments/nuxt-stones","experiments/nuxt-stones",{"title":78,"path":79,"stem":80},"Particle Pumpkin Shader","/experiments/particle-pumpkin","experiments/particle-pumpkin",{"title":82,"path":83,"stem":84},"Particles Morphing","/experiments/particles-morphing","experiments/particles-morphing",{"title":86,"path":87,"stem":88},"Portal Journey","/experiments/portal-journey","experiments/portal-journey",{"title":90,"path":91,"stem":92},"Wizard's Potion Classroom","/experiments/potions-classroom","experiments/potions-classroom",{"title":94,"path":95,"stem":96},"Rapier Object Clump","/experiments/rapier-object-clump","experiments/rapier-object-clump",{"title":98,"path":99,"stem":100},"Rapier Wrecking Ball","/experiments/rapier-wrecking-ball","experiments/rapier-wrecking-ball",{"title":102,"path":103,"stem":104},"Repulsion Effect","/experiments/repulsion-effect","experiments/repulsion-effect",{"title":106,"path":107,"stem":108},"Shadertoy Museum","/experiments/shadertoy-museum","experiments/shadertoy-museum",{"title":110,"path":111,"stem":112},"Space Game","/experiments/space-game","experiments/space-game",{"title":114,"path":115,"stem":116},"Halloween Spooky-saur 🎃","/experiments/spooky-saur","experiments/spooky-saur",{"title":118,"path":119,"stem":120},"Synthwave Landscape","/experiments/synthwave-landscape","experiments/synthwave-landscape",{"title":122,"path":123,"stem":124},"Texture Particle Cursor","/experiments/texture-particle-cursor","experiments/texture-particle-cursor",{"title":126,"path":127,"stem":128},"Vue Fes Japan 2025","/experiments/vuefes-japan-2025","experiments/vuefes-japan-2025",{"title":130,"path":131,"stem":132},"WebGPU","/experiments/webgpu","experiments/webgpu",false,{"id":135,"title":26,"author":136,"body":137,"date":300,"description":301,"extension":302,"featured":133,"lastUpdated":303,"meta":304,"navigation":305,"path":27,"seo":306,"stem":28,"tags":307,"thumbnail":311,"__hash__":312},"experiments/experiments/coffee-smoke.md","alvarosabu",{"type":138,"value":139,"toc":292},"minimark",[140,157,162,165,199,203,206,249,253,289],[141,142,143,144,148,149,156],"p",{},"This experiment creates a ",[145,146,147],"strong",{},"realistic smoke simulation"," rising from a coffee mug, based on ",[150,151,155],"a",{"href":152,"rel":153},"https://threejs-journey.com/",[154],"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.",[158,159,161],"h3",{"id":160},"what-youll-see","What You'll See",[141,163,164],{},"An atmospheric coffee scene featuring:",[166,167,168,175,181,187,193],"ul",{},[169,170,171,174],"li",{},[145,172,173],{},"Rising Smoke Particles",": Volumetric smoke effect using a single plane geometry",[169,176,177,180],{},[145,178,179],{},"Twisting Motion",": Rotation-based distortion creating realistic smoke spirals",[169,182,183,186],{},[145,184,185],{},"Wind Simulation",": Horizontal drift using multi-layered Perlin noise",[169,188,189,192],{},[145,190,191],{},"Baked 3D Scene",": Coffee mug and table with pre-computed lighting",[169,194,195,198],{},[145,196,197],{},"Shader-Based Animation",": Custom GLSL shaders for natural smoke movement",[158,200,202],{"id":201},"technical-implementation","Technical Implementation",[141,204,205],{},"This experiment demonstrates advanced shader techniques:",[166,207,208,214,220,226,237,243],{},[169,209,210,213],{},[145,211,212],{},"Custom Vertex Shader",": GLSL code handling position transformations",[169,215,216,219],{},[145,217,218],{},"Perlin Noise Texture",": Used for both twist angle and wind offset calculations",[169,221,222,225],{},[145,223,224],{},"2D Rotation Function",": Modular GLSL function for rotating smoke around vertical axis",[169,227,228,231,232,236],{},[145,229,230],{},"Shader Includes",": Reusable shader chunks using ",[233,234,235],"code",{},"vite-plugin-glsl"," preprocessing",[169,238,239,242],{},[145,240,241],{},"Time-Based Animation",": Continuous movement driven by elapsed time uniforms",[169,244,245,248],{},[145,246,247],{},"Vertical Scaling",": Transform origin manipulation for proper smoke rising effect",[158,250,252],{"id":251},"shader-features","Shader Features",[166,254,255,261,267,277,283],{},[169,256,257,260],{},[145,258,259],{},"Twist Effect",": Noise-driven rotation creating natural smoke spirals",[169,262,263,266],{},[145,264,265],{},"Wind Offset",": Multi-channel Perlin noise for realistic horizontal drift",[169,268,269,272,273,276],{},[145,270,271],{},"Power Curve",": ",[233,274,275],{},"pow(uv.y, 3.0)"," for stronger effects at smoke top",[169,278,279,282],{},[145,280,281],{},"Texture Wrapping",": Repeating Perlin texture for continuous noise patterns",[169,284,285,288],{},[145,286,287],{},"Double-Sided Rendering",": Visible from all angles for volumetric appearance",[141,290,291],{},"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":293,"searchDepth":294,"depth":294,"links":295},"",2,[296,298,299],{"id":160,"depth":297,"text":161},3,{"id":201,"depth":297,"text":202},{"id":251,"depth":297,"text":252},"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":301},[308,309,310],"particles","shader","smoke","/experiments/coffee-smoke.webp","pwKzFs4jyLVCLjgqVjkEo4p-XPHzVRXRAxkUnqLGAr0",[314,329,344,361,377,395,412],{"id":315,"title":316,"avatar":317,"body":318,"description":293,"email":322,"extension":302,"github":136,"meta":323,"name":136,"navigation":305,"path":324,"seo":325,"slug":136,"stem":326,"twitter":136,"website":327,"__hash__":328},"authors/authors/alvarosabu.md","Alvarosabu","/avatars/alvarosabu.jpeg",{"type":138,"value":319,"toc":320},[],{"title":293,"searchDepth":294,"depth":294,"links":321},[],"hola@alvarosaburido.dev",{},"/authors/alvarosabu",{"description":293},"authors/alvarosabu","https://alvarosabu.dev","kfjqjiPxKR64avAeoJeNF40fMr5laisoEnPnfgFGN_U",{"id":330,"title":331,"avatar":332,"body":333,"description":293,"email":337,"extension":302,"github":338,"meta":339,"name":338,"navigation":305,"path":340,"seo":341,"slug":338,"stem":342,"twitter":337,"website":337,"__hash__":343},"authors/authors/andretchen0.md","Andretchen0","/avatars/andretchen0.jpg",{"type":138,"value":334,"toc":335},[],{"title":293,"searchDepth":294,"depth":294,"links":336},[],null,"andretchen0",{},"/authors/andretchen0",{"description":293},"authors/andretchen0","rztGS5YNlU7jYv1laE9f863gZy-WUFK5r3uuycyiMLY",{"id":345,"title":346,"avatar":347,"body":348,"description":293,"email":352,"extension":302,"github":353,"meta":354,"name":355,"navigation":305,"path":356,"seo":357,"slug":353,"stem":358,"twitter":359,"website":337,"__hash__":360},"authors/authors/damienmontastier.md","Damienmontastier","/avatars/damienmontastier.jpg",{"type":138,"value":349,"toc":350},[],{"title":293,"searchDepth":294,"depth":294,"links":351},[],"montastier.damien@gmail.com","damienmontastier",{},"Damien Montastier","/authors/damienmontastier",{"description":293},"authors/damienmontastier","dammontastier","FqtKh6r8pBEM29DE6GhT098-LIpM3BL7RXSxFjrcwwY",{"id":362,"title":363,"avatar":364,"body":365,"description":293,"email":337,"extension":302,"github":369,"meta":370,"name":371,"navigation":305,"path":372,"seo":373,"slug":369,"stem":374,"twitter":375,"website":337,"__hash__":376},"authors/authors/franciscohermida.md","Franciscohermida","/avatars/franciscohermida.jpg",{"type":138,"value":366,"toc":367},[],{"title":293,"searchDepth":294,"depth":294,"links":368},[],"franciscohermida",{},"Francisco Hermida","/authors/franciscohermida",{"description":293},"authors/franciscohermida","chicohermida","2dGmaA2uS0w2CaErMR8BexRzx0pCgoEowV5tZcITkus",{"id":378,"title":379,"avatar":380,"body":381,"description":293,"email":385,"extension":302,"github":386,"meta":387,"name":379,"navigation":305,"path":388,"seo":389,"slug":390,"stem":391,"twitter":392,"website":393,"__hash__":394},"authors/authors/jaime-torrealba.md","Jaime Torrealba","/avatars/jaime-torrealba.jpg",{"type":138,"value":382,"toc":383},[],{"title":293,"searchDepth":294,"depth":294,"links":384},[],"solucionesinformaticasjtc@gmail.com","JaimeTorrealba",{},"/authors/jaime-torrealba",{"description":293},"jaime-bboyjt","authors/jaime-torrealba","jaimebboyjt","https://jaimetorrealba.com/","WhkdXnej1NkT__thyZfYEil3qYn8wi7qVoQSMzyfrs4",{"id":396,"title":397,"avatar":398,"body":399,"description":293,"email":403,"extension":302,"github":404,"meta":405,"name":406,"navigation":305,"path":407,"seo":408,"slug":406,"stem":409,"twitter":403,"website":410,"__hash__":411},"authors/authors/luckystriike.md","Luckystriike","/avatars/luckystriike.jpg",{"type":138,"value":400,"toc":401},[],{"title":293,"searchDepth":294,"depth":294,"links":402},[],"none","luckystriike22",{},"luckystriike","/authors/luckystriike",{"description":293},"authors/luckystriike","https://github.com/luckystriike22","vmVaU8HAY_jbVnlvpUQiwh3uPcKxGGr6B5PF9xo17X8",{"id":413,"title":414,"avatar":415,"body":416,"description":293,"email":420,"extension":302,"github":421,"meta":422,"name":423,"navigation":305,"path":424,"seo":425,"slug":421,"stem":426,"twitter":427,"website":428,"__hash__":429},"authors/authors/neoprint3d.md","Neoprint3d","/avatars/neoprint3d.jpg",{"type":138,"value":417,"toc":418},[],{"title":293,"searchDepth":294,"depth":294,"links":419},[],"drew@neoprint3d.dev","neoprint3d",{},"Drew Ronsman","/authors/neoprint3d",{"description":293},"authors/neoprint3d","drew_ronsman","https://dronsman.com","w-8rauWEJDRmX_QOi4s2PI7n9EABybGURQ-R_ss9tzo",1782052341833]