Over 450 million Rubik's cubes have been sold worldwide. Yet, studies estimate that less than 5% of people who buy one ever figure out how to solve it.
When I looked at existing mobile twisty puzzle apps, I noticed two major frustrations:
- Clunky 2D Simulators: Flat, unintuitive, and filled with aggressive ads every 30 seconds.
- Fragile Solvers: Algorithms that crash if your room lighting is warm or if you tilt your phone slightly.
- Missing Exotic Shapes: Almost none supported shape-shifting puzzles like the Mirror Cube or the 12-sided Megaminx.
To solve this, I spent the last 6 months building CubeKing 3D (iOS App Store / Google Play): an open, high-performance 3D twisty puzzle sandbox and real-life AI camera solver built completely with Flutter.
Here is how the 3D graphics pipeline, quaternion mathematics, and computer vision architecture work under the hood.
1. 3D Twisty Mathematics: Why Euler Angles Fail
A 3x3x3 cube consists of 26 individual cubies (8 corners, 12 edges, 6 centers). In a physical cube, turning a face rotates 9 cubies simultaneously by 90 degrees around one of the primary Cartesian axes (X, Y, or Z).
In standard 3D game engines, rotating objects using Euler angles (pitch, yaw, roll) leads directly to gimbal lock—a state where two rotational axes align, causing erratic spin behavior during fluid drag gestures.
text
[ UP ]
[ LEFT ][FRONT][ RIGHT ][ BACK ]
[ DOWN ]
To achieve 60 FPS gesture responsiveness on mobile touchscreens without gimbal lock, CubeKing 3D represents all cubie orientations using Unit Quaternions:
Rotation Quaternion:
q = cos(θ / 2) + (x·i + y·j + z·k) · sin(θ / 2)
The Arcball Touch Layer
When the player drags across the screen:
Raycasting: A ray is cast from the camera viewport through the touch coordinates onto the 3D cube mesh.
Layer Filtering: The engine determines whether the drag vector aligns with a layer slice (U, D, L, R, F, B) or is an orbital camera drag.
Quaternion Slerp (Spherical Linear Interpolation): During animation, the 9 target cubies interpolate smoothly between their initial rotation and the target 90-degree turn:
// Smooth spherical linear interpolation for layer turns
Quaternion slerp(Quaternion q1, Quaternion q2, double t) {
double cosHalfTheta = q1.dot(q2);
if (cosHalfTheta.abs() >= 1.0) return q1;
double halfTheta = acos(cosHalfTheta);
double sinHalfTheta = sqrt(1.0 - cosHalfTheta * cosHalfTheta);
if (sinHalfTheta.abs() < 0.001) {
return Quaternion(
q1.x * 0.5 + q2.x * 0.5,
q1.y * 0.5 + q2.y * 0.5,
q1.z * 0.5 + q2.z * 0.5,
q1.w * 0.5 + q2.w * 0.5,
);
}
double ratioA = sin((1 - t) * halfTheta) / sinHalfTheta;
double ratioB = sin(t * halfTheta) / sinHalfTheta;
return Quaternion(
q1.x * ratioA + q2.x * ratioB,
q1.y * ratioA + q2.y * ratioB,
q1.z * ratioA + q2.z * ratioB,
q1.w * ratioA + q2.w * ratioB,
);
}
2. Simulating the Shape-Shifting Mirror Cube
Unlike a standard Rubik's cube where all cubies have identical dimensions and differ only by sticker color, the Mirror Cube (Bump Cube) is monochrome (metallic silver/gold) and uses varying physical heights along all 3 dimensions.
When scrambled, the Mirror Cube deforms into an asymmetric, spiky sculpture:
Standard 3x3 Cube --> Uniform 1x1x1 cubie boxes
Mirror / Bump Cube --> 26 distinct anisotropic bounding boxes
Dynamic Raycast hit-testing per layer offset
To model this in Flutter:
The underlying permutation group theory remains isomorphic to a standard 3x3x3.
Each cubie coordinate maps to an anisotropic scaling vector: Scale(i, j, k) = [width_i, height_j, depth_k].
Hit-testing dynamically evaluates the transformed oriented bounding boxes so that turning deformed protruding layers feels as natural as turning a flat cube.
3. The AI Camera Solver: Computer Vision on the Edge
The most challenging engineering component was the camera scanner ("Solve My Cube"). Users point their phone camera at each of the 6 cube faces, and the app reliably identifies sticker colors without requiring a server backend.
[ Camera Stream (60fps) ]
│
▼
[ Adaptive 3x3 Perspective Grid Detection ]
│
▼
[ CIE-Lab Color Space Distance Matching (ΔE) ]
│
▼
[ Permutation Parity & Solvability Validation ]
│
▼
[ Kociemba Two-Phase Optimal Solver (<25 moves) ]
Why RGB Fails Under Real-World Lighting
Standard RGB Euclidean distance fails when ambient light shifts from cool fluorescent (6500K) to warm incandescent (2700K). Under warm light, white stickers reflect yellow photons, confusing simple classifiers.
Instead, CubeKing 3D transforms camera pixels into the CIE-Lab color space, where L represents perceptual lightness and a, b represent chromatic coordinates:
Color Distance Formula (CIE-Lab):
ΔE = sqrt((L₂ - L₁)² + (a₂ - a₁)² + (b₂ - b₁)²)
Because human color perception is non-linear, ΔE enables the classifier to distinguish white from yellow and red from orange even in dimly lit rooms.
Mathematical Solvability Validation
Before computing algorithms, the state passes through a strict parity validator:
Corner Permutation Parity: Sum of corner orientations mod 3 == 0
Edge Permutation Parity: Sum of edge orientations mod 2 == 0
Permutation Parity: Sign of corner permutation == Sign of edge permutation
If a sticker was misidentified or peeled off by a user, the app highlights the exact conflicting facelet before wasting compute cycles.
4. 9 Exotic Geometries in One App
Most mobile apps stop at the classic 3x3. CubeKing 3D ships with 9 distinct puzzle types:
Classic Family: 2x2 (Pocket), 3x3, 4x4 (Master), 5x5 (Professor)
Shape-Shifting: Mirror Cube (Bump Cube)
Polyhedra: Pyraminx (Tetrahedron), Megaminx (12-sided Dodecahedron)
Corner-Turning: Skewb, Dino Cube
Each puzzle shares the same unified gesture controller, magnetic haptic click feedback, and daily scramble seed generator.
5. Experience It Live
CubeKing 3D is free to download worldwide:
🍏 iOS App Store: [apps.apple.com/app/id6810142785](url)
🤖 Google Play Store: [play.google.com/store/apps/details?id=com.app.games.cubeking3d](url)
If you're building 3D graphics or computer vision apps with Flutter, feel free to drop your questions or thoughts in the comments below!
Top comments (0)