Flight Simulator com React, Three.js & WebGL

Como criar algo semelhante usando tecnologias Web

O jogo Flight Simulator, da Microsoft, usa escaneamentos de satélite e dados de terreno de mapas do Bing para gerar um terreno em tempo real.
O resultado disso são algumas das recriações mais precisas de lugares do mundo real.
Em um artigo, publicado por Rishabh Karnad, conseguimos ver que é possível fazer algo muito semelhante (dada as devidas proporções) com Three.js, React e WebGL.

O autor apresenta um passo a passo e é incrível ver o poder das tecnologias Web e como é possível desenvolver algo que há anos atrás seria muito difícil.
Em resumo, para recriar um terreno precisamos primeiro criar uma cena 3D, escolher o local desejado e fazer o mapeamento do mesmo.
Depois disso, usamos as coordenadas, aplicamos Shaders.
Pode parecer complexo, mas com o passo a passo fica um pouco mais fácil de entender.
O resultado até esse ponto é apresentado na imagem abaixo:

Interessante, mas fica ainda mais legal.
O passo seguinte é buscar pelas texturas do local.
Com o Gimp e o MapBox é possível chegar ao resultado desejado e depois disso basta fazer o mapeamento do terreno com as texturas.

O resultado final é incrível:

Gostou e quer fazer o seu próprio experimento?
Dê uma olhada no artigo/tutorial completo: https://techblog.geekyants.com/recreating-real-world-terrain-with-react-threejs-and-webgl-shaders-1