Typical earthquakes occur within the relatively shallow Earth crust, ranging from a few kilometers to tens of kilometers in depth. However, in specific subduction zones around the Japanese archipelago—such as off the western coast of the Ogasawara (Bonin) Islands or deep under the Sea of Okhotsk—immense earthquakes of magnitude 7 to 8 occur at depths of 500 km to 700 km inside the upper mantle and the mantle transition zone. These phenomena are known to seismologists as deep-focus earthquakes.
To unravel and visualize the dynamics of these profound subterranean events—phenomena inherently difficult to comprehend on traditional 2D flat maps—we engineered QuakeViewer3D, an interactive 3D WebGL globe. In this technical article, we explore the geophysical background of deep-focus earthquakes and discuss the architectural algorithms used to visualize massive real-time seismic datasets inside modern web browsers.
1. The Critical Limitation of 2D Maps: Depth and Hazard Profiles
On standard 2D flat maps commonly displayed by meteorological agencies and emergency broadcasts, a shallow crustal quake at a depth of 10 km and a deep-focus mantle quake at 600 km are rendered almost identically—typically as a cross-mark or concentric circles on the surface.
From a geophysical standpoint, however, these two events are fundamentally different. A magnitude 6.0 earthquake at 10 km depth delivers catastrophic, localized ground acceleration directly above the hypocenter. In contrast, an M7.0 earthquake at 600 km depth loses significant wave energy as seismic vibrations radiate spherically through thousands of cubic kilometers of mantle material, often resulting in only mild tremors (JMA seismic intensity 1 or 2) near the epicenter.
2D representations have historically struggled to convey why a powerful M7-class quake causes almost no shaking directly above its hypocenter, or conversely, why regions hundreds of kilometers away might shake violently. Overcoming this cognitive barrier requires full 3D spatial fidelity.
2. Tracing the Subducting Pacific Slab and the Wadati-Benioff Zone in 3D
The distinctive capability of QuakeViewer3D lies in allowing users to orbit the digital Earth freely and toggle crustal opacity, exposing historical hypocenter datasets plotted precisely across three spatial dimensions.
When inspecting the subsurface beneath the Japanese islands from an oblique angle, one immediately observes thousands of color-coded spheres aligned in a distinct plane dipping at approximately 45 degrees—descending from the Japan Trench down beneath the Sea of Japan and the Eurasian continent. This geometric planar structure is celebrated in earth sciences as the Wadati-Benioff zone.
As the cold, rigid Pacific plate (oceanic slab) subducts into the hot, viscous asthenosphere, intense internal devolatilization and shear stresses accumulate. Even at depths exceeding 600 km, brittle failure or mineral phase transformations (such as the olivine-spinel or ringwoodite-perovskite phase changes) trigger massive fault ruptures. Visualizing this slab geometry in real-time 3D provides immediate physical insight into plate subduction dynamics.
3. Simulating Anomalous Seismic Intensity & Educational Value
One of the most counter-intuitive phenomena associated with deep-focus events is anomalous seismic intensity. For example, during a deep M7+ earthquake at a depth of 600 km beneath the Sea of Okhotsk, coastal areas in northern Hokkaido closest to the epicenter may experience barely perceptible shaking. Meanwhile, Tokyo, the Kanto plain, and the Pacific coastline—located more than 800 to 1,000 km away—often register noticeable intensities of 3 or 4.
This anomaly stems from the velocity and attenuation structure of seismic waves. Waves propagating through the hot, semi-fluid upper mantle undergo rapid geometric and intrinsic attenuation ($Q^{-1}$). In contrast, high-frequency seismic waves channeled inside the dense, cold subducting slab travel with minimal attenuation and higher velocities, acting as a natural acoustic waveguide that directs energy straight into the Pacific coast.
QuakeViewer3D implements layered depth coloring (shallow=red/orange, intermediate=green, deep=blue/purple) and overlayable seismic intensity contours, creating an intuitive educational simulator for students, researchers, and disaster prevention professionals.
4. WebGL Coordinate Transformation and High-Performance Rendering
Hypocenter data retrieved via public APIs (e.g., USGS Earthquake Hazards Program, NIED Hi-net) is formatted in geographic coordinates: latitude ($\phi$), longitude ($\lambda$), and depth ($d$ in kilometers). To position each sphere accurately in a 3D Cartesian scene $(X, Y, Z)$ using Three.js, we employ spherical-to-Cartesian coordinate transformations adjusted for Earth's volumetric radius:
// Earth mean radius R ~ 6371 km, depth in km
const r = (EARTH_RADIUS - depth) * SCALE_FACTOR;
const phi = (90 - latitude) * (Math.PI / 180);
const theta = (longitude + 180) * (Math.PI / 180);
const x = -(r * Math.sin(phi) * Math.cos(theta));
const z = (r * Math.sin(phi) * Math.sin(theta));
const y = (r * Math.cos(phi));To render tens of thousands of hypocenter particles smoothly at 60 FPS without dropping frames on mobile browsers, QuakeViewer3D leverages InstancedMesh architecture, bundling transformation matrices into GPU vertex attributes and minimizing draw calls.
5. Conclusion and Geophysical Education Impact
3D visualization of deep-focus seismic events elevates disaster education from abstract textbook diagrams into tangible, interactive exploration. By enabling users to touch, rotate, and inspect the inner mechanisms of our planet, QuakeViewer3D contributes to a deeper scientific literacy and disaster preparedness across global communities.