INSPIRATION: Astronomy is one of the most visual subjects in science, but many students still learn it through disconnected textbook paragraphs, static diagrams, and search results. I wanted to create something that lets a student ask a real question and then travel to the answer.
Astro Learner began as Cosmic Atlas, an interactive Three.js universe where users could explore planets, stars, nebulae, black holes, galaxies, and galaxy clusters. During OpenAI Build Week, I expanded that existing visualization into an AI-powered educational platform.
The main idea was simple:
What if an AI did not just tell a student the answer, but guided them through the universe to understand it?
Instead of returning only a paragraph, Astro Learner uses GPT-5.6 to interpret the student’s educational intent, choose the most relevant astronomical object or sequence of objects, move the camera through the 3D scene, explain why each destination matters, and check the student’s understanding.
This became the foundation of the project’s “Why am I here?” context engine. Every destination is connected to the student’s original question, turning exploration into a coherent learning path rather than a collection of isolated facts.
What it does
Astro Learner is an AI-guided, interactive astronomy learning environment.
A student can ask questions such as:
“Where are stars born?” “How do stars die?” “What is the largest known star?” “Why is Pluto a dwarf planet?” “What galaxy will collide with the Milky Way?” “Take me somewhere life might exist.”
GPT-5.6 returns a structured educational plan that the website can execute. Depending on the question, Astro Learner can:
Fly the camera to a specific object Create a guided, multi-stop lesson Compare two astronomical objects Correct a scientific misconception Generate a quiz Recommend the next destination Adapt the explanation to the selected learning level
For example, asking “How do stars die?” creates a journey through several objects:
Orion Nebula Pleiades The Sun Betelgeuse Crab Nebula Crab Pulsar
Each stop includes a visual destination, an explanation, scientific context, uncertainty where appropriate, and a question that checks understanding.
Astro Learner supports several learning levels:
Elementary Middle School High School AP Astronomy College Advanced
The difference is not only shorter or longer text. The model changes its vocabulary, examples, conceptual depth, and teaching strategy.
The quiz system is also adaptive. If a student answers incorrectly, the platform does not simply display “wrong.” It explains the misconception, directs the student back to the relevant visual evidence, and can simplify the question into a two-choice retry.
The project also includes:
Teacher lesson-builder mode Classroom presentation mode Progress tracking Exploration achievements Favorites and bookmarks Semantic search Object comparison Free exploration mode Galaxy interior exploration More than 798 astronomy records 40 nearby galaxies 600 internal galaxy structures
Internal galaxy features are loaded dynamically when a student enters a galaxy. This keeps the initial scene performant while still allowing students to explore structures such as black holes, star-forming regions, nuclear components, clusters, rings, and dust lanes.
How we built it
Astro Learner is built around an existing high-detail Three.js visualization that I meaningfully extended during OpenAI Build Week.
The frontend uses:
HTML CSS JavaScript Three.js WebGL Procedural CanvasTextures Particle systems Instanced meshes Level-of-detail rendering
The original camera, scale hierarchy, object inspector, search system, filters, planetary textures, orbit simulation, and controls were preserved and extended rather than replaced.
The AI workflow is:
Student question ↓ Secure POST request to /api/ask ↓ Node.js and Express backend ↓ OpenAI Responses API with GPT-5.6 ↓ Strict structured JSON response ↓ Three.js navigation and lesson interface
GPT-5.6 does not return unrestricted chat text. It returns structured actions such as:
{ "action": "focus_object", "objectId": "orion-nebula", "learningLevel": "highschool", "lesson": { "title": "A Nearby Stellar Nursery", "summary": "The Orion Nebula is a region where new stars are forming.", "whySelected": "It is one of the closest and most studied massive star-forming regions.", "quiz": { "question": "What begins the formation of a star?", "options": [ "Gas and dust collapse under gravity", "A planet explodes", "A black hole pushes matter outward", "The cloud loses all of its gas" ], "answer": 0 } } }
The frontend then executes the plan by reusing the existing functions for navigation, selection, highlighting, scale transitions, and inspection.
The OpenAI API key is never stored in the browser. It is kept in a server-side environment variable and accessed through the Express backend.
The astronomy catalog was prepared from a spreadsheet and converted into a JSON structure containing:
132 Milky Way structures 40 nearby galaxies 600 internal galaxy features 26 galaxy groups and clusters
I used Codex throughout the development process to extend the Three.js architecture, create the structured AI workflow, debug rendering and deployment issues, improve performance, build the dataset adapter, and document the project. I made the main product decisions around the learning experience, visual design, object hierarchy, adaptive quiz behavior, and how AI actions should connect to the existing simulation.
Challenges we ran into
One of the biggest challenges was making the AI part of the experience instead of placing a normal chatbot beside the visualization.
A plain text response would not have been enough. The model needed to choose only objects that actually existed in the rendered catalog, return valid object IDs, select the correct scale, and decide whether the question required one destination, a comparison, or a guided tour.
I addressed this by using strict structured outputs and limiting GPT-5.6 to a defined set of educational actions.
Another challenge was performance. The complete catalog contains hundreds of structures, and loading every internal galaxy object at startup would have created visual clutter and reduced frame rate. I solved this with dynamic galaxy loading. The 15 internal features for each galaxy are created only when that galaxy is entered.
The background was also difficult to balance. A dense starfield can quickly become white visual noise. I redesigned it with multiple depth layers, darker negative space, varied stellar colors, a procedural Milky Way band, dust lanes, and restrained brightness.
Deployment introduced additional issues. The initial package lockfile referenced a private package registry that Vercel could not access. I regenerated the deployment files using the public npm registry and moved all sensitive configuration into Vercel environment variables.
Finally, scientific accuracy required careful handling. Astronomy measurements often include uncertainty. For example, the title of “largest known star” can change because stellar distances, temperatures, atmospheric boundaries, and dust estimates are difficult to measure. Astro Learner is designed to explain that uncertainty instead of presenting every estimate as absolute fact.
Accomplishments that we're proud of
I am especially proud that Astro Learner is not just a chatbot added to an existing website.
The AI controls the learning experience by:
Selecting meaningful destinations Navigating through the 3D universe Explaining why each destination was chosen Creating ordered lessons for scientific processes Correcting misconceptions visually Generating adaptive quizzes Recommending what to explore next
I am also proud that the project preserves the depth of the original Cosmic Atlas visualization while adding an entirely new educational layer.
Other accomplishments include:
Integrating 798 astronomy records Supporting 600 dynamically loaded galaxy structures Building multiple learning levels Creating teacher and classroom modes Implementing secure server-side GPT access Preserving real-time Three.js performance Creating a structured-output system that connects AI decisions to camera actions Extending a pre-existing project meaningfully during Build Week Deploying the project through GitHub and Vercel
The result feels less like searching an encyclopedia and more like being guided by a personal astronomy instructor.
What we learned
This project taught me that educational AI is most useful when it is connected to an interactive environment.
A text model can explain what a nebula is, but combining that explanation with camera movement, scale, comparison, and visual evidence makes the concept easier to understand and remember.
I also learned that structured outputs are essential when AI controls an application. Letting the model return unrestricted text would have made navigation unreliable. A strict schema made the interaction predictable while still allowing GPT-5.6 to make intelligent educational decisions.
From the graphics side, I learned more about:
Three.js scene organization Procedural textures GPU particle systems Instanced rendering Level-of-detail systems Camera interpolation Raycasting Dynamic object loading Performance optimization
From the product-design side, I learned that an educational interface should always answer three questions:
What am I looking at? Why does it matter? What should I explore next?
Those questions shaped the inspector, lesson panel, quiz flow, and “Why am I here?” engine.
I also learned how important it is to document the difference between prior work and hackathon work. The original Cosmic Atlas renderer existed before Build Week, while the AI guide, structured GPT workflow, adaptive quizzes, teacher mode, galaxy interior system, expanded dataset integration, redesigned interface, and deployment architecture were added during the submission period.
What's next for Astro Learner
The next step is to make Astro Learner more useful for complete classroom instruction.
Planned improvements include:
Voice narration and speech input Student accounts and saved learning history Teacher dashboards Shareable classroom lesson codes Standards-aligned lesson templates More advanced assessment generation Collaborative exploration sessions Improved accessibility and screen-reader support Multilingual lessons Real-time NASA mission and discovery updates More accurate astronomical coordinate mapping Additional internal structures for distant galaxies Visual comparison overlays AR and VR exploration modes A lesson marketplace for educators
I also want the AI to build longer-term learning paths. Instead of answering only one question at a time, Astro Learner could identify what a student already understands and create a sequence of lessons that gradually builds toward more advanced astronomy.
The long-term vision is for Astro Learner to become a reusable AI science-learning platform where students do not just read about complex systems.
They enter them.
Log in or sign up for Devpost to join the conversation.