Case study
Building a Real-Time 3D Globe Inside Articulate Storyline
A photoreal Earth a learner can spin, zoom from orbit down to a single region, and click anywhere to read its exact latitude and longitude — running as WebGL inside an ordinary Storyline course.
The challenge
Every flat map has to distort something. The familiar classroom projection makes Greenland look the size of Africa, when Africa is roughly fourteen times larger — and learners who only ever see the world flat carry that wrong picture with them.
Latitude and longitude have the same problem. On paper they are two numbers and a grid of lines. Most learners can recite the definition and still could not point to where 35° north, 20° east actually is.
My analysis
The only undistorted map of the world is a globe, and Storyline cannot draw one. It can, however, host a web object — and a web object is a browser, which can render a full real-time 3D scene.
The coordinate problem has the same answer. If the learner clicks a place and the course tells them its coordinates, the numbers stop being abstract. They become an address for somewhere the learner has just looked at.
A flat map has to lie somewhere. A globe doesn’t.
The solution
I built a photoreal 3D Earth in WebGL and embedded it in Storyline. The learner drags to spin it, zooms from the whole planet down to a single region, and clicks any point to see its exact latitude and longitude appear on screen.
Because the learner chooses where to look and where to click, they are exploring rather than being shown — and every click is a small, immediate lesson in how the coordinate grid maps onto the real world.
How it is built
Six decisions between a sphere and a teaching tool.
Putting a textured ball on screen is quick. The work is in making it look like the Earth, feel natural to handle, return accurate coordinates, and run on an ordinary work laptop inside a course.
The planet is a texture problem
The Earth is a sphere wrapped in a satellite image stored in equirectangular form — the rectangular world map whose width is exactly twice its height, which is what makes it wrap a sphere without seams. Choosing the resolution is a trade-off: high enough to stay sharp when the learner zooms in on a region, small enough to download quickly and fit in a laptop’s graphics memory.
Lighting that makes it read as a globe
Flat, even lighting makes a sphere look like a disc. Soft directional light gives the Earth shading from one side to the other so the eye reads it as round, and the deep black background removes anything that competes with it — the same reason photographs of the Earth from space are so legible.
Controls that feel weighted
Dragging rotates the globe with damping switched on, so it carries a little momentum and eases to a stop rather than jerking. Zoom is bounded at both ends: far enough out to always see the whole planet, close enough in to pick out a country, never so close that the learner gets lost in an unrecognisable patch of texture.
A click becomes a latitude and longitude
A ray is cast from the camera through the pointer position, and where it hits the sphere returns a point on the texture. Because the texture is equirectangular, that point converts directly to real coordinates: its vertical position maps to latitude from 90° north to 90° south, and its horizontal position to longitude from 180° west to 180° east. The readout updates on every click.
Running inside Storyline
The globe is packaged as a web object, so the course still publishes as ordinary SCORM and the LMS handles it like any other Storyline course. Through Storyline’s player API the same coordinates can be written into course variables — which is what turns free exploration into a task Storyline can check, such as “find a point within the Tropic of Capricorn”.
Surviving the machine it runs on
A course that makes a laptop fan roar gets closed. The device pixel ratio is capped so high-resolution screens do not multiply the pixels being drawn, and texture size is balanced against how close the learner can zoom — sharp enough to be useful, light enough to load quickly on a corporate network.
Conclusion
The technique is not really about geography. It suits anything where location is the lesson — global operations and supply chains, climate and environment, travel risk, time zones, or simply a primary-school child learning where the continents are. What makes it teach rather than decorate is that the learner chooses where to look, and every click gives them something precise back.
Ready to turn complex content into practical learning?
Let’s discuss your audience, performance need, and the right format for the project.