[{"data":1,"prerenderedAt":460},["ShallowReactive",2],{"navigation":3,"/experiments/brickelangelo-david":130,"authors":342},[4],{"title":5,"path":6,"stem":7,"children":8,"page":129},"Experiments","/experiments","experiments",[9,13,17,21,25,29,33,37,41,45,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,125],{"title":10,"path":11,"stem":12},"Array of cameras","/experiments/array-cameras","experiments/array-cameras",{"title":14,"path":15,"stem":16},"Brickelangelo David","/experiments/brickelangelo-david","experiments/brickelangelo-david",{"title":18,"path":19,"stem":20},"Basic Brownian distribution","/experiments/brownian-distribution","experiments/brownian-distribution",{"title":22,"path":23,"stem":24},"Porsche 911 Car Showcase","/experiments/car-showcase","experiments/car-showcase",{"title":26,"path":27,"stem":28},"Coffee Smoke","/experiments/coffee-smoke","experiments/coffee-smoke",{"title":30,"path":31,"stem":32},"Cube Boy Dancefloor","/experiments/cube-boy-dancefloor","experiments/cube-boy-dancefloor",{"title":34,"path":35,"stem":36},"Cult of the lamb 🐑","/experiments/cult-of-the-lamb","experiments/cult-of-the-lamb",{"title":38,"path":39,"stem":40},"Dancing blob","/experiments/dancing-blob","experiments/dancing-blob",{"title":42,"path":43,"stem":44},"Fireworks Shader","/experiments/fireworks-shader","experiments/fireworks-shader",{"title":46,"path":47,"stem":48},"Galaxy Generator 🪐","/experiments/galaxy-generator","experiments/galaxy-generator",{"title":50,"path":51,"stem":52},"Glass/Plastic Material","/experiments/glass-material","experiments/glass-material",{"title":54,"path":55,"stem":56},"Grainy Liquid Blobs","/experiments/grainy-liquid","experiments/grainy-liquid",{"title":58,"path":59,"stem":60},"Haunted House","/experiments/haunted-house","experiments/haunted-house",{"title":62,"path":63,"stem":64},"Phone with HTML inside","/experiments/html-phone","experiments/html-phone",{"title":66,"path":67,"stem":68},"Low Poly Planet","/experiments/lowpoly-planet","experiments/lowpoly-planet",{"title":70,"path":71,"stem":72},"Magical Marbles","/experiments/magical-marbles","experiments/magical-marbles",{"title":74,"path":75,"stem":76},"Nuxt Stones","/experiments/nuxt-stones","experiments/nuxt-stones",{"title":78,"path":79,"stem":80},"Particle Pumpkin Shader","/experiments/particle-pumpkin","experiments/particle-pumpkin",{"title":82,"path":83,"stem":84},"Particles Morphing","/experiments/particles-morphing","experiments/particles-morphing",{"title":86,"path":87,"stem":88},"Pixel Noise Shaders Sandbox","/experiments/pixel-noise-shaders-sandbox","experiments/pixel-noise-shaders-sandbox",{"title":90,"path":91,"stem":92},"Pixel Plasma Shader","/experiments/pixel-plasma-shader","experiments/pixel-plasma-shader",{"title":94,"path":95,"stem":96},"Portal Journey","/experiments/portal-journey","experiments/portal-journey",{"title":98,"path":99,"stem":100},"Wizard's Potion Classroom","/experiments/potions-classroom","experiments/potions-classroom",{"title":102,"path":103,"stem":104},"Repulsion Effect","/experiments/repulsion-effect","experiments/repulsion-effect",{"title":106,"path":107,"stem":108},"Shadertoy Museum","/experiments/shadertoy-museum","experiments/shadertoy-museum",{"title":110,"path":111,"stem":112},"Space Game","/experiments/space-game","experiments/space-game",{"title":114,"path":115,"stem":116},"Halloween Spooky-saur 🎃","/experiments/spooky-saur","experiments/spooky-saur",{"title":118,"path":119,"stem":120},"Synthwave Landscape","/experiments/synthwave-landscape","experiments/synthwave-landscape",{"title":122,"path":123,"stem":124},"Texture Particle Cursor","/experiments/texture-particle-cursor","experiments/texture-particle-cursor",{"title":126,"path":127,"stem":128},"WebGPU","/experiments/webgpu","experiments/webgpu",false,{"id":131,"title":14,"author":132,"body":133,"date":332,"description":333,"extension":334,"featured":129,"lastUpdated":332,"meta":335,"navigation":336,"path":15,"seo":337,"stem":16,"tags":338,"thumbnail":340,"__hash__":341},"experiments/experiments/brickelangelo-david.md","alvarosabu",{"type":134,"value":135,"toc":323},"minimark",[136,157,162,169,203,207,210,260,264,290,294,320],[137,138,139,140,144,145,148,149,156],"p",{},"This experiment recreates the iconic ",[141,142,143],"strong",{},"David sculpture by Michelangelo"," using ",[141,146,147],{},"75,000 LEGO brick instances",", demonstrating advanced surface sampling techniques and instanced rendering capabilities. Based on challenges from ",[150,151,155],"a",{"href":152,"rel":153},"https://threejs-journey.com/",[154],"nofollow","Bruno Simon's Three.js Journey course",", this artistic tribute combines classical art with modern procedural generation.",[158,159,161],"h3",{"id":160},"what-youll-see","What You'll See",[137,163,164,165,168],{},"The scene features a ",[141,166,167],{},"magnificent LEGO brick reconstruction"," of David's sculpture:",[170,171,172,179,185,191,197],"ul",{},[173,174,175,178],"li",{},[141,176,177],{},"75,000 Individual Bricks",": Each positioned using surface sampling algorithms",[173,180,181,184],{},[141,182,183],{},"Mouse-Controlled Rotation",": Interactive rotation following cursor movement",[173,186,187,190],{},[141,188,189],{},"Dramatic Lighting",": Spotlight that follows mouse cursor for dynamic illumination",[173,192,193,196],{},[141,194,195],{},"Cinematic Camera Movement",": Smooth GSAP-powered camera animation revealing the sculpture",[173,198,199,202],{},[141,200,201],{},"Loading Experience",": Custom progress indicator with elegant typography",[158,204,206],{"id":205},"technical-implementation","Technical Implementation",[137,208,209],{},"This experiment showcases several advanced 3D techniques:",[170,211,212,218,229,235,245,251],{},[173,213,214,217],{},[141,215,216],{},"MeshSurfaceSampler",": Distributes brick instances across the David model's surface using UV weighting",[173,219,220,223,224,228],{},[141,221,222],{},"Instanced Rendering",": Efficiently renders 75,000 bricks using ",[225,226,227],"code",{},"InstancedMesh"," for optimal performance",[173,230,231,234],{},[141,232,233],{},"Grid Alignment",": Bricks snap to a 3D grid system for authentic LEGO brick placement",[173,236,237,240,241,244],{},[141,238,239],{},"Interactive Lighting",": Spotlight dynamically follows mouse position using ",[225,242,243],{},"useMouse"," composable",[173,246,247,250],{},[141,248,249],{},"GSAP Animation",": Smooth camera movements with easing for cinematic reveal",[173,252,253,256,257],{},[141,254,255],{},"Progress Loading",": Real-time loading feedback using ",[225,258,259],{},"useProgress",[158,261,263],{"id":262},"artistic-features","Artistic Features",[170,265,266,272,278,284],{},[173,267,268,271],{},[141,269,270],{},"Custom Typography",": Elegant serif font styling reminiscent of classical art presentations",[173,273,274,277],{},[141,275,276],{},"Hidden Cursor",": Custom cursor design for immersive experience",[173,279,280,283],{},[141,281,282],{},"Black Background",": Dramatic contrast highlighting the sculpture",[173,285,286,289],{},[141,287,288],{},"Surface Alignment",": Bricks follow the natural curves and details of the original sculpture",[158,291,293],{"id":292},"key-technologies","Key Technologies",[170,295,296,302,308,314],{},[173,297,298,301],{},[141,299,300],{},"Surface Sampling",": Mathematically accurate distribution respecting model geometry",[173,303,304,307],{},[141,305,306],{},"Performance Optimization",": Single draw call for thousands of objects",[173,309,310,313],{},[141,311,312],{},"Interactive Experience",": Real-time lighting and rotation based on user input",[173,315,316,319],{},[141,317,318],{},"Classical Aesthetics",": Typography and presentation honoring the original masterpiece",[137,321,322],{},"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":324,"searchDepth":325,"depth":325,"links":326},"",2,[327,329,330,331],{"id":160,"depth":328,"text":161},3,{"id":205,"depth":328,"text":206},{"id":262,"depth":328,"text":263},{"id":292,"depth":328,"text":293},"2023-08-21","Bricks ThreeJS Journey challenge","md",{},true,{"title":14,"description":333},[339,216],"cientos","/experiments/brickelangelo-david.png","3YNud7sO1Llhak_Ct6O9YWvNyAS700_K1JbnIKlgzCw",[343,359,374,391,407,425,442],{"id":344,"title":345,"avatar":346,"body":347,"description":324,"email":351,"extension":334,"github":132,"meta":352,"name":353,"navigation":336,"path":354,"seo":355,"slug":132,"stem":356,"twitter":132,"website":357,"__hash__":358},"authors/authors/alvarosabu.md","Alvarosabu","/avatars/alvarosabu.jpg",{"type":134,"value":348,"toc":349},[],{"title":324,"searchDepth":325,"depth":325,"links":350},[],"hola@alvarosaburido.dev",{},"Alvaro Saburido","/authors/alvarosabu",{"description":324},"authors/alvarosabu","https://alvarosaburido.dev","FWpr6-OcVRzMvvsjRaD8icRidgpKVLCtrKy9-l_5GZM",{"id":360,"title":361,"avatar":362,"body":363,"description":324,"email":367,"extension":334,"github":368,"meta":369,"name":368,"navigation":336,"path":370,"seo":371,"slug":368,"stem":372,"twitter":367,"website":367,"__hash__":373},"authors/authors/andretchen0.md","Andretchen0","/avatars/andretchen0.jpg",{"type":134,"value":364,"toc":365},[],{"title":324,"searchDepth":325,"depth":325,"links":366},[],null,"andretchen0",{},"/authors/andretchen0",{"description":324},"authors/andretchen0","rztGS5YNlU7jYv1laE9f863gZy-WUFK5r3uuycyiMLY",{"id":375,"title":376,"avatar":377,"body":378,"description":324,"email":382,"extension":334,"github":383,"meta":384,"name":385,"navigation":336,"path":386,"seo":387,"slug":383,"stem":388,"twitter":389,"website":367,"__hash__":390},"authors/authors/damienmontastier.md","Damienmontastier","/avatars/damienmontastier.jpg",{"type":134,"value":379,"toc":380},[],{"title":324,"searchDepth":325,"depth":325,"links":381},[],"montastier.damien@gmail.com","damienmontastier",{},"Damien Montastier","/authors/damienmontastier",{"description":324},"authors/damienmontastier","dammontastier","FqtKh6r8pBEM29DE6GhT098-LIpM3BL7RXSxFjrcwwY",{"id":392,"title":393,"avatar":394,"body":395,"description":324,"email":367,"extension":334,"github":399,"meta":400,"name":401,"navigation":336,"path":402,"seo":403,"slug":399,"stem":404,"twitter":405,"website":367,"__hash__":406},"authors/authors/franciscohermida.md","Franciscohermida","/avatars/franciscohermida.jpg",{"type":134,"value":396,"toc":397},[],{"title":324,"searchDepth":325,"depth":325,"links":398},[],"franciscohermida",{},"Francisco Hermida","/authors/franciscohermida",{"description":324},"authors/franciscohermida","chicohermida","2dGmaA2uS0w2CaErMR8BexRzx0pCgoEowV5tZcITkus",{"id":408,"title":409,"avatar":410,"body":411,"description":324,"email":415,"extension":334,"github":416,"meta":417,"name":409,"navigation":336,"path":418,"seo":419,"slug":420,"stem":421,"twitter":422,"website":423,"__hash__":424},"authors/authors/jaime-torrealba.md","Jaime Torrealba","/avatars/jaime-torrealba.jpg",{"type":134,"value":412,"toc":413},[],{"title":324,"searchDepth":325,"depth":325,"links":414},[],"solucionesinformaticasjtc@gmail.com","JaimeTorrealba",{},"/authors/jaime-torrealba",{"description":324},"jaime-bboyjt","authors/jaime-torrealba","jaimebboyjt","https://jaimetorrealba.com/","WhkdXnej1NkT__thyZfYEil3qYn8wi7qVoQSMzyfrs4",{"id":426,"title":427,"avatar":428,"body":429,"description":324,"email":433,"extension":334,"github":434,"meta":435,"name":436,"navigation":336,"path":437,"seo":438,"slug":436,"stem":439,"twitter":433,"website":440,"__hash__":441},"authors/authors/luckystriike.md","Luckystriike","/avatars/luckystriike.jpg",{"type":134,"value":430,"toc":431},[],{"title":324,"searchDepth":325,"depth":325,"links":432},[],"none","luckystriike22",{},"luckystriike","/authors/luckystriike",{"description":324},"authors/luckystriike","https://github.com/luckystriike22","vmVaU8HAY_jbVnlvpUQiwh3uPcKxGGr6B5PF9xo17X8",{"id":443,"title":444,"avatar":445,"body":446,"description":324,"email":450,"extension":334,"github":451,"meta":452,"name":453,"navigation":336,"path":454,"seo":455,"slug":451,"stem":456,"twitter":457,"website":458,"__hash__":459},"authors/authors/neoprint3d.md","Neoprint3d","/avatars/neoprint3d.jpg",{"type":134,"value":447,"toc":448},[],{"title":324,"searchDepth":325,"depth":325,"links":449},[],"drew@neoprint3d.dev","neoprint3d",{},"Drew Ronsman","/authors/neoprint3d",{"description":324},"authors/neoprint3d","drew_ronsman","https://dronsman.com","w-8rauWEJDRmX_QOi4s2PI7n9EABybGURQ-R_ss9tzo",1774953670700]