WebGL ve three.js'yi öğrenme [kapalı]

Yeniyim ve web tarayıcılarındaki 3D bilgisayar grafikleri hakkında bilgi edinmeye başladım. Bir tarayıcıda 3D oyunlar yapmakla ilgileniyorum. Hem WebGL'yi hem de three.js'yi öğrenen herkes için ...

1. Three.js kullanmak için WebGL bilgisi gerekli mi?

2. Three.js ile WebGL kullanmanın avantajları nelerdir?

Büyük istekleriniz olduğundan, temelleri öğrenmek için zaman ayırmanız gerekir. Bu ilk önce ne öğrendiğinizle ilgili değildir - isterseniz aynı anda öğrenebilirsiniz. (Ben de öyle yaptım.)

Bu, anlamanız gereken anlamına gelir:

1. WebGL kavramları
2. Three.js
3. Temel matematik kavramları

Three.js. Three.js, WebGL'nin ayrıntılarının çoğunu soyutlamak için mükemmel bir iş çıkarır, bu yüzden şahsen, projeniz için Three.js'yi kullanmanızı öneririm. Ama Three.js içinde hatırlayın, alfa ve bunun için hazır olmak zorunda bu yüzden sık sık değişiyor. Çoğu insan bu örnekleri inceleyerek Three.js'yi öğrenir. Güncel olmayan kitaplardan ve öğreticilerden kaçının ve internetten kütüphanenin eski sürümlerine bağlantı veren örneklerden kaçının.

WebGL. Three.js kullanıyorsanız, WebGL'de nasıl programlayacağınızı bilmenize gerek yoktur, sadece WebGL kavramlarını anlamanız gerekir. Bu, başka birinin WebGL kodunu okuyabilmeniz ve ne okuduğunuzu anlayabilmeniz gerektiği anlamına gelir. Bu, sıfırdan bir WebGL programı yazmanızın beklenmesinden çok daha kolay. WebGLFundamentals.org ve Learning WebGL'deki başlangıç ​​öğreticisi gibi, internet üzerindeki öğreticilerden herhangi birini kullanarak WebGL kavramlarını yeterince iyi öğrenebilirsiniz .

Matematik. Yine, en azından kavramları anlamanız gerekir. Üç iyi kitap:

1. Grafik ve Oyun Geliştirme için 3D Matematik Astarı Fletcher Dunn ve Ian Parberry

2. Oyunlar ve İnteraktif Uygulamalar için Temel Matematik: James M. Van Verth ve Lars M. Bishop'un Programcı Kılavuzu

3. 3D Oyun Programlama ve Bilgisayar Grafikleri için Matematik Eric Lengyel

Umarım bu sana yardımcı olur. İyi şanslar.

Çok iyi bir çevrimiçi kurs var - THREE.js'de https://www.udacity.com/course/cs291 adresinde Etkileşimli 3D Grafikler . Bu kurs aynı zamanda uygulamalı deneyim elde etmek için ödevler içerir. Three.js ve Bilgisayar Grafiklerinin tüm temel kavramlarını kapsar

Kişisel düşüncelerim şunlardır:

• Bol zamanınız varsa, her ikisini de öğrenebilirsiniz, ancak WebGL'nin Three.js'den çok daha düşük bir seviyede olduğunu unutmayın.
• İlk bir 3d proje için uzmanlar, terimlere ve genel 3d modele alışmak için Three.js gibi bir kütüphane kullanmanızı önerir.

Hangi yöne gitmeyi seçerseniz seçin, lineer cebir becerilerinizi öğrenmenizi / cilalamanızı öneririm . Ardından devam edin ve MVP boyutları (Model Görünümü Projeksiyonu) hakkındaki anlayışınızı öğrenin veya cilalayın . Three.JS bunun çoğunu soyutlayabilir, ancak herhangi bir 3D geliştirme hakkında ciddiye almadan önce bu kavramları iyi anlamanın anahtarı olduğunu düşünüyorum.

OpenGL ile 3D programlamayı ilk öğrendiğimde MVP hakkında bir giriş yazısı yazdım . Bu dönüşüm matrislerinin ne olduğunu ve çeşitli boyutlar / uzaylarla nasıl ilişkili olduklarını açıklayabilene kadar, ekranda herhangi bir nesne oluşturabilsem de gerçekten herhangi bir 3D programlama bilmiyordum .

Amacınız oyun oluşturmak olduğundan, kodunuzu daha sonra yazmanıza yardımcı olmak için Three.js gibi bir çerçeve kullansanız bile, önce bazı ham WebGL öğrenmekten çok fayda sağlayacağınızı düşünüyorum.

"WebGL, bir 3D API değil, bir 2D API'dir"

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

Bu makalede, three.js gibi WebGL ve 3d kitaplıkları arasındaki temel farklar açıklanmaktadır.
Bu da WebGL veya Three.js arasındaki seçimimi beyinsiz yaptı.

Bir Unity3D geçmişinden ve aynı zamanda Papervision3D geçmişinden geldim, bu yüzden 3D uzay ile nasıl başa çıkacağımı iyi anladım. Three.js, WebGL projeleriyle nasıl başa çıkacağınızı öğrenmek için ilk adımınızı atmanın yoludur. API çok iyi, çok güçlü ve başka bir 3D teknolojisinden geliyorsanız, çok az zaman harcayacaksınız.

Threejs.org'un örnekleriyle çok zaman geçirdim - bunlardan bir ton var ve sizi doğru yönde çalıştırmak ve koşmak konusunda çok iyi. Belgeler yeterince iyi, özellikle de onları diğer webGL 3D api'lerle karşılaştırıyorsanız.

Ayrıca Unity3D'nin ücretsiz sürümünü ve ücretsiz kolajayı (aldığımda ücretsizdi) ihracatçılarını uygulama mağazasından (Window> App store) almayı düşünebilirsiniz. Sahnemi Unity'de kurmayı ve Three.js ile kullanmak için Collada'ya aktarmayı yeterince kolay buldum.

Ayrıca, Three.js ile kullandığım neo ( http://rockonflash.com/webGL/three/neo.js ) adlı bu sınıfı yayınladım . Sadece projenize ekleyin, sonra Neo.JackIntoThree () çağırın ve projenizde kullanmak için Object3D yöntemlerini / özelliklerini ekleyecektir. Sahne alanınızdaki hataları ayıklarken DrawAllAxis () gibi şeyler paha biçilmezdir.

Eller aşağı olsa da, Three.js gitmek için harika bir yoldur - kendi gölgelendiricilerinizi / nesnelerinizi vb. Yazmanıza izin verecek kadar esnektir ve hedeflerinize ulaşmanıza yardımcı olacak kadar güçlüdür.

Three.js'yi aldım, ancak GLSL'ye atladım ve three.js shaderMaterial ile çok şey denedim. Bunu yapmanın bir yolu - three.js hala sizin için birçok şeyi özetler, ancak aynı zamanda tüm oluşturma (projeksiyon, animasyon) yeteneklerine çok temiz, düşük seviyeli bir erişim sağlar.

Bu şekilde, bu harika açık gl öğreticisi gibi bir şeyi bile takip edebilirsiniz . Matrisleri, yazılan dizileri ayarlamak zorunda değilsiniz, çünkü üçü sizin için zaten ayarladı ve gerektiğinde güncelledi. Gölgelendirici, sıfırdan yazabilirsiniz - basit bir renk oluşturma iki satır GLSL olacaktır. Ayrıca, tüm arabellekleri, tam ekran dörtlüleri ve efektleri yapmanız gereken şeyleri ayarlayan three.js için bir işleme sonrası eklentisi de vardır, ancak gölgelendiricinin başlaması çok basit olabilir.

Programlanabilir gölgelendiriciler modern 3d grafiklerin özü olduğundan, umarım cevabım noktayı kaçırmaz :) Er ya da geç, bunu yapan herkesin en azından kaputun altında neler olduğunu anlaması gerekir, bu canavarın doğasıdır. Ayrıca, homojen uzayda 4. boyutun anlaşılması da muhtemelen önemlidir.

Bu kitap WebGL için iyidir.

Her ikisinden de biraz öğrendim ve webgl'in temellerini anladığımı hissediyorum, webgl hakkında bir girişin yeterli olduğunu düşünüyorum ve sonra üç js'ye atlayın. WebGL'nin temel kavramlarını anladıktan sonra oldukça kolay olacaktır. Kullanışlı bağlantılar:

1. Okuduğum En İyi Giriş: http://dev.opera.com/articles/view/an-introduction-to-webgl/
2. Kapsamlı öğreticiler: http://www.johannes-raida.de/tutorials.htm