Estoy rodando mi propio motor 3D, en JavaScript, y usando solo dibujos de lienzo, no WebGL. Este es otro clon de Minecraft; Me encantan las cajas, no me juzgues.
Hasta ahora, todo funciona maravillosamente, excepto por una cosa: en 3D, cuando algunos vértices van detrás del plano de recorte cercano, su proyección en la pantalla resulta extraña (suponiendo que otros vértices utilizados para trazar un plano estén al frente).
Intenté recortar estos puntos pero luego puedo ver a través de las superficies que usan estos vértices. En WebGL / OpenGL, la tarjeta gráfica se ocupa de estos puntos y el plano se representa correctamente, pero no tengo acceso al hardware, así que debo codificarlo yo mismo.
No estoy muy seguro de qué hacer, actualmente lo último que se me ocurrió es invertir la proyección de puntos detrás del plano de recorte cercano del jugador, lo que parece lógico ya que debo proyectar un punto en una pantalla que está al frente del vértice
Aquí están mis pensamientos:
Aquí hay algunas imágenes para ilustrar lo que sucede:
Desde la distancia, la caja azul se ve perfectamente bien.
Cuando algunos de los vértices van detrás del plano de recorte cercano del jugador, hago la proyección inversa, pero no se ve bien:
focalLength *= -1;
2d.x = x*focalLength/z;
2d.y = y*focalLength/z;
Tenga en cuenta que el cuadro gris detrás se elimina por completo, ya que todos los vértices utilizados para dibujar sus caras están detrás del jugador.
Esto es lo que sucede cuando mira hacia arriba o hacia abajo.
No sé qué hacer con las matemáticas detrás de esto, espero que alguien ya haya encontrado el mismo problema y pueda ayudarme.
lineTo(x,y)
función aún pudiera llamarse, solo que no sé cómo se comporta ... es una dimensión extraña, estoy de acuerdo.