Visualizador 3D: 4 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:39

Olá! Para satisfazer meu interesse em programação e espero ajudar a satisfazer o seu, gostaria de mostrar a vocês um visualizador 3D que codifiquei em javascript. Se você gostaria de aprofundar seu conhecimento sobre jogos 3D ou até mesmo criar seu próprio jogo 3D, este protótipo de visualizador 3D é perfeito para você.

Etapa 1: a teoria

Para entender a teoria desse visualizador em 3D, você pode simplesmente examinar a maneira como vê os arredores (ajuda ter apenas uma fonte de luz significativa). Notar que:

1. Os objetos que estão mais distantes de você ocupam uma parte menor do seu campo de visão.
2. Os objetos que estão mais distantes da fonte de luz parecem mais escuros.
3. À medida que as superfícies se tornam mais paralelas (menos perpendiculares) à fonte de luz, elas aparecem em cores mais escuras.

Decidi representar um campo de visão com um monte de linhas originando-se de um único ponto (análogo ao globo ocular). Como uma bola de espigão, as linhas precisam ser uniformemente espaçadas para garantir que cada parte do campo de visão seja igualmente representada. Na imagem acima, observe como as linhas que saem da bola espigada se tornam mais espaçadas à medida que se afastam do centro da bola. Isso ajuda a visualizar a implementação da observação 1 do programa, uma vez que a densidade das linhas diminui à medida que os objetos se afastam do ponto central.

As linhas são a unidade básica de visão do programa e cada uma delas é mapeada para um pixel na tela. Quando uma linha cruza um objeto, seu pixel correspondente é colorido com base em sua distância da fonte de luz e seu ângulo em relação à fonte de luz.

Etapa 2: Teoria de Implementação

Para simplificar o programa, a fonte de luz é igual ao ponto central (globo ocular: ponto de onde o mapa é visto e de onde as linhas se originam). Semelhante a segurar uma luz perto do rosto, isso elimina sombras e permite que o brilho de cada pixel seja calculado com muito mais facilidade.

O programa também usa coordenadas esféricas, com o ponto de visão central na origem. Isso permite que as linhas sejam facilmente geradas (cada uma com um único theta: ângulo horizontal e phi: ângulo vertical) e fornece a base de cálculos. Linhas com o mesmo theta são mapeadas para pixels na mesma linha. A phis dos ângulos correspondentes aumenta em cada linha de pixels.

Para simplificar a matemática, o mapa 3D é composto de planos com uma variável comum (x, y ou z comum), enquanto as outras duas variáveis não comuns estão confinadas em um intervalo, completando a definição de cada plano.

Para olhar ao redor com o mouse, as equações do programa levam em consideração uma rotação vertical e horizontal durante a conversão entre os sistemas de coordenadas esférico e xyz. Isso tem o efeito de pré-formar uma rotação no conjunto de linhas de visão "bola espigada".

Etapa 3: matemática

As equações a seguir permitem que o programa determine quais linhas cruzam cada objeto e informações sobre cada interseção. Derivei essas equações das equações de coordenadas esféricas básicas e das equações de rotação 2D:

r = distância, t = teta (ângulo horizontal), p = phi (ângulo vertical), A = rotação em torno do eixo Y (rotação vertical), B = rotação em torno do eixo Z (rotação horizontal)

Kx = (sin (p) * cos (t) * cos (A) + cos (p) * sin (A)) * cos (B) -sin (p) * sin (t) * sin (B)

Ky = (sin (p) * cos (t) * cos (A) + cos (p) * sin (A)) * sin (B) + sin (p) * sin (t) * cos (B)

Kz = -sin (p) * cos (t) * sin (A) + cos (p) * cos (A)

x = r * Kx

y = r * Ky

z = r * Kz

r ^ 2 = x ^ 2 + y ^ 2 + z ^ 2

iluminação = Klight / r * (Kx ou Ky ou Kz)

p = arccos ((x * sin (A) * cos (B) + y * sin (A) * sin (B) + z * cos (A)) / r)

t = arccos ((x * cos (B) + y * sin (B) -p * sin (A) * cos (p)) / (r * cos (A) * sin (p)))

Etapa 4: Programa

Espero que este protótipo de visualizador 3D tenha ajudado você a entender o funcionamento das realidades virtuais 3D. Com um pouco mais de aperfeiçoamento e codificação, esse visualizador certamente tem potencial para ser usado no desenvolvimento de jogos 3D.