[{"data":1,"prerenderedAt":185},["ShallowReactive",2],{"embed-portal-journey":3},{"id":4,"title":5,"author":6,"body":7,"date":167,"description":168,"extension":169,"featured":170,"lastUpdated":171,"meta":172,"navigation":173,"path":174,"responsive":170,"seo":175,"stem":176,"tags":177,"thumbnail":183,"__hash__":184},"experiments\u002Fexperiments\u002Fportal-journey.md","Portal Journey","alvarosabu",{"type":8,"value":9,"toc":159},"minimark",[10,27,32,35,75,79,82,120,124,156],[11,12,13,14,18,19,26],"p",{},"This experiment recreates the iconic ",[15,16,17],"strong",{},"portal scene"," from ",[20,21,25],"a",{"href":22,"rel":23},"https:\u002F\u002Fthreejs-journey.com\u002F",[24],"nofollow","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.",[28,29,31],"h3",{"id":30},"what-youll-see","What You'll See",[11,33,34],{},"A captivating magical scene featuring:",[36,37,38,45,51,57,63,69],"ul",{},[39,40,41,44],"li",{},[15,42,43],{},"Mystical Portal",": Glowing circular portal with swirling energy effects",[39,46,47,50],{},[15,48,49],{},"Floating Fireflies",": Hundreds of animated fireflies with custom particle shaders",[39,52,53,56],{},[15,54,55],{},"Baked Lighting",": Pre-computed lighting for realistic illumination and shadows",[39,58,59,62],{},[15,60,61],{},"Fantasy Environment",": Detailed 3D environment with rocks, grass, and mystical elements",[39,64,65,68],{},[15,66,67],{},"Shader Effects",": Custom GLSL shaders for portal energy and firefly glow",[39,70,71,74],{},[15,72,73],{},"Atmospheric Lighting",": Carefully crafted lighting creating magical ambiance",[28,76,78],{"id":77},"technical-implementation","Technical Implementation",[11,80,81],{},"This experiment showcases advanced 3D rendering techniques:",[36,83,84,90,96,102,108,114],{},[39,85,86,89],{},[15,87,88],{},"Baked Lighting Pipeline",": Pre-calculated lighting stored in textures for performance",[39,91,92,95],{},[15,93,94],{},"Custom Particle Shaders",": GLSL shaders for firefly animation and glow effects",[39,97,98,101],{},[15,99,100],{},"Portal Shader Effects",": Swirling energy patterns using time-based animations",[39,103,104,107],{},[15,105,106],{},"GLTF Scene Loading",": Complex 3D environment loaded efficiently",[39,109,110,113],{},[15,111,112],{},"Texture Management",": Multiple textures for different scene elements",[39,115,116,119],{},[15,117,118],{},"Performance Optimization",": Balanced visual quality with smooth performance",[28,121,123],{"id":122},"visual-design","Visual Design",[36,125,126,132,138,144,150],{},[39,127,128,131],{},[15,129,130],{},"Fantasy Atmosphere",": Magical lighting and effects creating otherworldly mood",[39,133,134,137],{},[15,135,136],{},"Color Harmony",": Warm and cool tones creating visual depth and interest",[39,139,140,143],{},[15,141,142],{},"Particle Animation",": Realistic firefly movement with natural randomness",[39,145,146,149],{},[15,147,148],{},"Environmental Detail",": Rich 3D environment with varied textures and materials",[39,151,152,155],{},[15,153,154],{},"Lighting Drama",": Strategic light placement highlighting key scene elements",[11,157,158],{},"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":160,"searchDepth":161,"depth":161,"links":162},"",2,[163,165,166],{"id":30,"depth":164,"text":31},3,{"id":77,"depth":164,"text":78},{"id":122,"depth":164,"text":123},"2023-03-27","Famous Bruno Simon's ThreeJS Journey Portal.","md",false,"2025-06-26",{},true,"\u002Fexperiments\u002Fportal-journey",{"title":5,"description":168},"experiments\u002Fportal-journey",[178,179,180,181,182],"gltf","shaders","useTexture","useGLTF","baked","\u002Fexperiments\u002Fportal-journey.webp","pjlWSRsRkHSWAdOxaMWkoXWu57f93TrJZPlBnhVrCH4",1793714844059]