Dahili (https://with.in/), sanal gerçeklikte hikaye anlatma için bir platformdur. Ekip 2015'te WebVR'yi duyduğunda bunun potansiyelini hemen merak ettik. Günümüzde bu ilgi, Web platformumuzun https://vr.with.in/ benzersiz bir alt alanına yayılıyor. VR filmleri içeren portföyümüze dalmak için, VR özellikli bir tarayıcısı olan herkes siteye gidebilir, bir düğmeye basabilir ve bir başlığa sahip olabilir.
Şu anda bu özellik Daydream View'daki Chrome'u içerir ancak bunlarla sınırlı değildir. Cihazınız ve başa takılan ekran hakkında daha fazla bilgi için https://webvr.info/ adresine bakın.
Sanal gerçekliğe özgü diğer oluşturma ortamları gibi web'de de sahnelerin üç boyutlu temsili temel alınır. Bu sahnede bir kamera, perspektifiniz ve istediğiniz sayıda nesne bulunur. Bu sahneyi, kamerayı ve nesneleri yönetmeye yardımcı olmak için Three.js adlı bir kitaplık kullanıyoruz. Bu kitaplık, oluşturmayı bilgisayarınızın GPU'suna göndermek için <canvas> öğesinden yararlanır. Sahnenizi WebVR'de görüntülenebilir hale
getirmek için birçok kullanışlı Three.js eklentisi vardır. En önemli ikisi, her göz için bir görüntü alanı oluşturmak için THREE.VREffect ve perspektifi (ör.başa takılan ekranın rotasyonu ve konumu) sahnenize ikna edici bir şekilde çevirmek için THREE.VRControls. Bunun nasıl uygulanacağına dair
çok sayıda örnek var. Başlangıç yolları için Three.js WebVR örneklerine göz atın.
WebVR ile ilgili keşif çalışmalarımıza devam ettikçe bir sorunla karşılaştık. Web içeriğine baktığımızda ise metin, onun ayrılmaz bir parçasıdır. İçeriğimizin büyük bir kısmı video
olsa da, Site içinde metnine gittiğinizde içeriği çevreler; kullanıcı arayüzü ve bir film ya da ilgili filmlerle ilgili ek bilgilerin tamamı metinden oluşturulur. Ayrıca, bu metnin tamamı DOM'da oluşturulur. WebVR keşiflerimiz ve https://vr.with.in/ artık <canvas> sürümünde.
Seçeneklerim nelerdir?
Neyse ki bunu mümkün kılmak için çalışmalar devam ediyor. Araştırmamızda, bir <canvas> öğesinde üç boyutlu ortamda metin oluşturmanın birçok etkili yolunu bulduk. Aşağıda, her birinin artıları ve eksileriyle işaretlenmiş birkaç seçenekten oluşan bir matris yer almaktadır:
| Çözünürlükten Bağımsız | Yazı Tipi Özellikleri | Performans | Uygulama Kolaylığı | |
|---|---|---|---|---|
| 2D tuval metni | Evet | Evet | Evet | |
| Üçlü vektör metni | Evet | Evet | ||
| Çıkartılmış 3D metin | Evet | |||
| İşaretli mesafe alanı bit eşlem metni | Evet | Evet | Evet |
Kararımız: SDF Bit Eşlem Yazı Tipi
ctx.fillText() özelliğine sahip 2D tuvalde metin kaydırma, harf aralığı ve satır yüksekliği kullanılsa da çok fazla yakınlaştırdığınızda taşma kesilir ve metin bulanık olur. Tuval dokusunun boyutunu artırabilirsiniz, ancak doku boyutu üst sınırı aşılabilir ya da doku çok büyükse performans düşebilir.
Eklenmiş 3D metin temel olarak üçgenleştirilmiş vektör metniyle aynıdır, ancak derinliği ve muhtemelen en az iki kat geometrik şekline sahiptir. Bu ikisinden biri küçük dozlarda başlıklarda veya logolarda işe yarayabilir, ancak çok sayıda metinde iyi performans göstermez ve ikisinde de tipografik özellikler yoktur.
Bit eşlem yazı tipleri, karakter başına bir dörtlü (iki üçgen) kullanır. Bu nedenle daha az geometrik şekil kullanır ve üçgenleştirilmiş vektörlerden daha iyi performans gösterirler. Bunlar, doku harita imgesi kullandıkları için hâlâ kafes tabanlıdır ancak SDF gölgelendiriciyle temelde çözünürlükten bağımsızdırlar, dolayısıyla 2D tuval dokusundan daha iyi görünürler. Matt DesLauriers'in üç bmfont-text'i, metin kaydırma, harf aralığı, satır yüksekliği ve hizalama için güvenilir tipografik özellikler de içerir. Taşma kesilmez. Yazı tipi boyutu, ölçek yoluyla kontrol edilir. Performansı koruyarak tasarım için en iyi seçenekleri sunduğu için bu yolu seçtik. Ne yazık ki uygulanması o kadar kolay değildi. WebVR alanında çalışan diğer geliştiricilere yardımcı olabilmek umuduyla adımları üzerinden geçeceğiz.
1. Bit eşlem yazı tipi oluştur (.png + .fnt)
Hiero, Java ile çalışan bir bit eşlem yazı tipi paketleme aracıdır. Hiero belgeleri, karmaşık bir derleme sürecinden geçmeden nasıl çalıştırılacağını tam olarak açıklamıyor. Henüz yapmadıysanız ilk olarak Java'yı yükleyin. Ardından, runnable-hiero.jar dosyasının çift tıklanması Hiero'yu açmazsa dosyayı konsolda şu komutla çalıştırmayı deneyin:
java -jar runnable-hiero.jar
Hiero çalışırken bir .ttf veya .otf masaüstü yazı tipi açın, eklemek istediğiniz ekstra karakterleri girin, efektleri etkinleştirmek için oluşturmayı Java ile değiştirin, karakterlerinizin tüm glif önbellek karesini dolduracağı şekilde boyutu artırın, mesafe alanı efekti ekleyin, uzaklık alanının ölçeğini ayarlayın ve yayın. Ölçek değeri bir çözüm gibidir. Görüntü ne kadar yüksek olursa görüntü o kadar az bulanık olur, ancak Hiero'nun önizlemeyi oluşturması o kadar uzun sürer. Sonra bit eşlem yazı tipinizi kaydedin. Bir .png resmi ve bir AngelCode .fnt yazı tipi açıklama dosyasından oluşan bir bit eşlem yazı tipi oluşturur.
2. AngelCode'u JSON'a dönüştür
Bit eşlem yazı tipi oluşturulduğuna göre Matt DesLauriers'in load-bmfont npm paketi ile javascript uygulamamıza yüklememiz gerekir.
load-bmfont dosyasını tarayıcı haline getirip kullanıcı arabiriminde kullanabiliriz ancak bunun yerine, Hiero'nun AngelCode.fnt dosyasını dönüştürmek ve bir .json dosyasına kaydetmek için Node ile load-bmfont.js'yi çalıştıracağız:
npm install
node load-bmfont.js
Artık load-bmfont'u atlayıp .json yazı tipi dosyasında sadece bir XHR (XMLHttpRequest) isteği yapabiliriz.
var r = new XMLHttpRequest();
r.open('GET', 'fonts/roboto/bitmap/roboto-bold.json');
r.onreadystatechange = function() {
if (r.readyState === 4 && r.status === 200) {
setup(JSON.parse(r.responseText));
}
};
r.send();
function setup(font) {
// pass font into TextBitmap object
}
3. Üç-bmfont-text'i tarayıcılaştır
Yazı tipi yüklendikten sonra gerisini Matt'in üç bmfont-metni halleder. Kendi uygulamamız için Node kullanmadığımızdan, three-bmfont-text.js dosyasını browserify haline getirip kullanılabilir bir three-bmfont-text-bundle.js oluşturacağız.
npm install -g browserify
browserify three-bmfont-text.js -o three-bmfont-text-bundle.js
4. SDF gölgelendirici
İşaretli mesafe alan gölgelendiricinin etkisini görmek için vr.with.in/archive/text-sdf-bitmap/ üzerindeki afwidth ve eşik kaydırma çubuklarını ayarlayın.
5. Kullanım
Kolaylık sağlamak amacıyla, tarayıcılaştırılmış üç-bmfont-text için bir TextBitmap sarmalayıcı sınıfı oluşturdum.
<script src="three-bmfont-text-bundle.js"></script>
<script src="sdf-shader.js"></script>
<script src="text-bitmap.js"></script>
.json yazı tipi dosyası için bir XHR isteği oluşturun ve geri çağırmada bir metin nesnesi oluşturun:
var bmtext = new TextBitmap({ options });
Metni değiştirmek için:
bmtext.text = 'The quick brown fox jumps over the lazy dog.';
scene.add( bmtext.group );
hitBoxes.push( bmtext.hitBox );
Bit eşlem yazı tipinin .png dosyası, text-bitmap.js içinde THREE.TextureLoader ile yüklendi
TextBitmap ayrıca fare, kamera veya Oculus Touch ya da Vive denetleyicileri gibi el ile takip edilen hareket denetleyicileri üzerinden üç.js raycast etkileşimi için görünmez bir isabet kutusu içerir. Metin seçeneklerini değiştirdiğinizde, isabet kutusunun boyutu otomatik olarak güncellenir.
Bmtext.group, üç.js sahnesine eklenir. Alt öğelere/Object3D'lere erişmek isterseniz metnin sahne grafiği şu şekilde görünür:
6. JSON'u birleştirme ve xoffset'leri değiştirme
Aralık ayarınız kapalıysa json'daki xoffset'leri düzenlemeniz gerekebilir. Dosyanın küçültilmemiş bir sürümünü almak için json dosyasını Jsbeautifier.org'a yapıştırın.
xoffset, bir karakter için temelde genel aralıktır. Kerning, yan yana görünen iki belirli karakter içindir. Aralık dizisindeki varsayılan değerler aslında bir fark yaratmaz ve düzenlemek çok yorucu olur. Bu nedenle, json'un dosya boyutunu azaltmak için diziyi boşaltabilirsiniz. Ardından aralık için xoffset'leri düzenleyin.
İlk olarak, JSON'da hangi karakterlerin hangi karakter kimliğiyle geleceğini bulmanız gerekir. three-bmfont-text-bundle.js dosyasında 240. satırdan sonra console.log ekleyin:
var id = text.charCodeAt(i)
// console.log(id);
Ardından https://vr.with.in/archive/text-sdf-bitmap/ sayfasında dat.gui metin alanına yazın ve bir karakterin karşılık gelen kimliğini bulmak için konsolu kontrol edin.
Örneğin, bit eşlem yazı tipimizde "j" sürekli olarak sağda yer alıyor. Karakter kimliği 106'dır. Bu yüzden, json dosyasında "id": 106 öğesini bulun ve x ofsetini -1'den -10'a değiştirin.
7. Düzen
Birden çok metin bloğunuz varsa ve HTML gibi yukarıdan aşağıya doğru akmasını istiyorsanız, her dom öğesini CSS ile mutlak konumlandırmaya benzer şekilde her şeyin manuel olarak konumlandırılması gerekir. Bunu CSS'de yapmayı düşünebiliyor musunuz?
* { position: absolute; }
3D metin düzeni böyle bir şeydir. Ayrıntı görünümünde: başlık, yazar, açıklama ve süre, kendi stilleri, rengi, ölçeği vb. özelliklerine sahip yeni bir TextBitmap nesnesidir:
author.group.position.y = title.group.position.y - title.height - padding;
description.group.position.y = author.group.position.y - author.height - padding;
duration.group.position.y = description.group.position.y - description.height - padding;
Bu, her bir TextBitmap grubunun yerel kaynağının, TextBitmap ağının üst kısmıyla dikey olarak hizalandığını varsayar (text-bitmap.js güncellemesinde ortalamaya bakın). Daha sonra bu nesnelerden herhangi birinin metnini değiştirirseniz ve söz konusu nesnenin yüksekliği değişirse bu konumları da yeniden hesaplamanız gerekir. Burada, yalnızca metnin y konumu değiştirilir, ancak 3D modda çalışmaya bir fırsat da metni z yönünde itip çekebilmemizin yanı sıra x, y ve z eksenleri etrafında döndürebilmemizdir.
Sonuç
WebVR'de metin ve düzenin, HTML ve CSS kadar kolay ve yaygın bir şekilde kullanılmaya başlanmadan önce tamamlanması için çok yol gerekiyor. Ancak çalışan çözümler mevcuttur ve WebVR'de geleneksel bir HTML web sayfasıyla yapabileceğinizden çok daha fazlasını yapabilirsiniz. WebVR şu anda mevcuttur. Yarın muhtemelen daha iyi araçlar çıkar. O zamana kadar deneyip deney yapın. Her yerde bulunan bir çerçeve olmadan geliştirmek daha benzersiz projelerin ortaya çıkmasını sağlıyor ve bu da heyecan verici.