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