Mempelajari WebGL dan three.js [ditutup]

142

Saya baru dan mulai belajar tentang grafik komputer 3D di browser web. Saya tertarik membuat game 3D di browser. Bagi siapa saja yang telah mempelajari WebGL dan three.js ...

  1. Apakah pengetahuan tentang WebGL diperlukan untuk menggunakan three.js?

  2. Apa keuntungan menggunakan three.js vs WebGL?

webgl  three.js 
— r1nzler
sumber
10
Gunakan Three.js. Titik. Persis seperti yang dikatakan Barat di bawah ini, sementara secara teori sederhana, menulis WebGL dari awal adalah menyebalkan. Ada begitu banyak hal yang hampir setiap aplikasi WebGL perlu / ingin lakukan. Hal-hal ini dapat disarikan dari Anda. Juga, Three.js telah matang menjadi perpustakaan yang luar biasa. Jika Anda memeriksa Google Trends atau jumlah Pertanyaan SO di sini, Anda akan melihat bahwa itu telah jauh di depan para pesaing.
— theblang
4
@ GeorgeStocker Sebenarnya, jawaban atas pertanyaan ini tidak didasarkan terutama pada pendapat, tetapi pada fakta, referensi, dan keahlian khusus. Ini telah menjadi pos yang berharga bagi komunitas there.js, dan bagian (2) dari pertanyaan ini tentu dapat diterima. Bagaimana Anda akan merekomendasikan untuk menulis ulang sehingga dapat diterima oleh Anda - yaitu, tanpa mengubah arti / maksud pertanyaan?
— WestLangley
@WestLangley Saya belum mendengar apa pun kecuali pendapat dalam jawaban yang diberikan; belum lagi "Pro dan kontra untuk menggunakan [perpustakaan]" agak terlalu luas untuk Stack Overflow.
— George Stocker
2
@ GeorgeStocker Balasan Anda sendiri merupakan pendapat, dan saya sangat tidak setuju dengan itu. Bagaimana Anda akan merekomendasikan untuk menulis ulang posting sehingga dapat Anda terima?
— WestLangley
1
Mungkin pertanyaan bisa diulangi untuk bertanya bagaimana belajar WebGL bermanfaat untuk menggunakan Three.js. Jawabannya akan didukung oleh fakta, referensi, dan keahlian.
— zz85

Jawaban:

203

Karena Anda memiliki ambisi besar, Anda harus menginvestasikan waktu untuk mempelajari dasar-dasarnya. Ini bukan masalah apa yang Anda pelajari pertama - Anda dapat mempelajarinya secara bersamaan jika Anda mau. (Itu yang saya lakukan.)

Ini berarti Anda perlu memahami:

  1. Konsep WebGL
  2. Three.js
  3. Konsep matematika yang mendasarinya

Three.js. Three.js melakukan pekerjaan yang sangat baik untuk mengabstraksi banyak detail WebGL, jadi secara pribadi, saya sarankan menggunakan Three.js untuk proyek Anda. Tapi ingat, Three.js ada dalam alpha , dan itu sering berubah, jadi Anda harus siap untuk itu. Kebanyakan orang mempelajari Three.js dengan mempelajari contoh-contohnya. Hindari buku dan tutorial yang ketinggalan zaman, dan hindari contoh-contoh dari internet yang tertaut ke versi lama perpustakaan.

WebGL. Jika Anda menggunakan Three.js, Anda tidak perlu tahu cara memprogram di WebGL, Anda hanya perlu memahami konsep-konsep WebGL. Itu artinya, Anda hanya perlu bisa membaca kode WebGL orang lain dan memahami apa yang Anda baca. Itu jauh lebih mudah daripada yang diharapkan untuk menulis program WebGL sendiri dari awal. Anda dapat mempelajari konsep-konsep WebGL dengan cukup baik menggunakan salah satu tutorial di internet, seperti tutorial pemula di WebGLFundamentals.org dan Learning WebGL .

Matematika Sekali lagi, Anda setidaknya perlu memahami konsepnya. Tiga buku bagus adalah:

  1. Primer Matematika 3D untuk Pengembangan Grafis dan Game oleh Fletcher Dunn dan Ian Parberry

  2. Matematika Penting untuk Permainan dan Aplikasi Interaktif: Panduan Programmer oleh James M. Van Verth dan Lars M. Bishop

  3. Matematika untuk Pemrograman Game 3D dan Grafik Komputer oleh Eric Lengyel

Saya harap ini dapat membantu anda. Semoga berhasil.

— WestLangley
sumber
apa situs terbaik untuk belajar tentang konsep webgl dari awal hingga akhir dalam bahasa Inggris yang mudah. Atau setidaknya setiap kali penulis menggunakan 'kata', dia melakukannya setelah menjelaskannya sekali sebelum membangunnya.
— Muhammad Umer
Lihat tautan ke tutorial Belajar WebGL di badan tulisan.
— WestLangley
22

Ada kursus online yang sangat bagus - Grafis 3D Interaktif di https://www.udacity.com/course/cs291 di THREE.js. Kursus ini termasuk tugas juga untuk mendapatkan pengalaman langsung. Ini mencakup semua konsep dasar Three.js dan Komputer Grafik

— Bhupendra
sumber
13

Pikiran pribadi saya adalah sebagai berikut:

  • Jika Anda punya banyak waktu, Anda bisa mempelajari keduanya, tetapi perhatikan bahwa WebGL jauh lebih rendah daripada Three.js.
  • Untuk proyek 3d pertama, para ahli menyarankan untuk menggunakan perpustakaan seperti Three.js agar terbiasa dengan istilah dan model 3d umum.
— Dan D.
sumber
3
Saya setuju dengan ini. Pada titik ini sepertinya bisa menjadi hal yang baik untuk memiliki keduanya di sabuk alat Anda. Saya akan mulai dengan mempelajari Three.JS, kemudian melakukan beberapa shader dengan GLSL dan terus mencoba mempelajari lebih lanjut tentang WebGL.
— Cory Gross
11

Ke mana pun Anda memilih untuk pergi, saya sarankan Anda mempelajari / memoles keterampilan aljabar linier Anda . Lalu, lanjutkan dan pelajari atau poles pemahaman Anda tentang dimensi MVP (Model View Projection) . Three.JS dapat mengabstraksi banyak dari itu, tapi saya pikir itu kuncinya adalah bahwa seseorang memahami konsep-konsep itu dengan baik sebelum menjadi serius tentang perkembangan 3D.

Saya menulis artikel pengantar tentang MVP ketika saya pertama kali belajar pemrograman 3D dengan OpenGL. Saya menyadari bahwa sampai saya dapat menjelaskan apa itu matriks transformasi, dan bagaimana mereka berhubungan dengan berbagai dimensi / ruang, saya benar-benar tidak tahu pemrograman 3D sama sekali, meskipun saya bisa membuat objek ke layar.

Karena tujuan Anda adalah membuat game, saya pikir Anda akan mendapat banyak manfaat dari mempelajari beberapa WebGL mentah terlebih dahulu, bahkan jika Anda akhirnya menggunakan kerangka kerja seperti Three.js untuk membantu Anda menulis kode Anda nanti.

— rodrigo-silveira
sumber
10

"WebGL adalah API 2D dan bukan API 3D"

http://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-library.html

Artikel ini menjelaskan perbedaan mendasar antara perpustakaan WebGL & 3d seperti three.js.
Yang membuat pilihan saya antara WebGL atau Three.js no-brainer.

— Bob Fanger
sumber
Kutipan ini bukan dari teks utama halaman yang ditautkan. Saya menerima sebagian argumen yang dinyatakan di halaman tertaut. Bukan tentang menjadi API 2D, tetapi tentang menjadi API rasterisasi (yang cocok untuk grafik 2D dan 3D).
— Elias Hasle
6

Saya berasal dari latar belakang Unity3D dan juga Papervision3D pada hari itu, jadi saya memiliki pemahaman yang baik tentang bagaimana menangani ruang 3D. Three.js adalah cara untuk memulai lompatan awal Anda dalam mempelajari cara menangani proyek-proyek WebGL. Api sangat bagus, sangat kuat dan jika Anda datang dari teknologi 3D lain, Anda akan siap dan berjalan dengan sedikit waktu.

Saya menghabiskan banyak waktu dengan contoh-contoh Threejs.org - ada banyak dari mereka dan mereka sangat baik membuat Anda pergi dan berlari ke arah yang benar. Docs cukup layak, terutama jika Anda membandingkannya dengan api webGL 3D lain di luar sana.

Anda mungkin juga mempertimbangkan untuk mendapatkan versi gratis dari Unity3D dan pengekspor collada gratis (gratis ketika saya mendapatkannya) dari app store mereka (Window> App store). Saya merasa cukup mudah untuk mengatur adegan saya di Unity dan mengekspornya ke Collada untuk digunakan dengan Three.js.

Juga, saya memposting kelas ini yang saya gunakan dengan Three.js disebut neo ( http://rockonflash.com/webGL/three/neo.js ). Cukup tambahkan ke proyek Anda, lalu panggil Neo.JackIntoThree () dan itu akan menambahkan metode / properti ke Object3D untuk digunakan dalam proyek Anda. Hal-hal seperti DrawAllAxis () sangat berharga ketika men-debug adegan Anda dll.

Meskipun begitu, Three.js adalah cara yang hebat untuk digunakan - cukup fleksibel untuk memungkinkan Anda menulis shaders / objek Anda sendiri, dll, dan cukup kuat di luar kotak untuk membantu Anda mencapai tujuan Anda.

— neoRiley
sumber
3

Saya mengambil three.js, tetapi juga melompat ke GLSL dan bereksperimen banyak dengan shaderMaterial three.js. Salah satu cara melakukannya - three.js masih mengabstraksi banyak hal untuk Anda, tetapi juga memberi Anda akses yang sangat bersih, tingkat rendah ke semua kemampuan rendering (proyeksi, animasi).

Dengan cara ini, Anda dapat mengikuti bahkan sesuatu seperti tutorial open-gl yang mengagumkan ini . Anda tidak perlu mengatur matriks, mengetik array, karena tiga sudah mengaturnya untuk Anda, memperbaruinya ketika diperlukan. Namun shader, Anda dapat menulis dari awal - rendering warna sederhana adalah dua baris GLSL. Ada juga plug-in pemrosesan pos untuk three.js yang mengatur semua buffer, paha depan layar penuh dan hal-hal yang perlu Anda lakukan efeknya, tetapi shader dapat menjadi sangat sederhana untuk memulai.

Karena shader yang dapat diprogram adalah inti dari grafik 3d modern, saya harap jawaban saya tidak ketinggalan intinya :) Cepat atau lambat, siapa pun yang melakukan ini perlu setidaknya memahami apa yang terjadi di bawah tenda, itu adalah sifat binatang itu. Juga, memahami dimensi ke-4 dalam ruang homogen mungkin juga penting.

Buku ini bagus untuk WebGL.

— pailhead
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.