Tekstil Teknolojileri Elektronik Dergisi Cilt: 7, No: 3, 2013 (46-51) Electronic Journal of Textile Technologies Vol: 7, No: 3, 2013 (46-51) TEKNOLOJİK ARAŞTIRMALAR www.teknolojikarastirmalar.com e-issn:1309-3991 Üç Boyutlu Tekstil Ürünü Giydirilmiş Modellerin İnternet Ortamında Görüntülenmesi Bekir AKSOY 1, Mehmet DAYIK 2 1 Süleyman Demirel Üniversitesi Senirkent MYO Bilgisayar Teknolojileri Bölümü Isparta/TÜRKİYE 2 Süleyman Demirel Üniversitesi Mühendislik Fakültesi Tekstil Mühendisliği Bölümü Isparta/TÜRKİYE bekiraksoy@sdu.edu.tr Özet Günümüz teknolojisinin üç boyutun önemi giderek artmış ve insanlar ürünlerini tanıtırken üç boyutlu tanıtımları tercih etmektedirler. Ürünlerin tanıtımında en geniş kitleye ulaşmak için internet ortamı önemli bir yer tutmaktadır. İnternet ortamında hız ve nesnelerin dosya boyutları önemlidir. Dosya boyutu bakımından üç boyutlu nesneler iki boyutlu nesnelere oranla daha büyük boyutta olmaktadırlar. Buna çözüm olarak geliştirilen dosya formatları sayesinde üç boyutlu nesneler internet ortamında da kullanılabilmektedir. Anahtar Kelimeler: Üç Boyut giydirme, üç boyutlu model Dressed in Three-dimensional Models of Textile Products Displayed on The Internet Abstract Have increased the importance of the three dimensions of today's technology and products to people who prefer to introduce the three-dimensional presentations. Internet environment for the promotion of the products to reach the widest audience plays an important role. Important that the speed and file sizes of objects in the internet. File size in terms of two-dimensional objects in three-dimensional objects in a larger size than others. Thanks to this threedimensional objects according to the consequences file formats can also be used in the internet. Keywords : Three-Dimensional Dress, three-dimensional model Bu makaleye atıf yapmak için Aksoy B., Dayık M., Üç boyutlu Tekstil Ürünü Giydirilmiş Modellerin İnternet Ortamında Görüntülenmesi Tekstil Teknolojileri Elektronik Dergisi 2013, 7(3) 46-51 How to cite this article Aksoy B., Dayık M., Dressed in Three-dimensional Models of Textile Products Displayed on The Internet Electronic Journal of Textile Technologies, 2013, 7(3) 46-51 46
Aksoy B., Dayık M. Teknolojik AraştırmalarTTED 2013(3) 46-51 1. GİRİŞ Üç boyutlu nesneler ürün tanıtımlarında oldukça büyük önem taşımaktadırlar. Üreticiler ürünlerini çok daha iyi tanıtabilmekte ve tüketiciler de ürünleri daha iyi inceleme şansı bulmaktadırlar. Bu nedenle üç boyutlu nesnelerin tanıtım amaçlı kullanımı gün geçtikçe daha da çok artmıştır. Üç boyutlu modeli oluşturulan nesnelerin de daha geniş kitlelere tanıtılması için internet ortamı kullanılması her geçen gün daha büyük bir ihtiyaç haline gelmiştir. İnternet ortamında bir sayfa ziyaret edildiğinde uzun süre beklemek hem kullanıcının siteye ziyaretine son vermesine neden olmakta hem de internet sunucuları üzerinde ağır yükler oluşturmaktadır. Bu nedenle internet ortamında kullanılacak nesnelerin olabildiğince küçük boyutlu olması tavsiye edilmektedir. Oluşturulan üç boyutlu nesne ASCII Scene Export (ASE) dosyası olarak kaydedildiğinde nesne text (metin) formatında ve belirli bir kural çerçevesinde kaydedilerek boyutun minimum olması sağlanmaktadır. Bu sayede internet ortamına aktarılacak olan nesne oldukça hızlı bir şekilde internet sayfasına yüklenebilmektedir. Nesne ASE formatında oluşturduktan sonra bunu bir internet programlama diline uygun şekilde kullanılması gerekmektedir. Bu probleme çözüm olarak üretilmiş ücretli veya ücretsiz eklentiler bulunmaktadır. Balder 3D motoru da bu eklentilerden birisidir. Balder doğrudan CodePlex üzerinden yüklenebilen açık kaynak kodlu bir 3D motordur. Native olarak desteklenmeyen 3D ortamını bizim için Balder yaratıp nesnelerimizin internet ortamında silverlight aracılığıyla gösterilmesini sağlamaktadır. 2. MODELİN OLUŞTURULMASI Şekil 1 de de görüldüğü gibi 3D Max aracılığıyla oluşturulan modelin texture(map) ini oluşturduktan sonra File Export menüsünden modelin ASE olarak export edilmesini gerekmektedir. Aşağıdaki resimde ASE File olarak export edilecek dosyamız için ayarlar görülmektedir. Böylece bir adet ASE uzantılı dosya ve ayrıca oluşturduğumuz map dosyası (bitmap) bulunacaktır. Bu sayede üç boyutlu nesnemizi ASE formatında kaydedip aynı zamanda doku dosyasını da görüntü dosyası olarak elde edilmiş olmaktadır. Şekil 1. 3D Max çizilmiş ve tekstil ürünü giydirilmiş modelin ASCII Export dosyasına dönüştürülme işlemi 47
Teknolojik Araştırmalar: TTED 2013 (3) 46-51 Üç boyutlu Tekstil Ürünü Giydirilmiş Modellerin İnternet... 3. MODELİN SILVERLIGHT ÜZERİNDE GÖSTERİLMESİ Silverlight, Microsoft firması tarafından geliştirilmiş, ağ uygulamaları için animasyon, vektör, 3D grafik ve görüntü oynatma imkânları sağlayan zengin internet uygulamaları geliştirme düzlemidir. Adobe firmasının Flash ortamına rakip olarak çıkmıştır. 3D Max programı sayesinde ASE dosya olarak oluşturduğumuz modeli silverlight ortamına aktarmamızı sağlayan açık kaynak kodlu Balder projesi bulunmaktadır. Elimizde bulunan ASE dosyası otomatik olarak Balder tarafından tanınarak modellenebilmektedir. Derleyici ile yeni bir silverlight projesi oluşturduktan sonra Balder motoruna ait Balder.dll ve Ninject.dll dosyalarını referans olarak gösterilebilmektedir. Silverlight geliştirme ortamında Solution Explorer'dan oluşturduğumuz projeye sağ tıklayıp "Add Existing Item" seçerek oluşturulan ASE dosyası hazırlanmak istenen projeye eklenebilmektedir. Bunun akabinde oluşturulan dosyada sağ tıklayıp Properties seçeneğini seçerek "Build Action" bölümünden "Resource" olarak ayarlayabilmek mümkün olmaktadır. Balder ile 3D bir ortam oluşturmak için farklı nesnelere ihtiyaç duyulmaktadır. Bunlar bir 3D alan, kamera, ışık vb. Öğelerdir. Tüm bunlar Balder'in 3D motoru içerisinde tanımlıdır ve Balder tarafından kullanılmaktadır. Bu nesnelerin her birini kullanabilmek için uygun namespace'leri XAML tarafında tanımlamamız gerek. Bahsettiğimiz ışık, kamera vb. gibi öğeleri aşağıdaki şekilde XAML tarafında UserControl kök dizininde tanımlanabilmektedir. Bu tanımlamayla beraber 3D ortamın oluşturmak için kullanılan kod şu şekildedir: <UserControl x:class="durma.mainpage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:ignorable="d" xmlns:execution="clr-namespace:balder.execution;assembly=balder" xmlns:view="clr-namespace:balder.view;assembly=balder" xmlns:lighting="clr-namespace:balder.lighting;assembly=balder" xmlns:geometries="clr-namespace:balder.objects.geometries;assembly=balder" d:designheight="700" d:designwidth="700" Background="Black"> <Grid x:name="layoutroot" Background="White"> <Execution:Game Width="900" Height="900"> <Execution:Game.Camera> <View:Camera x:name="kamera2" Position="2.5,2.5,2.5" /> </Execution:Game.Camera> <Lighting:OmniLight x:name="isik2" Position="0,0,0" Strength="0.5" Diffuse="White" /> <Geometries:Mesh InteractionEnabled="True" x:name="durma2" AssetName="/durma;component/Assets/woman.ase" Position="0,0,0"/> </Execution:Game> </Grid> </UserControl> Kaynak kodlardan da bir Grid in içerisinde Balder a ait Game objesi oluşturulup akabinde hemen alt satırına Game.Camera objesi yerleştirilmiştir. ASE dosyasının görüntülenmesi için ışık verilmesi gerekmektedir. Bu nedenle Game objesi altına Lighting:OmniLight objesi oluşturulmuştur. Bu obje her yöne eşit miktarda ışık gönderen ışık kaynaklarıdır. Bu ışığında Strength ve Diffuse değerlerini ayarlanmıştır. Son olarak da ASE dosyasının oluşturduğumuz bu 3D ortama gösterilmesi gerekmektedir. Bunun için kullanılan Geometries: Mesh objesiyle ASE dosyamızın yolunu AssetName özelliği ile ifade edilmektedir. Burada görülmekte olan veri yolu /durma;component/assets/woman.ase şeklindedir. Burada ki formata göre /Projeİsmi;components/ASEdosyaYolu şeklinde olmalıdır. 48
Aksoy B., Dayık M. Teknolojik AraştırmalarTTED 2013(3) 46-51 Şekil 2 de 3D Max üç boyutlu olarak hazırlanmış ve tekstil ürünü giydirilmiş model görüntülenmektedir. Şekil 2. DMax oluşturulan üç boyutlu tekstil ürünü giyidirilmiş model 4. DOKU DOSYASININ DİNAMİK OLARAK DEĞİŞTİRİLMESİ Oluşturulan Silverlight projesi içinde ASE dosyası gösterilmiş olmaktadır. Texture (doku) dosyamızın yolu ASE dosyamızın içinde BITMAP işaretçisinde tanımlıdır. Bu doku dosyasının dinamik olarak değiştirilmesinde Balder motoru yine bize yardım etmektedir. ASE dosyamızın dokusunu dinamik olarak değiştirmek için bir sınıf oluşturup Balder motorunun Imap interface inden implements edilmesi gerekmektedir. (public class Sınıfımız: IMap şeklinde olması gerekmektedir. Oluşturulmuş olan bu sınıf sayesinde dinamik olarak doku dosyalarını değiştirebilmektedir. Bunun için bir WriteableBitmap oluşturularak yeni doku dosyası bu formata dönüştürülmesi gerekmektedir. Bunun içinde; BitmapImage bi = new BitmapImage(new Uri(dokuyolumuz)); Kodu kullanılmaktadır. BitmapImage oluşturduktan sonra bu BitmapImage den aşağıdaki şekilde bir WritableBitmap oluşturulup ve ASE dosyasının dokusu değiştirilebilmektedir. bi.createoptions = BitmapCreateOptions.None; bi.imageopened += (s, ev) => { WriteableBitmap wbm = new WriteableBitmap((BitmapImage)s); Durma2.Material.DiffuseMap = new Sinifimiz(wbm); }; Buradaki Durma2, Geometries:Mesh objesiyle oluşturduğumuz ASE dosyasının Name özelliğidir. Sınıfımız interface imizi kullanarak bu sayede dinamik olarak dokularımızı değiştirebilmekteyiz. Şekil 3 de yukarıdaki kodlarla hazırlanmış olan 3D Max ile hazırlanan ASE dosyasının doku dosyasının değiştirilmesi gösterilmiştir. 49
Teknolojik Araştırmalar: TTED 2013 (3) 46-51 Üç boyutlu Tekstil Ürünü Giydirilmiş Modellerin İnternet... Şekil 3. 3D Max hazırlanmış ASE dosyasına ait doku dosyasının değiştirilmesi 5. SILVERLIGHT PROJESININ WEB ORTAMINDA YAYINLANMASI Silverlight ile proje derledikten sonra.xap uzantılı bir dosya oluşturulmuş olmaktadır. Bu dosyayı basit bir html dosyasının içerisine alarak silverlight uygulamamızın bir web sayfasında gösterilmesini sağlanmaktadır. Aşağıdaki kodlarla xap dosyamızı html sayfasında göstermiş olmaktayız. <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> <param name="source" value="clientbin/durma.xap"/> <param name="onerror" value="onsilverlighterror" /> <param name="background" value="white" /> <param name="minruntimeversion" value="5.0.61118.0" /> <param name="autoupgrade" value="true" /> <a href="http://go.microsoft.com/fwlink/?linkid=149156&v=5.0.61118.0" style="textdecoration:none"> <img src="http://go.microsoft.com/fwlink/?linkid=161376" alt="get Microsoft Silverlight" style="border-style:none"/> </a> </object> Buradaki ClientBin/durma.xap yerine projeye eklediğimiz xap dosyasının yolunu göstererek kendi xap dosyamızın silverlight üzerinde görünmesini sağlayabiliriz. Şekil 4 de doku giydirilmiş örnek bir model görüntülenmektedir. 50
Aksoy B., Dayık M. Teknolojik AraştırmalarTTED 2013(3) 46-51 Şekil 4. Üç boyutlu modele doku dosyası giydirilerek internet ortamına alınması 6. SONUÇ Günümüzde hızla gelişmekte olan internet teknolojileri içerisinde yer alan elektronik ticaretin tekstil sektörünü de etkileyeceği muhakkaktır. Bu nedenle çeşitli modelleme programları ile hazırlanan modellerin ASE dosyası ile Şekil 4 de de görüldüğü gibi üç boyutlu modelin internet sayfasına alınması 5 saniye gibi kısa bir sürede zarfında gerçekleşmiştir. Bu sürenin kısa olması sayesinde üç boyutlu modellerin internet ortamına aktarılması ve döndürülebilmesi de oldukça kolay olmaktadır. 7. KAYNAKLAR 1. Süzen,A.A., İstanbul 2011, Silverlight 4 2. Algan,S., İstanbul 2012, Her Yönüyle C# 4.0 3. http://daron.yondem.com/tr/post/df5efb20-5a04-497b-85d8-48d5c6678956 4. http://balder.codeplex.com/workitem/13691 5. http://balder.codeplex.com/ 51