Geçtiğimiz hafta Flash’ı etraflıca incelemeye koyuldum. İndirmiş olduğum open source bir kod kütüphanesi olan FlarToolKit‘in içerisinde iki farklı Actionscript dosyası bulunuyordu. Earth isimli olan kod, içerisinde yine bu dosya ile aynı dosyanın içerisinde olmak durumunda olan model isimli bir dosyanın içerisinden bir still image çağırıyor. Ben de ilk defa deneyeceğim silüet modelimi bu imajın yerine koymaya çalıştım. İlk olarak 3 boyutlu bir imajın Flash’ta görünebilmesi için DAE uzantılı bir dosya olması gerektiğini öğrendim ve deneme amaçlı basit bir geometrik model yarattım Maya’da. DAE uzantısı, Maya’nın tek başına export edebildiği bir uzantı değil. Bu nedenle OpenCollada isimli bir plug-in’e ihtiyacınız oluyor. Benim sorunum Maya’mın 2013 versiyonu olmasıydı. OpenCollada 2010 ve 2011’e kadarki versiyonları destekliyormuş. Şimdilik 2011 trial version’u indirdim ve OpenCollada’yı plug-in seceneklerinden dahil ettikten sonra modelimi .dae uzantısı halinde kaydedebildim.  Diğer önemli görev ise bunu Flash’a atıp, marker’a atayabilmekti. Çeşitli uğraşlardan sonra deneme amaçlı oluşturduğum bu modeli (model1)  kod’daki diğer still imaj ile değiştirebildim.

Daha sonradan Maya’da oluşturmak istediğim silüetin bir denemesini (model2) yaptım. Ve onu Flash’a attım. Bu model oldukça 2 boyutlu görünüyor, çünkü üzerinde henüz bir texture yok. Basit bir geometrik şekilden oluşmadığı için, herhangi bir texture boyut katmakta işe yaramayabiliyor. Nitekim ilk denediğim texture’lar hep bu yönde sonuç verdi… Ama uygun olan texture’u bulacağıma inanıyorum.

Bu hafta ise harita-marker ilişkisinde yol almaya çalışacağım..

İstanbul’da son 10 yılda inşaa edilen yüksek binalar ve gökdelenler hakkındaki araştırmalarımın sonucunda edindiğim elle tutulur denilebilecek, güvenilir olmasını umduğum verileri grafik haline getirdim. Silüetini çıkaracağım noktaların büyük bir bölümü bu veriler doğrultusunda şekillenmiş oldu böylece…

grafikler

bahar_proposal_poster

bahar_csm_present

http://www.youtube.com/watch?v=hxgQpYG8LtE

Öncelikle Javascript, HTML5 ve Flash karşılaştırmaları ile ilgili yazılmış olan augmented reality blogları/ kaynaklarının biraz kafa karıştırıcı olduğunu söylemeliyim. Birçoğunda HTML5’in webcam görüntüsü alamıyor oluşu bahsediliyordu. Siteden siteye atlaya atlaya ortaya son zamanlardaki gelişmeler ortaya çıktı ki bundan kısa bir zaman önceye kadar (2011de yazılmış olan kimi postlarda bu gibi sebeplerden ötürü fanatik bir şekilde Flash’ı destekleyenler var) gerçekten de HTML5 online video ve audio aktarımını desteklemiyormuş. Projemde webcam’den eşzamanlı görüntü alma kilit noktalardan biri olduğu için HTML5’in bunu yapamadığını söyleyen kaynaklar kısa süreyle motivasyonumu bozdu.  Ancak araştırmanın devamında gördüm ki, yakın bir zamanda HTML5 bunun üstesinden gelmiş.

Javascript kullanılarak yapılan augmented reality kaynaklarından en belirgini şu linkte görebileceğiniz HTML5 Rocks sitesinde bulunuyor: http://www.html5rocks.com/en/tutorials/webgl/jsartoolkit_webrtc/

Burada bahsedilen JSARToolKit diye bir kit var. Tanımı “Javascript port of *FlarToolKit” diye geçiyor. JSARToolKit’in kullanım amacı: video kaynağından image capture yaparken bir yandan bu imajlardaki marker’ları track etmek, gerçek kamera pozisyonu ile marker’ın birbirlerine göre pozisyonlarını hesaplama.

// *FlarToolKit’in ne olduğunu hatırlatmak gerekirse: Flash tabanlı augmented reality gerçekleştirmek için bir open source code library diyebiliriz. //

Buradaki demoyu denemeden önce ayarlarla ilgili olan açıklamalarda yazıldığı gibi WebRTC’yi enable etmenize ihtiyaç olmadığını fark ettim. Chrome’un son dönem versiyonları bunu kendiliğinden içinde barındırıyormuş.

Ayarlarla ilgili kısmı keşfettikten sonra verdikleri marker’ın fotografını telefonumun kamerasıyla çektim ve webcam’e tuttum. Marker’ın üzerine bir slayt show yerleştirilimiş.

Augmented Reality’nin uygulama kısmı ve projem için verilmesi gereken en önemli kararlardan biri Flash/Actionscript  ya da HTML5/ Javascript üzerinden mi gidileceği ile ilgili. Bunun için yaptığım Google aramalarında karşıma sık sık çıkan, ve bugüne kadar bilgi sahibi olmadığım bazı kelimeler / kısaltmalar oldu. Bundan sonraki postlarımda her birinin tekrar tekrar açıklamasını yapmadan önce bir yerde toplu olarak bulunmalarını daha uygun görüyorum. Bu listeye sık sık yeni şeyler eklenecek  gibi görünüyor ancak şimdilik şöyle sıralayabilirim:

-API (Application Programming Interface): a protocol intended to be used as an interface by software components to communicate with each other.

-WebGL (Webgraphics library) : a Javascript API for rendering interactive 3D and 2D graphics within any browser without using plug-ins.

– WebRTC: a project which enables web browsers with Real Time Communications (RTC) capabilities via simple Javascript API’s.

-IDE (Integrated Development Environment): applications that provides comprehensive facilities to programmers.

Geçen haftaki görüşmemizde, projemin kullanım alanını arttırabilmek için web tabanlı bir hale gelmesi ihtimali üzerinde durmuştuk. Kodlamayı Flash’ta yapmak yerine HTML5 ve Javascript kullanırsam uygulamayı bir internet sitesi üzerinden yürütmek mümkün olabilecek. HTML5 Iphone,Ipad gibi ürünlerle uyumlu olması açısından da önem taşıyor. HTML5 ve AR ile ilgili karşıma çıkan bir sunumu paylaşıyorum:

Web tabanlı augmented reality uygulaması örnekleri araştırırken FedEx’e ait şöyle bir dijital pazarlama örneği ile karşılaştım. Üzerine marker yerleştirilmiş posteri webcam’e tuttuğunuzda bakın neler oluyor…

Projemi oluşturma aşamasında ilham aldığım bir projeyi paylaşmak istiyorum. City Sound Map, Silvia Giulianini’ye ait şehir ve ses ekseninde oluşturulmuş proje. Şehirde yaşayanların ses ve gürültü algılarını kayıt altına almayı amaçlıyor. Belirli noktalarda sesler kayıt altına alınmış, bu kayıtlardan bir ses kütüphanesi oluşturulmuş. Proje, ses bilgisini haritanın üzerine yerleştirip “görülemeyen şekilleri ve desenleri” görünür kılma işlevini görüyor.

Benzer bir şekilde ben de projemde yaşadığımız şehir olan İstanbul’un silüetlerini kayıt altına tutmaya çalışacağım. Bu projede harita, silüetlerin aidiyetini daha iyi canlandırmak ve oturtabilmek için olmazsa olmaz bir ihtiyaç. Silüetlerin yanında, o silüeti ortaya çıkaran gerçekler hakkındaki sayısal veri benzeri bilgilerin iyi bir şekilde aktarımı için de infografik kullanımından yararlanacağım.

Projemde yararlanmak istediğim teknoloji Augmented Reality (AR) diye geçiyor. Türkçeye arttırılmış gerçeklik olarak çevrilmiş. Gerçek dünyadaki video çekiminin üzerine bilgisayarda oluşturulmuş çeşitli grafik animasyonlar eş zamanlı olarak eklenebiliyor. Bunun sonucu olarak gerçek dünya ile sanal olanın bir çeşit kombinasyonu ortaya çıkıyor denilebilir.

AR’nin ilk kullanım alanlarından biri olarak askeri teknoloji gösteriliyor. Savaş uçaklarında hız, koordinat, yükseklik gibi bilgiler vermeyi amaçlayan ekranlar ve pilotların kasklarına entegre edilmiş gözlükler bu teknolojinin uygulanmasına örnek oluşturuyor. Bu alandaki kullanımın ardından AR, başka alanlarda da yaygınlaşmaya başlamış. Son zamanlarda reklam ve pazarlamada da kullanımının örnekleriyle karşılaşıyoruz. Wolkswagen’in Beetle modeli için hazırlamış olduğu AR uygulamalı reklamı bunlardan biri. Iphone veya Ipad’e uygulamasını indirip ardından kamerayı reklamın üzerine getirdiğinizde Beetle’ın olduğu yerden ayrılarak türlü türlü hareketler yaptığını görüyorsunuz. The Volkswagen Beetle. Juiced Up

Bir başka pazarlama örneği de Starbucks’ın 2011 sonunda hazırlamış olduğu uygulama. Telefonunuza Apple Store’daki uygulamayı indirdikten sonra kamerayı kahve bardağına tutunca bardağın üzerindeki karakterlerle çeşitli oyunlar oynayıp hediye kazanabiliyormuşsunuz. Starbucks Cup Magic