Merely examining 2D topographic maps or orbiting an opaque spherical digital Earth does not grant users intuitive insight into the core questions of geophysics: why earthquakes rupture hundreds of kilometers deep within the earth, or how mantle convection currents drive continental drift.
To overcome this scientific and educational hurdle, QuakeViewer3D introduced a breakthrough feature: the "3D Earth Cross-Section & Mantle Slice Mode". This capability allows users to slice through our planet along any user-selected meridian, peeling back the crust to expose the inner layers all the way down to the solid iron core (depth 6,371 km) as a fully solid, volumetric structure. In this article, we examine how we leveraged WebGL hardware clipping planes, procedural concentric disk caps to prevent hollow geometry artifacts, and depth-buffer occlusion strategies.
1. WebGL Hardware Clipping Planes for Real-Time Cross-Sections
Performing physical polygon-level Boolean cuts on the CPU using Constructive Solid Geometry (CSG) algorithms would trigger intense polygon re-triangulation, dropping frame rates and making fluid 60 FPS mobile interaction impossible.
Instead, QuakeViewer3D harnesses hardware-accelerated clipping planes native to WebGL. A clipping plane is defined by an analytical plane equation $\vec{n} \cdot \vec{x} + w = 0$, where $\vec{n} = (n_x, n_y, n_z)$ represents the plane normal and $w$ represents signed offset distance from the origin:
// Enable local clipping on Three.js WebGLRenderer
renderer.localClippingEnabled = true;
// Define a vertical clipping plane tracking the earthquake epicenter's meridian
const clipPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
const earthMaterial = new THREE.MeshStandardMaterial({
map: earthTexture,
clippingPlanes: [clipPlane],
clipShadows: true
});At the GPU fragment shader stage, any fragments falling outside the positive half-space of the clipping plane are instantly discarded (discard), shearing away half the Earth without incurring any CPU geometry recalculation.
2. Dynamic 5-Layer Solid Cap Discs: Eliminating Hollow Geometry
However, clipping an empty polygonal sphere creates a glaring visual defect: the planet appears hollow, resembling a punctured rubber ball rather than a dense, rocky planet.
To produce an authentic, physically dense cross-section, QuakeViewer3D dynamically instantiates a set of five concentric disk meshes (Cap Discs) aligned coplanar to the clipping boundary, strictly conforming to the geophysical Preliminary Reference Earth Model (PREM):
- Crust: Depth 0–35 km (Outer: 6,371 km, Inner: 6,336 km; solid basalt/granite, earth-brown).
- Upper Mantle & Asthenosphere: Depth 35–410 km (Outer: 6,336 km, Inner: 5,961 km; peridotite mantle rocks, deep crimson).
- Transition Zone & Lower Mantle: Depth 410–2,890 km (Outer: 5,961 km, Inner: 3,481 km; high-density perovskite/silicates, amber-orange).
- Outer Core: Depth 2,890–5,150 km (Outer: 3,481 km, Inner: 1,221 km; molten liquid iron-nickel alloy generating geodynamo magnetism, luminescent yellow).
- Inner Core: Depth 5,150–6,371 km (Central disk of radius 1,221 km; ultra-dense crystallized solid iron-nickel under extreme pressures, incandescent platinum).
As the cutting plane rotates to track focal points, the orientation quaternion of each cap disk updates in lockstep with the plane normal $\vec{n}$, maintaining an uninterrupted, solid interior cross-section from any perspective.
3. Preventing Ghosting via Terrain Depth Occlusion & Logarithmic Z-Buffering
Rendering a clipped hemisphere alongside flat cap disks and floating hypocenter spheres creates complex depth sorting contention: without careful handling, the back-face terrain of the far hemisphere can bleed through the sliced cap.
QuakeViewer3D overcomes this through multi-tier rendering order and depth-buffer management:
- Strict Back-Face Culling: We enforce
THREE.FrontSiderasterization across all hemispherical surfaces to prune inward-facing polygons. - Deterministic Render Ordering: The opaque solid cap disks write to the depth buffer (Z-buffer) first, physically occluding the opposite hemisphere's terrain geometry at the GPU hardware level.
- Logarithmic Depth Buffering: Modeling planetary dimensions (Earth radius 6,371 km) alongside paper-thin crust layers (35 km) causes standard 16-bit or 24-bit depth buffers to suffer from Z-fighting (polygon flickering). By enabling
logarithmicDepthBuffer: trueduring renderer initialization, depth precision distributes logarithmically, cleanly separating millimeter-scale surface features from global mantle volumes.
4. Visualizing Subducting Slabs and Wadati-Benioff Zones in Cross-Section
The true scientific utility of this mantle slice becomes apparent when hypocenter spheres (InstancedMesh) and subducting oceanic slab models are overlaid upon the cross-section.
Viewers can gaze directly into the subterranean profile of the Japan Trench, observing the cold Pacific plate plunge down to the 660 km discontinuity, tracing the planar alignment of deep-focus earthquakes along the slab boundary, and observing how descending slabs flatten into "stagnant slabs" within the mantle transition zone—achieving an educational fidelity comparable to an interactive planetary CT scan.
5. Conclusion: Elevating Geoscience Education
By blending modern WebGL clipping pipelines with geophysical PREM data, QuakeViewer3D transforms static textbook diagrams into an interactive, real-time anatomical model of our dynamic planet.
Whether utilized in university geoscience curricula, high school earth science classes, or by citizen scientists seeking disaster awareness, this digital Earth slicing technology bridges the gap between raw seismic data and intuitive physical comprehension.