Sem categoria

Um globo 3D interativo – um guia de mapeamento DIY

Por Raluca Nicola (Visualização 3D e análise, 26 de agosto de 2019)

Alguns meses atrás eu trabalhei com John Nelson em um globo 3D interativo e o projeto acabou muito bem, então escrevi uma postagem no blog que mostra como criar esse globo usando a API do ArcGIS para JavaScript.

1

O globo dos extremos

John Nelson surgiu com a ideia inicial e também criou o incrível mapa base que usaremos neste tutorial. Nós nos inspiramos neste belo globo virtual e neste incrível globo artesanal . Nesta postagem do blog, mostraremos passo a passo como criar esse globo 3D interativo:

https://www.esri.com/arcgis-blog/wp-content/uploads/2019/08/Overview-steps.png

Antes de começarmos com o tutorial, o repositório para este aplicativo está aqui e cada commit corresponde a uma etapa no tutorial. Clique em “ver o código” para ver o commit correspondente no Github.

Etapa 1: onde criamos um globo com um mapa base personalizado

Veja o código

Começamos com uma configuração básica: temos uma página HTML onde inicializamos um mapa e um SceneView que renderiza o mapa. Além disso, na página CSS, definimos o contêiner do mapa para cobrir toda a tela.

A parte importante aqui é adicionar o TileLayer que John criou como parte do mapa base:

Globo após o passo 1

Passo 2: onde o globo começa a parecer chique

Veja o código

Após o primeiro passo, o mundo tem um fundo muito realista e, para o nosso aplicativo, eu gostaria de dar uma aparência divertida que convidará os usuários a explorar os dados do globo. Para isso, vamos remover as estrelas ea atmosfera e vamos adicionar um gradiente de fundo personalizado no body: 

background: radial-gradient(#12bff2,#0269a1);. 

Também definiremos restrições de altitude para que o usuário não possa aumentar ou diminuir o zoom demais para evitar que elas se percam.

Outra mudança que nós vamos fazer para o mundo é a adição de alguns filtros CSS para aumentar a saturação e, adicionalmente, vamos adicionar um halo branco em torno dele: 

filter: saturate(1.5) drop-shadow(0 0 20px white); 

Globo após o passo 2

Etapa 3: onde exageramos … o terreno

Veja o código

Neste mapa, mostraremos os pontos mais altos e mais baixos da Terra, mas com os valores de elevação reais, você dificilmente poderá ver quaisquer alterações na altura do terreno. Para resolver isso, vamos exagerar a elevação da superfície terrestre e oceânica. Usaremos o serviço de elevação Topobathy fornecido pela Esri para ter acesso aos dados de elevação mundial.

Com essa técnica, a percepção 3D do terreno aumenta consideravelmente à medida que exageramos a elevação:

Exemplo de elevação exagerada

O exagero da camada de elevação pode ser feito na API, estendendo o BaseElevationLayer. No método fetchTile () , multiplicamos a elevação de cada valor de dados com o valor de exagero. Depois de brincar com vários valores, decidimos 60 vezes maiores para valores acima de 0 metros e 40 vezes menores para valores abaixo de 0 metros.

Globo após o passo 3

Etapa 4: onde adicionamos uma superfície brilhante do oceano

Veja o código

John tinha essa idéia legal de adicionar uma superfície transparente e transparente como a superfície do oceano, um pouco como neste globo . Atualmente, a reflexão especular é suportada na API para modelos GLTF . Então nosso pequeno hack foi adicionar uma esfera no formato GLTF que possui um material refletivo e o raio da Terra. Nós baixamos a esfera do Sketchfab , mas se você quiser criar você mesmo, o KhronosGroup mantém uma lista de aplicativos de modelagem 3D que suportam o GLTF. O fluxo de trabalho é que você crie o modelo 3D em um desses aplicativos, exporte-o como um GLTF e, em seguida, carregue-o na API. A esfera é semitransparente para que possamos ver o fundo do oceano através dela:

Globo após o passo 4

Etapa 5: onde algumas nuvens aparecem

Veja o código

Continuando com os experimentos, queríamos adicionar algumas nuvens ao nosso globo. A NASA tem imagens de satélite de nuvens disponíveis para uso público, então adicionamos uma camada de nuvens usando a classe Mesh . Basicamente, criamos uma esfera com o Mesh.createSphere () e mapeamos a imagem de nuvens como uma textura na esfera. É claro que as nuvens não estão exatamente no lugar em que estavam quando a imagem foi tirada, mas isso não é muito relevante para a nossa visualização. Elevamos as nuvens do globo adicionando um deslocamento de 300 km ao raio da Terra e definindo isso como o raio da esfera da malha.

Globo após o passo 5

Etapa 6: onde coletamos e exibimos os pontos extremos

Veja o código

Esta foi a parte tediosa deste projeto: coleta de dados real. O principal recurso foi este artigo da wikipedia de pontos extremos da Terra. Não há mágica acontecendo aqui, depois de alguma pesquisa online, criamos manualmente um arquivo GeoJSON com os pontos e o carregamos em nosso aplicativo como GeoJSONLayer . Para este globo precisamos de alguns símbolos que se destacam, então criamos um PointSymbol3D com dois IconSymbol3DLayers representando círculos concêntricos. Ao clicar em um ícone, aparece um pop-up, exibindo as informações armazenadas no arquivo GeoJSON. Nós ancoramos o pop-up no canto superior direito e aplicamos alguns CSS personalizados para estilizá-lo.

Globo após o passo 6

Etapa 7: onde criamos a página Intro

Veja o código

Como uma página “Intro”, queremos ter uma mensagem que informe ao usuário sobre o que é o aplicativo. O globo não deve ser muito perturbador, então vamos borrar o globo usando um filtro css enquanto a mensagem de introdução é exibida. Quando o usuário clica no Go to globemundo, ele começa a girar para mostrar ao usuário que ele pode interagir com ele.

Nesta etapa, também adicionaremos uma página “Sobre” (que é tecnicamente igual à página “Introdução” com conteúdo diferente) para fornecer ao usuário mais informações sobre os dados e as ferramentas que foram usadas para criar este aplicativo.

Globo após o passo 7 E isso é tudo que existe para isso! Divirta-se explorando nosso mundo e estamos ansiosos para ver o que te inspirou a construir!

Padrão