Os gráficos tridimensionais podem ser implementados no navegador, não apenas usando o WebGL ou
bibliotecas baseadas no WebGL , mas também pela simples renderização em uma tela 2D usando as funções da tela HTML5 para isso .
Existem muitos livros, artigos e informações na Internet sobre como usar o
HTML5 Canvas para exibir desenhos, gráficos e até animações em alguns jogos de navegador.
No entanto, a possibilidade de usar diretamente a tela para exibir objetos tridimensionais quase nunca é considerada.
Vamos nos debruçar sobre isso com mais detalhes.
Se um jogo de computador tridimensional estiver sendo criado, por exemplo, um jogo de tiro em 3D , os desenvolvedores tentarão torná-lo o mais realista possível e usar aceleradores gráficos para isso. Nesse caso, não será possível ficar sem as ferramentas de software apropriadas. Para esses jogos no navegador, faz sentido usar o WebGL e o Three.js . Mais importante ainda, com a ajuda de shaders projetados para essas ferramentas de software, você pode obter iluminação realista da cena e objetos na cena.
Mas se você só precisa mostrar um objeto tridimensional de todos os lados, pode ficar sem o WebGL e os shaders . Por exemplo, alguns programas CAD / CAM destinam-se apenas à modelagem da forma dos objetos e não envolvem o uso de iluminação realista.
No site Canvas and Geometry , explico de forma consistente e detalhada como, usando exclusivamente o HTML5 Canvas, é possível criar imagens de modelos 3D de poliedros.
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- . , , , ( ) .
A biblioteca
canvas2D foi criada para renderizar os modelos e dimensioná-los na tela ,
que é na verdade um pequeno invólucro em torno das funções da tela HTML5 .
Ao mesmo tempo, as funções incluídas na biblioteca canvas2D são feitas de maneira a serem mais convenientes para serem usadas junto com as funções incluídas na biblioteca
WebGeometry.
WebGeometry. , , 3D- . , . WebGeometry
, , .
. WebGeometry . Se você precisar executar essas transformações, as funções correspondentes poderão ser encontradas, se você usar three.js , nesta própria biblioteca ou na popular biblioteca glMatrix
No entanto, essas duas bibliotecas mencionadas praticamente não têm funções para resolver problemas de geometria analítica.
Portanto, a biblioteca de funções WebGeometry foi criada . A biblioteca
Sylvester possui algumas (mas nem todas são necessárias) essas funções e, portanto, decidi tornar uma biblioteca completamente adequada para minhas tarefas do zero, com base nas funções existentes em 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, você pode acessar as páginas deste site que contêm 36 modelos de vários cortes.
A exibição nessas páginas é feita usando a API WebGL pura.
Também a partir daqui, você pode baixar oarquivo exe do meu programa para Windows, feito em C / C ++
e OpenGL, para visualizar modelos de corte. Arquivos DLL de vários modelos são baixados da mesma página.
- Nas páginas
Brilhe em você Crazy Diamond! no mesmo site, você podemover-se pelo palcocom as músicas do Pink Floyd e de outros grupos musicais e ver os modelos cortados. Controle de movimento - mouse e teclado (←, →, ↑, ↓, <,>) como nos jogos de computador. A exibição é feita usando three.js .
Na minha opinião, ficou muito interessante. Não se esqueça de ligar o som enquanto assiste!
Espero que meus sites ajudem quem estuda e usa gráficos 3D e geometria computacional. Além de navegar nos sites, você pode ir ao meu repositório .
Obrigado a todos por assistirem ao meu artigo!