[{"data":1,"prerenderedAt":5583},["ShallowReactive",2],{"navigation":3,"experiments":130,"author-jaime-bboyjt":5340,"author-alvarosabu":5357,"author-andretchen0":5373,"author-luckystriike":5386,"author-damienmontastier":5402,"author-neoprint3d":5418,"formatted-experiments":5435},[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,[131,293,487,656,675,834,858,1032,1248,1298,1511,1707,2770,3062,3272,3476,3703,3862,3993,4157,4170,4184,4328,4503,4629,4662,4891,5067,5244,5318],{"id":132,"title":10,"author":133,"body":134,"date":283,"description":284,"extension":285,"featured":129,"lastUpdated":283,"meta":286,"navigation":287,"path":11,"seo":288,"stem":12,"tags":289,"thumbnail":291,"__hash__":292},"experiments/experiments/array-cameras.md","jaime-bboyjt",{"type":135,"value":136,"toc":275},"minimark",[137,146,151,158,186,190,193,236,240,272],[138,139,140,141,145],"p",{},"This experiment demonstrates the advanced ",[142,143,144],"strong",{},"ArrayCamera"," technique in Three.js, providing multiple simultaneous views of a 3D scene through different camera perspectives. This approach is commonly used in security systems, architectural visualization, and game development for split-screen effects.",[147,148,150],"h3",{"id":149},"what-youll-see","What You'll See",[138,152,153,154,157],{},"The scene features a ",[142,155,156],{},"rigged 3D knight model"," viewed from four different camera angles simultaneously:",[159,160,161,168,174,180],"ul",{},[162,163,164,167],"li",{},[142,165,166],{},"Left Bottom Viewport",": Side perspective showing the model's profile",[162,169,170,173],{},[142,171,172],{},"Center Bottom Viewport",": Front-facing view with detailed character features",[162,175,176,179],{},[142,177,178],{},"Right Bottom Viewport",": Opposite side angle for complete spatial understanding",[162,181,182,185],{},[142,183,184],{},"Center Top Viewport",": Strategic overview perspective",[147,187,189],{"id":188},"technical-implementation","Technical Implementation",[138,191,192],{},"This experiment showcases several advanced TresJS and Three.js concepts:",[159,194,195,201,211,220,230],{},[162,196,197,200],{},[142,198,199],{},"ArrayCamera Setup",": Creates multiple PerspectiveCamera instances with different viewports",[162,202,203,206,207],{},[142,204,205],{},"Responsive Design",": Cameras automatically adjust to window size changes using ",[208,209,210],"code",{},"useWindowSize",[162,212,213,216,217],{},[142,214,215],{},"GLTF Model Loading",": Loads a rigged knight model with animations using ",[208,218,219],{},"useGLTF",[162,221,222,225,226,229],{},[142,223,224],{},"Animation System",": Implements idle animation using ",[208,227,228],{},"useAnimations"," composable",[162,231,232,235],{},[142,233,234],{},"Viewport Management",": Each camera renders to a specific screen region defined by Vector4 coordinates",[147,237,239],{"id":238},"key-features","Key Features",[159,241,242,248,254,260,266],{},[162,243,244,247],{},[142,245,246],{},"Performance Optimized",": Single render pass for multiple viewpoints",[162,249,250,253],{},[142,251,252],{},"Responsive Layout",": Viewports automatically resize with window dimensions",[162,255,256,259],{},[142,257,258],{},"Animated Character",": Rigged model with idle animation loop",[162,261,262,265],{},[142,263,264],{},"Professional Lighting",": Multiple light sources for optimal model visibility",[162,267,268,271],{},[142,269,270],{},"Grid Reference",": Helper grid for spatial orientation",[138,273,274],{},"This technique is particularly valuable for applications requiring multiple simultaneous perspectives, such as security monitoring interfaces, architectural walkthroughs, or multiplayer game implementations.",{"title":276,"searchDepth":277,"depth":277,"links":278},"",2,[279,281,282],{"id":149,"depth":280,"text":150},3,{"id":188,"depth":280,"text":189},{"id":238,"depth":280,"text":239},"2023-04-21","An advance technique using ArrayCamera with a model animation","md",{},true,{"title":10,"description":284},[290],"models","/experiments/array-cameras.png","tignIzUIoa7l3yqh4pKO0qLrO88Q3uCyKuPKDLH1Om4",{"id":294,"title":14,"author":295,"body":296,"date":479,"description":480,"extension":285,"featured":129,"lastUpdated":479,"meta":481,"navigation":287,"path":15,"seo":482,"stem":16,"tags":483,"thumbnail":485,"__hash__":486},"experiments/experiments/brickelangelo-david.md","alvarosabu",{"type":135,"value":297,"toc":473},[298,317,319,325,357,359,362,410,414,440,444,470],[138,299,300,301,304,305,308,309,316],{},"This experiment recreates the iconic ",[142,302,303],{},"David sculpture by Michelangelo"," using ",[142,306,307],{},"75,000 LEGO brick instances",", demonstrating advanced surface sampling techniques and instanced rendering capabilities. Based on challenges from ",[310,311,315],"a",{"href":312,"rel":313},"https://threejs-journey.com/",[314],"nofollow","Bruno Simon's Three.js Journey course",", this artistic tribute combines classical art with modern procedural generation.",[147,318,150],{"id":149},[138,320,153,321,324],{},[142,322,323],{},"magnificent LEGO brick reconstruction"," of David's sculpture:",[159,326,327,333,339,345,351],{},[162,328,329,332],{},[142,330,331],{},"75,000 Individual Bricks",": Each positioned using surface sampling algorithms",[162,334,335,338],{},[142,336,337],{},"Mouse-Controlled Rotation",": Interactive rotation following cursor movement",[162,340,341,344],{},[142,342,343],{},"Dramatic Lighting",": Spotlight that follows mouse cursor for dynamic illumination",[162,346,347,350],{},[142,348,349],{},"Cinematic Camera Movement",": Smooth GSAP-powered camera animation revealing the sculpture",[162,352,353,356],{},[142,354,355],{},"Loading Experience",": Custom progress indicator with elegant typography",[147,358,189],{"id":188},[138,360,361],{},"This experiment showcases several advanced 3D techniques:",[159,363,364,370,380,386,395,401],{},[162,365,366,369],{},[142,367,368],{},"MeshSurfaceSampler",": Distributes brick instances across the David model's surface using UV weighting",[162,371,372,375,376,379],{},[142,373,374],{},"Instanced Rendering",": Efficiently renders 75,000 bricks using ",[208,377,378],{},"InstancedMesh"," for optimal performance",[162,381,382,385],{},[142,383,384],{},"Grid Alignment",": Bricks snap to a 3D grid system for authentic LEGO brick placement",[162,387,388,391,392,229],{},[142,389,390],{},"Interactive Lighting",": Spotlight dynamically follows mouse position using ",[208,393,394],{},"useMouse",[162,396,397,400],{},[142,398,399],{},"GSAP Animation",": Smooth camera movements with easing for cinematic reveal",[162,402,403,406,407],{},[142,404,405],{},"Progress Loading",": Real-time loading feedback using ",[208,408,409],{},"useProgress",[147,411,413],{"id":412},"artistic-features","Artistic Features",[159,415,416,422,428,434],{},[162,417,418,421],{},[142,419,420],{},"Custom Typography",": Elegant serif font styling reminiscent of classical art presentations",[162,423,424,427],{},[142,425,426],{},"Hidden Cursor",": Custom cursor design for immersive experience",[162,429,430,433],{},[142,431,432],{},"Black Background",": Dramatic contrast highlighting the sculpture",[162,435,436,439],{},[142,437,438],{},"Surface Alignment",": Bricks follow the natural curves and details of the original sculpture",[147,441,443],{"id":442},"key-technologies","Key Technologies",[159,445,446,452,458,464],{},[162,447,448,451],{},[142,449,450],{},"Surface Sampling",": Mathematically accurate distribution respecting model geometry",[162,453,454,457],{},[142,455,456],{},"Performance Optimization",": Single draw call for thousands of objects",[162,459,460,463],{},[142,461,462],{},"Interactive Experience",": Real-time lighting and rotation based on user input",[162,465,466,469],{},[142,467,468],{},"Classical Aesthetics",": Typography and presentation honoring the original masterpiece",[138,471,472],{},"This experiment serves as both a technical demonstration of advanced TresJS capabilities and an artistic homage to one of history's greatest sculptures, bridging classical art with modern digital techniques.",{"title":276,"searchDepth":277,"depth":277,"links":474},[475,476,477,478],{"id":149,"depth":280,"text":150},{"id":188,"depth":280,"text":189},{"id":412,"depth":280,"text":413},{"id":442,"depth":280,"text":443},"2023-08-21","Bricks ThreeJS Journey challenge",{},{"title":14,"description":480},[484,368],"cientos","/experiments/brickelangelo-david.png","3YNud7sO1Llhak_Ct6O9YWvNyAS700_K1JbnIKlgzCw",{"id":488,"title":18,"author":489,"body":491,"date":649,"description":650,"extension":285,"featured":287,"lastUpdated":649,"meta":651,"navigation":287,"path":19,"seo":652,"stem":20,"tags":653,"thumbnail":654,"__hash__":655},"experiments/experiments/brownian-distribution.md",[490,295],"andretchen0",{"type":135,"value":492,"toc":643},[493,506,508,515,541,545,548,568,570,573,613,615,640],[138,494,495,496,499,500,505],{},"This experiment demonstrates ",[142,497,498],{},"spatial object distribution"," using a random walk algorithm inspired by ",[310,501,504],{"href":502,"rel":503},"https://en.wikipedia.org/wiki/Brownian_motion",[314],"Brownian motion principles",". Rather than animating particles in motion, this visualization shows how objects can be positioned in 3D space using statistical patterns derived from random walk algorithms.",[147,507,150],{"id":149},[138,509,510,511,514],{},"The scene features ",[142,512,513],{},"2000 geometric objects"," (spheres, cubes, and pyramids) distributed throughout 3D space following a Brownian distribution pattern. Each object:",[159,516,517,523,529,535],{},[162,518,519,522],{},[142,520,521],{},"Is positioned"," using a random walk algorithm that simulates particle displacement patterns",[162,524,525,528],{},[142,526,527],{},"Changes color on hover"," from the theme color to bright yellow",[162,530,531,534],{},[142,532,533],{},"Resets position"," when moving outside the boundary constraints",[162,536,537,540],{},[142,538,539],{},"Adapts to dark/light mode"," with appropriate color schemes",[147,542,544],{"id":543},"central-animation","Central Animation",[138,546,547],{},"At the center of the chaos, three geometric shapes (pyramid, cube, sphere) perform a synchronized dance:",[159,549,550,556,562],{},[162,551,552,555],{},[142,553,554],{},"Vertical oscillation"," using trigonometric functions",[162,557,558,561],{},[142,559,560],{},"Dynamic scaling"," that pulses with the animation",[162,563,564,567],{},[142,565,566],{},"Phase-shifted timing"," creating a wave-like effect",[147,569,189],{"id":188},[138,571,572],{},"The experiment showcases several advanced TresJS concepts:",[159,574,575,583,589,595,604],{},[162,576,577,579,580],{},[142,578,374],{},": Efficiently renders 2000 objects using ",[208,581,582],{},"TresInstancedMesh",[162,584,585,588],{},[142,586,587],{},"Random Walk Distribution",": Implements spatial distribution using random walk patterns with boundary constraints",[162,590,591,594],{},[142,592,593],{},"Interactive Materials",": Hover effects using pointer events",[162,596,597,600,601,229],{},[142,598,599],{},"Loop Integration",": Smooth animations using ",[208,602,603],{},"useLoop",[162,605,606,609,610],{},[142,607,608],{},"Dark Mode Support",": Reactive color schemes using ",[208,611,612],{},"useDark",[147,614,239],{"id":238},[159,616,617,622,628,634],{},[162,618,619,621],{},[142,620,246],{},": Uses Three.js instancing for smooth 60fps rendering",[162,623,624,627],{},[142,625,626],{},"Interactive",": Hover over any particle to see it highlight",[162,629,630,633],{},[142,631,632],{},"Responsive",": Adapts to different screen sizes and themes",[162,635,636,639],{},[142,637,638],{},"Statistically Accurate",": Implements random walk distribution patterns based on Brownian motion statistics",[138,641,642],{},"This visualization serves as both an educational tool for understanding random distributions and a performance benchmark for TresJS's capability to handle large numbers of interactive objects.",{"title":276,"searchDepth":277,"depth":277,"links":644},[645,646,647,648],{"id":149,"depth":280,"text":150},{"id":543,"depth":280,"text":544},{"id":188,"depth":280,"text":189},{"id":238,"depth":280,"text":239},"2025-01-01","Basic scene with grouping/parenting and Brownian distribution of instances",{},{"title":18,"description":650},[603],"/experiments/brownian-distribution.png","52gQw8ybdvNH-BDgOTQB8pVpx70MCEBOzOFXOOTjA_g",{"id":657,"title":22,"author":295,"body":658,"date":665,"description":666,"extension":285,"featured":129,"lastUpdated":665,"meta":667,"navigation":287,"path":23,"seo":668,"stem":24,"tags":669,"thumbnail":673,"__hash__":674},"experiments/experiments/car-showcase.md",{"type":135,"value":659,"toc":663},[660],[138,661,662],{},"A 3D showcase of the iconic Porsche 911 model demostrating techniques for building live envmaps with lightformers.",{"title":276,"searchDepth":277,"depth":277,"links":664},[],"2025-09-05","A showcase of the Porsche 911",{},{"title":22,"description":666},[670,671,672],"car","showcase","live envmap",null,"9RAUKFngYEsOMdexx8i_VD6XY-TE8zCWUVG1wiwKoEg",{"id":676,"title":26,"author":295,"body":677,"date":823,"description":824,"extension":285,"featured":129,"lastUpdated":825,"meta":826,"navigation":287,"path":27,"seo":827,"stem":28,"tags":828,"thumbnail":832,"__hash__":833},"experiments/experiments/coffee-smoke.md",{"type":135,"value":678,"toc":818},[679,691,693,696,728,730,733,775,779,815],[138,680,681,682,685,686,690],{},"This experiment creates a ",[142,683,684],{},"realistic smoke simulation"," rising from a coffee mug, based on ",[310,687,689],{"href":312,"rel":688},[314],"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.",[147,692,150],{"id":149},[138,694,695],{},"An atmospheric coffee scene featuring:",[159,697,698,704,710,716,722],{},[162,699,700,703],{},[142,701,702],{},"Rising Smoke Particles",": Volumetric smoke effect using a single plane geometry",[162,705,706,709],{},[142,707,708],{},"Twisting Motion",": Rotation-based distortion creating realistic smoke spirals",[162,711,712,715],{},[142,713,714],{},"Wind Simulation",": Horizontal drift using multi-layered Perlin noise",[162,717,718,721],{},[142,719,720],{},"Baked 3D Scene",": Coffee mug and table with pre-computed lighting",[162,723,724,727],{},[142,725,726],{},"Shader-Based Animation",": Custom GLSL shaders for natural smoke movement",[147,729,189],{"id":188},[138,731,732],{},"This experiment demonstrates advanced shader techniques:",[159,734,735,741,747,753,763,769],{},[162,736,737,740],{},[142,738,739],{},"Custom Vertex Shader",": GLSL code handling position transformations",[162,742,743,746],{},[142,744,745],{},"Perlin Noise Texture",": Used for both twist angle and wind offset calculations",[162,748,749,752],{},[142,750,751],{},"2D Rotation Function",": Modular GLSL function for rotating smoke around vertical axis",[162,754,755,758,759,762],{},[142,756,757],{},"Shader Includes",": Reusable shader chunks using ",[208,760,761],{},"vite-plugin-glsl"," preprocessing",[162,764,765,768],{},[142,766,767],{},"Time-Based Animation",": Continuous movement driven by elapsed time uniforms",[162,770,771,774],{},[142,772,773],{},"Vertical Scaling",": Transform origin manipulation for proper smoke rising effect",[147,776,778],{"id":777},"shader-features","Shader Features",[159,780,781,787,793,803,809],{},[162,782,783,786],{},[142,784,785],{},"Twist Effect",": Noise-driven rotation creating natural smoke spirals",[162,788,789,792],{},[142,790,791],{},"Wind Offset",": Multi-channel Perlin noise for realistic horizontal drift",[162,794,795,798,799,802],{},[142,796,797],{},"Power Curve",": ",[208,800,801],{},"pow(uv.y, 3.0)"," for stronger effects at smoke top",[162,804,805,808],{},[142,806,807],{},"Texture Wrapping",": Repeating Perlin texture for continuous noise patterns",[162,810,811,814],{},[142,812,813],{},"Double-Sided Rendering",": Visible from all angles for volumetric appearance",[138,816,817],{},"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":276,"searchDepth":277,"depth":277,"links":819},[820,821,822],{"id":149,"depth":280,"text":150},{"id":188,"depth":280,"text":189},{"id":777,"depth":280,"text":778},"2025-11-27","Realistic smoke simulation rising from a coffee mug using custom GLSL shaders and Perlin noise.","2025-12-03",{},{"title":26,"description":824},[829,830,831],"particles","shader","smoke","/experiments/coffee-smoke.png","TnTprvFgd-8kFovW0nwCgSOdghs3EWfvT3ST5QSFerY",{"id":835,"title":30,"author":295,"body":836,"date":847,"description":848,"extension":285,"featured":129,"lastUpdated":847,"meta":849,"navigation":287,"path":31,"seo":850,"stem":32,"tags":851,"thumbnail":856,"__hash__":857},"experiments/experiments/cube-boy-dancefloor.md",{"type":135,"value":837,"toc":845},[838,842],[839,840,30],"h1",{"id":841},"cube-boy-dancefloor",[138,843,844],{},"A dancing cube character on an animated dancefloor experiment showcasing character animation and dynamic environments in TresJS.",{"title":276,"searchDepth":277,"depth":277,"links":846},[],"2025-09-11","A dancing cube character on an animated dancefloor",{},{"title":30,"description":848},[852,853,854,855],"animation","character","dancefloor","cube","/experiments/cube-boy-dancefloor.png","erDNu2F45f2LcnDx75l9PrGUKGVy39Fw9seErdDchLE",{"id":859,"title":34,"author":295,"body":860,"date":1023,"description":1024,"extension":285,"featured":129,"lastUpdated":1023,"meta":1025,"navigation":287,"path":35,"seo":1026,"stem":36,"tags":1027,"thumbnail":1030,"__hash__":1031},"experiments/experiments/cult-of-the-lamb.md",{"type":135,"value":861,"toc":1017},[862,877,879,882,914,916,919,957,961,986,988,1014],[138,863,864,865,868,869,872,873,876],{},"This experiment recreates the atmospheric world of ",[142,866,867],{},"Cult of the Lamb",", demonstrating advanced post-processing techniques using ",[142,870,871],{},"bloom effects"," and ",[142,874,875],{},"composition pipelines",". The scene captures the mystical and dark aesthetic of the beloved indie game.",[147,878,150],{"id":149},[138,880,881],{},"An immersive 3D scene featuring:",[159,883,884,890,896,902,908],{},[162,885,886,889],{},[142,887,888],{},"Cult of the Lamb 3D Model",": Detailed character model from the game",[162,891,892,895],{},[142,893,894],{},"Ritual Environment",": Atmospheric scene with mystical elements",[162,897,898,901],{},[142,899,900],{},"Bloom Post-Processing",": Dramatic lighting effects that create ethereal glows",[162,903,904,907],{},[142,905,906],{},"Rich Color Palette",": Deep burgundy backdrop matching the game's aesthetic",[162,909,910,913],{},[142,911,912],{},"Professional Lighting Setup",": Ambient lighting for mood enhancement",[147,915,189],{"id":188},[138,917,918],{},"This experiment demonstrates advanced rendering techniques:",[159,920,921,927,933,939,945,951],{},[162,922,923,926],{},[142,924,925],{},"EffectComposer Pipeline",": Professional post-processing setup using pmndrs effects",[162,928,929,932],{},[142,930,931],{},"Bloom Configuration",": Customizable luminance threshold, smoothing, and intensity controls",[162,934,935,938],{},[142,936,937],{},"Mipmap Blur",": Enhanced blur quality for realistic light bleeding",[162,940,941,944],{},[142,942,943],{},"Blend Functions",": Advanced blending modes for realistic light interaction",[162,946,947,950],{},[142,948,949],{},"Shadow Mapping",": Basic shadow mapping for depth and realism",[162,952,953,956],{},[142,954,955],{},"Color Space Management",": SRGB color space with proper tone mapping",[147,958,960],{"id":959},"visual-features","Visual Features",[159,962,963,969,975,981],{},[162,964,965,968],{},[142,966,967],{},"Atmospheric Backdrop",": Curved backdrop creating infinite background illusion",[162,970,971,974],{},[142,972,973],{},"Custom Color Grading",": Burgundy color scheme (#8D404A) for gothic atmosphere",[162,976,977,980],{},[142,978,979],{},"Luminance-Based Effects",": Bloom responds to bright areas creating natural light bleeding",[162,982,983,985],{},[142,984,456],{},": Efficient rendering pipeline for smooth 60fps experience",[147,987,443],{"id":442},[159,989,990,996,1002,1008],{},[162,991,992,995],{},[142,993,994],{},"Post-Processing Pipeline",": Industry-standard effect composition",[162,997,998,1001],{},[142,999,1000],{},"Material Workflow",": PBR materials with proper roughness and lighting response",[162,1003,1004,1007],{},[142,1005,1006],{},"Suspense Integration",": Async loading of post-processing effects",[162,1009,1010,1013],{},[142,1011,1012],{},"Reactive Parameters",": Real-time adjustment of bloom parameters",[138,1015,1016],{},"This experiment showcases how modern post-processing techniques can transform a simple 3D scene into a visually stunning and atmospheric experience, perfect for game development and interactive media applications.",{"title":276,"searchDepth":277,"depth":277,"links":1018},[1019,1020,1021,1022],{"id":149,"depth":280,"text":150},{"id":188,"depth":280,"text":189},{"id":959,"depth":280,"text":960},{"id":442,"depth":280,"text":443},"2024-02-05","Best video game ever scene to showcase Postprocessing effects",{},{"title":34,"description":1024},[1028,1029],"post-processing","bloom","/experiments/cult-of-the-lamb.png","Vz7CCdA3rT7hCfuswczUz8Oug--21H7Wqte6FGdZbDE",{"id":1033,"title":38,"author":1034,"body":1036,"date":1236,"description":1237,"extension":285,"featured":287,"lastUpdated":1236,"meta":1238,"navigation":287,"path":39,"seo":1241,"stem":40,"tags":1242,"thumbnail":1246,"__hash__":1247},"experiments/experiments/dancing-blob.md",[1035,295],"luckystriike",{"type":135,"value":1037,"toc":1229},[1038,1044,1046,1049,1081,1083,1086,1138,1142,1168,1172,1198,1200,1226],[138,1039,681,1040,1043],{},[142,1041,1042],{},"mesmerizing audio-reactive blob"," that responds to your microphone input in real-time. Using custom shaders and Web Audio API, the sphere morphs and dances to the sound of your voice or ambient audio.",[147,1045,150],{"id":149},[138,1047,1048],{},"An immersive audio-visual experience featuring:",[159,1050,1051,1057,1063,1069,1075],{},[162,1052,1053,1056],{},[142,1054,1055],{},"Morphing Icosahedron",": High-resolution sphere (80 subdivisions) that deforms based on audio input",[162,1058,1059,1062],{},[142,1060,1061],{},"Real-Time Audio Analysis",": FFT analysis of microphone input driving visual effects",[162,1064,1065,1068],{},[142,1066,1067],{},"Custom Shader Materials",": Perlin noise-based vertex displacement with gradient coloring",[162,1070,1071,1074],{},[142,1072,1073],{},"Dynamic Typography",": Large-scale background text creating depth and atmosphere",[162,1076,1077,1080],{},[142,1078,1079],{},"Permission Handling",": Seamless microphone access request with elegant UI modal",[147,1082,189],{"id":188},[138,1084,1085],{},"This experiment demonstrates advanced audio-visual techniques:",[159,1087,1088,1097,1103,1108,1114,1126,1132],{},[162,1089,1090,1093,1094],{},[142,1091,1092],{},"Web Audio API",": Real-time microphone stream analysis using ",[208,1095,1096],{},"AnalyserNode",[162,1098,1099,1102],{},[142,1100,1101],{},"FFT Processing",": Frequency domain analysis converting audio to visual parameters",[162,1104,1105,1107],{},[142,1106,739],{},": Perlin noise displacement based on audio amplitude",[162,1109,1110,1113],{},[142,1111,1112],{},"Fragment Shader",": Gradient coloring from bright orange to lime green",[162,1115,1116,798,1119,872,1122,1125],{},[142,1117,1118],{},"VueUse Integration",[208,1120,1121],{},"useUserMedia",[208,1123,1124],{},"usePermission"," for seamless audio access",[162,1127,1128,1131],{},[142,1129,1130],{},"Reactive Controls",": Real-time adjustment of wireframe, colors, and amplitude",[162,1133,1134,1137],{},[142,1135,1136],{},"Post-Processing Effects",": Vignette effect for cinematic presentation",[147,1139,1141],{"id":1140},"audio-features","Audio Features",[159,1143,1144,1150,1156,1162],{},[162,1145,1146,1149],{},[142,1147,1148],{},"Frequency Analysis",": 2048-point FFT for detailed audio spectrum analysis",[162,1151,1152,1155],{},[142,1153,1154],{},"Average Amplitude",": Real-time calculation of audio energy levels",[162,1157,1158,1161],{},[142,1159,1160],{},"Responsive Displacement",": Vertex positions react proportionally to audio intensity",[162,1163,1164,1167],{},[142,1165,1166],{},"Smooth Animation",": Continuous rotation combined with audio-driven morphing",[147,1169,1171],{"id":1170},"visual-design","Visual Design",[159,1173,1174,1180,1186,1192],{},[162,1175,1176,1179],{},[142,1177,1178],{},"Gradient Shading",": Smooth color transitions from orange (#ff9900) to lime (#d7f250)",[162,1181,1182,1185],{},[142,1183,1184],{},"Typography Integration",": Anton and JetBrains Mono fonts for industrial aesthetic",[162,1187,1188,1191],{},[142,1189,1190],{},"Dark Theme",": Deep blue background (#0c1a30) for optimal contrast",[162,1193,1194,1197],{},[142,1195,1196],{},"Professional Layout",": Strategic text placement with proper z-indexing",[147,1199,443],{"id":442},[159,1201,1202,1208,1214,1220],{},[162,1203,1204,1207],{},[142,1205,1206],{},"Custom GLSL Shaders",": Hand-written vertex and fragment shaders for performance",[162,1209,1210,1213],{},[142,1211,1212],{},"Perlin Noise",": Mathematical noise functions for organic displacement patterns",[162,1215,1216,1219],{},[142,1217,1218],{},"Audio Context",": Modern Web Audio API for low-latency audio processing",[162,1221,1222,1225],{},[142,1223,1224],{},"Permission Management",": Robust handling of browser microphone permissions",[138,1227,1228],{},"This experiment showcases the power of combining audio processing with real-time 3D graphics, creating an engaging interactive experience that bridges digital art and music visualization.",{"title":276,"searchDepth":277,"depth":277,"links":1230},[1231,1232,1233,1234,1235],{"id":149,"depth":280,"text":150},{"id":188,"depth":280,"text":189},{"id":1140,"depth":280,"text":1141},{"id":1170,"depth":280,"text":1171},{"id":442,"depth":280,"text":443},"2024-09-01","A sphere dancing to the sound of your microphone. This demo utilizes your microphone, so please ensure that you allow access.",{"slug":1239,"status":1240},"dancing-blob","published",{"title":38,"description":1237},[1243,1244,1245],"basic","audio","shaders","/dancing-blob.png","F8H6TLRNWV1ftaV45IWdWsDZz8b35RzyI9hN70B1qPY",{"id":1249,"title":42,"author":295,"body":1250,"date":1289,"description":1290,"extension":285,"featured":129,"lastUpdated":1291,"meta":1292,"navigation":287,"path":43,"seo":1293,"stem":44,"tags":1294,"thumbnail":1296,"__hash__":1297},"experiments/experiments/fireworks-shader.md",{"type":135,"value":1251,"toc":1286},[1252,1263,1268,1277],[138,1253,1254,1255,1258,1259,1262],{},"This experiment recreates the stunning ",[142,1256,1257],{},"fireworks shader effect"," from ",[310,1260,315],{"href":312,"rel":1261},[314],", adapted for TresJS. Experience dynamic particle explosions with custom GLSL shaders that create realistic fireworks bursts complete with physics-based motion and vibrant color variations.",[1264,1265,1267],"h2",{"id":1266},"assets","Assets",[138,1269,1270,1271,1276],{},"Particle textures downloaded from ",[310,1272,1275],{"href":1273,"rel":1274},"https://kenney.nl/assets/particle-pack",[314],"Kenney.nl Particle Pack"," - Creative Commons CC0 (Public Domain).",[138,1278,1279,1280,1285],{},"Thanks to ",[310,1281,1284],{"href":1282,"rel":1283},"https://kenney.nl",[314],"Kenney.nl"," for so many great free assets!",{"title":276,"searchDepth":277,"depth":277,"links":1287},[1288],{"id":1266,"depth":277,"text":1267},"2025-11-21","Fireworks shader with particles and shaders","2025-12-17",{},{"title":42,"description":1290},[1245,1295,829],"glsl","/experiments/fireworks-shader.png","oY6Jr36-DftwF6RGedXauFbYRuiLAPvHxdTvre5rAyc",{"id":1299,"title":46,"author":295,"body":1300,"date":1504,"description":1505,"extension":285,"featured":129,"lastUpdated":1504,"meta":1506,"navigation":287,"path":47,"seo":1507,"stem":48,"tags":1508,"thumbnail":1509,"__hash__":1510},"experiments/experiments/galaxy-generator.md",{"type":135,"value":1301,"toc":1497},[1302,1317,1319,1322,1354,1356,1359,1395,1399,1402,1440,1442,1466,1468,1494],[138,1303,495,1304,1307,1308,1312,1313,1316],{},[142,1305,1306],{},"procedural galaxy generation"," using particle systems and custom shaders, based on ",[310,1309,1311],{"href":312,"rel":1310},[314],"Bruno Simon's amazing Three.js Journey tutorial"," and ported to TresJS. Create stunning spiral galaxies with ",[142,1314,1315],{},"30,000 animated stars"," that respond to real-time parameter adjustments, showcasing advanced particle rendering techniques.",[147,1318,150],{"id":149},[138,1320,1321],{},"An interactive cosmic experience featuring:",[159,1323,1324,1330,1336,1342,1348],{},[162,1325,1326,1329],{},[142,1327,1328],{},"30,000 Particle Stars",": Each star individually positioned using mathematical spiral algorithms",[162,1331,1332,1335],{},[142,1333,1334],{},"Spiral Galaxy Structure",": Configurable number of arms creating realistic galactic formations",[162,1337,1338,1341],{},[142,1339,1340],{},"Color Gradients",": Smooth transitions from bright green centers to deep blue edges",[162,1343,1344,1347],{},[142,1345,1346],{},"Animated Rotation",": Time-based spinning effects creating living, breathing galaxies",[162,1349,1350,1353],{},[142,1351,1352],{},"Real-Time Controls",": Interactive parameters for instant galaxy customization",[147,1355,189],{"id":188},[138,1357,1358],{},"This experiment showcases advanced particle and shader techniques:",[159,1360,1361,1366,1371,1377,1383,1389],{},[162,1362,1363,1365],{},[142,1364,739],{},": GLSL shaders handling individual particle transformations",[162,1367,1368,1370],{},[142,1369,1112],{},": Per-pixel coloring with smooth gradients and transparency",[162,1372,1373,1376],{},[142,1374,1375],{},"BufferGeometry",": Efficient particle positioning using typed arrays",[162,1378,1379,1382],{},[142,1380,1381],{},"Additive Blending",": Realistic star glow effects through blend modes",[162,1384,1385,1388],{},[142,1386,1387],{},"Procedural Distribution",": Mathematical algorithms for spiral arm placement",[162,1390,1391,1394],{},[142,1392,1393],{},"Real-Time Generation",": Live galaxy regeneration based on parameter changes",[147,1396,1398],{"id":1397},"galaxy-parameters","Galaxy Parameters",[138,1400,1401],{},"Fully customizable galaxy characteristics:",[159,1403,1404,1410,1416,1422,1428,1434],{},[162,1405,1406,1409],{},[142,1407,1408],{},"Particle Count",": 0 to 100,000 stars for performance vs. detail balance",[162,1411,1412,1415],{},[142,1413,1414],{},"Galaxy Radius",": Size control from compact to sprawling formations",[162,1417,1418,1421],{},[142,1419,1420],{},"Spiral Arms",": 2 to 10 arms for varied galactic structures",[162,1423,1424,1427],{},[142,1425,1426],{},"Spin Factor",": Rotation intensity affecting arm curvature",[162,1429,1430,1433],{},[142,1431,1432],{},"Randomness",": Controlled chaos for natural, organic distributions",[162,1435,1436,1439],{},[142,1437,1438],{},"Color Scheme",": Interior and exterior color customization",[147,1441,778],{"id":777},[159,1443,1444,1449,1455,1461],{},[162,1445,1446,1448],{},[142,1447,767],{},": Continuous rotation and movement effects",[162,1450,1451,1454],{},[142,1452,1453],{},"Size Variation",": Realistic star size distribution using random scaling",[162,1456,1457,1460],{},[142,1458,1459],{},"Depth Sorting",": Proper transparency rendering without artifacts",[162,1462,1463,1465],{},[142,1464,456],{},": GPU-accelerated rendering for smooth 60fps",[147,1467,1171],{"id":1170},[159,1469,1470,1476,1482,1488],{},[162,1471,1472,1475],{},[142,1473,1474],{},"Cosmic Atmosphere",": Deep space black background for maximum contrast",[162,1477,1478,1481],{},[142,1479,1480],{},"Elegant Typography",": Sacramento cursive font for artistic presentation",[162,1483,1484,1487],{},[142,1485,1486],{},"Smooth Animations",": GSAP-powered title animations for polished experience",[162,1489,1490,1493],{},[142,1491,1492],{},"Interactive Controls",": Live parameter adjustment with immediate visual feedback",[138,1495,1496],{},"This experiment perfectly demonstrates how mathematical algorithms combined with modern GPU shaders can create breathtaking cosmic visualizations, making it an excellent learning tool for both particle systems and procedural generation techniques.",{"title":276,"searchDepth":277,"depth":277,"links":1498},[1499,1500,1501,1502,1503],{"id":149,"depth":280,"text":150},{"id":188,"depth":280,"text":189},{"id":1397,"depth":280,"text":1398},{"id":777,"depth":280,"text":778},{"id":1170,"depth":280,"text":1171},"2023-04-25","Animated galaxy from ThreeJS Journey done with TresJS",{},{"title":46,"description":1505},[829,1245],"/experiments/galaxy-generator.png","IcbZYXF4ihFrq2O7EWu4xinqt74oSTQvJMotgRlS3zM",{"id":1512,"title":50,"author":133,"body":1513,"date":1699,"description":1700,"extension":285,"featured":129,"lastUpdated":1699,"meta":1701,"navigation":287,"path":51,"seo":1702,"stem":52,"tags":1703,"thumbnail":1705,"__hash__":1706},"experiments/experiments/glass-material.md",{"type":135,"value":1514,"toc":1692},[1515,1525,1527,1530,1560,1562,1565,1596,1600,1603,1635,1639,1662,1664,1689],[138,1516,495,1517,1520,1521,1524],{},[142,1518,1519],{},"realistic glass and plastic rendering"," using Three.js's advanced ",[208,1522,1523],{},"MeshPhysicalMaterial",". Explore the properties of transparent materials with real-time controls for transmission, thickness, roughness, and environmental reflections.",[147,1526,150],{"id":149},[138,1528,1529],{},"An interactive material showcase featuring:",[159,1531,1532,1538,1544,1550,1555],{},[162,1533,1534,1537],{},[142,1535,1536],{},"High-Resolution Icosahedron",": 10-subdivision sphere showing detailed surface properties",[162,1539,1540,1543],{},[142,1541,1542],{},"HDR Environment Mapping",": Realistic reflections using high dynamic range textures",[162,1545,1546,1549],{},[142,1547,1548],{},"Background Plane",": Textured backdrop visible through the transparent material",[162,1551,1552,1554],{},[142,1553,1352],{},": Live adjustment of all material properties",[162,1556,1557,1559],{},[142,1558,264],{},": Directional and ambient lighting for optimal material display",[147,1561,189],{"id":188},[138,1563,1564],{},"This experiment demonstrates advanced material techniques:",[159,1566,1567,1572,1578,1584,1590],{},[162,1568,1569,1571],{},[142,1570,1523],{},": Industry-standard PBR material with transmission support",[162,1573,1574,1577],{},[142,1575,1576],{},"HDR Environment Maps",": Equirectangular reflection mapping for realistic lighting",[162,1579,1580,1583],{},[142,1581,1582],{},"Normal Mapping",": Surface detail enhancement using normal map textures",[162,1585,1586,1589],{},[142,1587,1588],{},"Transmission Rendering",": Realistic light transmission through transparent materials",[162,1591,1592,1595],{},[142,1593,1594],{},"Clearcoat Effects",": Surface coating simulation for enhanced realism",[147,1597,1599],{"id":1598},"material-parameters","Material Parameters",[138,1601,1602],{},"Fully controllable glass properties:",[159,1604,1605,1611,1617,1623,1629],{},[162,1606,1607,1610],{},[142,1608,1609],{},"Transmission",": 0-1 range controlling material transparency and light transmission",[162,1612,1613,1616],{},[142,1614,1615],{},"Thickness",": Physical thickness affecting refraction and light behavior",[162,1618,1619,1622],{},[142,1620,1621],{},"Roughness",": Surface smoothness from mirror-like (0) to frosted (1)",[162,1624,1625,1628],{},[142,1626,1627],{},"Environment Intensity",": Reflection strength for environmental lighting",[162,1630,1631,1634],{},[142,1632,1633],{},"HDR Toggle",": Switch between HDR and standard environment mapping",[147,1636,1638],{"id":1637},"rendering-features","Rendering Features",[159,1640,1641,1647,1652,1657],{},[162,1642,1643,1646],{},[142,1644,1645],{},"Physically Accurate",": Based on real-world material properties",[162,1648,1649,1651],{},[142,1650,246],{},": Efficient rendering suitable for real-time applications",[162,1653,1654,1656],{},[142,1655,270],{},": Helper grid for depth perception and scale reference",[162,1658,1659,1661],{},[142,1660,1492],{},": Immediate visual feedback for parameter changes",[147,1663,1171],{"id":1170},[159,1665,1666,1672,1677,1683],{},[162,1667,1668,1671],{},[142,1669,1670],{},"Clean Layout",": Minimal interface focusing attention on material properties",[162,1673,1674,1676],{},[142,1675,264],{},": Balanced illumination showcasing material characteristics",[162,1678,1679,1682],{},[142,1680,1681],{},"Background Integration",": Textured backdrop demonstrating transmission effects",[162,1684,1685,1688],{},[142,1686,1687],{},"Neutral Color Scheme",": Light gray background preventing color contamination",[138,1690,1691],{},"This experiment serves as an excellent reference for implementing realistic glass, plastic, and transparent materials in 3D applications, demonstrating the full capabilities of modern physically-based rendering techniques.",{"title":276,"searchDepth":277,"depth":277,"links":1693},[1694,1695,1696,1697,1698],{"id":149,"depth":280,"text":150},{"id":188,"depth":280,"text":189},{"id":1598,"depth":280,"text":1599},{"id":1637,"depth":280,"text":1638},{"id":1170,"depth":280,"text":1171},"2023-04-10","A realistic glass/plastic effect, play with it!",{},{"title":50,"description":1700},[1704],"materials","/experiments/glass-material.png","jxfzbOOEknUmRvivF2EfeMMEjV0wLfAZEaTEWXhy0rI",{"id":1708,"title":54,"author":295,"body":1709,"date":2761,"description":2762,"extension":285,"featured":129,"lastUpdated":2763,"meta":2764,"navigation":287,"path":55,"seo":2765,"stem":56,"tags":2766,"thumbnail":673,"__hash__":2769},"experiments/experiments/grainy-liquid.md",{"type":135,"value":1710,"toc":2751},[1711,1714,1716,1720,1723,1732,1736,1741,1744,1798,1803,1829,1833,1836,1909,1913,1945,1949,1957,1960,2051,2056,2088,2095,2098,2282,2286,2312,2319,2322,2503,2507,2532,2536,2540,2543,2569,2573,2576,2602,2605,2631,2635,2638,2711,2715,2718,2744,2747],[138,1712,1713],{},"A dynamic website design featuring animated liquid blobs created with custom GLSL shaders, demonstrating organic deformation and fluid-like behavior.",[1264,1715,189],{"id":188},[147,1717,1719],{"id":1718},"architecture-overview","Architecture Overview",[138,1721,1722],{},"The experiment consists of several key components working together to create the liquid blob effect:",[1724,1725,1730],"pre",{"className":1726,"code":1728,"language":1729},[1727],"language-text","app/components/grainy-liquid/\n├── index.global.vue         # Main entry point\n├── WebsiteLayout.vue        # Full website layout with text overlay\n├── Experience.vue           # 3D scene setup\n├── MultiBlob.vue           # Multiple blob instances\n├── Blob.vue                # Individual blob component\n└── shaders/\n    ├── vertex.glsl         # Vertex displacement shader\n    ├── fragment.glsl       # Color and surface effects\n    ├── vertex.glsl.d.ts    # TypeScript declarations\n    └── fragment.glsl.d.ts\n","text",[208,1731,1728],{"__ignoreMap":276},[147,1733,1735],{"id":1734},"shader-system","Shader System",[1737,1738,1740],"h4",{"id":1739},"vertex-shader-displacement","Vertex Shader (Displacement)",[138,1742,1743],{},"The vertex shader creates organic liquid-like deformation using layered Simplex noise:",[1724,1745,1748],{"className":1746,"code":1747,"language":1295,"meta":276,"style":276},"language-glsl shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","// Multiple noise layers for complex deformation\nfloat noise1 = snoise(pos * u_frequency + time * 0.5);\nfloat noise2 = snoise(pos * u_frequency * 2.0 + time * 0.3);\nfloat noise3 = snoise(pos * u_frequency * 4.0 + time * 0.7);\n\n// Combine with different amplitudes for organic movement\nfloat displacement = noise1 * 0.6 + noise2 * 0.3 + noise3 * 0.1;\nvec3 displacedPosition = pos + normal * displacement * u_amplitude;\n",[208,1749,1750,1758,1763,1768,1774,1780,1786,1792],{"__ignoreMap":276},[1751,1752,1755],"span",{"class":1753,"line":1754},"line",1,[1751,1756,1757],{},"// Multiple noise layers for complex deformation\n",[1751,1759,1760],{"class":1753,"line":277},[1751,1761,1762],{},"float noise1 = snoise(pos * u_frequency + time * 0.5);\n",[1751,1764,1765],{"class":1753,"line":280},[1751,1766,1767],{},"float noise2 = snoise(pos * u_frequency * 2.0 + time * 0.3);\n",[1751,1769,1771],{"class":1753,"line":1770},4,[1751,1772,1773],{},"float noise3 = snoise(pos * u_frequency * 4.0 + time * 0.7);\n",[1751,1775,1777],{"class":1753,"line":1776},5,[1751,1778,1779],{"emptyLinePlaceholder":287},"\n",[1751,1781,1783],{"class":1753,"line":1782},6,[1751,1784,1785],{},"// Combine with different amplitudes for organic movement\n",[1751,1787,1789],{"class":1753,"line":1788},7,[1751,1790,1791],{},"float displacement = noise1 * 0.6 + noise2 * 0.3 + noise3 * 0.1;\n",[1751,1793,1795],{"class":1753,"line":1794},8,[1751,1796,1797],{},"vec3 displacedPosition = pos + normal * displacement * u_amplitude;\n",[138,1799,1800],{},[142,1801,1802],{},"Key Features:",[159,1804,1805,1811,1817,1823],{},[162,1806,1807,1810],{},[142,1808,1809],{},"Simplex noise implementation"," for smooth, organic deformation",[162,1812,1813,1816],{},[142,1814,1815],{},"Multi-layered noise"," with different frequencies and speeds",[162,1818,1819,1822],{},[142,1820,1821],{},"Normal-based displacement"," to maintain blob volume",[162,1824,1825,1828],{},[142,1826,1827],{},"Time-based animation"," for continuous fluid movement",[1737,1830,1832],{"id":1831},"fragment-shader-surface-effects","Fragment Shader (Surface Effects)",[138,1834,1835],{},"The fragment shader handles color mixing, surface effects, and visual texture:",[1724,1837,1839],{"className":1746,"code":1838,"language":1295,"meta":276,"style":276},"// Fresnel effect for liquid-like rim lighting\nfloat fresnel = 1.0 - dot(normal, viewDirection);\nfresnel = pow(fresnel, u_fresnelPower);\n\n// Flowing color mixing with noise\nvec2 flowUv = v_uv + u_time * 0.1;\nfloat colorNoise = fbm(flowUv * u_noiseScale);\nvec3 baseColor = mix(u_colorA, u_colorB, colorNoise);\nvec3 finalColor = mix(baseColor, u_colorC, fresnel);\n\n// Grain texture for surface detail\nfloat grain = random(v_uv * 100.0 + u_time * 0.02) * u_grainIntensity;\nfinalColor += vec3(grain);\n",[208,1840,1841,1846,1851,1856,1860,1865,1870,1875,1880,1886,1891,1897,1903],{"__ignoreMap":276},[1751,1842,1843],{"class":1753,"line":1754},[1751,1844,1845],{},"// Fresnel effect for liquid-like rim lighting\n",[1751,1847,1848],{"class":1753,"line":277},[1751,1849,1850],{},"float fresnel = 1.0 - dot(normal, viewDirection);\n",[1751,1852,1853],{"class":1753,"line":280},[1751,1854,1855],{},"fresnel = pow(fresnel, u_fresnelPower);\n",[1751,1857,1858],{"class":1753,"line":1770},[1751,1859,1779],{"emptyLinePlaceholder":287},[1751,1861,1862],{"class":1753,"line":1776},[1751,1863,1864],{},"// Flowing color mixing with noise\n",[1751,1866,1867],{"class":1753,"line":1782},[1751,1868,1869],{},"vec2 flowUv = v_uv + u_time * 0.1;\n",[1751,1871,1872],{"class":1753,"line":1788},[1751,1873,1874],{},"float colorNoise = fbm(flowUv * u_noiseScale);\n",[1751,1876,1877],{"class":1753,"line":1794},[1751,1878,1879],{},"vec3 baseColor = mix(u_colorA, u_colorB, colorNoise);\n",[1751,1881,1883],{"class":1753,"line":1882},9,[1751,1884,1885],{},"vec3 finalColor = mix(baseColor, u_colorC, fresnel);\n",[1751,1887,1889],{"class":1753,"line":1888},10,[1751,1890,1779],{"emptyLinePlaceholder":287},[1751,1892,1894],{"class":1753,"line":1893},11,[1751,1895,1896],{},"// Grain texture for surface detail\n",[1751,1898,1900],{"class":1753,"line":1899},12,[1751,1901,1902],{},"float grain = random(v_uv * 100.0 + u_time * 0.02) * u_grainIntensity;\n",[1751,1904,1906],{"class":1753,"line":1905},13,[1751,1907,1908],{},"finalColor += vec3(grain);\n",[138,1910,1911],{},[142,1912,1802],{},[159,1914,1915,1921,1927,1933,1939],{},[162,1916,1917,1920],{},[142,1918,1919],{},"Fresnel effect"," for realistic edge lighting",[162,1922,1923,1926],{},[142,1924,1925],{},"Fractal Brownian Motion (FBM)"," for organic color patterns",[162,1928,1929,1932],{},[142,1930,1931],{},"Multi-layer grain"," for surface texture",[162,1934,1935,1938],{},[142,1936,1937],{},"Flowing color animation"," synchronized with deformation",[162,1940,1941,1944],{},[142,1942,1943],{},"Iridescent highlights"," for liquid shimmer",[147,1946,1948],{"id":1947},"component-architecture","Component Architecture",[1737,1950,1952,1953,1956],{"id":1951},"blob-component-blobvue","Blob Component (",[208,1954,1955],{},"Blob.vue",")",[138,1958,1959],{},"Individual blob with customizable properties:",[1724,1961,1965],{"className":1962,"code":1963,"language":1964,"meta":276,"style":276},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","interface Props {\n  colorA?: string     // Primary color\n  colorB?: string     // Secondary color  \n  colorC?: string     // Highlight color\n  speed?: number      // Animation speed\n  amplitude?: number  // Deformation intensity\n}\n","typescript",[208,1966,1967,1981,1997,2009,2021,2034,2046],{"__ignoreMap":276},[1751,1968,1969,1973,1977],{"class":1753,"line":1754},[1751,1970,1972],{"class":1971},"spNyl","interface",[1751,1974,1976],{"class":1975},"sBMFI"," Props",[1751,1978,1980],{"class":1979},"sMK4o"," {\n",[1751,1982,1983,1987,1990,1993],{"class":1753,"line":277},[1751,1984,1986],{"class":1985},"swJcz","  colorA",[1751,1988,1989],{"class":1979},"?:",[1751,1991,1992],{"class":1975}," string",[1751,1994,1996],{"class":1995},"sHwdD","     // Primary color\n",[1751,1998,1999,2002,2004,2006],{"class":1753,"line":280},[1751,2000,2001],{"class":1985},"  colorB",[1751,2003,1989],{"class":1979},[1751,2005,1992],{"class":1975},[1751,2007,2008],{"class":1995},"     // Secondary color  \n",[1751,2010,2011,2014,2016,2018],{"class":1753,"line":1770},[1751,2012,2013],{"class":1985},"  colorC",[1751,2015,1989],{"class":1979},[1751,2017,1992],{"class":1975},[1751,2019,2020],{"class":1995},"     // Highlight color\n",[1751,2022,2023,2026,2028,2031],{"class":1753,"line":1776},[1751,2024,2025],{"class":1985},"  speed",[1751,2027,1989],{"class":1979},[1751,2029,2030],{"class":1975}," number",[1751,2032,2033],{"class":1995},"      // Animation speed\n",[1751,2035,2036,2039,2041,2043],{"class":1753,"line":1782},[1751,2037,2038],{"class":1985},"  amplitude",[1751,2040,1989],{"class":1979},[1751,2042,2030],{"class":1975},[1751,2044,2045],{"class":1995},"  // Deformation intensity\n",[1751,2047,2048],{"class":1753,"line":1788},[1751,2049,2050],{"class":1979},"}\n",[138,2052,2053],{},[142,2054,2055],{},"Features:",[159,2057,2058,2068,2074,2080],{},[162,2059,2060,2063,2064,2067],{},[142,2061,2062],{},"Interactive controls"," via ",[208,2065,2066],{},"useControls()"," for real-time adjustment",[162,2069,2070,2073],{},[142,2071,2072],{},"Prop-based customization"," for different blob variations",[162,2075,2076,2079],{},[142,2077,2078],{},"Shader uniform management"," with reactive updates",[162,2081,2082,304,2085,229],{},[142,2083,2084],{},"Animation loop",[208,2086,2087],{},"useLoop()",[1737,2089,2091,2092,1956],{"id":2090},"multiblob-component-multiblobvue","MultiBlob Component (",[208,2093,2094],{},"MultiBlob.vue",[138,2096,2097],{},"Manages multiple blob instances with varied configurations:",[1724,2099,2101],{"className":1962,"code":2100,"language":1964,"meta":276,"style":276},"const blobs: BlobConfig[] = [\n  {\n    position: [-4, 2, 0],\n    scale: [1.8, 1.8, 1.8],\n    colorA: '#6366f1',  // Purple blob\n    colorB: '#8b5cf6',\n    colorC: '#ddd6fe',\n    speed: 0.6,\n    amplitude: 0.15\n  },\n  // Pink and gray blobs with different properties...\n]\n",[208,2102,2103,2127,2132,2166,2191,2213,2229,2245,2257,2267,2272,2277],{"__ignoreMap":276},[1751,2104,2105,2108,2112,2115,2118,2121,2124],{"class":1753,"line":1754},[1751,2106,2107],{"class":1971},"const",[1751,2109,2111],{"class":2110},"sTEyZ"," blobs",[1751,2113,2114],{"class":1979},":",[1751,2116,2117],{"class":1975}," BlobConfig",[1751,2119,2120],{"class":2110},"[] ",[1751,2122,2123],{"class":1979},"=",[1751,2125,2126],{"class":2110}," [\n",[1751,2128,2129],{"class":1753,"line":277},[1751,2130,2131],{"class":1979},"  {\n",[1751,2133,2134,2137,2139,2142,2145,2149,2152,2155,2157,2160,2163],{"class":1753,"line":280},[1751,2135,2136],{"class":1985},"    position",[1751,2138,2114],{"class":1979},[1751,2140,2141],{"class":2110}," [",[1751,2143,2144],{"class":1979},"-",[1751,2146,2148],{"class":2147},"sbssI","4",[1751,2150,2151],{"class":1979},",",[1751,2153,2154],{"class":2147}," 2",[1751,2156,2151],{"class":1979},[1751,2158,2159],{"class":2147}," 0",[1751,2161,2162],{"class":2110},"]",[1751,2164,2165],{"class":1979},",\n",[1751,2167,2168,2171,2173,2175,2178,2180,2183,2185,2187,2189],{"class":1753,"line":1770},[1751,2169,2170],{"class":1985},"    scale",[1751,2172,2114],{"class":1979},[1751,2174,2141],{"class":2110},[1751,2176,2177],{"class":2147},"1.8",[1751,2179,2151],{"class":1979},[1751,2181,2182],{"class":2147}," 1.8",[1751,2184,2151],{"class":1979},[1751,2186,2182],{"class":2147},[1751,2188,2162],{"class":2110},[1751,2190,2165],{"class":1979},[1751,2192,2193,2196,2198,2201,2205,2208,2210],{"class":1753,"line":1776},[1751,2194,2195],{"class":1985},"    colorA",[1751,2197,2114],{"class":1979},[1751,2199,2200],{"class":1979}," '",[1751,2202,2204],{"class":2203},"sfazB","#6366f1",[1751,2206,2207],{"class":1979},"'",[1751,2209,2151],{"class":1979},[1751,2211,2212],{"class":1995},"  // Purple blob\n",[1751,2214,2215,2218,2220,2222,2225,2227],{"class":1753,"line":1782},[1751,2216,2217],{"class":1985},"    colorB",[1751,2219,2114],{"class":1979},[1751,2221,2200],{"class":1979},[1751,2223,2224],{"class":2203},"#8b5cf6",[1751,2226,2207],{"class":1979},[1751,2228,2165],{"class":1979},[1751,2230,2231,2234,2236,2238,2241,2243],{"class":1753,"line":1788},[1751,2232,2233],{"class":1985},"    colorC",[1751,2235,2114],{"class":1979},[1751,2237,2200],{"class":1979},[1751,2239,2240],{"class":2203},"#ddd6fe",[1751,2242,2207],{"class":1979},[1751,2244,2165],{"class":1979},[1751,2246,2247,2250,2252,2255],{"class":1753,"line":1794},[1751,2248,2249],{"class":1985},"    speed",[1751,2251,2114],{"class":1979},[1751,2253,2254],{"class":2147}," 0.6",[1751,2256,2165],{"class":1979},[1751,2258,2259,2262,2264],{"class":1753,"line":1882},[1751,2260,2261],{"class":1985},"    amplitude",[1751,2263,2114],{"class":1979},[1751,2265,2266],{"class":2147}," 0.15\n",[1751,2268,2269],{"class":1753,"line":1888},[1751,2270,2271],{"class":1979},"  },\n",[1751,2273,2274],{"class":1753,"line":1893},[1751,2275,2276],{"class":1995},"  // Pink and gray blobs with different properties...\n",[1751,2278,2279],{"class":1753,"line":1899},[1751,2280,2281],{"class":2110},"]\n",[138,2283,2284],{},[142,2285,2055],{},[159,2287,2288,2294,2300,2306],{},[162,2289,2290,2293],{},[142,2291,2292],{},"Varied positioning"," for layered composition",[162,2295,2296,2299],{},[142,2297,2298],{},"Different scales"," to create depth",[162,2301,2302,2305],{},[142,2303,2304],{},"Unique color palettes"," per blob",[162,2307,2308,2311],{},[142,2309,2310],{},"Staggered animation speeds"," for organic movement",[1737,2313,2315,2316,1956],{"id":2314},"website-layout-websitelayoutvue","Website Layout (",[208,2317,2318],{},"WebsiteLayout.vue",[138,2320,2321],{},"Complete website design with 3D background and text overlay:",[1724,2323,2327],{"className":2324,"code":2325,"language":2326,"meta":276,"style":276},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv class=\"relative h-screen w-full overflow-hidden bg-gray-50\">\n    \u003C!-- 3D Canvas Background -->\n    \u003Cdiv class=\"absolute inset-0\">\n      \u003CTresCanvas window-size clear-color=\"#f8fafc\">\n        \u003CExperience />\n      \u003C/TresCanvas>\n    \u003C/div>\n\n    \u003C!-- Content Overlay -->\n    \u003Cdiv class=\"relative z-10 h-full flex flex-col\">\n      \u003C!-- Header, main content, decorative elements -->\n    \u003C/div>\n  \u003C/div>\n\u003C/template>\n","vue",[208,2328,2329,2340,2363,2368,2388,2413,2424,2433,2442,2446,2451,2470,2475,2483,2493],{"__ignoreMap":276},[1751,2330,2331,2334,2337],{"class":1753,"line":1754},[1751,2332,2333],{"class":1979},"\u003C",[1751,2335,2336],{"class":1985},"template",[1751,2338,2339],{"class":1979},">\n",[1751,2341,2342,2345,2348,2351,2353,2356,2359,2361],{"class":1753,"line":277},[1751,2343,2344],{"class":1979},"  \u003C",[1751,2346,2347],{"class":1985},"div",[1751,2349,2350],{"class":1971}," class",[1751,2352,2123],{"class":1979},[1751,2354,2355],{"class":1979},"\"",[1751,2357,2358],{"class":2203},"relative h-screen w-full overflow-hidden bg-gray-50",[1751,2360,2355],{"class":1979},[1751,2362,2339],{"class":1979},[1751,2364,2365],{"class":1753,"line":280},[1751,2366,2367],{"class":1995},"    \u003C!-- 3D Canvas Background -->\n",[1751,2369,2370,2373,2375,2377,2379,2381,2384,2386],{"class":1753,"line":1770},[1751,2371,2372],{"class":1979},"    \u003C",[1751,2374,2347],{"class":1985},[1751,2376,2350],{"class":1971},[1751,2378,2123],{"class":1979},[1751,2380,2355],{"class":1979},[1751,2382,2383],{"class":2203},"absolute inset-0",[1751,2385,2355],{"class":1979},[1751,2387,2339],{"class":1979},[1751,2389,2390,2393,2396,2399,2402,2404,2406,2409,2411],{"class":1753,"line":1776},[1751,2391,2392],{"class":1979},"      \u003C",[1751,2394,2395],{"class":1985},"TresCanvas",[1751,2397,2398],{"class":1971}," window-size",[1751,2400,2401],{"class":1971}," clear-color",[1751,2403,2123],{"class":1979},[1751,2405,2355],{"class":1979},[1751,2407,2408],{"class":2203},"#f8fafc",[1751,2410,2355],{"class":1979},[1751,2412,2339],{"class":1979},[1751,2414,2415,2418,2421],{"class":1753,"line":1782},[1751,2416,2417],{"class":1979},"        \u003C",[1751,2419,2420],{"class":1985},"Experience",[1751,2422,2423],{"class":1979}," />\n",[1751,2425,2426,2429,2431],{"class":1753,"line":1788},[1751,2427,2428],{"class":1979},"      \u003C/",[1751,2430,2395],{"class":1985},[1751,2432,2339],{"class":1979},[1751,2434,2435,2438,2440],{"class":1753,"line":1794},[1751,2436,2437],{"class":1979},"    \u003C/",[1751,2439,2347],{"class":1985},[1751,2441,2339],{"class":1979},[1751,2443,2444],{"class":1753,"line":1882},[1751,2445,1779],{"emptyLinePlaceholder":287},[1751,2447,2448],{"class":1753,"line":1888},[1751,2449,2450],{"class":1995},"    \u003C!-- Content Overlay -->\n",[1751,2452,2453,2455,2457,2459,2461,2463,2466,2468],{"class":1753,"line":1893},[1751,2454,2372],{"class":1979},[1751,2456,2347],{"class":1985},[1751,2458,2350],{"class":1971},[1751,2460,2123],{"class":1979},[1751,2462,2355],{"class":1979},[1751,2464,2465],{"class":2203},"relative z-10 h-full flex flex-col",[1751,2467,2355],{"class":1979},[1751,2469,2339],{"class":1979},[1751,2471,2472],{"class":1753,"line":1899},[1751,2473,2474],{"class":1995},"      \u003C!-- Header, main content, decorative elements -->\n",[1751,2476,2477,2479,2481],{"class":1753,"line":1905},[1751,2478,2437],{"class":1979},[1751,2480,2347],{"class":1985},[1751,2482,2339],{"class":1979},[1751,2484,2486,2489,2491],{"class":1753,"line":2485},14,[1751,2487,2488],{"class":1979},"  \u003C/",[1751,2490,2347],{"class":1985},[1751,2492,2339],{"class":1979},[1751,2494,2496,2499,2501],{"class":1753,"line":2495},15,[1751,2497,2498],{"class":1979},"\u003C/",[1751,2500,2336],{"class":1985},[1751,2502,2339],{"class":1979},[138,2504,2505],{},[142,2506,2055],{},[159,2508,2509,2515,2521,2527],{},[162,2510,2511,2514],{},[142,2512,2513],{},"Layered design"," with 3D background and HTML overlay",[162,2516,2517,2520],{},[142,2518,2519],{},"Responsive typography"," using TailwindCSS",[162,2522,2523,2526],{},[142,2524,2525],{},"Google Fonts integration"," (Playfair Display serif)",[162,2528,2529,2531],{},[142,2530,2062],{}," disabled for presentation mode",[147,2533,2535],{"id":2534},"technical-highlights","Technical Highlights",[1737,2537,2539],{"id":2538},"noise-based-animation","Noise-Based Animation",[138,2541,2542],{},"The liquid effect relies on sophisticated noise techniques:",[159,2544,2545,2551,2557,2563],{},[162,2546,2547,2550],{},[142,2548,2549],{},"Simplex noise"," for smooth, organic deformation patterns",[162,2552,2553,2556],{},[142,2554,2555],{},"Multiple octaves"," combined for complex surface detail",[162,2558,2559,2562],{},[142,2560,2561],{},"Time-based offsets"," creating flowing animation",[162,2564,2565,2568],{},[142,2566,2567],{},"Frequency variation"," for different scales of movement",[1737,2570,2572],{"id":2571},"color-system","Color System",[138,2574,2575],{},"Realistic liquid color mixing:",[159,2577,2578,2584,2590,2596],{},[162,2579,2580,2583],{},[142,2581,2582],{},"Fresnel-based rim lighting"," mimicking surface tension",[162,2585,2586,2589],{},[142,2587,2588],{},"Flowing color patterns"," using FBM noise",[162,2591,2592,2595],{},[142,2593,2594],{},"Multi-color blending"," for realistic liquid appearance",[162,2597,2598,2601],{},[142,2599,2600],{},"Grain texture overlay"," for surface detail",[1737,2603,456],{"id":2604},"performance-optimization",[159,2606,2607,2613,2619,2625],{},[162,2608,2609,2612],{},[142,2610,2611],{},"Efficient shader implementation"," with clamped displacement",[162,2614,2615,2618],{},[142,2616,2617],{},"Instanced blob rendering"," for multiple objects",[162,2620,2621,2624],{},[142,2622,2623],{},"Optimized geometry"," using icosahedron base mesh",[162,2626,2627,2630],{},[142,2628,2629],{},"Controlled animation speeds"," for smooth performance",[147,2632,2634],{"id":2633},"shader-mathematics","Shader Mathematics",[138,2636,2637],{},"The core deformation uses mathematical functions to simulate liquid behavior:",[1724,2639,2641],{"className":1746,"code":2640,"language":1295,"meta":276,"style":276},"// Simplex noise for organic patterns\nfloat snoise(vec3 v) { /* Implementation */ }\n\n// Fractal Brownian Motion for color variation\nfloat fbm(vec2 st) {\n    float value = 0.0;\n    float amplitude = 0.5;\n    for (int i = 0; i \u003C 5; i++) {\n        value += amplitude * noise(st * frequency);\n        frequency *= 2.0;\n        amplitude *= 0.5;\n    }\n    return value;\n}\n",[208,2642,2643,2648,2653,2657,2662,2667,2672,2677,2682,2687,2692,2697,2702,2707],{"__ignoreMap":276},[1751,2644,2645],{"class":1753,"line":1754},[1751,2646,2647],{},"// Simplex noise for organic patterns\n",[1751,2649,2650],{"class":1753,"line":277},[1751,2651,2652],{},"float snoise(vec3 v) { /* Implementation */ }\n",[1751,2654,2655],{"class":1753,"line":280},[1751,2656,1779],{"emptyLinePlaceholder":287},[1751,2658,2659],{"class":1753,"line":1770},[1751,2660,2661],{},"// Fractal Brownian Motion for color variation\n",[1751,2663,2664],{"class":1753,"line":1776},[1751,2665,2666],{},"float fbm(vec2 st) {\n",[1751,2668,2669],{"class":1753,"line":1782},[1751,2670,2671],{},"    float value = 0.0;\n",[1751,2673,2674],{"class":1753,"line":1788},[1751,2675,2676],{},"    float amplitude = 0.5;\n",[1751,2678,2679],{"class":1753,"line":1794},[1751,2680,2681],{},"    for (int i = 0; i \u003C 5; i++) {\n",[1751,2683,2684],{"class":1753,"line":1882},[1751,2685,2686],{},"        value += amplitude * noise(st * frequency);\n",[1751,2688,2689],{"class":1753,"line":1888},[1751,2690,2691],{},"        frequency *= 2.0;\n",[1751,2693,2694],{"class":1753,"line":1893},[1751,2695,2696],{},"        amplitude *= 0.5;\n",[1751,2698,2699],{"class":1753,"line":1899},[1751,2700,2701],{},"    }\n",[1751,2703,2704],{"class":1753,"line":1905},[1751,2705,2706],{},"    return value;\n",[1751,2708,2709],{"class":1753,"line":2485},[1751,2710,2050],{},[147,2712,2714],{"id":2713},"design-inspiration","Design Inspiration",[138,2716,2717],{},"The visual style draws from modern liquid design trends:",[159,2719,2720,2726,2732,2738],{},[162,2721,2722,2725],{},[142,2723,2724],{},"Organic blob shapes"," popular in contemporary web design",[162,2727,2728,2731],{},[142,2729,2730],{},"Grainy texture effects"," for tactile visual appeal",[162,2733,2734,2737],{},[142,2735,2736],{},"Gradient color schemes"," with purple/pink palettes",[162,2739,2740,2743],{},[142,2741,2742],{},"Minimalist layout"," focusing on typography and shapes",[138,2745,2746],{},"This experiment demonstrates how GLSL shaders can create sophisticated visual effects in web applications, combining mathematical precision with organic, fluid aesthetics.",[2748,2749,2750],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}",{"title":276,"searchDepth":277,"depth":277,"links":2752},[2753],{"id":188,"depth":277,"text":189,"children":2754},[2755,2756,2757,2758,2759,2760],{"id":1718,"depth":280,"text":1719},{"id":1734,"depth":280,"text":1735},{"id":1947,"depth":280,"text":1948},{"id":2534,"depth":280,"text":2535},{"id":2633,"depth":280,"text":2634},{"id":2713,"depth":280,"text":2714},"2025-08-13","Animated liquid blobs with GLSL shaders, noise effects, and organic deformation inspired by oil drops in water","2025-12-02",{},{"title":54,"description":2762},[1245,1295,2767,2768,852],"liquid","noise","B7v26D4Tjz44MJ_zlUUfHQpd-pIzzN0k7AlMuNkEtpI",{"id":2771,"title":58,"author":133,"body":2772,"date":1699,"description":3052,"extension":285,"featured":129,"lastUpdated":1699,"meta":3053,"navigation":287,"path":59,"seo":3054,"stem":60,"tags":3055,"thumbnail":3060,"__hash__":3061},"experiments/experiments/haunted-house.md",{"type":135,"value":2773,"toc":3045},[2774,2783,2785,2788,2832,2834,2837,2884,2888,2894,2920,2926,2946,2952,2978,2980,3012,3016,3042],[138,2775,300,2776,1258,2779,2782],{},[142,2777,2778],{},"haunted house scene",[310,2780,315],{"href":312,"rel":2781},[314],", adapted for TresJS. Experience a spooky atmospheric scene complete with floating ghosts, textured materials, dynamic lighting, and eerie fog effects that create the perfect Halloween ambiance.",[147,2784,150],{"id":149},[138,2786,2787],{},"A spine-chilling haunted scene featuring:",[159,2789,2790,2796,2802,2808,2814,2820,2826],{},[162,2791,2792,2795],{},[142,2793,2794],{},"Detailed Haunted House",": Multi-textured building with brick walls, wooden door, and cone roof",[162,2797,2798,2801],{},[142,2799,2800],{},"Floating Ghosts",": Three colorful point lights that orbit the house in ethereal patterns",[162,2803,2804,2807],{},[142,2805,2806],{},"Graveyard Environment",": 50 randomly positioned tombstones scattered around the scene",[162,2809,2810,2813],{},[142,2811,2812],{},"Atmospheric Fog",": Dense fog effects limiting visibility and creating mystery",[162,2815,2816,2819],{},[142,2817,2818],{},"Textured Terrain",": Grass floor with normal maps, roughness, and ambient occlusion",[162,2821,2822,2825],{},[142,2823,2824],{},"Dynamic Lighting",": Multiple light sources casting realistic shadows",[162,2827,2828,2831],{},[142,2829,2830],{},"Spooky Vegetation",": Bushes strategically placed around the house for atmosphere",[147,2833,189],{"id":188},[138,2835,2836],{},"This experiment demonstrates comprehensive 3D scene creation techniques:",[159,2838,2839,2845,2854,2860,2867,2872,2878],{},[162,2840,2841,2844],{},[142,2842,2843],{},"Advanced Texturing",": Multiple texture maps (diffuse, normal, roughness, AO) for realistic materials",[162,2846,2847,798,2850,2853],{},[142,2848,2849],{},"Texture Loading",[208,2851,2852],{},"useTextures"," composable for efficient multi-texture loading with error handling",[162,2855,2856,2859],{},[142,2857,2858],{},"Procedural Generation",": Algorithmic placement of 50 graves using polar coordinates",[162,2861,2862,798,2864,2866],{},[142,2863,224],{},[208,2865,603],{}," composable driving ghost movement with trigonometric patterns",[162,2868,2869,2871],{},[142,2870,949],{},": PCF soft shadows with optimized shadow camera settings",[162,2873,2874,2877],{},[142,2875,2876],{},"Material Configuration",": Proper UV2 attribute setup for ambient occlusion maps",[162,2879,2880,2883],{},[142,2881,2882],{},"Atmospheric Effects",": Fog system creating depth and limiting draw distance",[147,2885,2887],{"id":2886},"scene-components","Scene Components",[1737,2889,2891],{"id":2890},"building-architecture",[142,2892,2893],{},"Building Architecture",[159,2895,2896,2902,2908,2914],{},[162,2897,2898,2901],{},[142,2899,2900],{},"Brick Walls",": 4x2.5x4 box geometry with realistic brick texturing",[162,2903,2904,2907],{},[142,2905,2906],{},"Wooden Door",": Displacement-mapped door with alpha transparency and detailed textures",[162,2909,2910,2913],{},[142,2911,2912],{},"Cone Roof",": 4-sided pyramid roof with reddish-brown material",[162,2915,2916,2919],{},[142,2917,2918],{},"Door Light",": Warm orange point light illuminating the entrance",[1737,2921,2923],{"id":2922},"ghost-animation-system",[142,2924,2925],{},"Ghost Animation System",[159,2927,2928,2934,2940],{},[162,2929,2930,2933],{},[142,2931,2932],{},"Ghost 1",": Magenta light orbiting at 4-unit radius with vertical bobbing",[162,2935,2936,2939],{},[142,2937,2938],{},"Ghost 2",": Cyan light following 5-unit circular path with complex Y movement",[162,2941,2942,2945],{},[142,2943,2944],{},"Ghost 3",": Orange light with variable radius (7 + oscillation) creating unpredictable patterns",[1737,2947,2949],{"id":2948},"environmental-details",[142,2950,2951],{},"Environmental Details",[159,2953,2954,2960,2966,2972],{},[162,2955,2956,2959],{},[142,2957,2958],{},"Graveyard",": 50 procedurally placed tombstones with random rotations",[162,2961,2962,2965],{},[142,2963,2964],{},"Bushes",": 4 spherical bushes of varying sizes around the house",[162,2967,2968,2971],{},[142,2969,2970],{},"Grass Floor",": 20x20 plane with 8x8 texture repetition for seamless tiling",[162,2973,2974,2977],{},[142,2975,2976],{},"Lighting Setup",": Ambient + directional + point lights for atmospheric illumination",[147,2979,1171],{"id":1170},[159,2981,2982,2988,2994,3000,3006],{},[162,2983,2984,2987],{},[142,2985,2986],{},"Horror Atmosphere",": Dark purple-gray background (#262837) creating ominous mood",[162,2989,2990,2993],{},[142,2991,2992],{},"Realistic Materials",": PBR workflow with proper metalness, roughness, and normal mapping",[162,2995,2996,2999],{},[142,2997,2998],{},"Color Palette",": Muted earth tones contrasted with vibrant ghost light colors",[162,3001,3002,3005],{},[142,3003,3004],{},"Depth Effects",": Fog system preventing pop-in and adding atmospheric depth",[162,3007,3008,3011],{},[142,3009,3010],{},"Shadow Play",": Strategic shadow casting enhancing the spooky atmosphere",[147,3013,3015],{"id":3014},"performance-features","Performance Features",[159,3017,3018,3024,3030,3036],{},[162,3019,3020,3023],{},[142,3021,3022],{},"Optimized Textures",": Efficient texture loading with 256x256 shadow maps",[162,3025,3026,3029],{},[142,3027,3028],{},"Instanced Graves",": Reused geometry and materials for tombstone generation",[162,3031,3032,3035],{},[142,3033,3034],{},"Culling Optimization",": Fog limiting draw distance for better performance",[162,3037,3038,3041],{},[142,3039,3040],{},"Memory Management",": Proper texture wrapping and repeat settings",[138,3043,3044],{},"This experiment perfectly captures the essence of classic horror aesthetics while demonstrating advanced TresJS techniques for creating immersive, atmospheric 3D environments. It serves as an excellent reference for texture mapping, procedural generation, and atmospheric lighting in web-based 3D applications.",{"title":276,"searchDepth":277,"depth":277,"links":3046},[3047,3048,3049,3050,3051],{"id":149,"depth":280,"text":150},{"id":188,"depth":280,"text":189},{"id":2886,"depth":280,"text":2887},{"id":1170,"depth":280,"text":1171},{"id":3014,"depth":280,"text":3015},"The classical threejs-journey haunted house, done with TresJs",{},{"title":58,"description":3052},[3056,3057,3058,3059],"PointLight","fog","useTexture","threejs-journey","/experiments/haunted-house.png","iTeBy0VUgPQhBlVzWSn9uwJQYa4US4LiPL7WFAOdzuc",{"id":3063,"title":62,"author":295,"body":3064,"date":3263,"description":3264,"extension":285,"featured":129,"lastUpdated":3263,"meta":3265,"navigation":287,"path":63,"seo":3266,"stem":64,"tags":3267,"thumbnail":3270,"__hash__":3271},"experiments/experiments/html-phone.md",{"type":135,"value":3065,"toc":3256},[3066,3072,3074,3077,3114,3116,3119,3157,3161,3193,3195,3227,3229,3253],[138,3067,495,3068,3071],{},[142,3069,3070],{},"HTML content integration"," within 3D models, showcasing how to embed live web pages directly into 3D objects. Experience the \"iTres\" phone featuring a real iframe displaying the TresJS website within a realistic iPhone X model.",[147,3073,150],{"id":149},[138,3075,3076],{},"An immersive product showcase featuring:",[159,3078,3079,3085,3091,3097,3103,3108],{},[162,3080,3081,3084],{},[142,3082,3083],{},"Realistic iPhone X Model",": High-quality 3D model with accurate proportions and materials",[162,3086,3087,3090],{},[142,3088,3089],{},"Live Web Content",": Embedded iframe displaying the actual TresJS website",[162,3092,3093,3096],{},[142,3094,3095],{},"Interactive Interface",": Floating view button to trigger camera animations",[162,3098,3099,3102],{},[142,3100,3101],{},"Product Marketing",": Apple-style hero section with elegant typography",[162,3104,3105,3107],{},[142,3106,355],{},": Custom progress indicator with emoji animations",[162,3109,3110,3113],{},[142,3111,3112],{},"Professional Environment",": HDR lighting and contact shadows for realism",[147,3115,189],{"id":188},[138,3117,3118],{},"This experiment demonstrates advanced HTML-3D integration:",[159,3120,3121,3127,3133,3139,3145,3151],{},[162,3122,3123,3126],{},[142,3124,3125],{},"Html Component",": TresJS Cientos component for embedding HTML in 3D space",[162,3128,3129,3132],{},[142,3130,3131],{},"Occlusion Handling",": Proper depth sorting with the phone's back panel",[162,3134,3135,3138],{},[142,3136,3137],{},"Transform Integration",": HTML elements that rotate and scale with the 3D model",[162,3140,3141,3144],{},[142,3142,3143],{},"Distance Scaling",": Automatic size adjustment based on camera distance",[162,3146,3147,3150],{},[142,3148,3149],{},"Material Customization",": Custom screen transparency and bottom tab styling",[162,3152,3153,3156],{},[142,3154,3155],{},"GSAP Animations",": Smooth camera transitions for cinematic reveals",[147,3158,3160],{"id":3159},"interactive-features","Interactive Features",[159,3162,3163,3169,3175,3181,3187],{},[162,3164,3165,3168],{},[142,3166,3167],{},"Floating Levitation",": Gentle floating animation using Levioso component",[162,3170,3171,3174],{},[142,3172,3173],{},"View Toggle",": Button to trigger close-up camera movement",[162,3176,3177,3180],{},[142,3178,3179],{},"Responsive HTML",": Web content that adapts to 3D transformations",[162,3182,3183,3186],{},[142,3184,3185],{},"Loading States",": Progress tracking for model and texture loading",[162,3188,3189,3192],{},[142,3190,3191],{},"Professional UI",": Nuxt UI components for consistent design",[147,3194,1171],{"id":1170},[159,3196,3197,3203,3209,3215,3221],{},[162,3198,3199,3202],{},[142,3200,3201],{},"Apple Aesthetic",": SF Pro Display font matching Apple's design language",[162,3204,3205,3208],{},[142,3206,3207],{},"Hero Marketing",": Product presentation with pricing and features",[162,3210,3211,3214],{},[142,3212,3213],{},"Environmental Lighting",": City HDR preset for realistic reflections",[162,3216,3217,3220],{},[142,3218,3219],{},"Shadow Integration",": Contact shadows grounding the phone in space",[162,3222,3223,3226],{},[142,3224,3225],{},"Fade Transitions",": Smooth loading overlay animations",[147,3228,2535],{"id":2534},[159,3230,3231,3236,3242,3248],{},[162,3232,3233,3235],{},[142,3234,215],{},": Efficient Draco-compressed model loading",[162,3237,3238,3241],{},[142,3239,3240],{},"HTML Positioning",": Precise placement of web content within screen bounds",[162,3243,3244,3247],{},[142,3245,3246],{},"Camera Controls",": Interactive camera movements with smooth easing",[162,3249,3250,3252],{},[142,3251,456],{},": Efficient rendering with proper occlusion culling",[138,3254,3255],{},"This experiment perfectly demonstrates the possibilities of combining traditional web content with 3D presentations, opening new avenues for product marketing, portfolio displays, and interactive experiences that bridge the gap between 2D and 3D interfaces.",{"title":276,"searchDepth":277,"depth":277,"links":3257},[3258,3259,3260,3261,3262],{"id":149,"depth":280,"text":150},{"id":188,"depth":280,"text":189},{"id":3159,"depth":280,"text":3160},{"id":1170,"depth":280,"text":1171},{"id":2534,"depth":280,"text":2535},"2023-12-08","Using HTML abstraction to render a page inside a model",{},{"title":62,"description":3264},[3268,3269],"html","gltf","/experiments/html-phone.png","NigzfdqE_CcUMz2fXHUym19CCwB4cyTJxFSfgNJBLdU",{"id":3273,"title":66,"author":295,"body":3274,"date":3469,"description":3470,"extension":285,"featured":129,"lastUpdated":3469,"meta":3471,"navigation":287,"path":67,"seo":3472,"stem":68,"tags":3473,"thumbnail":3474,"__hash__":3475},"experiments/experiments/lowpoly-planet.md",{"type":135,"value":3275,"toc":3462},[3276,3283,3285,3288,3325,3327,3330,3367,3369,3401,3405,3431,3433,3459],[138,3277,3278,3279,3282],{},"This experiment features a ",[142,3280,3281],{},"charming low-poly planet"," complete with orbiting airplanes and floating clouds, creating a peaceful miniature world. The scene demonstrates model animation, atmospheric effects, and creative use of the Stars component for a cosmic backdrop.",[147,3284,150],{"id":149},[138,3286,3287],{},"A whimsical space scene featuring:",[159,3289,3290,3296,3302,3308,3314,3319],{},[162,3291,3292,3295],{},[142,3293,3294],{},"Rotating Low-Poly Planet",": Multi-axis rotation creating dynamic planetary movement",[162,3297,3298,3301],{},[142,3299,3300],{},"Orbiting Airplane",": Small aircraft circling the planet in realistic orbital patterns",[162,3303,3304,3307],{},[142,3305,3306],{},"Floating Clouds",": Multiple cloud instances creating atmospheric depth",[162,3309,3310,3313],{},[142,3311,3312],{},"5000 Starfield",": Procedural star field creating infinite cosmic depth",[162,3315,3316,3318],{},[142,3317,343],{},": Point and directional lights with cyan color accent",[162,3320,3321,3324],{},[142,3322,3323],{},"Shadow System",": Soft shadows adding depth and realism",[147,3326,189],{"id":188},[138,3328,3329],{},"This experiment showcases several key 3D concepts:",[159,3331,3332,3338,3343,3349,3355,3361],{},[162,3333,3334,3337],{},[142,3335,3336],{},"Multi-Axis Rotation",": Planet rotates on X, Y, and Z axes with different speeds",[162,3339,3340,3342],{},[142,3341,949],{},": PCF soft shadows with high-resolution shadow maps (2048x2048)",[162,3344,3345,3348],{},[142,3346,3347],{},"Model Animation",": useLoop composable for smooth, frame-rate independent animation",[162,3350,3351,3354],{},[142,3352,3353],{},"Atmospheric Lighting",": Strategic light placement with cyan (#1BFFEF) and purple (#484068) colors",[162,3356,3357,3360],{},[142,3358,3359],{},"Geometry Traversal",": Proper shadow receiving setup for complex models",[162,3362,3363,3366],{},[142,3364,3365],{},"Procedural Stars",": Cientos Stars component creating realistic starfield",[147,3368,1171],{"id":1170},[159,3370,3371,3377,3383,3389,3395],{},[162,3372,3373,3376],{},[142,3374,3375],{},"Low-Poly Aesthetic",": Clean geometric forms with minimal polygon counts",[162,3378,3379,3382],{},[142,3380,3381],{},"Space Theme",": Deep purple background (#11101B) evoking deep space",[162,3384,3385,3388],{},[142,3386,3387],{},"Color Harmony",": Cyan lighting against purple ambient creates striking contrast",[162,3390,3391,3394],{},[142,3392,3393],{},"Soft Shadows",": Realistic shadow softness enhancing the miniature world feel",[162,3396,3397,3400],{},[142,3398,3399],{},"Dynamic Movement",": Multiple rotation speeds creating engaging visual rhythm",[147,3402,3404],{"id":3403},"animation-features","Animation Features",[159,3406,3407,3413,3419,3425],{},[162,3408,3409,3412],{},[142,3410,3411],{},"Planetary Rotation",": Realistic multi-axis rotation simulating planetary spin",[162,3414,3415,3418],{},[142,3416,3417],{},"Orbital Mechanics",": Airplane follows believable orbital path around planet",[162,3420,3421,3424],{},[142,3422,3423],{},"Cloud Movement",": Gentle floating motion adding atmospheric life",[162,3426,3427,3430],{},[142,3428,3429],{},"Smooth Performance",": Delta-time based animation ensuring consistent speed",[147,3432,443],{"id":442},[159,3434,3435,3441,3447,3453],{},[162,3436,3437,3440],{},[142,3438,3439],{},"GLTF Loading",": Efficient model loading from external CDN",[162,3442,3443,3446],{},[142,3444,3445],{},"Shadow Configuration",": Professional shadow setup with bias adjustment",[162,3448,3449,3452],{},[142,3450,3451],{},"Bounding Sphere Computation",": Optimized collision detection for orbital mechanics",[162,3454,3455,3458],{},[142,3456,3457],{},"Material Updates",": Runtime material modification for shadow receiving",[138,3460,3461],{},"This experiment creates a delightful miniature world that combines technical excellence with artistic charm, making it perfect for educational purposes or as inspiration for game development and interactive storytelling.",{"title":276,"searchDepth":277,"depth":277,"links":3463},[3464,3465,3466,3467,3468],{"id":149,"depth":280,"text":150},{"id":188,"depth":280,"text":189},{"id":1170,"depth":280,"text":1171},{"id":3403,"depth":280,"text":3404},{"id":442,"depth":280,"text":443},"2023-03-27","Low Poly Planet exported from Blender",{},{"title":66,"description":3470},[290,484,219],"/experiments/lowpoly-planet.png","OeuniSIeP44jBHm7XhDSf4vnLpK5Md978-hbBRLmqpc",{"id":3477,"title":70,"author":3478,"body":3479,"date":3691,"description":3692,"extension":285,"featured":129,"lastUpdated":3693,"meta":3694,"navigation":287,"path":71,"seo":3695,"stem":72,"tags":3696,"thumbnail":3701,"__hash__":3702},"experiments/experiments/magical-marbles.md","damienmontastier",{"type":135,"value":3480,"toc":3684},[3481,3493,3495,3498,3535,3537,3540,3575,3579,3582,3620,3622,3653,3655,3681],[138,3482,681,3483,3486,3487,3492],{},[142,3484,3485],{},"stunning interactive marble sphere"," with sophisticated custom shaders and smooth color transitions. Inspired by the famous ",[310,3488,3491],{"href":3489,"rel":3490},"https://tympanus.net/codrops/2021/08/02/magical-marbles-in-three-js/",[314],"Codrops tutorial",", this implementation showcases advanced material techniques and interactive animations.",[147,3494,150],{"id":149},[138,3496,3497],{},"An enchanting interactive experience featuring:",[159,3499,3500,3506,3512,3518,3524,3530],{},[162,3501,3502,3505],{},[142,3503,3504],{},"Procedural Marble Surface",": Custom vertex and fragment shaders creating realistic marble patterns",[162,3507,3508,3511],{},[142,3509,3510],{},"Color-Cycling Interaction",": Click to cycle through 5 beautiful color schemes",[162,3513,3514,3517],{},[142,3515,3516],{},"Dynamic Background",": Radial gradients that smoothly transition with marble colors",[162,3519,3520,3523],{},[142,3521,3522],{},"Contact Shadows",": Realistic ground shadows that adapt to current color scheme",[162,3525,3526,3529],{},[142,3527,3528],{},"Elastic Animations",": Smooth hover and click effects with elastic scaling",[162,3531,3532,3534],{},[142,3533,994],{},": Tone mapping and multisampling for enhanced visual quality",[147,3536,189],{"id":188},[138,3538,3539],{},"This experiment demonstrates advanced shader and animation techniques:",[159,3541,3542,3548,3554,3560,3565,3570],{},[162,3543,3544,3547],{},[142,3545,3546],{},"CustomShaderMaterial",": Combines standard PBR features with custom shader logic",[162,3549,3550,3553],{},[142,3551,3552],{},"Displacement Mapping",": Height and displacement textures for surface detail",[162,3555,3556,3559],{},[142,3557,3558],{},"Real-Time Uniforms",": Live parameter adjustment affecting marble appearance",[162,3561,3562,3564],{},[142,3563,3155],{},": Professional-grade animations for color transitions and scaling",[162,3566,3567,3569],{},[142,3568,955],{},": HSL color manipulation for smooth gradients",[162,3571,3572,3574],{},[142,3573,593],{},": Cursor changes and visual feedback on hover",[147,3576,3578],{"id":3577},"shader-parameters","Shader Parameters",[138,3580,3581],{},"Fully controllable marble characteristics:",[159,3583,3584,3590,3596,3602,3608,3614],{},[162,3585,3586,3589],{},[142,3587,3588],{},"Iterations",": 1-64 steps for noise complexity and detail level",[162,3591,3592,3595],{},[142,3593,3594],{},"Depth",": Surface displacement intensity for 3D marble veining",[162,3597,3598,3601],{},[142,3599,3600],{},"Smoothing",": Blend between sharp and soft pattern transitions",[162,3603,3604,3607],{},[142,3605,3606],{},"Displacement",": Overall surface deformation amount",[162,3609,3610,3613],{},[142,3611,3612],{},"Speed",": Animation timing for flowing marble patterns",[162,3615,3616,3619],{},[142,3617,3618],{},"Material Properties",": Roughness and metalness for realistic surface response",[147,3621,3160],{"id":3159},[159,3623,3624,3630,3636,3642,3647],{},[162,3625,3626,3629],{},[142,3627,3628],{},"Click Cycling",": Smooth transitions between 5 predefined color schemes",[162,3631,3632,3635],{},[142,3633,3634],{},"Hover Effects",": Subtle scaling and cursor changes for user feedback",[162,3637,3638,3641],{},[142,3639,3640],{},"Auto-Rotation",": Gentle orbital movement showcasing the marble from all angles",[162,3643,3644,3646],{},[142,3645,1352],{},": Live parameter adjustment with immediate visual response",[162,3648,3649,3652],{},[142,3650,3651],{},"Background Sync",": Gradient backgrounds that match current marble colors",[147,3654,1171],{"id":1170},[159,3656,3657,3663,3669,3675],{},[162,3658,3659,3662],{},[142,3660,3661],{},"Professional Gradients",": Carefully crafted radial backgrounds enhancing marble visibility",[162,3664,3665,3668],{},[142,3666,3667],{},"Contact Integration",": Ground shadows that respond to color changes",[162,3670,3671,3674],{},[142,3672,3673],{},"Elastic Feedback",": Satisfying bounce animations on interaction",[162,3676,3677,3680],{},[142,3678,3679],{},"HDR Environment",": Urban environment preset for realistic reflections",[138,3682,3683],{},"This experiment perfectly demonstrates how custom shaders can create captivating interactive materials, combining mathematical precision with artistic beauty to create an engaging user experience.",{"title":276,"searchDepth":277,"depth":277,"links":3685},[3686,3687,3688,3689,3690],{"id":149,"depth":280,"text":150},{"id":188,"depth":280,"text":189},{"id":3577,"depth":280,"text":3578},{"id":3159,"depth":280,"text":3160},{"id":1170,"depth":280,"text":1171},"2024-02-28","Magical Marbles Sphere","2025-06-29",{},{"title":70,"description":3692},[3697,3698,3699,1245,1295,3700],"magical","marbles","sphere","contact shadow","/experiments/magical-marbles.png","rW7yo4M79bDhpK0yX6CH302O2XYoZ8-TK810Y8QZbRw",{"id":3704,"title":74,"author":295,"body":3705,"date":3853,"description":3854,"extension":285,"featured":129,"lastUpdated":3853,"meta":3855,"navigation":287,"path":75,"seo":3856,"stem":76,"tags":3857,"thumbnail":3860,"__hash__":3861},"experiments/experiments/nuxt-stones.md",{"type":135,"value":3706,"toc":3847},[3707,3713,3715,3718,3750,3752,3755,3784,3786,3817,3819,3844],[138,3708,495,3709,3712],{},[142,3710,3711],{},"professional lighting techniques"," and post-processing effects using a simple but effective scene featuring stone models with the Nuxt logo. The scene showcases how baked lighting and bloom effects can create stunning visual results with optimized performance.",[147,3714,150],{"id":149},[138,3716,3717],{},"A beautifully crafted scene featuring:",[159,3719,3720,3726,3732,3738,3744],{},[162,3721,3722,3725],{},[142,3723,3724],{},"Detailed Stone Models",": High-quality 3D stone models with realistic textures",[162,3727,3728,3731],{},[142,3729,3730],{},"Glowing Nuxt Logo",": Emissive Nuxt branding with bloom post-processing effects",[162,3733,3734,3737],{},[142,3735,3736],{},"Baked Lighting",": Pre-calculated lighting for optimal performance and visual quality",[162,3739,3740,3743],{},[142,3741,3742],{},"Bloom Effects",": Professional post-processing creating realistic light bleeding",[162,3745,3746,3749],{},[142,3747,3748],{},"Atmospheric Environment",": Carefully designed lighting setup for mood and depth",[147,3751,189],{"id":188},[138,3753,3754],{},"This experiment showcases professional 3D rendering techniques:",[159,3756,3757,3762,3768,3773,3778],{},[162,3758,3759,3761],{},[142,3760,3736],{},": Pre-computed lighting data stored in textures for performance",[162,3763,3764,3767],{},[142,3765,3766],{},"Emissive Materials",": Glowing materials for the Nuxt logo creating light sources",[162,3769,3770,3772],{},[142,3771,994],{},": Bloom effects enhancing the overall visual impact",[162,3774,3775,3777],{},[142,3776,3439],{},": Efficient model loading with optimized file formats",[162,3779,3780,3783],{},[142,3781,3782],{},"Texture Optimization",": High-quality textures balanced with performance considerations",[147,3785,960],{"id":959},[159,3787,3788,3793,3799,3805,3811],{},[162,3789,3790,3792],{},[142,3791,264],{},": Carefully crafted lighting setup highlighting model details",[162,3794,3795,3798],{},[142,3796,3797],{},"Material Realism",": Realistic stone materials with proper roughness and reflectance",[162,3800,3801,3804],{},[142,3802,3803],{},"Brand Integration",": Elegant Nuxt logo integration with emissive glow effects",[162,3806,3807,3810],{},[142,3808,3809],{},"Atmospheric Mood",": Lighting and effects creating a compelling visual atmosphere",[162,3812,3813,3816],{},[142,3814,3815],{},"Performance Balance",": Beautiful visuals without compromising rendering performance",[147,3818,443],{"id":442},[159,3820,3821,3827,3833,3838],{},[162,3822,3823,3826],{},[142,3824,3825],{},"Baked Lighting Pipeline",": Industry-standard lighting workflow for production quality",[162,3828,3829,3832],{},[142,3830,3831],{},"Emissive Rendering",": Materials that emit light contributing to the scene's illumination",[162,3834,3835,3837],{},[142,3836,900],{},": Professional-grade bloom effects for realistic light behavior",[162,3839,3840,3843],{},[142,3841,3842],{},"Optimized Assets",": Efficient 3D models and textures for web deployment",[138,3845,3846],{},"This experiment serves as an excellent example of how proper lighting techniques and post-processing can transform simple 3D models into visually stunning presentations, making it perfect for product visualization and brand presentations.",{"title":276,"searchDepth":277,"depth":277,"links":3848},[3849,3850,3851,3852],{"id":149,"depth":280,"text":150},{"id":188,"depth":280,"text":189},{"id":959,"depth":280,"text":960},{"id":442,"depth":280,"text":443},"2023-09-18","Nuxt Stone is a simple scene with a stone model and a Nuxt logo. The scene is rendered with baked lighting and post-processing effects.",{},{"title":74,"description":3854},[3269,3858,3859,1028,1029],"baked","emission","/experiments/nuxt-stones.png","7zH7nSGoDcZ-1oaY-yV43ZD1S861Zb_ZdHm9Mnep-rQ",{"id":3863,"title":78,"author":3864,"body":3865,"date":3985,"description":3986,"extension":285,"featured":129,"lastUpdated":3985,"meta":3987,"navigation":287,"path":79,"seo":3988,"stem":80,"tags":3989,"thumbnail":3991,"__hash__":3992},"experiments/experiments/particle-pumpkin.md","neoprint3d",{"type":135,"value":3866,"toc":3980},[3867,3873,3875,3878,3910,3912,3915,3947,3949,3977],[138,3868,3278,3869,3872],{},[142,3870,3871],{},"spooky animated pumpkin"," surrounded by magical particle effects and custom shaders. Perfect for Halloween themes, this scene combines 3D modeling, particle systems, and custom GLSL shaders to create an atmospheric and engaging experience.",[147,3874,150],{"id":149},[138,3876,3877],{},"A mystical Halloween scene featuring:",[159,3879,3880,3886,3892,3898,3904],{},[162,3881,3882,3885],{},[142,3883,3884],{},"Animated 3D Pumpkin",": Custom GLTF model exported from Blender with detailed textures",[162,3887,3888,3891],{},[142,3889,3890],{},"Particle Magic",": Swirling particle effects creating magical atmosphere around the pumpkin",[162,3893,3894,3897],{},[142,3895,3896],{},"Custom Shaders",": GLSL shaders for enhanced visual effects and atmospheric lighting",[162,3899,3900,3903],{},[142,3901,3902],{},"Spooky Lighting",": Dramatic lighting setup enhancing the Halloween mood",[162,3905,3906,3909],{},[142,3907,3908],{},"Interactive Elements",": Hover effects and animations bringing the pumpkin to life",[147,3911,189],{"id":188},[138,3913,3914],{},"This experiment demonstrates Halloween-themed 3D techniques:",[159,3916,3917,3923,3929,3935,3941],{},[162,3918,3919,3922],{},[142,3920,3921],{},"Custom GLTF Models",": 3D pumpkin model created in Blender and optimized for web",[162,3924,3925,3928],{},[142,3926,3927],{},"Particle Systems",": Dynamic particle effects using custom shaders and mathematics",[162,3930,3931,3934],{},[142,3932,3933],{},"Shader Programming",": GLSL vertex and fragment shaders for atmospheric effects",[162,3936,3937,3940],{},[142,3938,3939],{},"Animation Integration",": Smooth animations using TresJS animation composables",[162,3942,3943,3946],{},[142,3944,3945],{},"Lighting Design",": Strategic lighting placement for spooky ambiance",[147,3948,960],{"id":959},[159,3950,3951,3957,3962,3967,3972],{},[162,3952,3953,3956],{},[142,3954,3955],{},"Halloween Aesthetics",": Orange and black color scheme with spooky atmosphere",[162,3958,3959,3961],{},[142,3960,3890],{},": Floating particles creating supernatural effects",[162,3963,3964,3966],{},[142,3965,3797],{},": Detailed pumpkin textures with proper bump mapping",[162,3968,3969,3971],{},[142,3970,2882],{},": Fog and lighting creating mysterious mood",[162,3973,3974,3976],{},[142,3975,1486],{},": Fluid pumpkin rotation and particle movement",[138,3978,3979],{},"This experiment showcases how 3D web technology can create engaging seasonal content, perfect for Halloween websites, games, or interactive experiences.",{"title":276,"searchDepth":277,"depth":277,"links":3981},[3982,3983,3984],{"id":149,"depth":280,"text":150},{"id":188,"depth":280,"text":189},{"id":959,"depth":280,"text":960},"2023-11-03","A animated 3d pumpkin that uses shaders, particles, and custom gltf model",{},{"title":78,"description":3986},[484,219,3990,1245],"blender","/experiments/particle-pumpkin.png","kdl1Brw_8ICXjrMfNZRb23duGNNbjo_LvDkk8H3tnv0",{"id":3994,"title":82,"author":295,"body":3995,"date":4149,"description":4150,"extension":285,"featured":129,"lastUpdated":4151,"meta":4152,"navigation":287,"path":83,"seo":4153,"stem":84,"tags":4154,"thumbnail":4155,"__hash__":4156},"experiments/experiments/particles-morphing.md",{"type":135,"value":3996,"toc":4138},[3997,4000,4003,4007,4010,4014,4022,4024,4061,4063,4067,4070,4082,4086,4093,4097,4117,4121,4135],[839,3998,82],{"id":3999},"particles-morphing",[138,4001,4002],{},"An advanced GPU-accelerated particle system that creates a mesmerizing morphing effect between two 3D models. This experiment demonstrates the power of custom shaders and attribute manipulation in TresJS.",[1264,4004,4006],{"id":4005},"overview","Overview",[138,4008,4009],{},"This experiment loads two 3D models and converts their vertices into particle systems. Using custom vertex and fragment shaders, the particles smoothly transition between the two geometries, creating a fluid morphing effect with customizable colors and animation.",[1264,4011,4013],{"id":4012},"inspiration","Inspiration",[138,4015,4016,4017,4021],{},"This experiment is inspired by one of ",[310,4018,4020],{"href":312,"rel":4019},[314],"Bruno Simon's"," excellent Three.js Journey lessons on particle morphing. The original concept has been adapted to showcase TresJS's declarative approach to working with custom shaders and buffer geometry.",[1264,4023,239],{"id":238},[159,4025,4026,4032,4038,4044,4050,4056],{},[162,4027,4028,4031],{},[142,4029,4030],{},"GPU-Accelerated",": All morphing calculations happen on the GPU via custom shaders",[162,4033,4034,4037],{},[142,4035,4036],{},"Adaptive Particle Count",": Automatically harmonizes vertex counts between different geometries",[162,4039,4040,4043],{},[142,4041,4042],{},"Smooth Transitions",": Uses GSAP for buttery-smooth morphing animations",[162,4045,4046,4049],{},[142,4047,4048],{},"Customizable Colors",": Real-time color mixing between two palettes",[162,4051,4052,4055],{},[142,4053,4054],{},"Random Particle Sizes",": Each particle has a randomized size for visual variety",[162,4057,4058,4060],{},[142,4059,1381],{},": Creates a glowing, ethereal effect",[1264,4062,2535],{"id":2534},[147,4064,4066],{"id":4065},"geometry-harmonization","Geometry Harmonization",[138,4068,4069],{},"When morphing between models with different vertex counts, the system:",[4071,4072,4073,4076,4079],"ol",{},[162,4074,4075],{},"Determines the maximum vertex count between both models",[162,4077,4078],{},"Pads the smaller geometry by randomly sampling existing vertices",[162,4080,4081],{},"Creates matched Float32BufferAttribute arrays for seamless interpolation",[147,4083,4085],{"id":4084},"shader-implementation","Shader Implementation",[138,4087,4088,4089,4092],{},"The vertex shader interpolates between two position attributes using a ",[208,4090,4091],{},"uProgress"," uniform, while the fragment shader creates a gradient between two colors with additive blending for a luminous effect.",[147,4094,4096],{"id":4095},"controls","Controls",[159,4098,4099,4105,4111],{},[162,4100,4101,4104],{},[142,4102,4103],{},"Color A & Color B",": Set the gradient colors for the particle system",[162,4106,4107,4110],{},[142,4108,4109],{},"Progress",": Manual control over the morph transition (0.0 to 1.0)",[162,4112,4113,4116],{},[142,4114,4115],{},"Morph Button",": Trigger an animated transition between the two shapes",[1264,4118,4120],{"id":4119},"models-used","Models Used",[159,4122,4123,4129],{},[162,4124,4125,4128],{},[142,4126,4127],{},"Blender Cube",": A simple geometric shape",[162,4130,4131,4134],{},[142,4132,4133],{},"Pumpkinsaur",": A more complex organic model",[138,4136,4137],{},"Both models are simplified and compressed using Draco compression for optimal performance.",{"title":276,"searchDepth":277,"depth":277,"links":4139},[4140,4141,4142,4143,4148],{"id":4005,"depth":277,"text":4006},{"id":4012,"depth":277,"text":4013},{"id":238,"depth":277,"text":239},{"id":2534,"depth":277,"text":2535,"children":4144},[4145,4146,4147],{"id":4065,"depth":280,"text":4066},{"id":4084,"depth":280,"text":4085},{"id":4095,"depth":280,"text":4096},{"id":4119,"depth":277,"text":4120},"2025-12-20","GPU-accelerated particle system that smoothly morphs between 3D model geometries using custom shaders","2025-12-22",{},{"title":82,"description":4150},[829,852,1245],"/experiments/particles-morphing.png","IV7qRUyz-iupzvOR4LMp2AqTocd-w_5fJPVywO9u9bM",{"id":4158,"title":86,"author":295,"body":4159,"date":4163,"description":4164,"extension":285,"featured":129,"lastUpdated":4163,"meta":4165,"navigation":287,"path":87,"seo":4166,"stem":88,"tags":4167,"thumbnail":4168,"__hash__":4169},"experiments/experiments/pixel-noise-shaders-sandbox.md",{"type":135,"value":4160,"toc":4161},[],{"title":276,"searchDepth":277,"depth":277,"links":4162},[],"2026-03-25","A sandbox for experimenting with pixel noise shaders",{},{"title":86,"description":4164},[1245,2768,1295],"/experiments/pixel-noise-shaders-sandbox.png","SpcOVadzVOluVBKfnU4kOcvCPfbI3TmAQKv9BLr7LXM",{"id":4171,"title":90,"author":295,"body":4172,"date":4176,"description":4177,"extension":285,"featured":129,"lastUpdated":4176,"meta":4178,"navigation":287,"path":91,"seo":4179,"stem":92,"tags":4180,"thumbnail":4182,"__hash__":4183},"experiments/experiments/pixel-plasma-shader.md",{"type":135,"value":4173,"toc":4174},[],{"title":276,"searchDepth":277,"depth":277,"links":4175},[],"2026-03-31","A sandbox for experimenting with pixel plasma shaders",{},{"title":90,"description":4177},[1245,4181,1295],"plasma","/experiments/pixel-plasma-shader.png","MJdR5g2o6G-uicoaeH9HPA-mD7bjzeuojaKQNL-SCzI",{"id":4185,"title":94,"author":295,"body":4186,"date":3469,"description":4321,"extension":285,"featured":129,"lastUpdated":4322,"meta":4323,"navigation":287,"path":95,"seo":4324,"stem":96,"tags":4325,"thumbnail":4326,"__hash__":4327},"experiments/experiments/portal-journey.md",{"type":135,"value":4187,"toc":4316},[4188,4198,4200,4203,4239,4241,4244,4280,4282,4313],[138,4189,300,4190,1258,4193,4197],{},[142,4191,4192],{},"portal scene",[310,4194,4196],{"href":312,"rel":4195},[314],"Bruno Simon's famous Three.js Journey course",", featuring a magical portal surrounded by floating fireflies. The scene demonstrates advanced lighting techniques, custom shaders, and atmospheric effects creating an enchanting fantasy environment.",[147,4199,150],{"id":149},[138,4201,4202],{},"A captivating magical scene featuring:",[159,4204,4205,4211,4217,4222,4228,4234],{},[162,4206,4207,4210],{},[142,4208,4209],{},"Mystical Portal",": Glowing circular portal with swirling energy effects",[162,4212,4213,4216],{},[142,4214,4215],{},"Floating Fireflies",": Hundreds of animated fireflies with custom particle shaders",[162,4218,4219,4221],{},[142,4220,3736],{},": Pre-computed lighting for realistic illumination and shadows",[162,4223,4224,4227],{},[142,4225,4226],{},"Fantasy Environment",": Detailed 3D environment with rocks, grass, and mystical elements",[162,4229,4230,4233],{},[142,4231,4232],{},"Shader Effects",": Custom GLSL shaders for portal energy and firefly glow",[162,4235,4236,4238],{},[142,4237,3353],{},": Carefully crafted lighting creating magical ambiance",[147,4240,189],{"id":188},[138,4242,4243],{},"This experiment showcases advanced 3D rendering techniques:",[159,4245,4246,4251,4257,4263,4269,4275],{},[162,4247,4248,4250],{},[142,4249,3825],{},": Pre-calculated lighting stored in textures for performance",[162,4252,4253,4256],{},[142,4254,4255],{},"Custom Particle Shaders",": GLSL shaders for firefly animation and glow effects",[162,4258,4259,4262],{},[142,4260,4261],{},"Portal Shader Effects",": Swirling energy patterns using time-based animations",[162,4264,4265,4268],{},[142,4266,4267],{},"GLTF Scene Loading",": Complex 3D environment loaded efficiently",[162,4270,4271,4274],{},[142,4272,4273],{},"Texture Management",": Multiple textures for different scene elements",[162,4276,4277,4279],{},[142,4278,456],{},": Balanced visual quality with smooth performance",[147,4281,1171],{"id":1170},[159,4283,4284,4290,4295,4301,4307],{},[162,4285,4286,4289],{},[142,4287,4288],{},"Fantasy Atmosphere",": Magical lighting and effects creating otherworldly mood",[162,4291,4292,4294],{},[142,4293,3387],{},": Warm and cool tones creating visual depth and interest",[162,4296,4297,4300],{},[142,4298,4299],{},"Particle Animation",": Realistic firefly movement with natural randomness",[162,4302,4303,4306],{},[142,4304,4305],{},"Environmental Detail",": Rich 3D environment with varied textures and materials",[162,4308,4309,4312],{},[142,4310,4311],{},"Lighting Drama",": Strategic light placement highlighting key scene elements",[138,4314,4315],{},"This experiment serves as an excellent reference for creating magical environments and demonstrates how proper lighting and shader effects can transform a simple scene into a captivating fantasy world.",{"title":276,"searchDepth":277,"depth":277,"links":4317},[4318,4319,4320],{"id":149,"depth":280,"text":150},{"id":188,"depth":280,"text":189},{"id":1170,"depth":280,"text":1171},"Famous Bruno Simon's ThreeJS Journey Portal.","2025-06-26",{},{"title":94,"description":4321},[3269,1245,3058,219,3858],"/experiments/portal-journey.png","jxXl_oNmeMwV1iMBJZu0_9wXkHJOKmomM112DyveBlQ",{"id":4329,"title":98,"author":295,"body":4330,"date":4492,"description":4493,"extension":285,"featured":129,"lastUpdated":4494,"meta":4495,"navigation":287,"path":99,"seo":4496,"stem":100,"tags":4497,"thumbnail":4501,"__hash__":4502},"experiments/experiments/potions-classroom.md",{"type":135,"value":4331,"toc":4486},[4332,4345,4347,4350,4385,4387,4390,4424,4426,4457,4459,4483],[138,4333,4334,4335,4338,4339,4344],{},"This experiment recreates a ",[142,4336,4337],{},"magical wizard's classroom"," complete with floating candles, brewing potions, and mystical atmosphere. Created for ",[310,4340,4343],{"href":4341,"rel":4342},"https://youtu.be/Aol9FbJvb2k?si=8awnkJA3IU2HGKz8",[314],"Vue.js Live London 2023",", this scene demonstrates how TresJS can create immersive magical environments perfect for educational presentations and fantasy themes.",[147,4346,150],{"id":149},[138,4348,4349],{},"A detailed magical classroom featuring:",[159,4351,4352,4358,4364,4370,4375,4380],{},[162,4353,4354,4357],{},[142,4355,4356],{},"Floating Candles",": Levitating candles with realistic flame effects using Levioso component",[162,4359,4360,4363],{},[142,4361,4362],{},"Potion Bottles",": Various magical bottles and cauldrons with glowing contents",[162,4365,4366,4369],{},[142,4367,4368],{},"Classroom Details",": Books, scrolls, skulls, and other magical artifacts",[162,4371,4372,4374],{},[142,4373,3736],{},": Pre-computed lighting creating realistic shadows and atmosphere",[162,4376,4377,4379],{},[142,4378,3766],{},": Glowing potions and magical elements with bloom effects",[162,4381,4382,4384],{},[142,4383,3908],{},": Clickable objects and hover effects",[147,4386,189],{"id":188},[138,4388,4389],{},"This experiment showcases comprehensive 3D scene creation:",[159,4391,4392,4398,4403,4409,4414,4419],{},[162,4393,4394,4397],{},[142,4395,4396],{},"Complex Scene Management",": Multiple GLTF models organized into logical components",[162,4399,4400,4402],{},[142,4401,3825],{},": Professional lighting workflow for realistic illumination",[162,4404,4405,4408],{},[142,4406,4407],{},"Levioso Integration",": Floating animation system for magical elements",[162,4410,4411,4413],{},[142,4412,3766],{},": Self-illuminating objects contributing to scene lighting",[162,4415,4416,4418],{},[142,4417,1948],{},": Modular scene components for maintainable code",[162,4420,4421,4423],{},[142,4422,456],{},": Efficient rendering of complex magical environment",[147,4425,2887],{"id":2886},[159,4427,4428,4434,4440,4446,4451],{},[162,4429,4430,4433],{},[142,4431,4432],{},"Room Structure",": Detailed classroom with walls, windows, and architectural elements",[162,4435,4436,4439],{},[142,4437,4438],{},"Furniture",": Tables, chairs, shelves filled with magical items",[162,4441,4442,4445],{},[142,4443,4444],{},"Magical Elements",": Floating candles, glowing potions, mystical artifacts",[162,4447,4448,4450],{},[142,4449,2976],{},": Multiple light sources creating dramatic magical atmosphere",[162,4452,4453,4456],{},[142,4454,4455],{},"Interactive Objects",": Clickable items with animations and effects",[147,4458,1171],{"id":1170},[159,4460,4461,4466,4472,4477],{},[162,4462,4463,4465],{},[142,4464,4288],{},": Warm lighting and rich textures creating cozy magical feel",[162,4467,4468,4471],{},[142,4469,4470],{},"Attention to Detail",": Carefully placed props and decorations enhancing immersion",[162,4473,4474,4476],{},[142,4475,2998],{},": Warm oranges and deep purples creating magical ambiance",[162,4478,4479,4482],{},[142,4480,4481],{},"Material Variety",": Different textures and materials for authentic classroom feel",[138,4484,4485],{},"This experiment demonstrates how TresJS can create compelling educational content and immersive environments, perfect for presentations, games, or interactive learning experiences.",{"title":276,"searchDepth":277,"depth":277,"links":4487},[4488,4489,4490,4491],{"id":149,"depth":280,"text":150},{"id":188,"depth":280,"text":189},{"id":2886,"depth":280,"text":2887},{"id":1170,"depth":280,"text":1171},"2023-05-05","Potions classroom scene for VueJS Live London 2023","2025-06-30",{},{"title":98,"description":4493},[3858,3990,4498,4499,4500],"levioso","useGltf","emissive","/experiments/potions-classroom.png","R1ncBvpcHwmnE2bdR_4nIFK3a-UYFGkmVSooyTaHzoY",{"id":4504,"title":102,"author":3478,"body":4505,"date":3691,"description":102,"extension":285,"featured":129,"lastUpdated":3691,"meta":4621,"navigation":287,"path":103,"seo":4622,"stem":104,"tags":4623,"thumbnail":4627,"__hash__":4628},"experiments/experiments/repulsion-effect.md",{"type":135,"value":4506,"toc":4616},[4507,4514,4516,4519,4549,4551,4554,4586,4588,4613],[138,4508,4509,4510,4513],{},"This experiment demonstrates a ",[142,4511,4512],{},"dynamic repulsion effect"," where particles react to mouse movement, creating an engaging interactive experience. Watch as particles flee from your cursor in realistic physics-based motion, showcasing advanced particle systems and user interaction.",[147,4515,150],{"id":149},[138,4517,4518],{},"An interactive particle field featuring:",[159,4520,4521,4527,4533,4538,4544],{},[162,4522,4523,4526],{},[142,4524,4525],{},"Responsive Particles",": Hundreds of particles that dynamically respond to cursor movement",[162,4528,4529,4532],{},[142,4530,4531],{},"Repulsion Physics",": Realistic force-based particle displacement away from mouse position",[162,4534,4535,4537],{},[142,4536,1486],{},": Fluid particle movement with natural physics simulation",[162,4539,4540,4543],{},[142,4541,4542],{},"Interactive Feedback",": Immediate visual response to user input",[162,4545,4546,4548],{},[142,4547,456],{},": Efficient rendering of numerous moving particles",[147,4550,189],{"id":188},[138,4552,4553],{},"This experiment showcases particle system techniques:",[159,4555,4556,4562,4568,4574,4580],{},[162,4557,4558,4561],{},[142,4559,4560],{},"Force-Based Physics",": Mathematical force calculations for realistic repulsion behavior",[162,4563,4564,4567],{},[142,4565,4566],{},"Mouse Interaction",": Real-time cursor tracking converted to 3D world coordinates",[162,4569,4570,4573],{},[142,4571,4572],{},"Particle Management",": Efficient handling of hundreds of individual particle instances",[162,4575,4576,4579],{},[142,4577,4578],{},"Animation Loop",": Smooth 60fps particle movement using optimized update cycles",[162,4581,4582,4585],{},[142,4583,4584],{},"Distance Calculations",": Proximity detection for force application",[147,4587,3160],{"id":3159},[159,4589,4590,4596,4602,4607],{},[162,4591,4592,4595],{},[142,4593,4594],{},"Real-Time Response",": Instant particle reaction to mouse movement",[162,4597,4598,4601],{},[142,4599,4600],{},"Natural Physics",": Believable force-based motion following physics principles",[162,4603,4604,4606],{},[142,4605,4042],{},": Gradual particle movement creating organic flowing effects",[162,4608,4609,4612],{},[142,4610,4611],{},"Boundary Handling",": Particles that respect scene boundaries and return to rest positions",[138,4614,4615],{},"This experiment perfectly demonstrates how interactive particle systems can create engaging user experiences, combining physics simulation with real-time user input for dynamic visual feedback.",{"title":276,"searchDepth":277,"depth":277,"links":4617},[4618,4619,4620],{"id":149,"depth":280,"text":150},{"id":188,"depth":280,"text":189},{"id":3159,"depth":280,"text":3160},{},{"title":102,"description":102},[4624,4625,4626],"repulsion","effect","hover","/experiments/repulsion-effect.png","PDe5qU3LrCc9y1ljmglPCl7sxmhnmgQxGCKtxZtVSeE",{"id":4630,"title":106,"author":4631,"body":4632,"date":4655,"description":4656,"extension":285,"featured":129,"lastUpdated":4655,"meta":4657,"navigation":287,"path":107,"seo":4658,"stem":108,"tags":4659,"thumbnail":4660,"__hash__":4661},"experiments/experiments/shadertoy-museum.md",[490,295],{"type":135,"value":4633,"toc":4652},[4634,4637],[1264,4635,106],{"id":4636},"shadertoy-museum",[138,4638,4639,4640,4645,4646,4651],{},"This experiment is a gallery of ",[310,4641,4644],{"href":4642,"rel":4643},"https://www.shadertoy.com/",[314],"ShaderToy"," examples, inspired by ",[310,4647,4650],{"href":4648,"rel":4649},"https://cineshader.com/",[314],"cineshader.com",".",{"title":276,"searchDepth":277,"depth":277,"links":4653},[4654],{"id":4636,"depth":277,"text":106},"2025-12-26","A gallery of ShaderToy examples, inspired by cineshader.com",{},{"title":106,"description":4656},[830,1028],"/experiments/shadertoy-museum.png","PjnO6UJOD6MGVjPEg_oLUJ8X2fySjmkgsUuSiPbHvRI",{"id":4663,"title":110,"author":490,"body":4664,"date":4883,"description":4884,"extension":285,"featured":287,"lastUpdated":4883,"meta":4885,"navigation":287,"path":111,"seo":4886,"stem":112,"tags":4887,"thumbnail":4889,"__hash__":4890},"experiments/experiments/space-game.md",{"type":135,"value":4665,"toc":4876},[4666,4679,4681,4684,4728,4730,4733,4775,4779,4816,4820,4846,4848,4873],[138,4667,4668,4669,4672,4673,4678],{},"This experiment is a ",[142,4670,4671],{},"fully playable 3D space shooter"," game, showcasing how TresJS can be used to create interactive gaming experiences. This is a port from ",[310,4674,4677],{"href":4675,"rel":4676},"https://twitter.com/0xca0a",[314],"Paul Henschel's"," original React Three Fiber game prototype, demonstrating advanced game development techniques using Vue and Three.js.",[147,4680,150],{"id":149},[138,4682,4683],{},"A complete arcade-style space game featuring:",[159,4685,4686,4692,4698,4704,4710,4716,4722],{},[162,4687,4688,4691],{},[142,4689,4690],{},"Spaceship Control",": Mouse-controlled spaceship with smooth movement and physics",[162,4693,4694,4697],{},[142,4695,4696],{},"Shooting Mechanics",": Click to shoot lasers at enemy targets",[162,4699,4700,4703],{},[142,4701,4702],{},"Enemy AI",": Dynamic enemy spawning and movement patterns",[162,4705,4706,4709],{},[142,4707,4708],{},"Particle Effects",": Explosions, engine trails, and visual feedback",[162,4711,4712,4715],{},[142,4713,4714],{},"HUD Interface",": Score tracking, health display, and game state information",[162,4717,4718,4721],{},[142,4719,4720],{},"Audio Integration",": Spatial audio effects for immersive gameplay",[162,4723,4724,4727],{},[142,4725,4726],{},"Post-Processing",": Visual effects enhancing the space atmosphere",[147,4729,189],{"id":188},[138,4731,4732],{},"This experiment showcases complex game development concepts:",[159,4734,4735,4741,4747,4753,4759,4765,4770],{},[162,4736,4737,4740],{},[142,4738,4739],{},"Game State Management",": Centralized store using reactive patterns for game logic",[162,4742,4743,4746],{},[142,4744,4745],{},"Physics Integration",": Collision detection and movement systems",[162,4748,4749,4752],{},[142,4750,4751],{},"Dynamic Object Spawning",": Real-time creation and destruction of game entities",[162,4754,4755,4758],{},[142,4756,4757],{},"Mouse-Based Controls",": Pointer movement converted to spaceship positioning",[162,4760,4761,4764],{},[142,4762,4763],{},"Audio System",": Spatial audio with multiple sound effects and background music",[162,4766,4767,4769],{},[142,4768,456],{},": Efficient rendering of hundreds of particles and objects",[162,4771,4772,4774],{},[142,4773,1948],{},": Modular game components for entities, effects, and UI",[147,4776,4778],{"id":4777},"game-features","Game Features",[159,4780,4781,4787,4793,4799,4804,4810],{},[162,4782,4783,4786],{},[142,4784,4785],{},"Ship Movement",": Smooth mouse-controlled navigation through 3D space",[162,4788,4789,4792],{},[142,4790,4791],{},"Combat System",": Laser shooting with hit detection and visual feedback",[162,4794,4795,4798],{},[142,4796,4797],{},"Enemy Variety",": Different enemy types with unique movement patterns",[162,4800,4801,4803],{},[142,4802,3927],{},": Engine exhaust, explosions, and environmental effects",[162,4805,4806,4809],{},[142,4807,4808],{},"Score System",": Points for destroying enemies and survival time",[162,4811,4812,4815],{},[142,4813,4814],{},"Visual Effects",": Fog, lighting, and post-processing for atmosphere",[147,4817,4819],{"id":4818},"audio-design","Audio Design",[159,4821,4822,4828,4834,4840],{},[162,4823,4824,4827],{},[142,4825,4826],{},"Spatial Audio",": 3D positioned sound effects that respond to player movement",[162,4829,4830,4833],{},[142,4831,4832],{},"Engine Sounds",": Dynamic engine audio that responds to ship movement",[162,4835,4836,4839],{},[142,4837,4838],{},"Weapon Audio",": Satisfying laser and explosion sound effects",[162,4841,4842,4845],{},[142,4843,4844],{},"Background Music",": Atmospheric space soundtrack enhancing immersion",[147,4847,1638],{"id":1637},[159,4849,4850,4856,4861,4867],{},[162,4851,4852,4855],{},[142,4853,4854],{},"Fog System",": Atmospheric fog creating depth and mood",[162,4857,4858,4860],{},[142,4859,2824],{},": Moving lights that respond to game events",[162,4862,4863,4866],{},[142,4864,4865],{},"High Performance",": Optimized rendering supporting smooth 60fps gameplay",[162,4868,4869,4872],{},[142,4870,4871],{},"Color Grading",": Custom tone mapping for cinematic space visuals",[138,4874,4875],{},"This experiment demonstrates the full potential of TresJS for game development, showing how Vue's reactivity and Three.js's 3D capabilities can combine to create engaging interactive experiences comparable to traditional game engines.",{"title":276,"searchDepth":277,"depth":277,"links":4877},[4878,4879,4880,4881,4882],{"id":149,"depth":280,"text":150},{"id":188,"depth":280,"text":189},{"id":4777,"depth":280,"text":4778},{"id":4818,"depth":280,"text":4819},{"id":1637,"depth":280,"text":1638},"2024-10-21","Port of 0xca0a's R3F game prototype",{},{"title":110,"description":4884},[4888,1028],"game","/experiments/space-game.png","lSC5dVYEKh_wvZWGUEnpPk6x-nf6qjlNvMH1MkRILpY",{"id":4892,"title":114,"author":295,"body":4893,"date":5057,"description":5058,"extension":285,"featured":129,"lastUpdated":5057,"meta":5059,"navigation":287,"path":115,"seo":5060,"stem":116,"tags":5061,"thumbnail":5065,"__hash__":5066},"experiments/experiments/spooky-saur.md",{"type":135,"value":4894,"toc":5051},[4895,4905,4907,4910,4946,4948,4951,4986,4988,5019,5023,5048],[138,4896,3278,4897,4900,4901,4904],{},[142,4898,4899],{},"spooky Halloween Ivysaur"," surrounded by atmospheric decorations and lighting effects. Created as an entry for ",[310,4902,4020],{"href":312,"rel":4903},[314]," Halloween challenge, this scene combines Pokémon aesthetics with Halloween atmosphere using advanced lighting and post-processing techniques.",[147,4906,150],{"id":149},[138,4908,4909],{},"A festive Halloween scene featuring:",[159,4911,4912,4918,4924,4929,4934,4940],{},[162,4913,4914,4917],{},[142,4915,4916],{},"Pumpkin Ivysaur",": Custom Halloween-themed Pokémon model with seasonal decorations",[162,4919,4920,4923],{},[142,4921,4922],{},"Halloween Props",": Jack-o'-lanterns, spooky decorations, and autumn elements",[162,4925,4926,4928],{},[142,4927,2812],{},": Dense fog effects creating mysterious Halloween ambiance",[162,4930,4931,4933],{},[142,4932,343],{},": Strategic lighting setup with colored lights for spooky mood",[162,4935,4936,4939],{},[142,4937,4938],{},"Unreal Bloom Effects",": Professional post-processing creating ethereal glow",[162,4941,4942,4945],{},[142,4943,4944],{},"Backdrop Integration",": Curved backdrop for seamless background presentation",[147,4947,189],{"id":188},[138,4949,4950],{},"This experiment demonstrates atmospheric 3D rendering:",[159,4952,4953,4958,4964,4970,4975,4981],{},[162,4954,4955,4957],{},[142,4956,215],{},": Custom Halloween Ivysaur model with detailed textures",[162,4959,4960,4963],{},[142,4961,4962],{},"Advanced Lighting",": Multiple colored lights creating dramatic Halloween atmosphere",[162,4965,4966,4969],{},[142,4967,4968],{},"Fog Systems",": Atmospheric fog effects adding depth and mystery",[162,4971,4972,4974],{},[142,4973,994],{},": Unreal bloom effects for magical glow",[162,4976,4977,4980],{},[142,4978,4979],{},"Backdrop Setup",": Professional backdrop system for studio-quality presentation",[162,4982,4983,4985],{},[142,4984,3815],{},": Beautiful effects optimized for smooth web performance",[147,4987,960],{"id":959},[159,4989,4990,4996,5001,5007,5013],{},[162,4991,4992,4995],{},[142,4993,4994],{},"Halloween Color Scheme",": Orange, purple, and black colors creating spooky atmosphere",[162,4997,4998,5000],{},[142,4999,2882],{},": Fog and lighting working together for immersive experience",[162,5002,5003,5006],{},[142,5004,5005],{},"Character Design",": Beloved Pokémon character adapted for Halloween theme",[162,5008,5009,5012],{},[142,5010,5011],{},"Professional Presentation",": Studio-style lighting and backdrop for clean presentation",[162,5014,5015,5018],{},[142,5016,5017],{},"Bloom Integration",": Glowing effects enhancing the magical Halloween mood",[147,5020,5022],{"id":5021},"scene-elements","Scene Elements",[159,5024,5025,5031,5037,5042],{},[162,5026,5027,5030],{},[142,5028,5029],{},"Main Character",": Halloween-decorated Ivysaur as the central focus",[162,5032,5033,5036],{},[142,5034,5035],{},"Decorative Props",": Pumpkins and Halloween decorations enhancing the theme",[162,5038,5039,5041],{},[142,5040,3945],{},": Colored lights creating dramatic shadows and highlights",[162,5043,5044,5047],{},[142,5045,5046],{},"Environmental Effects",": Fog and atmosphere creating depth and mystery",[138,5049,5050],{},"This experiment showcases how 3D web technology can create themed content perfect for seasonal campaigns, character showcases, or interactive holiday experiences.",{"title":276,"searchDepth":277,"depth":277,"links":5052},[5053,5054,5055,5056],{"id":149,"depth":280,"text":150},{"id":188,"depth":280,"text":189},{"id":959,"depth":280,"text":960},{"id":5021,"depth":280,"text":5022},"2023-10-17","Entry for the Bruno's Halloween challenge",{},{"title":114,"description":5058},[5062,3057,5063,5064,219],"lights","backdrop","unrealbloom","/experiments/spooky-saur.png","2HcaNzKwo_PjGg2KwdxotuTEDunlDdowitilyDYiY0E",{"id":5068,"title":118,"author":5069,"body":5070,"date":5235,"description":5236,"extension":285,"featured":129,"lastUpdated":5237,"meta":5238,"navigation":287,"path":119,"seo":5239,"stem":120,"tags":5240,"thumbnail":5242,"__hash__":5243},"experiments/experiments/synthwave-landscape.md",[490,295],{"type":135,"value":5071,"toc":5227},[5072,5076,5082,5084,5087,5125,5127,5130,5164,5166,5198,5200,5224],[1264,5073,5075],{"id":5074},"retro-80s-synthwave-aesthetic","Retro 80s Synthwave Aesthetic",[138,5077,300,5078,5081],{},[142,5079,5080],{},"synthwave aesthetic"," with a stunning retro landscape featuring neon grids, mountains, and a vibrant sun. Experience the nostalgic atmosphere of 1980s sci-fi and cyberpunk culture through modern 3D technology.",[147,5083,150],{"id":149},[138,5085,5086],{},"A mesmerizing retro-futuristic landscape featuring:",[159,5088,5089,5095,5101,5107,5113,5119],{},[162,5090,5091,5094],{},[142,5092,5093],{},"Infinite Grid Terrain",": Classic synthwave grid extending to the horizon",[162,5096,5097,5100],{},[142,5098,5099],{},"Neon Mountain Silhouettes",": Geometric mountain ranges with gradient lighting",[162,5102,5103,5106],{},[142,5104,5105],{},"Retro Sun",": Large geometric sun with classic synthwave color palette",[162,5108,5109,5112],{},[142,5110,5111],{},"Gradient Sky",": Multi-layered atmospheric gradients in magenta and cyan",[162,5114,5115,5118],{},[142,5116,5117],{},"Interactive Music Player",": Built-in audio controls for the complete synthwave experience",[162,5120,5121,5124],{},[142,5122,5123],{},"Animated Elements",": Smooth camera movement and atmospheric effects",[147,5126,189],{"id":188},[138,5128,5129],{},"This experiment showcases retro-modern rendering techniques:",[159,5131,5132,5137,5142,5147,5153,5159],{},[162,5133,5134,5136],{},[142,5135,2858],{},": Infinite landscape generation using mathematical algorithms",[162,5138,5139,5141],{},[142,5140,1067],{},": Hand-crafted GLSL shaders for authentic synthwave aesthetics",[162,5143,5144,5146],{},[142,5145,994],{},": Advanced effects enhancing the retro atmosphere",[162,5148,5149,5152],{},[142,5150,5151],{},"Wireframe Rendering",": Classic grid patterns using wireframe materials",[162,5154,5155,5158],{},[142,5156,5157],{},"Gradient Systems",": Multiple gradient layers creating atmospheric depth",[162,5160,5161,5163],{},[142,5162,4720],{},": Synchronized music player enhancing the immersive experience",[147,5165,1171],{"id":1170},[159,5167,5168,5174,5180,5186,5192],{},[162,5169,5170,5173],{},[142,5171,5172],{},"Authentic Color Palette",": Hot pink, electric blue, and neon purple gradients",[162,5175,5176,5179],{},[142,5177,5178],{},"Geometric Aesthetics",": Clean lines and geometric forms typical of 80s design",[162,5181,5182,5185],{},[142,5183,5184],{},"Infinite Perspective",": Vanishing point grid creating depth and scale",[162,5187,5188,5191],{},[142,5189,5190],{},"Retro Typography",": Period-appropriate fonts and UI design",[162,5193,5194,5197],{},[142,5195,5196],{},"Neon Glow Effects",": Emissive materials creating authentic neon lighting",[147,5199,239],{"id":238},[159,5201,5202,5208,5213,5219],{},[162,5203,5204,5207],{},[142,5205,5206],{},"Procedural Terrain",": Mathematically generated infinite landscape",[162,5209,5210,5212],{},[142,5211,246],{},": Smooth 60fps rendering with complex shaders",[162,5214,5215,5218],{},[142,5216,5217],{},"Immersive Audio",": Built-in synthwave soundtrack",[162,5220,5221,5223],{},[142,5222,1492],{},": Camera movement and scene exploration",[138,5225,5226],{},"This experiment perfectly captures the essence of synthwave culture, combining nostalgia with modern technology to create an immersive retro-futuristic experience that transports viewers to the neon-soaked landscapes of 1980s sci-fi imagination.",{"title":276,"searchDepth":277,"depth":277,"links":5228},[5229],{"id":5074,"depth":277,"text":5075,"children":5230},[5231,5232,5233,5234],{"id":149,"depth":280,"text":150},{"id":188,"depth":280,"text":189},{"id":1170,"depth":280,"text":1171},{"id":238,"depth":280,"text":239},"2024-08-29","Infinite procedural landscape","2025-06-25",{},{"title":118,"description":5236},[5241,1245,1028],"procedural","/experiments/synthwave-landscape.png","_1iEBeJuRifIPXd9mhlzQCSbxEaDHK7wdQwe6kx_UxY",{"id":5245,"title":122,"author":295,"body":5246,"date":5309,"description":5310,"extension":285,"featured":129,"lastUpdated":4151,"meta":5311,"navigation":287,"path":123,"seo":5312,"stem":124,"tags":5313,"thumbnail":5316,"__hash__":5317},"experiments/experiments/texture-particle-cursor.md",{"type":135,"value":5247,"toc":5303},[5248,5250,5253,5255,5269,5273,5287,5291],[1264,5249,4006],{"id":4005},[138,5251,5252],{},"This experiment demonstrates an interactive particle system that responds to cursor movement. Particles are displaced based on texture data, creating fluid and organic motion effects as you move your mouse across the canvas.",[1264,5254,4013],{"id":4012},[138,5256,5257,5258,5262,5263,5268],{},"This experiment is based on the excellent ",[310,5259,5261],{"href":312,"rel":5260},[314],"Three.js Journey"," course by ",[310,5264,5267],{"href":5265,"rel":5266},"https://bruno-simon.com/",[314],"Bruno Simon",". The course provides comprehensive lessons on WebGL, Three.js, and shader programming, including advanced particle systems and interactive effects.",[1264,5270,5272],{"id":5271},"features","Features",[159,5274,5275,5278,5281,5284],{},[162,5276,5277],{},"GPU-accelerated particle rendering for smooth performance",[162,5279,5280],{},"Texture-based particle displacement",[162,5282,5283],{},"Interactive cursor tracking",[162,5285,5286],{},"Real-time particle animation using custom shaders",[1264,5288,5290],{"id":5289},"credits","Credits",[159,5292,5293,5300],{},[162,5294,5295,5296,5299],{},"Concept and techniques from ",[310,5297,5261],{"href":312,"rel":5298},[314]," by Bruno Simon",[162,5301,5302],{},"Implementation adapted for TresJS and Vue 3",{"title":276,"searchDepth":277,"depth":277,"links":5304},[5305,5306,5307,5308],{"id":4005,"depth":277,"text":4006},{"id":4012,"depth":277,"text":4013},{"id":5271,"depth":277,"text":5272},{"id":5289,"depth":277,"text":5290},"2025-12-12","Interactive particle system that follows cursor movement, creating beautiful fluid-like effects using GPU-accelerated particles and texture-based displacement.",{},{"title":122,"description":5310},[829,5314,1245,5315],"cursor","interactive","/experiments/texture-particle-cursor.png","dewTvx7gocTvhG7wqK310cFizEJE-uNLT08Qvd_3vYQ",{"id":5319,"title":126,"author":295,"body":5320,"date":5330,"description":5331,"extension":285,"featured":129,"lastUpdated":5330,"meta":5332,"navigation":287,"path":127,"seo":5333,"stem":128,"tags":5334,"thumbnail":5338,"__hash__":5339},"experiments/experiments/webgpu.md",{"type":135,"value":5321,"toc":5328},[5322,5325],[839,5323,126],{"id":5324},"webgpu",[138,5326,5327],{},"A modern WebGPU experiment showcasing GPU compute capabilities with TresJS.",{"title":276,"searchDepth":277,"depth":277,"links":5329},[],"2025-8-12","WebGPU experiment showcasing modern GPU compute capabilities with TresJS",{},{"title":126,"description":5331},[5324,5335,5336,5337],"compute","graphics","gpu","/experiments/webgpu.png","PX412LqFic9vCykjgxEP9BYfR5-PF7vrKVN9u9zNPnY",{"id":5341,"title":5342,"avatar":5343,"body":5344,"description":276,"email":5348,"extension":285,"github":5349,"meta":5350,"name":5342,"navigation":287,"path":5351,"seo":5352,"slug":133,"stem":5353,"twitter":5354,"website":5355,"__hash__":5356},"authors/authors/jaime-torrealba.md","Jaime Torrealba","/avatars/jaime-torrealba.jpg",{"type":135,"value":5345,"toc":5346},[],{"title":276,"searchDepth":277,"depth":277,"links":5347},[],"solucionesinformaticasjtc@gmail.com","JaimeTorrealba",{},"/authors/jaime-torrealba",{"description":276},"authors/jaime-torrealba","jaimebboyjt","https://jaimetorrealba.com/","WhkdXnej1NkT__thyZfYEil3qYn8wi7qVoQSMzyfrs4",{"id":5358,"title":5359,"avatar":5360,"body":5361,"description":276,"email":5365,"extension":285,"github":295,"meta":5366,"name":5367,"navigation":287,"path":5368,"seo":5369,"slug":295,"stem":5370,"twitter":295,"website":5371,"__hash__":5372},"authors/authors/alvarosabu.md","Alvarosabu","/avatars/alvarosabu.jpg",{"type":135,"value":5362,"toc":5363},[],{"title":276,"searchDepth":277,"depth":277,"links":5364},[],"hola@alvarosaburido.dev",{},"Alvaro Saburido","/authors/alvarosabu",{"description":276},"authors/alvarosabu","https://alvarosaburido.dev","FWpr6-OcVRzMvvsjRaD8icRidgpKVLCtrKy9-l_5GZM",{"id":5374,"title":5375,"avatar":5376,"body":5377,"description":276,"email":673,"extension":285,"github":490,"meta":5381,"name":490,"navigation":287,"path":5382,"seo":5383,"slug":490,"stem":5384,"twitter":673,"website":673,"__hash__":5385},"authors/authors/andretchen0.md","Andretchen0","/avatars/andretchen0.jpg",{"type":135,"value":5378,"toc":5379},[],{"title":276,"searchDepth":277,"depth":277,"links":5380},[],{},"/authors/andretchen0",{"description":276},"authors/andretchen0","rztGS5YNlU7jYv1laE9f863gZy-WUFK5r3uuycyiMLY",{"id":5387,"title":5388,"avatar":5389,"body":5390,"description":276,"email":5394,"extension":285,"github":5395,"meta":5396,"name":1035,"navigation":287,"path":5397,"seo":5398,"slug":1035,"stem":5399,"twitter":5394,"website":5400,"__hash__":5401},"authors/authors/luckystriike.md","Luckystriike","/avatars/luckystriike.jpg",{"type":135,"value":5391,"toc":5392},[],{"title":276,"searchDepth":277,"depth":277,"links":5393},[],"none","luckystriike22",{},"/authors/luckystriike",{"description":276},"authors/luckystriike","https://github.com/luckystriike22","vmVaU8HAY_jbVnlvpUQiwh3uPcKxGGr6B5PF9xo17X8",{"id":5403,"title":5404,"avatar":5405,"body":5406,"description":276,"email":5410,"extension":285,"github":3478,"meta":5411,"name":5412,"navigation":287,"path":5413,"seo":5414,"slug":3478,"stem":5415,"twitter":5416,"website":673,"__hash__":5417},"authors/authors/damienmontastier.md","Damienmontastier","/avatars/damienmontastier.jpg",{"type":135,"value":5407,"toc":5408},[],{"title":276,"searchDepth":277,"depth":277,"links":5409},[],"montastier.damien@gmail.com",{},"Damien Montastier","/authors/damienmontastier",{"description":276},"authors/damienmontastier","dammontastier","FqtKh6r8pBEM29DE6GhT098-LIpM3BL7RXSxFjrcwwY",{"id":5419,"title":5420,"avatar":5421,"body":5422,"description":276,"email":5426,"extension":285,"github":3864,"meta":5427,"name":5428,"navigation":287,"path":5429,"seo":5430,"slug":3864,"stem":5431,"twitter":5432,"website":5433,"__hash__":5434},"authors/authors/neoprint3d.md","Neoprint3d","/avatars/neoprint3d.jpg",{"type":135,"value":5423,"toc":5424},[],{"title":276,"searchDepth":277,"depth":277,"links":5425},[],"drew@neoprint3d.dev",{},"Drew Ronsman","/authors/neoprint3d",{"description":276},"authors/neoprint3d","drew_ronsman","https://dronsman.com","w-8rauWEJDRmX_QOi4s2PI7n9EABybGURQ-R_ss9tzo",[5436,5441,5446,5450,5455,5460,5464,5468,5473,5478,5483,5489,5493,5499,5503,5508,5513,5518,5523,5528,5533,5538,5543,5548,5553,5558,5563,5568,5573,5578],{"id":488,"title":18,"author":489,"body":491,"date":649,"description":650,"extension":285,"featured":287,"lastUpdated":649,"meta":651,"navigation":287,"path":19,"seo":652,"stem":20,"tags":653,"thumbnail":654,"__hash__":655,"slug":5437,"authors":5438,"repoPath":5439,"repoTitle":5440},"brownian-distribution",[5373,5357],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/brownian-distribution","brownian-distribution – code on Github",{"id":4663,"title":110,"author":490,"body":4664,"date":4883,"description":4884,"extension":285,"featured":287,"lastUpdated":4883,"meta":4885,"navigation":287,"path":111,"seo":4886,"stem":112,"tags":4887,"thumbnail":4889,"__hash__":4890,"slug":5442,"authors":5443,"repoPath":5444,"repoTitle":5445},"space-game",[5373],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/space-game","space-game – code on Github",{"id":1033,"title":38,"author":1034,"body":1036,"date":1236,"description":1237,"extension":285,"featured":287,"lastUpdated":1236,"meta":1238,"navigation":287,"path":39,"seo":1241,"stem":40,"tags":1242,"thumbnail":1246,"__hash__":1247,"slug":1239,"authors":5447,"repoPath":5448,"repoTitle":5449},[5386,5357],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/dancing-blob","dancing-blob – code on Github",{"id":4171,"title":90,"author":295,"body":4172,"date":4176,"description":4177,"extension":285,"featured":129,"lastUpdated":4176,"meta":4178,"navigation":287,"path":91,"seo":4179,"stem":92,"tags":4180,"thumbnail":4182,"__hash__":4183,"slug":5451,"authors":5452,"repoPath":5453,"repoTitle":5454},"pixel-plasma-shader",[5357],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/pixel-plasma-shader","pixel-plasma-shader – code on Github",{"id":4158,"title":86,"author":295,"body":4159,"date":4163,"description":4164,"extension":285,"featured":129,"lastUpdated":4163,"meta":4165,"navigation":287,"path":87,"seo":4166,"stem":88,"tags":4167,"thumbnail":4168,"__hash__":4169,"slug":5456,"authors":5457,"repoPath":5458,"repoTitle":5459},"pixel-noise-shaders-sandbox",[5357],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/pixel-noise-shaders-sandbox","pixel-noise-shaders-sandbox – code on Github",{"id":4630,"title":106,"author":4631,"body":4632,"date":4655,"description":4656,"extension":285,"featured":129,"lastUpdated":4655,"meta":4657,"navigation":287,"path":107,"seo":4658,"stem":108,"tags":4659,"thumbnail":4660,"__hash__":4661,"slug":4636,"authors":5461,"repoPath":5462,"repoTitle":5463},[5373,5357],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/shadertoy-museum","shadertoy-museum – code on Github",{"id":3994,"title":82,"author":295,"body":3995,"date":4149,"description":4150,"extension":285,"featured":129,"lastUpdated":4151,"meta":4152,"navigation":287,"path":83,"seo":4153,"stem":84,"tags":4154,"thumbnail":4155,"__hash__":4156,"slug":3999,"authors":5465,"repoPath":5466,"repoTitle":5467},[5357],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/particles-morphing","particles-morphing – code on Github",{"id":5245,"title":122,"author":295,"body":5246,"date":5309,"description":5310,"extension":285,"featured":129,"lastUpdated":4151,"meta":5311,"navigation":287,"path":123,"seo":5312,"stem":124,"tags":5313,"thumbnail":5316,"__hash__":5317,"slug":5469,"authors":5470,"repoPath":5471,"repoTitle":5472},"texture-particle-cursor",[5357],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/texture-particle-cursor","texture-particle-cursor – code on Github",{"id":1249,"title":42,"author":295,"body":1250,"date":1289,"description":1290,"extension":285,"featured":129,"lastUpdated":1291,"meta":1292,"navigation":287,"path":43,"seo":1293,"stem":44,"tags":1294,"thumbnail":1296,"__hash__":1297,"slug":5474,"authors":5475,"repoPath":5476,"repoTitle":5477},"fireworks-shader",[5357],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/fireworks-shader","fireworks-shader – code on Github",{"id":676,"title":26,"author":295,"body":677,"date":823,"description":824,"extension":285,"featured":129,"lastUpdated":825,"meta":826,"navigation":287,"path":27,"seo":827,"stem":28,"tags":828,"thumbnail":832,"__hash__":833,"slug":5479,"authors":5480,"repoPath":5481,"repoTitle":5482},"coffee-smoke",[5357],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/coffee-smoke","coffee-smoke – code on Github",{"id":1708,"title":54,"author":295,"body":1709,"date":2761,"description":2762,"extension":285,"featured":129,"lastUpdated":2763,"meta":2764,"navigation":287,"path":55,"seo":2765,"stem":56,"tags":2766,"thumbnail":5484,"__hash__":2769,"slug":5485,"authors":5486,"repoPath":5487,"repoTitle":5488},"/grainy-liquid.png","grainy-liquid",[5357],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/grainy-liquid","grainy-liquid – code on Github",{"id":835,"title":30,"author":295,"body":836,"date":847,"description":848,"extension":285,"featured":129,"lastUpdated":847,"meta":849,"navigation":287,"path":31,"seo":850,"stem":32,"tags":851,"thumbnail":856,"__hash__":857,"slug":841,"authors":5490,"repoPath":5491,"repoTitle":5492},[5357],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/cube-boy-dancefloor","cube-boy-dancefloor – code on Github",{"id":657,"title":22,"author":295,"body":658,"date":665,"description":666,"extension":285,"featured":129,"lastUpdated":665,"meta":667,"navigation":287,"path":23,"seo":668,"stem":24,"tags":669,"thumbnail":5494,"__hash__":674,"slug":5495,"authors":5496,"repoPath":5497,"repoTitle":5498},"/car-showcase.png","car-showcase",[5357],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/car-showcase","car-showcase – code on Github",{"id":5319,"title":126,"author":295,"body":5320,"date":5330,"description":5331,"extension":285,"featured":129,"lastUpdated":5330,"meta":5332,"navigation":287,"path":127,"seo":5333,"stem":128,"tags":5334,"thumbnail":5338,"__hash__":5339,"slug":5324,"authors":5500,"repoPath":5501,"repoTitle":5502},[5357],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/webgpu","webgpu – code on Github",{"id":4329,"title":98,"author":295,"body":4330,"date":4492,"description":4493,"extension":285,"featured":129,"lastUpdated":4494,"meta":4495,"navigation":287,"path":99,"seo":4496,"stem":100,"tags":4497,"thumbnail":4501,"__hash__":4502,"slug":5504,"authors":5505,"repoPath":5506,"repoTitle":5507},"potions-classroom",[5357],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/potions-classroom","potions-classroom – code on Github",{"id":3477,"title":70,"author":3478,"body":3479,"date":3691,"description":3692,"extension":285,"featured":129,"lastUpdated":3693,"meta":3694,"navigation":287,"path":71,"seo":3695,"stem":72,"tags":3696,"thumbnail":3701,"__hash__":3702,"slug":5509,"authors":5510,"repoPath":5511,"repoTitle":5512},"magical-marbles",[5402],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/magical-marbles","magical-marbles – code on Github",{"id":4185,"title":94,"author":295,"body":4186,"date":3469,"description":4321,"extension":285,"featured":129,"lastUpdated":4322,"meta":4323,"navigation":287,"path":95,"seo":4324,"stem":96,"tags":4325,"thumbnail":4326,"__hash__":4327,"slug":5514,"authors":5515,"repoPath":5516,"repoTitle":5517},"portal-journey",[5357],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/portal-journey","portal-journey – code on Github",{"id":5068,"title":118,"author":5069,"body":5070,"date":5235,"description":5236,"extension":285,"featured":129,"lastUpdated":5237,"meta":5238,"navigation":287,"path":119,"seo":5239,"stem":120,"tags":5240,"thumbnail":5242,"__hash__":5243,"slug":5519,"authors":5520,"repoPath":5521,"repoTitle":5522},"synthwave-landscape",[5373,5357],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/synthwave-landscape","synthwave-landscape – code on Github",{"id":4504,"title":102,"author":3478,"body":4505,"date":3691,"description":102,"extension":285,"featured":129,"lastUpdated":3691,"meta":4621,"navigation":287,"path":103,"seo":4622,"stem":104,"tags":4623,"thumbnail":4627,"__hash__":4628,"slug":5524,"authors":5525,"repoPath":5526,"repoTitle":5527},"repulsion-effect",[5402],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/repulsion-effect","repulsion-effect – code on Github",{"id":859,"title":34,"author":295,"body":860,"date":1023,"description":1024,"extension":285,"featured":129,"lastUpdated":1023,"meta":1025,"navigation":287,"path":35,"seo":1026,"stem":36,"tags":1027,"thumbnail":1030,"__hash__":1031,"slug":5529,"authors":5530,"repoPath":5531,"repoTitle":5532},"cult-of-the-lamb",[5357],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/cult-of-the-lamb","cult-of-the-lamb – code on Github",{"id":3063,"title":62,"author":295,"body":3064,"date":3263,"description":3264,"extension":285,"featured":129,"lastUpdated":3263,"meta":3265,"navigation":287,"path":63,"seo":3266,"stem":64,"tags":3267,"thumbnail":3270,"__hash__":3271,"slug":5534,"authors":5535,"repoPath":5536,"repoTitle":5537},"html-phone",[5357],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/html-phone","html-phone – code on Github",{"id":3863,"title":78,"author":3864,"body":3865,"date":3985,"description":3986,"extension":285,"featured":129,"lastUpdated":3985,"meta":3987,"navigation":287,"path":79,"seo":3988,"stem":80,"tags":3989,"thumbnail":3991,"__hash__":3992,"slug":5539,"authors":5540,"repoPath":5541,"repoTitle":5542},"particle-pumpkin",[5418],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/particle-pumpkin","particle-pumpkin – code on Github",{"id":4892,"title":114,"author":295,"body":4893,"date":5057,"description":5058,"extension":285,"featured":129,"lastUpdated":5057,"meta":5059,"navigation":287,"path":115,"seo":5060,"stem":116,"tags":5061,"thumbnail":5065,"__hash__":5066,"slug":5544,"authors":5545,"repoPath":5546,"repoTitle":5547},"spooky-saur",[5357],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/spooky-saur","spooky-saur – code on Github",{"id":3704,"title":74,"author":295,"body":3705,"date":3853,"description":3854,"extension":285,"featured":129,"lastUpdated":3853,"meta":3855,"navigation":287,"path":75,"seo":3856,"stem":76,"tags":3857,"thumbnail":3860,"__hash__":3861,"slug":5549,"authors":5550,"repoPath":5551,"repoTitle":5552},"nuxt-stones",[5357],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/nuxt-stones","nuxt-stones – code on Github",{"id":294,"title":14,"author":295,"body":296,"date":479,"description":480,"extension":285,"featured":129,"lastUpdated":479,"meta":481,"navigation":287,"path":15,"seo":482,"stem":16,"tags":483,"thumbnail":485,"__hash__":486,"slug":5554,"authors":5555,"repoPath":5556,"repoTitle":5557},"brickelangelo-david",[5357],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/brickelangelo-david","brickelangelo-david – code on Github",{"id":1299,"title":46,"author":295,"body":1300,"date":1504,"description":1505,"extension":285,"featured":129,"lastUpdated":1504,"meta":1506,"navigation":287,"path":47,"seo":1507,"stem":48,"tags":1508,"thumbnail":1509,"__hash__":1510,"slug":5559,"authors":5560,"repoPath":5561,"repoTitle":5562},"galaxy-generator",[5357],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/galaxy-generator","galaxy-generator – code on Github",{"id":132,"title":10,"author":133,"body":134,"date":283,"description":284,"extension":285,"featured":129,"lastUpdated":283,"meta":286,"navigation":287,"path":11,"seo":288,"stem":12,"tags":289,"thumbnail":291,"__hash__":292,"slug":5564,"authors":5565,"repoPath":5566,"repoTitle":5567},"array-cameras",[5340],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/array-cameras","array-cameras – code on Github",{"id":1512,"title":50,"author":133,"body":1513,"date":1699,"description":1700,"extension":285,"featured":129,"lastUpdated":1699,"meta":1701,"navigation":287,"path":51,"seo":1702,"stem":52,"tags":1703,"thumbnail":1705,"__hash__":1706,"slug":5569,"authors":5570,"repoPath":5571,"repoTitle":5572},"glass-material",[5340],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/glass-material","glass-material – code on Github",{"id":2771,"title":58,"author":133,"body":2772,"date":1699,"description":3052,"extension":285,"featured":129,"lastUpdated":1699,"meta":3053,"navigation":287,"path":59,"seo":3054,"stem":60,"tags":3055,"thumbnail":3060,"__hash__":3061,"slug":5574,"authors":5575,"repoPath":5576,"repoTitle":5577},"haunted-house",[5340],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/haunted-house","haunted-house – code on Github",{"id":3273,"title":66,"author":295,"body":3274,"date":3469,"description":3470,"extension":285,"featured":129,"lastUpdated":3469,"meta":3471,"navigation":287,"path":67,"seo":3472,"stem":68,"tags":3473,"thumbnail":3474,"__hash__":3475,"slug":5579,"authors":5580,"repoPath":5581,"repoTitle":5582},"lowpoly-planet",[5357],"https://github.com/Tresjs/tres/tree/main/apps/lab/app/components/lowpoly-planet","lowpoly-planet – code on Github",1774953669857]