[{"data":1,"prerenderedAt":468},["ShallowReactive",2],{"navigation":3,"/experiments/portals-rpg-difficulty":158,"authors":334},[4],{"title":5,"path":6,"stem":7,"children":8,"page":157},"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,129,133,137,141,145,149,153],{"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},"Gelatinous Cube","/experiments/gelatinous-cube","experiments/gelatinous-cube",{"title":54,"path":55,"stem":56},"Glass/Plastic Material","/experiments/glass-material","experiments/glass-material",{"title":58,"path":59,"stem":60},"Glyph Cut Out","/experiments/glyph-cut-out","experiments/glyph-cut-out",{"title":62,"path":63,"stem":64},"Grainy Liquid Blobs","/experiments/grainy-liquid","experiments/grainy-liquid",{"title":66,"path":67,"stem":68},"Haunted House","/experiments/haunted-house","experiments/haunted-house",{"title":70,"path":71,"stem":72},"Phone with HTML inside","/experiments/html-phone","experiments/html-phone",{"title":74,"path":75,"stem":76},"Low Poly Planet","/experiments/lowpoly-planet","experiments/lowpoly-planet",{"title":78,"path":79,"stem":80},"Magical Marbles","/experiments/magical-marbles","experiments/magical-marbles",{"title":82,"path":83,"stem":84},"Nuxt Stones","/experiments/nuxt-stones","experiments/nuxt-stones",{"title":86,"path":87,"stem":88},"Particle Pumpkin Shader","/experiments/particle-pumpkin","experiments/particle-pumpkin",{"title":90,"path":91,"stem":92},"Particles Morphing","/experiments/particles-morphing","experiments/particles-morphing",{"title":94,"path":95,"stem":96},"Plexus Particles","/experiments/plexus-particles","experiments/plexus-particles",{"title":98,"path":99,"stem":100},"Portal Journey","/experiments/portal-journey","experiments/portal-journey",{"title":102,"path":103,"stem":104},"Portals RPG Difficulty","/experiments/portals-rpg-difficulty","experiments/portals-rpg-difficulty",{"title":106,"path":107,"stem":108},"Wizard's Potion Classroom","/experiments/potions-classroom","experiments/potions-classroom",{"title":110,"path":111,"stem":112},"Rapier Basketball","/experiments/rapier-basketball","experiments/rapier-basketball",{"title":114,"path":115,"stem":116},"Rapier Vehicle","/experiments/rapier-car","experiments/rapier-car",{"title":118,"path":119,"stem":120},"Rapier Object Clump","/experiments/rapier-object-clump","experiments/rapier-object-clump",{"title":122,"path":123,"stem":124},"Rapier Wrecking Ball","/experiments/rapier-wrecking-ball","experiments/rapier-wrecking-ball",{"title":126,"path":127,"stem":128},"Repulsion Effect","/experiments/repulsion-effect","experiments/repulsion-effect",{"title":130,"path":131,"stem":132},"Shadertoy Museum","/experiments/shadertoy-museum","experiments/shadertoy-museum",{"title":134,"path":135,"stem":136},"Space Game","/experiments/space-game","experiments/space-game",{"title":138,"path":139,"stem":140},"Halloween Spooky-saur 🎃","/experiments/spooky-saur","experiments/spooky-saur",{"title":142,"path":143,"stem":144},"Synthwave Landscape","/experiments/synthwave-landscape","experiments/synthwave-landscape",{"title":146,"path":147,"stem":148},"Texture Particle Cursor","/experiments/texture-particle-cursor","experiments/texture-particle-cursor",{"title":150,"path":151,"stem":152},"Vue Fes Japan 2025","/experiments/vuefes-japan-2025","experiments/vuefes-japan-2025",{"title":154,"path":155,"stem":156},"WebGPU","/experiments/webgpu","experiments/webgpu",false,{"id":159,"title":102,"author":160,"body":161,"date":322,"description":323,"extension":324,"featured":157,"lastUpdated":325,"meta":326,"navigation":327,"path":103,"responsive":157,"seo":328,"stem":104,"tags":329,"thumbnail":332,"__hash__":333},"experiments/experiments/portals-rpg-difficulty.md","alvarosabu",{"type":162,"value":163,"toc":315},"minimark",[164,178,195,210,217,222,260,264],[165,166,167,168,172,173,177],"p",{},"This experiment is a demo of the latest ",[169,170,171],"strong",{},"portals"," features in TresJS. It is a difficulty selector for an RPG: three framed cards float in a medieval sky, and each frame is a ",[174,175,176],"code",{},"MeshPortalMaterial"," that renders its own scene.",[165,179,180,181,188,189,194],{},"It is inspired by ",[182,183,187],"a",{"href":184,"rel":185},"https://www.youtube.com/watch?v=2W_VR92Pqgs",[186],"nofollow","this portals video from Wawa Sensei"," and ",[182,190,193],{"href":191,"rel":192},"https://codesandbox.io/p/sandbox/9m4tpc",[186],"this React Three Fiber CodeSandbox demo",", rebuilt with TresJS and cientos.",[165,196,197,198,203,204,209],{},"The theme comes from the ",[182,199,202],{"href":200,"rel":201},"https://www.thegamer.com/baldurs-gate-3-best-difficulty/",[186],"difficulty screen in Baldur's Gate 3",", where each mode is a painted portrait. This experiment recreates the spirit of those paintings as live 3D scenes, using ",[182,205,208],{"href":206,"rel":207},"https://kaylousberg.itch.io/",[186],"KayKit"," characters by Kay Lousberg, plus a few custom characters made by me.",[165,211,212],{},[213,214],"img",{"alt":215,"src":216},"Baldur's Gate 3 Explorer difficulty portrait","/explorer.webp",[218,219,221],"h3",{"id":220},"what-youll-see","What You'll See",[223,224,225,232,238,244,254],"ul",{},[226,227,228,231],"li",{},[169,229,230],{},"Explorer",": a narrative campfire scene with the party at rest",[226,233,234,237],{},[169,235,236],{},"Balanced",": a dungeon full of skeletons, mist and volumetric fog",[226,239,240,243],{},[169,241,242],{},"Tactician",": a demonic realm with lava, energy beams and a demon lord",[226,245,246,249,250,253],{},[169,247,248],{},"Framed cards",": an ",[174,251,252],{},"Html"," card sits on each frame with a label and a short pitch",[226,255,256,259],{},[169,257,258],{},"Pop-in animation",": the frames scale up with an elastic ease once the loading screen fades",[218,261,263],{"id":262},"technical-implementation","Technical Implementation",[223,265,266,271,277,283,293,299,309],{},[226,267,268,270],{},[169,269,176],{},": each card is a plane whose material renders a separate scene into a portal",[226,272,273,276],{},[169,274,275],{},"Per-portal scenes",": every difficulty is a plain Vue component, so its meshes, lights, fog and animations live inside that portal only",[226,278,279,282],{},[169,280,281],{},"useGLTF + useAnimations",": shared models with posed rigs, one mixer per rig",[226,284,285,288,289,292],{},[169,286,287],{},"Html from cientos",": the card overlay uses ",[174,290,291],{},"transform"," mode with a distance factor that maps one world unit to 100 CSS px, so the card lands exactly on the 2 x 3 plane",[226,294,295,298],{},[169,296,297],{},"Equirectangular sky",": a rotated panorama used as both background and environment of the main scene",[226,300,301,304,305,308],{},[169,302,303],{},"Post-processing",": bloom from ",[174,306,307],{},"@tresjs/post-processing"," on top of the composed portals",[226,310,311,314],{},[169,312,313],{},"GSAP timeline",": staggered elastic pop for the three frames",{"title":316,"searchDepth":317,"depth":317,"links":318},"",2,[319,321],{"id":220,"depth":320,"text":221},3,{"id":262,"depth":320,"text":263},"2026-09-07","An RPG difficulty selector where each choice is a portal into its own world","md","2026-09-22",{},true,{"title":102,"description":323},[171,330,331],"meshPortalMaterial","rpg","/experiments/portals-rpg-difficulty.webp","0lsp4J8TV8t7CBQ0duE3XGL50ygcRrWenSeWiTEjAME",[335,350,365,382,398,416,433,451],{"id":336,"title":337,"avatar":338,"body":339,"description":316,"email":343,"extension":324,"github":160,"meta":344,"name":160,"navigation":327,"path":345,"seo":346,"slug":160,"stem":347,"twitter":160,"website":348,"__hash__":349},"authors/authors/alvarosabu.md","Alvarosabu","/avatars/alvarosabu.jpeg",{"type":162,"value":340,"toc":341},[],{"title":316,"searchDepth":317,"depth":317,"links":342},[],"hola@alvarosaburido.dev",{},"/authors/alvarosabu",{"description":316},"authors/alvarosabu","https://alvarosabu.dev","kfjqjiPxKR64avAeoJeNF40fMr5laisoEnPnfgFGN_U",{"id":351,"title":352,"avatar":353,"body":354,"description":316,"email":358,"extension":324,"github":359,"meta":360,"name":359,"navigation":327,"path":361,"seo":362,"slug":359,"stem":363,"twitter":358,"website":358,"__hash__":364},"authors/authors/andretchen0.md","Andretchen0","/avatars/andretchen0.jpg",{"type":162,"value":355,"toc":356},[],{"title":316,"searchDepth":317,"depth":317,"links":357},[],null,"andretchen0",{},"/authors/andretchen0",{"description":316},"authors/andretchen0","rztGS5YNlU7jYv1laE9f863gZy-WUFK5r3uuycyiMLY",{"id":366,"title":367,"avatar":368,"body":369,"description":316,"email":373,"extension":324,"github":374,"meta":375,"name":376,"navigation":327,"path":377,"seo":378,"slug":374,"stem":379,"twitter":380,"website":358,"__hash__":381},"authors/authors/damienmontastier.md","Damienmontastier","/avatars/damienmontastier.jpg",{"type":162,"value":370,"toc":371},[],{"title":316,"searchDepth":317,"depth":317,"links":372},[],"montastier.damien@gmail.com","damienmontastier",{},"Damien Montastier","/authors/damienmontastier",{"description":316},"authors/damienmontastier","dammontastier","FqtKh6r8pBEM29DE6GhT098-LIpM3BL7RXSxFjrcwwY",{"id":383,"title":384,"avatar":385,"body":386,"description":316,"email":358,"extension":324,"github":390,"meta":391,"name":392,"navigation":327,"path":393,"seo":394,"slug":390,"stem":395,"twitter":396,"website":358,"__hash__":397},"authors/authors/franciscohermida.md","Franciscohermida","/avatars/franciscohermida.jpg",{"type":162,"value":387,"toc":388},[],{"title":316,"searchDepth":317,"depth":317,"links":389},[],"franciscohermida",{},"Francisco Hermida","/authors/franciscohermida",{"description":316},"authors/franciscohermida","chicohermida","2dGmaA2uS0w2CaErMR8BexRzx0pCgoEowV5tZcITkus",{"id":399,"title":400,"avatar":401,"body":402,"description":316,"email":406,"extension":324,"github":407,"meta":408,"name":400,"navigation":327,"path":409,"seo":410,"slug":411,"stem":412,"twitter":413,"website":414,"__hash__":415},"authors/authors/jaime-torrealba.md","Jaime Torrealba","/avatars/jaime-torrealba.jpg",{"type":162,"value":403,"toc":404},[],{"title":316,"searchDepth":317,"depth":317,"links":405},[],"solucionesinformaticasjtc@gmail.com","JaimeTorrealba",{},"/authors/jaime-torrealba",{"description":316},"jaime-bboyjt","authors/jaime-torrealba","jaimebboyjt","https://jaimetorrealba.com/","WhkdXnej1NkT__thyZfYEil3qYn8wi7qVoQSMzyfrs4",{"id":417,"title":418,"avatar":419,"body":420,"description":316,"email":424,"extension":324,"github":425,"meta":426,"name":427,"navigation":327,"path":428,"seo":429,"slug":427,"stem":430,"twitter":424,"website":431,"__hash__":432},"authors/authors/luckystriike.md","Luckystriike","/avatars/luckystriike.jpg",{"type":162,"value":421,"toc":422},[],{"title":316,"searchDepth":317,"depth":317,"links":423},[],"none","luckystriike22",{},"luckystriike","/authors/luckystriike",{"description":316},"authors/luckystriike","https://github.com/luckystriike22","vmVaU8HAY_jbVnlvpUQiwh3uPcKxGGr6B5PF9xo17X8",{"id":434,"title":435,"avatar":436,"body":437,"description":316,"email":441,"extension":324,"github":442,"meta":443,"name":444,"navigation":327,"path":445,"seo":446,"slug":442,"stem":447,"twitter":448,"website":449,"__hash__":450},"authors/authors/neoprint3d.md","Neoprint3d","/avatars/neoprint3d.jpg",{"type":162,"value":438,"toc":439},[],{"title":316,"searchDepth":317,"depth":317,"links":440},[],"drew@neoprint3d.dev","neoprint3d",{},"Drew Ronsman","/authors/neoprint3d",{"description":316},"authors/neoprint3d","drew_ronsman","https://dronsman.com","w-8rauWEJDRmX_QOi4s2PI7n9EABybGURQ-R_ss9tzo",{"id":452,"title":453,"avatar":454,"body":455,"description":316,"email":459,"extension":324,"github":460,"meta":461,"name":453,"navigation":327,"path":462,"seo":463,"slug":460,"stem":464,"twitter":465,"website":466,"__hash__":467},"authors/authors/neosoulink.md","Neosoulink","/avatars/neosoulink.jpg",{"type":162,"value":456,"toc":457},[],{"title":316,"searchDepth":317,"depth":317,"links":458},[],"neodarksoulink@gmail.com","neosoulink",{},"/authors/neosoulink",{"description":316},"authors/neosoulink","nsl_nathan","https://github.com/Neosoulink","69eGfzorl4NNNe56pFRh6qK3AhnfjnKUvCHO-_9Pa1Y",1790345960278]