Grafik tiga dimensi dapat diimplementasikan di browser tidak hanya menggunakan WebGL atau
perpustakaan berdasarkan WebGL , tetapi juga dengan rendering sederhana pada kanvas 2D menggunakan fungsi Kanvas HTML5 untuk ini .
Ada banyak buku, artikel, dan informasi di Internet tentang cara menggunakan
HTML5 Canvas untuk menampilkan gambar, grafik, dan bahkan animasi di beberapa permainan browser.
Namun, kemungkinan menggunakan kanvas secara langsung untuk menampilkan objek tiga dimensi hampir tidak pernah dipertimbangkan.
Mari kita bahas ini lebih detail.
Jika permainan komputer tiga dimensi sedang dibuat, misalnya penembak 3D , maka para pengembang mencoba untuk membuatnya serealistis mungkin dan menggunakan akselerator grafis untuk ini. Dalam hal ini, tidak akan mungkin dilakukan tanpa alat perangkat lunak yang sesuai. Untuk gim semacam itu di peramban, masuk akal untuk menggunakan WebGL dan Three.js . Yang paling penting, dengan bantuan shader yang dirancang untuk alat perangkat lunak ini, Anda dapat mencapai pencahayaan realistis dari pemandangan dan benda-benda di TKP.
Tetapi jika Anda hanya perlu menunjukkan objek tiga dimensi dari semua sisi, maka Anda bisa melakukannya tanpa WebGL dan shader . Sebagai contoh, beberapa program CAD / CAM dimaksudkan hanya untuk memodelkan bentuk objek dan tidak melibatkan penggunaan pencahayaan yang realistis.
Di situs Canvas and Geometry , saya secara konsisten dan sangat rinci menjelaskan bagaimana menggunakan Kanvas HTML5 secara eksklusif , Anda dapat membuat gambar model polyhedron 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- . , , , ( ) .
Perpustakaan
canvas2D dibuat untuk membuat model dan ukuran mereka ke kanvas ,
yang sebenarnya merupakan pembungkus kecil di sekitar fungsi HTML5 Canvas .
Pada saat yang sama, fungsi-fungsi yang termasuk dalam pustaka canvas2D dibuat sedemikian rupa sehingga mereka paling nyaman untuk digunakan bersama dengan fungsi-fungsi yang termasuk dalam pustaka
WebGeometry.
WebGeometry. , , 3D- . , . WebGeometry
, , .
. WebGeometri . Jika Anda perlu melakukan transformasi seperti itu, maka fungsi yang sesuai dapat ditemukan, jika Anda menggunakan three.js , maka di perpustakaan ini sendiri atau di perpustakaan glMatrix yang populer
Namun, kedua perpustakaan yang disebutkan ini praktis tidak memiliki fungsi untuk memecahkan masalah geometri analitik.
Oleh karena itu, perpustakaan fungsi WebGeometry dibuat . Perpustakaan
Sylvester memiliki beberapa (tetapi tidak semua diperlukan) fungsi-fungsi seperti itu, dan oleh karena itu saya memutuskan untuk membuat perpustakaan sepenuhnya cocok untuk tugas-tugas saya dari awal berdasarkan pada fungsi yang ada di 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).
Halaman, Anda bisa pergi ke halaman situs ini yang berisi 36 model berbagai potongan.
Tampilan pada halaman ini dilakukan menggunakan API WebGL murni.
Juga dari sini Anda dapat men-download exe- file program saya untuk Windows dibuat di C / C ++
dan OpenGL untuk melihat model cut. File DLL dari beberapa model diunduh dari halaman yang sama.
- Di halaman
Shine on You Crazy Diamond! di situs yang sama, Anda dapatbergerak di sekitar panggungke musik Pink Floyd dan grup musik lainnya dan melihat model yang dipotong. Kontrol gerak - mouse dan keyboard (←, →, ↑, ↓, <,>) seperti di game komputer. Tampilan dilakukan menggunakan three.js .
Menurut saya, ternyata sangat menarik. Jangan lupa menyalakan suara saat menonton!
Saya harap situs saya akan membantu mereka yang mempelajari dan menggunakan grafik 3D dan geometri komputasi. Selain menjelajahi situs, Anda dapat pergi ke repositori saya .
Terima kasih semuanya telah menonton artikel saya!