Los gráficos tridimensionales se pueden implementar en el navegador no solo utilizando WebGL o
bibliotecas basadas en WebGL , sino también mediante un simple renderizado en un lienzo 2D utilizando las funciones de HTML5 Canvas para esto .
Hay muchos libros, artículos e información en Internet sobre cómo usar
HTML5 Canvas para mostrar dibujos, gráficos e incluso animaciones en algunos juegos de navegador.
Sin embargo, la posibilidad de usar directamente el lienzo para mostrar objetos tridimensionales casi nunca se considera.
Detengámonos en esto con más detalle.
Si se crea un juego de computadora tridimensional, por ejemplo, un juego de disparos en 3D , entonces los desarrolladores intentan hacerlo lo más realista posible y usan aceleradores gráficos para esto. En este caso, no será posible prescindir de las herramientas de software adecuadas. Para tales juegos en el navegador, tiene sentido usar WebGL y Three.js . Lo más importante, con la ayuda de sombreadores diseñados para estas herramientas de software, puede lograr una iluminación realista de la escena y los objetos en la escena.
Pero si solo necesita mostrar un objeto tridimensional desde todos los lados, puede prescindir de WebGL y sombreadores . Por ejemplo, algunos programas CAD / CAM están destinados únicamente a modelar la forma de los objetos y no implican el uso de iluminación realista.
En el sitio de Canvas y Geometry , constantemente y con gran detalle explico cómo, utilizando exclusivamente HTML5 Canvas, puede crear imágenes de modelos de poliedros en 3D .
Three.js , 30 () Three.js
3D- three.js. HTML5 Canvas. . .
— three.js . .
, -:
- , ..
- .
- .
- ( three.js RayCaster').
- .
- . / .
- 3D- . three.js .
- .
- .
- .
WebGL/three.js — Z-.
Canvas ( ) .
online- JavaScript.
, prototype WebGeometry, . prototype. JavaScript. «», . .
C/C++ JavaScript .
, ( Chrome Firefox) Notepad++ JavaScript — —
.
, .
.
( ) Visual Studio.
, ,
Visul C++ . Chrome Firefox .
JavaScript React, Angular, Vue.
. . ( ) ES6.
.
online- . , , , ( ) .
La biblioteca
canvas2D se creó para representar los modelos y dimensionarlos en el lienzo ,
que en realidad es un pequeño contenedor alrededor de las funciones HTML5 Canvas .
Al mismo tiempo, las funciones incluidas en la biblioteca canvas2D están hechas de tal manera que son más convenientes de usar junto con las funciones incluidas en la biblioteca
WebGeometry.
WebGeometry. , , 3D- . , . WebGeometry
, , .
. WebGeometry . Si necesita realizar tales transformaciones, puede encontrar las funciones correspondientes, si usa three.js , entonces en esta biblioteca o en la popular biblioteca glMatrix
Sin embargo, estas dos bibliotecas mencionadas prácticamente no tienen funciones para resolver problemas de geometría analítica.
Por lo tanto, se realizó la biblioteca de funciones WebGeometry . La biblioteca
Sylvester tiene algunas (pero no todas) funciones de este tipo, y por lo tanto decidí hacer una biblioteca completamente adecuada para mis tareas desde cero en función de las funciones existentes en C / C ++ .
, three.js.
OpenGL OpenGL .
, , .
, ,
:
Three.js 16 WebGeometry ( ), three.js.
Diamond Cuts 7 WebGeometry three.js. .
three.js.
Diamond Cuts collection in environments
Diamond Cuts with Dispersion Light .
three.js.
Visual C++ . (three.js API WebGL).
Páginas, puede ir a las páginas de este sitio que contienen 36 modelos de varios cortes.
La visualización en estas páginas se realiza utilizando la API pura de WebGL .
También desde aquí puede descargar elarchivo ejecutable de mi programa para Windows hecho en C / C ++
y OpenGL para ver modelos de corte. Los archivos DLL de varios modelos se descargan de la misma página.
- En las páginas
¡Sigue brillando, diamante loco! en el mismo sitio, puedesmoverte por el escenariocon la música de Pink Floyd y otros grupos de música y mirar los modelos de corte. Control de movimiento: mouse y teclado (←, →, ↑, ↓, <,>) como en los juegos de computadora. La visualización se realiza utilizando three.js .
En mi opinión, resultó muy interesante. ¡No olvides activar el sonido mientras miras!
Espero que mis sitios ayuden a quienes estudian y usan gráficos 3D y geometría computacional. Además de los sitios de navegación, puede ir a mi repositorio .
¡Gracias a todos por ver mi artículo!