"bir yazılımcının not defteri.."

12 Aralık 2011 Pazartesi

WeBGL - 1 / İlk Basit Uygulama

Herkese Merhaba,
nihayet bugün ilk küçük WebGL uygulamamız ile olaya bir giriş yapacağız; ki daha ileri uygulamalarımız için bir başlangıç yapmış olalım.

Hatırlayın: WebGL, OpenGL tabanlı idi ve olay malum (2D yi de kapsayan) 3D ile ilgilidir. Dolayısı ile kodlamaya geçmeden önce bazı 3D terimleri ve temel kavramları bilmemiz gerekiyor. Geçmişte 3D development ile uğraşmamış kişiler için bunlar iyi bilinen kavramlar değildir. O yüzden önce bazılarının üzerlerinden kısaca geçelim :

OpenGL :
“Open Graphics Libary” nin kısaltılmışıdır. Open, yani açık oluşu onun kodlarını platformlar arası ortak, ve dolayısı ile de “taşınabilir“ kılmıştır.  OpenGL Bir API dir, yani  “Application Programming Interface”. DirectX desteği mevcuttur.

OpenGL ES :
“Embedded Systems” yani OpenGL nin daha küçük cihazlar için özelleştirilmiş olan compact (mini) versiyonudur. Ki bugün mobile sistemlerde çalışan OpenGL ES de budur. İlk olarak 2008 yılında ortaya çıkarılmıştı ancak bir türlü yaygınlaşamadı. Günüzümüzde başta Google in desteği ile OpenGL ES mobil platformlar ve cihazlar için ortak 3D arabirim standardı olmuştur. Normal OpenGL çok geniş ve kapsamlı olduğundan ve tamamının bir cep telefonunda desteklenmesi olası olmadığından, OpenGL ES de OpenGL in bazı özellikleri kısıtlanarak sunulmaktadır.

WebGL :  OpenGL ES in tarayıcılarda desteklenen web sürümüdür. Hiçbir plugin gerektirmeden web ortamında doğal bir şekilde çalışır. WebGL kodları tıpkı html gibi server dan client tarafına yollanan bir metinsel koddur; yani scripttir. OpenGL temelli olsa da, browser tarafında yorumlanarak çalıştığı için doğrudan sisteme özel yazılmış programlar kadar hızlı olamaz. Sonuçta kodların hiçbiri önceden derlenmiş halde değildir. Yani PC mizde çalışan  " Call of Dutty "  gibi oyunları web sayfalarımızda görmek için biraz erken...  :)  WebGL in syntax ı javascriprt tir. Bu bize (sisteme özel yazılmış binary programlara oranla) biraz zaman ve performans kaybettirir. Ama şahsen ben gelecekten çok ümitliyim...

FOV (field of view) :
Ekrandaki görüş açısının genişliğidir. Yani 3D uygulamanın ekrandaki görsel bakış alan genişlik değeridir. FOV değeri arttıkça ekranda görülen obje sayısı artar. Bu durum 3D uygulamaya (özellikle de oyunlara) hakimiyet açısından olumlu olabilse de, sistem ve ekran kartındaki yükü artırır. FOV uzaklık ayarı değildir. Kamera uzaklığı ayrı bir konu; FOV sadece geniş görmeyi sağlar. Nasıl ki biz insanlar sadece önümüzü görebiliyor iken, bir sinek arkasını bile görebilir? Bunu  sebebi insan gözünün FOV değerinin en fazla 90 - 100 derece olabilmesidir. Sineklerde ise bu değer en az 270 - 300 dür. (İnsanlar evrim geçirmeye devam ederse ilerde sinek gibi gözlerimiz bile olabilir dermişim :)) WebGL uygulamalarda yaygın olarak 45 derecelik açı kullanılır ve yeterlidir. Olay sizin seçiminize kalmışsa da pratikte en geniş FOV değeri 180 i geçmez. (Quake oynarken bu değeri 105 olarak belirlerim)

VERTEX :
3D uzaydaki bir noktadır. X, Y ve Z kordinat bilgilerinden oluşur. Bu üç rakamsal değer float yani ondalık sayı formatındadır. Orijin belirtmek için “0, 0, 0” değerini kullanırız. Bu konuda özellikle Z ekseni önem arz eder çünkü karşımızdaki ekranın uzaklığı (yani ileri doğru yön) -Z eksenidir. O yüzden 2D objelerin vertex noktalarının Z eksen değeri sıfırdır. Çünkü 2D objesinin bize uzaklığı söz konusu değildir. Doğrudan ekrannın camında yapışıktır :)

PRIMITIVE :
basit geometrik şekiller demektir. temel şekiller örneğin : Sphere (küre) , Cube (küp), Plane (düzlem), Cylinder (silindir) vs.. gibi. Three.js de bu tür primitive şekilleri kod ile kolayca yaratabiliriz.

SHADER :
Kısaca ekranda neyin hangi durumda nasıl görüneceğini belirler. Aydınlatma ve yansıma sistematiğidir. Daha çok yüzeyler ile ilgilidir. Görüntülenme özellikleri / efektleri topluluğudur. Biraz daha açalım; bir yüzeyi bir doku ile kapladınız, ışıklandırdınız, ama ilaveten; yakınken şöyle uzakken şöyle, yansıma da şöyle, gölge de şöyle, şu durumda böyle... vs vs.. şeklinde ilave effektler vermek isterseniz? işte bu efektler bütününe shader denir. Shader lar çıktının gerçekçi ve kaliteli görünmesi açısından önemli bir konudur. Yani herşey texture kaplama ve ışıklandırma ile bitmiyor,, shader ile onu gerçekçi kılmak gerekiyor. Normalde render edilen herşey için bir de shader yazmak zorundayız. Shader konusu zaten başlı başına büyük ve karmaşık bir konudur. Shaderlar OpenGL Shader Language (GLSL) ile yazılır. Three.js içinde hali hazırda kullanımı kolay shader nesneleri bulunduğu gibi kendi shader imizi üretmek için MeshShaderMaterial nesnesi mevcuttur.

MATERIAL :
3D nin bir başka temel terimi olan material kabaca şekil ve şekle verilen doku kaplama sistematiğinin tümü demektir. Belli bir dokuya texture dendiğini biliyorsunuzdur. Ancak material doku bilgisine istinaden, renk bilgisi ve dokunun şekle nasıl giydirileceği bilgisi ve ila... sistematiklerin tümünü içerir. Materialler three.js nin en önemli parçalarından biridir ve çok kullanılırlar. Detaylarını şu aşamada bende bilmiyorum ama sıkça kullanacağımız 3 temel material olacak :

1. MeshBasicMaterial
2. MeshLambertMaterial
3. MeshPhongMaterial

bu üçünün kullanımı oldukça kolay ama ilaveten :

4. MeshNormalMaterial
5. MeshDepthMaterial
6. MeshFaceMaterial
7. MeshShaderMaterial

tipleri de mevcuttur. Birazdan örneğimizde MeshLambertMaterial nesnesini kullanarak basitçe renk kaplaması yapacağız.


MESH :
Şu 3D cilerin “tel kafes” dedikleri şeydir. Yani bir objenin çizgilerle tasarlanan ilk hali. Daha sonra bu tel kafese texture (doku) giydirilerek son görüntü elde edilir. Peki bu tel kafes nasıl elde ediliyor? Bir çok vertex noktasının bir araya gelmesi ile... Vertex noktaları çizgilerle birleştirilerek üçgenler ya da dörtgenler bütünlüğü bir şekil oluşturuyor. Şeklin karmaşıklığı arttıkça bu çizgilerin sıklığı ve sayısı da artar. Sadece karışık şekillerde değil, yumuşak yüzeyler elde elmek için bu çizgilerden hayli fazla kullanılır. Bu da sayısız vertex noktası ve 3D motora ve dolayısı ile ekran kartına binen yük demektir. Benzer şekilde bir objenin hareket etmesi demek,, her bir sonraki anda o objeyi oluşturan noktaların (vertex) tekrar tekrar yeni yerlerinin hesaplanması ve çizilmesi demektir. Yani tel kafesi yaptıktan sonra onlara bir materyal giydiririz. Mesh ler Three.Mesh komutu ile yaratılır ve bu komut iki parametre alır,, ilk parametre meshi tanımlayan obje,  ikincisi ise o mesh e uygulanan meterialdir.

X, Y, Z Eksenleri :
webGL web de çalıştığından X ekseni web sayfasının sağ ve sol köşelerine doğru hareket sağlar. Y ekseni malum, yukarıya ve aşağıya hareketlilik sağlar. Z ekseni ise Objeleri göz hizamızda ileri geri hareket ettirerek onları yakınlaştırıp uzaklaştıır. Z ekseninin eksi değeri ileri harekettir. Artı değeri ise bize doğru yaklaşma hareketidir. Orijin 0, 0, 0 noktasıdır.

THREE.JS (kütüphanesi) :
WebGL ilk gözattığımda ekrana basit bir üçgen çizmek için bile çok fazla kod yazılması gerektiğini farkettim. Bunun daha kolay yolu olmalı diye düşünürken tam da tahmin ettiğim gibi daha üst seviyeli hazır kütüphanelerin olduğunu gördüm. Bunlardan ilk makalemde de bir miktar bahsetmiştim. Bu kütüphanelerin bazıları düşük seviyeli bazıları ise çok daha yüksek seviyeli dir. Ben düşük sayılabilecek seviyedeki Three.js i tercih ettim. Yazılarımı da ona göre yazacağım. Eğer ileride bir değişiklik söz konusu olmaz ise tabiki..

Three.js hem normal webGL çıktısıne hem de Canvas render a izin verir. Böylece kodunuz fazla bir değişime uğramadan mobile cihazlarda da çalışabilir. Canvas render normal webGL ye göre daha fazla işlem gücü gerektirir. Animasyonlar akıcı değildir. Ancak webGL olmayan ortamlarda bile çalışabilir.

Three.js in düşük seviyeli bir soyutlaması vardır. Onu küçük hafif bir 3D motor olarak kabul edebiliriz. İlk alfa versiyonu 2010 nisanında üretilen bu kütphanenin yeni versiyonları ile birlikte bazı geriye dönük uyumluluk sorunları olabilir. https://github.com/mrdoob/three.js adresinden kendisini indirebilirsiniz. İndirilen 80 küsür MB lik dosyaya rağmen zip içindeki 330 kb lik Three.js dosyası olayın kendisi için aslında yeterlidir. Diğer kısımlar örnekler ve yardımcı uygulamalardır. Ama bu diğer kısımların önemsiz olduğu anlamına gelmiyor elbette...

Three.js bizi bir çok saç baş yolduran işten kurtarır. Onunla kameralar, meshler, primitive ler , sahneler, materyaller, ışıklar, animasyonlar vs.. vs... yaratabiliriz.


evet artık olaya başlayalım :)

1. İlk önce three.js i indirelim ve içindeki Three.js dosyasını projemizin dizinine koyarak html sayfamızın head kısmında tanımlayalım.
  <head>
     <script src="js/Three.js">     </script>      
  </head>

benim dizin yapımda three.js dosyası JS folder i altında. Sizinkisi nerede ise o şekilde yolunu belirtin.

2. Malum WebGL ve Three.js JacvaScript kullanır. Yani JavaScript ile çok fazla uğraşacağız dolayısı ile JavaScript de ekol haline gelmiş bir süper yardımcıya ihtiyacımız olacak : JQuery  :) belki ilk yapacağımız basit uygulamada o kadar değil ama ileri uygulamalarda Jquery hem webGL yazarken hem de sayfanın diğer bölümlerini 3D ile ilişkilendirirken bizi bi çok karmaşıklıktan kurtarabilir. O yüzden onu da uygulamamıza dahil ediyoruz.

 <head>
    <script src="js/Three.js"></script>      
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">          </script>
</head>

Şimdi sayfanın başında WebGL ile alakalı kodlarımın daha sayfa yüklenirken hemen çalışmasını istiyorum. O yüzden ilgili JavaScript kodlarımı doğrudan body tagı içine yazıcam. Bu bize bir miktar zaman kazandıracak. Şimdi objelerimizi kod ortamında oluşturmaya başlayalım :


3. Renderer :
webGL iki türlü render modelini destekler : biri normal WebGLRenderer, diğeri ise CanvasRenderer. Normal koşullarda her zaman webGL renderer i kullanacağız ve OpenGL nin nimetlerinden sonuna kadar faydalanacağız :)  CanvasRenderer ise tüm platformlarda çalışır, 3D değil, 3D nin bir taklididir ve performansı kat be kat daha düşüktür.

  // sahne kutusunun genişlik ve yükseklik parametreleri
  var width = 500, height = 300;                        

  // Renderer yaratılıyor
  var renderer = new THREE.WebGLRenderer();

  // çıktı genişlik ve yüksekliği       
  renderer.setSize(width, height);  

  // çıktının aktarılacağı dom elementine bağlanıyor
  $('#container').append(renderer.domElement); 

renderer; adı üstünde sahnenin ekran çıktısını veren ve bu çıktıyı belirttiğimiz html tagına aktaran objedir. İlk olarak renderer.setSize ile render çıktısının web sayfasındaki büyüklüğünü belirtiyoruz. İlk parametre genişlik, ikincisi yüksekliktir. Son komutta ise renderer.domElement ile bu çıktının hangi elemente aktarılacağını belirtiyoruz. Ben sayfada bir div elementi yaratıp adına da container dedim ve çıktıyı o div tagına bağladım. Bu arada container isimli divi seçerken dikkat ederseniz Jquery kullandık. (Normal yolla da seçebilirdik.) Ve son olarak başka html taglarına ya da doğrudan body tagına da çıktıyı bağlayabilirsiniz.


4. Scene :
  // Scene
  var scene = new THREE.Scene();

Sahne objesi tüm objeleri içinde tutan ana objedir. Sahne görüntüsü, sahnenin içerdiği diğer objelere ve ışıklara bağlı olduğu gibi, render esnasında hangi kameranın aktif kullanıldığına da bağlıdır. Yukarıda new operatörü ile yeni bir sahne objesi yaratıp onu scene adındaki bir değişkene attık. Daha sonraki sahne işlemlerinde bu değişken ile iş göreceğiz. Mesela sahneye eklenecek herşey için bu scene objesinin add yöntemini kullanacağız. Aslında sahne objesine daha bir çok özellik tanımlanabilir. Ancak bugün fazla kahramanlık yapmayarak az ve öz kod yazıyoruz :)


5. Camera :Kullanıcının ekrana bakışıdır. Baktığı yerin noktası kameranın pozisyonudur (position). Baktığı yön ise kameranın rotasyonudur (rotation).
  // Camera                                     
  var fov = 45,
  aspect = width / height,
  near = 0.1,
  far = 10000;

  var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

  // camera default olarak 0,0,0 da, biraz geri çekiyoruz
  camera.position.z = 200; 

Camera objesi 4 parametre alır. Bunların dördü de float tipindedir yani ondalıklı sayıdırlar. Bunları daha rahat görünmesi için önce yukarı da değişken olarak tanımladım. İlk partametre fov değeri yukarıda tanımladığımız field of view yani görüş alan açısı demektir. 45 derecelik açı webGL uygulamalarında işimizi görecektir. Ama fantazi yapacam derseniz 180 dereceye kadar artırabilirsiniz. Daha fazla artırmak çok sağlıklı sonuçlar vermeyecektir. İkinci patametre olan aspect, aspect ratio, yani kamera penceresinin genişlik yükseklik oranıdır. Buradaki değer için genellikle renderer penceresindeki en boy değerleri kullanılır. Üçüncü parametre bir objenin kameraya yaklaşabileceği minimum mesafedir. Orada belirtilen değerden daha da yaklaşırsa artık render ekranında görünmemesini söylüyoruz. Burada near parametresi olarak genellikle küçük bir değer belirtiriz. 4. ve son kamera parametresi olan far parametresi ise tam tersi olarak kameraya en fazla ne kadar uzaklıktan sonra artık render ekranında görünmeyeceğini belirtiyoruz.

Herşey gibi kameralarında sahnede bir koordinatı vardır. İlk tanımlandığında bu koordinat 0,0,0 dır. Yani tam orijindedir. Sahnenin rahat görüntülenmesi için onu biraz kendimize doğru çektik, son yazdığımız komut olan camera.position.z komutunu verdik. 200 değerini verip kamerayı geriye çekmemizden de anlaşılacağı üzere kameramız (ilk oluşturulduğunda) "-Z" eksenine doğru bakmaktadır. Aslında her üç koordinatın position değerini tek komutta yapabiliriz :

  camera.position.x = 0;    // x ekseni
  camera.position.y = 0;    // y ekseni
  camera.position.z = 200;  // z ekseni

  //tek komutta (x, y, z)
  camera.position.set(0, 0, 200);

aynı şekilde eğer hiç belirtilmemişse kameranın rotasyon bilgisi 0,0,0 dır. Ayarlamak için :

   camera.rotation.x = 10;   //x ekseninde 10 derece kamerayı döndür
   camera.rotation.set(0, 0, 0);  //3 eksende de ayarla

5. Material :
oldukça geniş kapsamlı olan bu konu başlı başına bir konudur. Şimdilik basit bir düz renk ile kaplama yapan materyal objemizi yaratalım.

  // Material
  var sphereMaterial = new THREE.MeshLambertMaterial(
      {
         color: 0xCC0000
      } );

Aslında yeni bir materyal yaratırken renk dışında verebileceğimiz smooth, enviroment map gibi başka parametreler de vardır. Bunları başka yazılarda detaylı incelemeyi düşünüyorum.


6. Geometry :

şimdi ekranda görünecek olan 3D objemizi webGL kodlarında tanımlayalım. ancak hala ortada bir şekil olmayacak,, sadece şeklin modelini komutlarla betimliyoruz. Yani adı üstünde bir geometrik şekil objesi yaratıyoruz. İlk örneğimizde basit olması için ben de yayın örnek olan küre çizmeyi tercih ediyorum.

  // Geometry (küre)
  var yaricap = 60, meridyen = 16, paralel = 16;
  var kure_geometry = new THREE.SphereGeometry(yaricap, meridyen, paralel);

şimdi buradaki parametreleri izah edelim. Tekrar hatırlatıyorum ki burada yapılan bir geometry objesinin türetilmesidir. Yani sadece bir şekli analitik olarak tanımlıyoruz o kadar. Küre geometrisi  THREE.SphereGeometry komutu ile elde edilir ve bu fonksyon 3 parametre alır. İlki kürenin yarıçapıdır. Diğeri meridyen sayısı, 3. sü de paralel sayısıdır. 2. ve 3. parametrelere ne gerek var diye düşünebilirsiniz; ancak bunların sayısı artması aynı zamanda poligon sayısının artması, ızgara aralığının küçülmesi yani render esnasında 3D motora yük demektir. İşte bu parametreler ile dilimleme sayısını azaltarak, poligon sayısını ve bu azalan yüzeylere bağlı olarak render yükünü hafifletmek elimizde olur.

Not : Three.js in geometrik şekil yaratan diğer fonksyonları :   PlaneGeometry,   CubeGeometry,  SphereGeometry,  LatheGeometry,  ExtrudeGeometry,  TorusGeometry, vs..



7. Mesh :
Artık webGL in anlayacağı ve ekranda gösterebileceği bir şekli yaratmak için herşeye sahibiz. Şimdi elimizdeki malzemeleri birleştirelim.

  // Mesh
  var kure_mesh = new THREE.Mesh(kure_geometry, sphereMaterial);
              
  // materyali sahnemize ekliyoruz
  scene.add(kure_mesh);

yukarıda zaten basit bir materyal yaratmıştık. Mesh yaratırken THREE.Mesh komutunu veriyoruz. İlk parametre geometry tipinde hazırladığımız 3D obje taslağı, 2. parametre ise bu objeye uygulanacak olan material dir. Üretilen kure_mesh isimli obje artık görüntülenebilir durumdadır. Ancak hala sahneye dahil edilmemiştir. Son olarak onu  scene.add komutu ile sahne objemize ekliyoruz.



8. Light :
Evet ışıklar; artık 3D işine girdik ve sahne aydınma da düşünmemiz gereken bir konu... Eğer hiçbir ışık belirtilmemişse Three.js default olarak ambient light kullanır. Sadece düz bir ışık boyaması olduğundan onunla her zaman düzgün görüntü elde edemeyebiliriz. O yüzden bir ışık belirtelim.

  // Light
  var pointLight = new THREE.PointLight(0xFFFFFF);

  // ışığın pozisyonu
  pointLight.position.x = 10;
  pointLight.position.y = 50;
  pointLight.position.z = 130;

  // ışığı sahne objesine ekleyelim
  scene.add(pointLight);

Burada kullandığımız PoinLight, bulunduğu noktadan her yönü aydınlatan nokta ışığıdır, yani bildiğiniz çıplak ampul gibi düşünebilirsiniz. WebGL de OpenGL den miras kalan bi çok ışık tipi mevcuttur : DirectionalLight, SpotLight, AmbientLight vs..


PointLight(0xFFFFFF) komutunun içinde hexadecimal olarak ışığın renk kodunu belirttik. bu komut bir parametre daha alır, o da ışığın şiddetidir. Eğer belirtilmemiş ise bu değer "1" olarak kabul edilir. Duruma göre bu değeri artırmak ya da azaltmak da bizim elimizdedir yani ilgili satırda şöyle de diyebilirdik :

  var pointLight = new THREE.PointLight(0xFFFFFF, 3);

2. parametre de 3 değeri vererek ışık şiddetini üç katına çıkarmış oldum. Ve aynı şekilde tıpkı kamerada olduğu gibi ışığın pozisyonunu da tek satırda belirtebilirdik :

  pointLight.position.set( 10, 50, 130 );


9. Render :
Işığımızı da oluşturup sahnemize ekledikten sonra geriye kalan tek şey sahnemizi render etmektir. Bunun için yine renderer objemizin render() metodunu çağıracağız.

  // veee render!
  renderer.render(scene, camera);

dikkat ederseniz render fonksyonu 2 parametre aldı. bunlardan ilki malum sahne objesi. Diğeri ise sahnedeki hangi kamera açısı ile bu renderin yapılacağı bilgisidir. Çünkü bir sahnede birden çok kamera bulunabilir.

10. Tadaaa...!! 
Herşey bittiğinde ve eğer herşeyi doğru yapmış isek şu şekilde bir çıktı elde etmeliyiz :

       

Kodun tamamı ise şöyle; Three.js dosyanızın yolunu kendinizinkine göre ayarlayın tabiki :
 <html>

 <head>   
       <script src=js/three.js"></script>
       <script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 </head>


 <body>       
        
        <div id="container"></div>

        <script>
        // sahe kutusunun geniþlik ve yükseklik parametreleri
        var width = 500, height = 300;                        

        // Renderer yaratılıyor
        var renderer = new THREE.WebGLRenderer();

        // çıktı genişlik ve yüksekliği      
        renderer.setSize(width, height);  

        // çıktının aktarılacağı dom elementine bağlanıyor 
        $('#container').append(renderer.domElement);                 

        // Scene
        var scene = new THREE.Scene();

        // Camera                                      
        var fov = 45,
        aspect = width / height,
        near = 0.1,
        far = 10000;

        var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

        // camera default olarak 0,0,0 da, biraz geri çekiyoruz
        camera.position.x = 0;    // x ekseni
        camera.position.y = 0;    // y ekseni
        camera.position.z = 200;  // z ekseni

        //tek komutta (x, y, z)
        camera.position.set(0, 0, 200);

        // Material
        var sphereMaterial = new THREE.MeshLambertMaterial(
            {
               color: 0xCC0000
            } );


        // Geometry (küre)
        var yaricap = 60, meridyen = 16, paralel = 16;
        var kure_geometry = new THREE.SphereGeometry(yaricap, meridyen, paralel);
               
        // Mesh
        var kure_mesh = new THREE.Mesh(kure_geometry, sphereMaterial);
              
        // materyali sahnemize ekliyoruz
        scene.add(kure_mesh);

        // Light
        var pointLight = new THREE.PointLight(0xFFFFFF);

        // sahnedeki pozisyonunu ayarlayalım
        pointLight.position.x = 10;
        pointLight.position.y = 50;
        pointLight.position.z = 130;

        // sahneye ekleyelim
        scene.add(pointLight);

        // render
        renderer.render(scene, camera);                                                            
 
     </script>      
     
 </body>
</html>

Kardeşim bu kadar uğraş ekrana bi küre çizmek için miydi ? dediğinizi duyar gibiyim :)  ama size söz, ileride çok daha eylenceli uygulamalar yazacağız...  Bu arada söylememe gerek yok heralde: ekrandaki örneğe Internet Explorer dışındaki bir browser ile gözatmalısınız. Yoksa çalışmaz. IE henüz destek vermiyor.

Ek Not : Three.js komutları ile primitif (temel) geometrik şekiller hazırlayabildiğimiz gibi çok daha komplike modeller için 3D modelleme yazılımlarından dosya import edebiliriz. Bunlardan bazılarının desteği doğrudan Three.js de mevcuttur (Blender, Maya, Cinem4D gibi..),  diğerleri için de çeviri araçlarını kullanabiliriz. Bu konulara ilerleyen yazılar da detaylı ile gireceğiz.

Browser içinde 3D nin doğal html - JavaScript ile oynaması çok eylenceli ve de heycan verici bir konu :) Mobil sistemlerde de yaygınlaşması ile çok yakında Web üzerinden oynanan gerçek online oyunların dünyasına kapı açılacaktır.

Bir sonraki WebGL uygulamasında görüşmek üzere şimdilik hoşçakalın...


8 yorum:

Adsız dedi ki...

Oncelikle emegine saglik..
Ornek uygulamanda bir kure olusturmustun ,ancak kureye dısardan hakimiz.Peki oyunlardaki gibi olusturdugumuz kurenin icine kaplama yapıp kürenin icine girmemiz nasıl mumkun olabilir acaba? (Ornekse bir yeryuzu alanı ve uzerinde 360 derece donebildigimiz atmosfer bulutlar vb)

Gökhan ZER dedi ki...

Merhaba ve yorum için teşekkürler,

sözünü ettiğin gezinme işlemi için önce animasyon konusu işlenmeli. Animasyon konusuna bir sonraki makalede giriş yapmayı düşünüyorum. Ondan sonra da senin bahsettiğin tarzda bir gezinme uygulaması düşünüyorum. Bunun teorik bilgisi kafamda olsa da henüz uygulamada denemiş değilim. O yüzden bir iki makale sonrasında gibi görünüyor dediğin olay. Elimden geldiğince çabuk hazırlamaya çalışırım.

Adsız dedi ki...

Sn Gökhan bey,
Çok sade ve anlaşılır bir anlatım olmuş. Gereksiz, kafa karıştırıcı veya açıklaması olmayan havada kalmış hiç bir kod yok. Emeğinize ve elinize sağlık. Kesinlikle kütüphanemde yer alması gerektiğini düşündüğüm bir makale.
Saygılarımla
Erdoğan HANCIOĞLU

Gökhan ZER dedi ki...

Erdoğan Bey beğenmenize çok sevindim. Yazarken cidden beni az uğraştırmadı. Bittikten sonrada bu neye yaradı diye de düşünmüştüm :)) ama öğrendiğim birşeyi paylaşmadan da rahat edemiyorum. O yüzden her ne yapıyorsam diğerlerinin de anlayacağı şekilde yazmak hoşuma gidiyor. Ve bunun beğenildiğini görmek de çabaların boşuna olmadığını bana ispatlıyor. Tekrar teşekkürler.

eğer isterseniz benimle doğrudan da iletişime geçebilirsiniz. Sonuçta hem meslekdaş olarak hemde ortak bir konu ile ilgilenme açısından sohbet edebiliriz :)

Adsız dedi ki...

selam gökhan bey ben bu işlerle ugraşıyorum benimle eger birebir
bir şekilde konuşma şansınız varsa sevinirim faceden veya msnden
saygılarımla
yusuf kirenci

Gökhan ZER dedi ki...

Yusuf Bey, elbette olabilir. Memnun olurum. Ben saydığınız her iki iletişim aracını da kullanmıyorum. Msn ara ara açsamda face hesabımı tamamen kapadım. Google+ ve Google Talk üzerinden çok daha rahat iletişime geçebiliriz. E Mail adresim : martperisi@gmail.com

Görüşebilmek ümidiyle,

Murat dedi ki...

gökhan bey merhaba...

bilgi paylaşımınız için size çok teşekkür ediyorum.

webgl teknolojisiyle oyunun haricinde e-ticaret sitesi yapabilirmiyim.

ilginize şimdiden teşekkür eder. yazılarınızın devamını dilerim...

Gökhan ZER dedi ki...

bence yapılabilir. webGL sonuçta görsellik katan bir teknoloji olduğuna göre bu görselliği resimlerle değilde 3D objelerle yapmak iaterseniz bence çok daha etkileyici bir site dahi olabilir.

Örneğin giyim satıyorsunuz diyelim, insanların ölçülerini alıp elbiseyi dinamik olarak oluşturulmuş mankenlere giydirip sonucu gösterebilirsiniz. ki bunu yapan siteler olduğunu da duymuştum...