Herkese Merhaba, Bu yazı dizisinde sizlere Babylonjs ile ilgili bilgiler aktaracağım.
Öncelikle bazı terimleri ve teknolojileri açıklayarak bir giriş yapmak istiyorum. AR artırılmış gerçeklik, VR sanal gerçeklik olarak biliniyor. Herkes az ya da çok bu terimlere aşinadır. Fakat son zamanlarda sık sık duymaya başladığımız bir WebXR kavramı var. Bu kavram da nerden çıktı? Ne gerek vardı ki şimdi buna? Diyenler olabilir. Fakat dünya çapında bu alana ciddi bir yatırım var. İlerleyen zamanlarda karşımıza bolca çıkacak bir terim.
Umarım bu yazı, 3D Web uygulamaları/oyunları geliştirmek isteyenler için güzel bir rehber olur. Hazırsanız başlayalım!
WebGL nedir?
WebGL, uyumlu herhangi bir web tarayıcısında etkileşimli 2D ve 3D grafikler oluşturmak için kullanılan bir Javascript API'dir: bu, herhangi bir eklenti olmadan, yerel olarak tarayıcıya entegre olduğu anlamına gelir.
WebXR nedir?
Karma gerçeklik olarak da bilinen WebXR, özellikle WebGL teknolojisini kullanarak tamamen web browserlar üzerinde çalışan AR/VR uygulamalarının genel adıdır. Yanlış duymadınız, herhangi bir uygulama indirmenize gerek kalmadan, telefon, tablet ve bilgisayarınıza ekstra bir eklenti ya da program kurmadan sadece browser sayesinde bu tür gerçeklik deneyimlerini yaşayabileceksiniz. Yani işin özeti web sitelerinin artık 2 boyutunda ötesine geçtiği bir döneme başlıyoruz.
Babylonjs nedir?
Son zamanlarda web alanında çığır açan yeni teknolojileri ve javascript’in büyük bir hızla gelişmesini hayranlıkla takip ediyoruz. Yukarıda da bahsettiğim gibi WebXR bu denli hızla gelişirken ve JavaScript derya deniz büyürken, bu teknolojiye ayak uydurmak isteyen bizler için 3 Boyutlu Objeleri, şekilleri, tasarımları, grafikleri, aklınıza gelebilecek 3D her şeyi Web ortamına aktarmamız gerektiği zaman devreye Babylonjs giriyor. Babylonjs ile ister oyun yapın ister, 3D olarak ürünlerinizi sitenize ekleyin, isterseniz de 3D yapılar tasarlayın. Neler yapabileceğiniz konusunda fikir sahibi olmak için resmi sitesine bir göz atmanızı tavsiye ederim. (https://www.babylonjs.com/
)
Babylonjs, WebGL tabanlı ve açık kaynak kodlu JavaScript 3D motorudur. Ana kurucuları 3 kişiden oluşuyor.
- Deltakosh olarak da bilinen baş geliştirici David Catuhe (Lead Developer)
- David Rousset (Developer)
- Michel Rousseau (3D artist)
(Bu abiler Microsoft’ta çalışıyor fakat korkmanıza gerek yok bu ileride Babylonjs’in ücretli olacağı anlamına gelmiyor. Bizzat kendilerinin forumlarda sorulan bu tarz bir soruya “Evet biz Windows’ta çalışıyoruz fakat Babylonjs oluşumunun Windows ile bir alakası yok. Bu yüzden, bundan önce olduğu gibi bundan sonra da her zaman açık kaynak kodlu ve ücretsiz kalacak.” şeklinde bir cevapları vardı.)
Babylonjs için nasıl export alabilirim?
Babylonjs in güzellikleri saymakla bitmiyor. 3DSMax, Blender, Maya, Unity gibi popüler ve herkesçe yetenekleri kabul görmüş programlardan export alarak bunu direk projenize dahil edebiliyorsunuz. Export ederken *.babylon uzantılı çıktı alabiliyorsunuz. Bu da güzel bir özellik fakat “Benim elimde önceden modellenmiş şeyler var ve .babylon uzantılı değil.”, “Benim kullandığım 3D programında .babylon uzantılı export alamıyorum.”, “Sadece .babylon uzantılı şeyler mi çalışıyor?” gibi cümleler kurduğunuzu duyar gibiyim. Burada da yine Babylonjs’in güzellikleri devreye giriyor. Babylonjs içerisine *.gltf, *.glb, *.obj, *.stl, *dds, *hdr gibi farklı uzantılardaki projelerinizi de import edebililyorsunuz.
Hoşunuza gidebilecek kullanışlı linkler:
Açık kaynak kodlu olduğunu söylemiştim incelemek isteyenler için şuraya Babylonjs’in Github hesabını koyuyorum https://github.com/BabylonJS/Babylon.js. Şuraya da ana giriş sayfasını koyuyorum, örnekleri inceleyebilir, dökümanı kurcalayabilir, kısacası Babylonjs ile ilgili her şeye bu siteden ulaşabilirsiniz: https://www.babylonjs.com/
.
Babylonjs projeleri geliştirirken 3D modellerinizi sadece sürükle bırak şeklinde görebileceğiniz link: https://sandbox.babylonjs.com/
Babylonjs için sıfırdan proje oluşturmanıza, farklı programlarda oluşturduğunuz modeller üzerinde değişiklikler yaparak export almanıza yardımcı olan link: http://editor.babylonjs.com/
İnsanların birbirleri ile yardımlaşması ve genel olarak Babylonjs’i anlamak için kullanılan, sol tarafta yazdığınız kodların ekranın sol üst köşesinde bulunan run butonuna tıkladıktan sonra hemen ekranın sağ tarafında yaptığınız değişiklikleri görsel olarak gösteren en çok vakit geiçreceğiniz linklerden biri olan (kendi deyimleri ile oyun alanı): https://playground.babylonjs.com/
Ve en güzelini en sona sakladım. Bence Babylonjs’i bu kadar güzel yapan en büyük detay, bir aile havasında olan forum sitesi. Bu konuya gerçekten önem veriyorlar. Bu kütüphaneyi bize sunan Sayın David Catuhe’un (nam-ı diğer “Deltakosh”) bile sorduğunuz en ufak soruya dahi cevap verdiği hoş sohbet, bol bilgi ve aradığınız tüm soruların cevaplarına ulaşabileceğiniz güçlü bir topluluk. İki tane link bırakacağım çünkü bir kaç ay önce yeni forum sitesine geçildi. İlk link eski forum için (Eski dediysem çok da eski değil. Bir çok bilgiye hala buradan ulaşacağınıza eminim): http://www.html5gamedevs.com/forum/16-babylonjs/
, Bir diğeri de yeni olan forum sitesi: https://forum.babylonjs.com/
.
Sanırım bu kadar teorik bilgi yeterli. Eğer sorularınız varsa, aklınıza takılan şeyleri yorum olarak yazabilirsiniz. Bir sonraki yazımda Babylonjs ile basit projeler oluşturmaya ve sizi Web’in 3D boyutuyla tanıştırmaya başlayacağım. Takipte kalın çok eğleneceğiz :”)