Richard Fu

Posted on Sep 13 • Originally published at richardfu.net on Sep 12

Planet Blue Invasion: Building the Future of Casino Gaming with WebGPU and Three.js

#threejs #typescript #gamedev #webdev

How we built a cutting-edge 3D Earth simulation casino game using modern web technologies

As a game developer, I’m excited to share the technical journey behind Planet Blue Invasion , now live on Stake.com. This isn’t just another casino game—it’s a showcase of what’s possible when you combine modern web graphics technology with innovative game design.

The Vision: Alien Invasion Meets Casino Gaming

Planet Blue Invasion puts players in the role of elite alien commanders aboard a war-class spaceship. The gameplay is deceptively simple yet thrilling: spin to target random Earth locations, fire orbital lasers, and earn payouts based on real population density data. Hit Shanghai? Massive payout. Strike the Pacific Ocean? Zero reward.

What makes this special is the underlying technology that creates an immersive, visually stunning experience that feels more like a AAA game than traditional casino fare.

The Tech Stack: Pushing Web Graphics Forward

WebGPU: The Graphics Revolution

At the heart of Planet Blue Invasion is WebGPU —the next-generation graphics API for the web. Unlike WebGL, WebGPU provides:

Native GPU Performance : Direct access to modern GPU features with significantly lower overhead
Advanced Shading : Complex material systems with better performance
Future-Proof Architecture : Built for modern GPUs and rendering pipelines

We’re using Three.js’s WebGPU renderer, which puts us at the forefront of web graphics technology. The Earth you see isn’t just a textured sphere—it’s a multi-layered planetary system with:

Dynamic day/night cycles
Realistic atmospheric scattering
Volumetric cloud rendering
Surface detail mapping with bump effects

TSL (Three Shading Language): Node-Based Materials

One of the most exciting aspects of development was using TSL (Three Shading Language). This node-based material system allows us to create complex shaders visually:


// TSL material example for Earth's day/night blending
const earthMaterial = new TSLMaterial({
  nodes: {
    diffuse: mix(
      texture(dayTexture, uv()),
      texture(nightTexture, uv()),
      sunDirection.dot(normal).add(0.5)
    ),
    normal: texture(bumpTexture, uv()).xyz.mul(2).sub(1)
  }
});

This approach gives us real-time material editing capabilities and better performance than traditional GLSL shaders.

TypeScript: Type Safety in Complex Systems

With a game this complex, TypeScript was essential. Our architecture includes:

Strict typing for 3D math operations
Interface contracts between game systems
Compile-time safety for API integrations

The population data system, for example, handles millions of coordinate lookups with complete type safety:


interface LocationData {
  latitude: number;
  longitude: number;
  population: number;
  city: string;
  country: string;
  payoutMultiplier: number;
}

The fuR Gaming Engine: Framework-Agnostic Architecture

Planet Blue Invasion is built on our proprietary fuR Gaming Engine —a framework-agnostic system designed specifically for casino games. The engine provides:

Internationalization (i18n) System

16 language support including RTL languages like Arabic
Dynamic loading with fallback chains
Cultural adaptation for different markets

Audio System

Spatial audio effects for orbital laser sounds
Dynamic music that responds to game states
Howler.js integration for web audio optimization

Math & RTP System

Provably fair mathematics with 97% RTP
Weight distribution algorithms for balanced gameplay
Population-based payout calculations

Real-World Data Integration

One of the most challenging aspects was integrating real population data. Our system:

Uses GeoNames database with 32,283 cities having 15K+ population
Queries random coordinates via BigDataCloud and Nominatim APIs
Validates location data – locations without city/country data become “empty payout” entries
Calculates realistic payouts based on actual population density from GeoNames

The formula is elegantly simple: Math.round((population / 100000) * 100), making Shanghai, 24.87M population, the theoretical maximum payout at 248.74x.

Performance Optimizations

Asset Management

Relative path architecture for CDN compatibility
Texture optimization with 4K Earth textures compressed efficiently
Progressive loading for smooth startup experience

Rendering Pipeline

Level-of-detail (LOD) systems for Earth surface detail
Frustum culling for off-screen elements
Batch rendering for UI elements

The Casino Gaming Mathematics

Behind the stunning visuals lies sophisticated gambling mathematics:

Target RTP: 97% – Industry-leading return to player
Hit Rate: 33% – Balanced win frequency
Tier Distribution :
- No Win: 67% (Ocean/uninhabited)
- Small Wins: 23.1% (1x-10x)
- Medium Wins: 8.25% (10x-100x)
- Big Wins: 1.65% (100x+)

Our analytics system continuously verifies these mathematics to ensure fair, engaging gameplay.

Bonus Features: Super Spin Mode – Human Radar

The “Super Spin Mode: Human Radar” showcases our engine’s capabilities:

Smart Targeting – Advanced alien technology detects human settlements before firing
Guaranteed Impact – Every shot hits a populated zone, no wasted ammunition
Premium Cost – Activate for 2x base bet to access elite targeting system
Higher Rewards – Focus destruction on densely populated areas for maximum devastation

Development Workflow

Our development setup prioritizes modern tooling:

Vite for lightning-fast development builds
Local Three.js builds for WebGPU feature access
GLSL shader integration with hot reloading
Automated testing for gambling mathematics verification

Play Planet Blue Invasion Today

Planet Blue Invasion represents what’s possible when you combine cutting-edge web technology with innovative game design. Every spin is a journey through real Earth data, every win is backed by provably fair mathematics, and every visual effect is rendered using the latest WebGPU technology.

Experience Planet Blue Invasion on Stake.com

Whether you’re a fellow developer curious about WebGPU implementation, a gaming enthusiast looking for the next evolution in casino games, or someone who simply enjoys blowing up virtual Earth locations for profit—Planet Blue Invasion delivers.