[{"data":1,"prerenderedAt":186},["ShallowReactive",2],{"embed-coffee-smoke":3},{"id":4,"title":5,"author":6,"body":7,"date":170,"description":171,"extension":172,"featured":173,"lastUpdated":174,"meta":175,"navigation":176,"path":177,"responsive":173,"seo":178,"stem":179,"tags":180,"thumbnail":184,"__hash__":185},"experiments\u002Fexperiments\u002Fcoffee-smoke.md","Coffee Smoke","alvarosabu",{"type":8,"value":9,"toc":162},"minimark",[10,27,32,35,69,73,76,119,123,159],[11,12,13,14,18,19,26],"p",{},"This experiment creates a ",[15,16,17],"strong",{},"realistic smoke simulation"," rising from a coffee mug, based on ",[20,21,25],"a",{"href":22,"rel":23},"https:\u002F\u002Fthreejs-journey.com\u002F",[24],"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.",[28,29,31],"h3",{"id":30},"what-youll-see","What You'll See",[11,33,34],{},"An atmospheric coffee scene featuring:",[36,37,38,45,51,57,63],"ul",{},[39,40,41,44],"li",{},[15,42,43],{},"Rising Smoke Particles",": Volumetric smoke effect using a single plane geometry",[39,46,47,50],{},[15,48,49],{},"Twisting Motion",": Rotation-based distortion creating realistic smoke spirals",[39,52,53,56],{},[15,54,55],{},"Wind Simulation",": Horizontal drift using multi-layered Perlin noise",[39,58,59,62],{},[15,60,61],{},"Baked 3D Scene",": Coffee mug and table with pre-computed lighting",[39,64,65,68],{},[15,66,67],{},"Shader-Based Animation",": Custom GLSL shaders for natural smoke movement",[28,70,72],{"id":71},"technical-implementation","Technical Implementation",[11,74,75],{},"This experiment demonstrates advanced shader techniques:",[36,77,78,84,90,96,107,113],{},[39,79,80,83],{},[15,81,82],{},"Custom Vertex Shader",": GLSL code handling position transformations",[39,85,86,89],{},[15,87,88],{},"Perlin Noise Texture",": Used for both twist angle and wind offset calculations",[39,91,92,95],{},[15,93,94],{},"2D Rotation Function",": Modular GLSL function for rotating smoke around vertical axis",[39,97,98,101,102,106],{},[15,99,100],{},"Shader Includes",": Reusable shader chunks using ",[103,104,105],"code",{},"vite-plugin-glsl"," preprocessing",[39,108,109,112],{},[15,110,111],{},"Time-Based Animation",": Continuous movement driven by elapsed time uniforms",[39,114,115,118],{},[15,116,117],{},"Vertical Scaling",": Transform origin manipulation for proper smoke rising effect",[28,120,122],{"id":121},"shader-features","Shader Features",[36,124,125,131,137,147,153],{},[39,126,127,130],{},[15,128,129],{},"Twist Effect",": Noise-driven rotation creating natural smoke spirals",[39,132,133,136],{},[15,134,135],{},"Wind Offset",": Multi-channel Perlin noise for realistic horizontal drift",[39,138,139,142,143,146],{},[15,140,141],{},"Power Curve",": ",[103,144,145],{},"pow(uv.y, 3.0)"," for stronger effects at smoke top",[39,148,149,152],{},[15,150,151],{},"Texture Wrapping",": Repeating Perlin texture for continuous noise patterns",[39,154,155,158],{},[15,156,157],{},"Double-Sided Rendering",": Visible from all angles for volumetric appearance",[11,160,161],{},"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":163,"searchDepth":164,"depth":164,"links":165},"",2,[166,168,169],{"id":30,"depth":167,"text":31},3,{"id":71,"depth":167,"text":72},{"id":121,"depth":167,"text":122},"2025-11-27","Realistic smoke simulation rising from a coffee mug using custom GLSL shaders and Perlin noise.","md",false,"2025-12-03",{},true,"\u002Fexperiments\u002Fcoffee-smoke",{"title":5,"description":171},"experiments\u002Fcoffee-smoke",[181,182,183],"particles","shader","smoke","\u002Fexperiments\u002Fcoffee-smoke.webp","d3I8-pRahFGB4-BYR0k7i7DxO-Fj14oVMSnn9Bghup4",1792681429412]