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