Ana içeriğe atla

WebGL Nedir? (HTML 5 / OpenGL )

HTML 5 in yavaş yavaş hayatımıza girmesiyle beraber webdeki yenilikler de birbirini izlemeye devam ediyor. WebGL bu önemli yeniliklerden bir tanesi konumunda. WebGL, web tarayıcıları üzerinde 3D grafikler oluşturmak için kullanılan platform bağımsız ve ücretsiz bir API’dir. WebGL in arkasında Khoronos Group bulunmaktadır. Khoronos Group şirketleri arasında AMD, Ericsson, Nokia, Google, Mozilla, Nvidia, Opera, Autodesk ve Adobe gibi devler yer almaktadır.
WebGL, Javascript aracılığı ile OpenGL ES 2.0 desteği sağlayarak çalışmakta olup, bu sayede OpenGL veya OpenGL ES destekleyen herhangi bir internet tarayıcı 3D grafikleri desteklemektedir. WebGL, HTML 5 standartlarında açıklanan ‘Canvas’ elementini kullanır.
clip_image002_thumb[1]
Apple Safari, Google Chrome, Mozilla Firefox ve Opera gibi web tarayıcıları WebGL çalışma grubunun üyesidirler. Bu sayede, bu standart, internet tarayıcıları arasında geniş kabul görmüş gibi görünmektedir. Ancak Internet Explorer henüz WebGL desteği sağlamamakta ve Internet Explorer 9 ile de bu desteği verecek gibi görünmüyor.

WebGL halen geliştirmesi devam eden bir API’dir ve bu yüzden sadece birkaç web tarayıcısının beta sürümlerinde desteklenmektedir. Ayrıca bazen tarayıcının WebGL API’sini destekler duruma gelebilmesi için ek işlemler gerekiyor. Şimdi bu işlemlere göz atalım:
1.Firefox
WebGL, Firefox/4.0b* sürümlerince desteklenir durumda. Son sürümler http://www.mozilla.com/en-US/firefox/all-beta.html adresinden de edinilebilinir. Firefox tarayıcısını kurduktan sonra WebGL API’sinin aktif olup olmadığını görmek için :
- Adres çubuğuna about:config yazılmalı
- Listelenen tanımlamalarda ‘webgl.enabled_for_all_sites’ parametresi eğer ‘false’ ise ‘true’ olarak değiştirilmeli
2.Safari
WebGL, Mac OS X 10.6 WebKit sürümlerince desteklenmektedir. İlgili sürümler http://nightly.webkit.org/ adresinden indirilebilir. Tarayıcıyı kurma işlemi tamamlandıktan sonra, WebGL API’sini aktif duruma getirebilmek için Terminal ekranında:
defaults write com.apple.Safari WebKitWebGLEnabled -bool YES
komutunun bir kereye mahsus çalıştırılması yeterlidir.
3.Chrome/Chromium
WebGL’i Windows ve Mac OS X üzerinde test etmenin en kolay yolu Chrome 9 Beta versiyonlarından birini indirip kurmaktır.
Eğer Linux, Mac OS X ve Windows üzerinde en güncel versiyonlar test edilmek istenirse, Chrome tarayıcısının açık kaynak versiyonu Chromium da kullanılabilir.
WebGL’i aktif olarak çalıştırabilmek için Chromium tarayıcısı komut satırlarından aşağıdaki parametre ile çağırılmalıdır:
- Linux: ./chrome --enable-webgl
- Mac OS X: ./Chromium.app/Contents/MacOS/Chromium --enable-webgl
- Windows: Komut satırı parametresine gerek yoktur.
Tarayıcınızın HTML5 ve WebGL e ne kadar uyumlu olduğunu kolayca öğrenmek istiyorsanız eğer http://html5test.com/ linkini kullanabilirsiniz. Bu link tarayıcınızı HTML5 için bir teste tabi tutmakta ve belli kriterlere göre puanlama yapmaktadır. Burada WebGL kriterine bakarak tarayıcınızın WebGL’i destekleyip desteklemediği bilgisine sahip olabilirsiniz.
1_thumb
WebGL ile Örnek Uygulamalar
WebGL uygulamaları için gerekli ortamı sağladıktan sonra birazda Javascript ile nasıl 3D render edebilen bir sayfa oluşturabileceğimize bakalım. 3D render edebilmek için ilk ihtiyacımız olana şey bir ‘canvas’ elementidir. Aşağıdaki HTML kod parçası bir canvas elementi tanımlar ve sayfa load olduğunda WebGL ortamının başlatılabilmesi için start()metodunu kullanır.

<body onload="start()">
  <canvas id="glcanvas" width="640" height="480">
    Your browser doesn't appear to support the HTML5 <code>&lt;canvas&gt;</code> element.
  </canvas>
</body>

Javascript kodumuzdaki start() metodu 3D render edebilmek için gerekli ortamı hazırlar.
 
function start() {
  canvas = document.getElementById("glcanvas");
 
  initWebGL(canvas);      // Initialize the GL context
  
  if (gl) {
    gl.clearColor(0.0, 0.0, 0.0, 1.0);  // Set clear color to black, fully opaque
    gl.clearDepth(1.0);                 // Clear everything
    gl.enable(gl.DEPTH_TEST);           // Enable depth testing
    gl.depthFunc(gl.LEQUAL);            // Near things obscure far things
  }
}



Tanımlanmış canvas elementi ile initWebGL() metodu çağırılarak WebGL ortamı hazırlanır. Daha sonra renk olarak siyah set edilir ve gerekli diğer parametrelerin set edilmesi ile beraber WebGL için ortam hazırlanmış olur.
 
function initWebGL() {
  gl = null;
  
  try {
    gl = canvas.getContext("experimental-webgl");
  }
  catch(e) {
  }
  
  // If we don't have a GL context, give up now
  
  if (!gl) {
    alert("Unable to initialize WebGL. Your browser may not support it.");
  }
}



Bu işlemlerden sonra sayfamızı çalıştırdığımızda boş ve siyah bir ekran görüyorsak 3D elementler oluşturabileceğimiz WebGL geliştirimi için uygun ortamı hazırlayabilmişiz demektir J. Bu küçük örneği daha da detaylandırabilmek için aşağıdaki kaynaklar incelenebilir:








WebGL yeni bir teknoloji olmasına rağmen bu alanda bir çok aktivite bulunmaktadır. WebGL, specificationlarını henüz tamamlamamış olmasına rağmen WebGL için oluşturulmuş frameworkler bulmak mümkündür;





- GLGE





- GTW

- O3D



Bu tür kütüphaneleri kullanarak zengin içerikli grafikler ve animasyonlar oluşturmak kolaylaşmakta. Aşağıda üzeri bir resim ile texture edilmiş ve dönen bir küp animasyonun ekran görüntüsü yer almakta. Daha fazla demo için http://www.khronos.org/webgl/wiki/Demo_Repository linki incelenebilir.


  

Referanslar :





Gültürk KARLI

Yorumlar

Bu blogdaki popüler yayınlar

UML ve Modelleme – Bölüm 4 (Class (Sınıf) Diyagramları)

Bir önceki makalemizde UML modellemede kullanılan ilk diyagram olan Use Case diyagramını incelemiştik. Bu makalemizde nesne tabanlı programlamada kullanılan sınıflar ve sınıfların arasındaki ilişkileri modelleyebileceğimiz diyagramlar olan Class(Sınıf) diyagramlarını inceleyeceğiz. UML’de sınıflar, nesne tabanlı programlama mantığı ile tasarlanmıştır. Sınıf diyagramının amacı bir model içerisinde sınıfların tasvir edilmesidir. Nesne tabanlı uygulamada, sınıfların kendi özellikleri (üye değişkenler), işlevleri (üye fonksiyonlar) ve diğer sınıflarla ilişkileri bulunmaktadır. UML’de sınıf diyagramlarının genel gösterimi aşağıdaki gibidir. Şekil 1. Class Diyagram Şekil1’de görüldüğü üzere bir dikdörtgeni 3 parçaya bölüyoruz. En üst bölüm sınıf adını, orta kısım özellik listesini (üye değişkenler) ve en son kısım, işlev listesini (üye fonksiyonlar) göstermektedir. Çoğu diyagramlarda alt iki bölüm çıkarılır. Genelde tüm özellik ve işlevler gösterilmemektedir. Ama

Yazılım Maliyet Tahmineleme Tecrübeleri

Yazılım mühendisliğinde maliyet hesabı her zaman problem olmuştur. "Bu iş kaç Adam/Gün tutar?" sorusuyla sıkça karşılaşıyoruz. Adam/gün veya Adam/ay ölçütleri bir kaynağın/kişinin belirtilen zaman dilimindeki iş gücü anlamına gelir. Tabi bu noktada yine kafa karışıklıkları başlar. 6 A/G'lik bir işi hızlandıralım diye 2 kişi ile yapmaya çalışsak ve kaynak/kod, modül, altyapı, insan vb. her bir şeyi bir kenara bıraksak, matematiksel basit formülle 6/2=3 A/G'de biter? Gerçek hayat böyle değil, öncelikle bunu anlamamız lazım. Hep şu örnek verilir; "Aynı bebeği 2 kadın birlikte daha kısa sürede doğurur mu?" Eğer bunun cevabı "Evet" ise (veya bir gün böyle bir durum ortaya çıkarsa), yazımı değiştirmem gerekecek:) Mevzu gerçekten derin...Maliyet hesabı; bulunduğunuz firmanın yazılım süreçlerini hangi methodlarla uyguladığına, ilgili işin o dönemdeki aciliyetine, (şirket yönetiminin baskısına:)) vb. bir çok duruma bağlı olabilir. Örneğin; bizim firmada e

UML ve Modelleme – Bölüm 3 (Use Case Diyagramlar)

Önceki iki makalemizde ( 1 , 2 ) UML’e genel olarak değinip ve modellemede kullanacağımız dokuz diyagram hakkında bilgiler vermiştik. Bu makalemizde Use Case diyagramından detaylı bahsedeceğiz. Öncelikle, genel Use case diyagramının tanımını hatırlayalım. “Bir kullanıcı ve bir sistem arasındaki etkileşimi anlatan senaryo topluluğudur.” Ivar Jacobson Senaryo tanımı için der ki: “Aktörle sistem arasında gerçekleştirilen, sonucunda aktöre farkedilir getirisi/ faydası oluşan etkileşimli diyalogdur. ” UML Use Case Diyagramları  sistemin işlevselliğini açıklamak amacıyla kullanılır. Sistemin birbirinden ayrı özelliklerinin detaylarını göstermekten ziyade, Use Case Diyagramlar, tüm mevcut işlevselliği göstermek için kullanılabilir. Buradaki en önemli noktalardan biri,   Use Case Diyagramlar temelde sequence diyagram ve akış diyagramlarından farklıdır. Use Case diyagramlar dört ana elemandan oluşmaktadır. Aktörler , Sistem (Proje kapsamını belirtir) , Use Caseler ve bunlar ara