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