WebVR'de Metin Oluşturma

Siteyi görüntüleyin

İçinde (https://with.in/), hikaye anlatmaya yönelik bir sanal gerçeklik. Ekip, internette WebVR'yi 2015'te bu ürünün potansiyeliyle hemen ilgilendik. Günümüzde bu ilgi Web platformumuzun benzersiz bir alt alan adında gösterilir. https://vr.with.in/. VR özellikli bir tarayıcıya sahip herkes bir mikrofonlu kulaklık atın. Kendinize dalmak için VR filmleri portföyü var.

Daydream View'daki Chrome'u içeren, ancak bununla sınırlı olmayan bugünü kullanıma sunuyoruz. Örneğin, Cihazınız ve başa takılan ekranla ilgili bilgilere göz atın. https://webvr.info/.

Sanal gerçekliğe özgü diğer oluşturma ortamları gibi, web de bir sahnenin üç boyutlu temsiline dayanıyor. Bu sahnede bir kamera, perspektifiniz ve istediğiniz sayıda nesne bulunur. İşlerin yönetilmesine yardımcı olmak için sahneyi, kamerayı ve nesneleri Atama yapmak için <canvas> öğesinden yararlanan Three.js bilgisayarınızın GPU'suna ekleyebilirsiniz. Projeniz için kullanabileceğiniz birçok yararlı Three.js eklentisi vardır: sahnenizi WebVR'de görüntülenebilir hale getirin. Bunların başlıca ikisi THREE.VREffect görüntü alanı oluşturmak için THREE.VRControls (örneğin, ekranın perspektifini döndürme ve başa takılan ekran) sahnenize ikna edin. RACI matrisinde nasıl uygulayacağınızı öğreneceksiniz. Şu bölüme göz atın: Three.js WebVR örnekleri göz atmanızı öneririm.

WebVR'yi keşfetmeye devam ederken bir sorunla karşılaştık. Bu noktaya metin, bunun ayrılmaz bir parçasıdır. Çoğunlukla video tabanlıdır. İçeriği site içinde metin çevreler; filmlere veya ilgili filmlere ilişkin ek bilgilerin tümü oluşturmayı öğreneceksiniz. Ayrıca, bu metnin tamamı DOM'de oluşturulur. Bizim WebVR keşifleri ve https://vr.with.in/ kullanıma sunuldu <canvas>.

Seçeneklerim neler?

Neyse ki bunu mümkün kılmak için çalışmalarımız devam ediyor. Hatta araştırmamızda metinleri üç boyutlu olarak göstermek için birçok etkili öğesi için bir <canvas> Aşağıda bulduğumuz birkaç matrisin aşağıdakilerin her birinin artı ve eksileriyle işaretlenmiştir:

Kararımız: SDF Bit Eşlem Yazı Tipi

ctx.fillText() ile 2D tuvalde metin kaydırma, harf aralığı ve satır kullanılabilir. ancak görüntü taşması kesiliyor ve gerçekten yakınlaştırırsanız metin bulanık oluyor fark ettim. Kanvas dokusunun boyutunu büyütebilirsiniz, ancak daha sonra veya performans sınırı düşebilir.

Ekstrüde 3D metin temelde üçlü vektör metinle aynıdır, ancak ve muhtemelen bir eğimli olacak, böylece geometrik şekli en az iki kat daha fazla olacaktır. Şunlardan biri Bunlar başlıklar ve logolar için küçük dozlarda kullanılabilir, ancak metinler kullanılabilir ve ikisinde de tipografik özellikler yoktur.

Bit eşlem yazı tipleri karakter başına bir dörtgen (iki üçgen) kullandığından daha az kullanılır. ve diğer platformlardan daha iyi performans üçlü vektörlerden oluşur. Bunlar, doku haritası imgesi kullandıkları ancak SDF'leri olduğu için kafes tabanlıdır. ve çözünürlüğünden bağımsız oldukları için 2D'ye göre daha hoş görünürler. tuval dokusu. Matt DesLauriers' üç-bmfont-text aynı zamanda metin kaydırma için güvenilir tipografik özellikler içerir. satır aralığı, satır yüksekliği ve hizalamayı seçin. Taşma kesilmez. Yazı tipi boyutu ölçekle kontrol edilir. Bu rotayı seçmemizin nedeni, tasarımı için en iyi seçenekleri sunar. Maalesef kolay kullanılır. Biz de diğer kullanıcılara yardımcı olabilme umuduyla geliştiricilerle birlikte çalışır.

1. Bit eşlem yazı tipi (.png + .fnt) oluştur

Hiero, bir bit eşlem yazı tipi paketidir bir aracı olacak. Hiero belgelerinde, projenizin nasıl geçmeden çalıştırın. İlk olarak, yapın. Bu durumda, runnable-hiero.jar dosyası çift tıklandığında Hiero'yu açtıktan sonra, konsolda şu komutla çalıştırmayı deneyin:

java -jar runnable-hiero.jar

Hiero çalışmaya başladıktan sonra bir .ttf veya .otf masaüstü yazı tipini açın, dahil edilmesini istediğiniz karakterleri, efektleri etkinleştirmek için oluşturmayı Java olarak değiştirin, karakterleriniz glif önbellek karesinin tamamını dolduracak şekilde boyutu artırın mesafe alanı efekti ekleyin, mesafe alanının ölçeğini ve dağılımını ayarlayın. İlgili içeriği oluşturmak için kullanılan bir çözüm gibi düşünebilirsiniz. Resim ne kadar yüksek olursa bulanıklık o kadar az olur. ancak Hiero'nun önizlemeyi oluşturması o kadar uzun sürer. Daha sonra bit eşlem yazı tipi. Bir .png resmi ve bir resim öğesi içeren bir bit eşlem yazı tipi AngelCode .fnt yazı tipi açıklama dosyası.

2. AngelCode'u JSON'a dönüştürün

Artık bit eşlem yazı tipi oluşturulduğuna göre, bunu Matt DesLauriers'ın JavaScript uygulaması load-bmfont npm paketi

load-bmfont kodunu tarayıp kullanıcı arabiriminde kullanabiliriz, ancak bunun yerine çalıştırılacak load-bmfont.js Hiero'nun AngelCode .fnt dosyasını dönüştürecek ve .json dosyası:

npm install
node load-bmfont.js

Şimdi load-bmfont'u atlayabilir ve .json yazı tipi dosyasıdır.

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 tara

Yazı tipi yüklendikten sonra, Matt'in üç bmfont-text uygulaması mola vermektir. Kendi uygulamamızda Düğüm'ü kullanmadığımızdan, tarayıcılaştırma three-bmfont-text.js kullanılabilir bir three-bmfont-text-bundle.js dosyası halinde

npm install -g browserify
browserify three-bmfont-text.js -o three-bmfont-text-bundle.js

4. SDF gölgelendirici

Şurada afwidth ve eşik kaydırma çubuklarını ayarlayın: vr.with.in/archive/text-sdf-bitmap/ tıklayın.

5. Kullanım

Kolaylık sağlamak için TextBitmap sarmalayıcı sınıfı tarayıcıdaki üç bmfont-text için

<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 arama:

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üklenir

TextBitmap ayrıca,Three.js raycast etkileşimi için görünmez bir hitbox içerir kullanarak ya da elle takip edilen Oculus Touch veya Vive kumandaları. Metni değiştirdiğinizde isabet kutusunun boyutu otomatik olarak güncellenir seçenekleri vardır.

Bmtext.group, üç.js sahnesine eklenir. Çocuklara erişmek istiyorsanız / Object3D'de metnin sahne grafiği şu şekilde görünür:

6. json'u küçültün ve xoffset'leri değiştirin

Aralık görünümünüz hatalıysa json'daki xoffset'leri düzenlemeniz gerekebilir. Yapıştır almak için json dosyasını Jsbeautifier.org dosyanın küçültülmüş sürümüdür.

Xoffset, temelde bir karakter için global aralıktır. Kerning iki kişilik belirli karakterlere ihtiyaç duyabilir. bir fark yaratmayacağından daha fazla yorucu olabilir, düzenleyebilir, böylece json'un dosya boyutunu küçültmek için diziyi boşaltabilirsiniz. Sonra aralık ayarı için xoffset'leri düzenleyin.

Öncelikle, URL'de hangi karakterlerin hangi karakter kimliğiyle json dosyasını yükleyin. three-bmfont-text-bundle.js içinde 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/ 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 çok sağa gidiyor. Bu karakter kimliği 106'dır. Dolayısıyla json'da "id": 106 değerini bulun ve xoffset'i -1 olarak değiştirin. -10'a.

7. Düzen

Birden fazla metin blokunuz varsa ve bu metin bloklarının yukarıdan aşağıya doğru ilerlemesini HTML'de olduğu gibi, her şeyin manuel olarak konumlandırılması gerekir. her dom öğesini CSS ile değiştirebilirsiniz. Bunu CSS'de yapmayı düşünebiliyor musunuz?

    * { position: absolute; }

3D metin düzeni işte böyledir. Ayrıntılı görünümde başlık, yazar, açıklama ve süre, kendine ait yeni bir TextBitmap nesnesidir stil, renk, ölçek vb.:

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;

Burada, her TextBitmap grubunun yerel başlangıç noktasının dikey olarak olduğu varsayılır. TextBitmap ağının üst kısmıyla hizalı olarak (bkz. ortalayarak text-bitmap.js güncelleme) gerekir. Daha sonra bu nesnelerden herhangi birinin metnini ve yüksekliği farklı bir nesne olursa bu konumları da yeniden hesaplamanız gerekir. Burada, metnin yalnızca y konumu değiştirilir, ancak yalnızca y konumu 3D, metni z yönünde itip çekip çekebilmek ve döndürebilmektir. x, y ve z eksenlerine bakabilirsiniz.

Sonuç

WebVR'deki metin ve düzen kadar kolay ve zahmetsiz hale gelmeden önce HTML ve CSS olarak yaygın şekilde kullanılmaktadır. Ancak işe yarar çözümler mevcuttur ve bunların geleneksel bir HTML web sayfası ile kıyaslayabilirsiniz. WebVR günümüzde ortaya çıkıyor. Yarın muhtemelen daha iyi araçlar olacaktır. O zamana kadar deneyin ve deneyin. Her yerde mevcut olan bir çerçeve olmadan geliştirmek daha benzersiz düşünebilir ve bu çok heyecan verici.