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]](http://www.univera.com.tr/univera-ng/images/8c9b011ecbf6_E47F/clip_image002_thumb1.jpg "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.
- Linux 32-bit: http://build.chromium.org/f/chromium/continuous/linux/LATEST/
- Linux 64-bit: http://build.chromium.org/f/chromium/continuous/linux64/LATEST/
- Mac OS X: http://build.chromium.org/f/chromium/continuous/mac/LATEST/
- Windows: http://tools.google.com/dlpage/chromesxs (Chrome Canary)
- Linux 64-bit: http://build.chromium.org/f/chromium/continuous/linux64/LATEST/
- Mac OS X: http://build.chromium.org/f/chromium/continuous/mac/LATEST/
- Windows: http://tools.google.com/dlpage/chromesxs (Chrome Canary)
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.
- 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.
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><canvas></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;
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
Yorum Gönder