1.1'e giriş

Web sayfanızın 3D modelleri için HTML yazmak kadar kolay.

Ali Polat

Rob Kochman

3D modeller hiç olmadığı kadar alakalı. Perakendeciler, mağaza içi alışveriş deneyimlerini müşterilerin evlerine taşır. Müzeler, eserlerinin 3D modellerini web'deki herkesin kullanımına sunar. Ne yazık ki, bir web sitesine 3D teknolojileri hakkında ayrıntılı bilgi sahibi olmadan veya üçüncü taraf bir sitede 3D içerik barındırmaya gerek kalmadan harika bir kullanıcı deneyimi sunacak şekilde 3D model eklemek zor olabiliyor. 2019'un başlarında kullanıma sunulan <model-viewer> web bileşeni, 3D modelleri web'e birkaç satır HTML yazmak kadar kolay hale getirmeyi amaçlıyor. O zamandan beri ekip, topluluğun geri bildirimlerini ve taleplerini ele almak için çalışıyor. Bu çalışma, bu yılın başlarında yayınlanan <model-viewer> sürüm 1.0'la sonuçlandı. Şimdi <model-viewer> 1.1'in kullanıma sunuyoruz. Sürüm notlarını GitHub'da okuyabilirsiniz.

Geçen yıldan beri ne gibi yenilikler var?

Sürüm 1.1'de, web'de artırılmış gerçeklik (AR) için yerleşik destek, hız ve kalite iyileştirmeleri ile sıkça istenen diğer özellikler bulunur.

Artırılmış gerçeklik

Bir 3D modeli boş bir tuval üzerinde görüntülemek harikadır, ancak modeli kendi alanınızda görüntüleyebilmek çok daha iyidir. Tamamen tarayıcı içinde 3D ve AR için Chrome Android, WebXR kullanarak artırılmış gerçekliği destekler .

Hazır olduğunda, <model-viewer> etiketine ar özelliği ekleyerek etiketi kullanabilirsiniz. Diğer özellikler, modelviewer.dev adresindeki WebXR örneğinde gösterildiği gibi WebXR AR deneyimini özelleştirmenize olanak tanır. Aşağıdaki kod örneği, bunun nasıl görünebileceğini göstermektedir.

<model-viewer src="Chair.glb"
  ar ar-scale="auto"
  camera-controls
  alt="A 3D model of an office chair.">
</model-viewer>

Söz konusu sayfa, bu başlık altında gösterilen yerleşik videoya benzer.

Kamera kontrolleri

<model-viewer> artık görüntünün sanal kamerası (izleyicinin bakış açısı) üzerinde tam kontrol sağlar. Buna kamera hedefi, yörünge (modele göre konum) ve görüş alanı dahildir. Ayrıca otomatik rotasyonu etkinleştirebilir ve kullanıcı etkileşimi için sınırlar (ör. maksimum ve minimum görüntüleme alanları) ayarlayabilirsiniz.

Ek açıklamalar

Ayrıca, modellerinize HTML ve CSS kullanarak ek açıklamalar da ekleyebilirsiniz. Bu özellik genellikle değiştirildiği sırada modelin parçalarına etiket "eklemek" için kullanılır. Ek açıklamalar, görünüşleri ve model tarafından ne ölçüde gizlendikleri dahil olmak üzere özelleştirilebilir. Ek açıklamalar, artırılmış gerçeklikte (AR) da çalışır.

<style>
  button{
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    border: 3px solid blue;
    background-color: blue;
    box-sizing: border-box;
  }

  #annotation{
    background-color: #dddddd;
    position: absolute;
    transform: translate(10px, 10px);
    border-radius: 10px;
    padding: 10px;
  }
</style>
<model-viewer src="https://modelviewer.dev/assets/ShopifyModels/ToyTrain.glb" alt="A 3D model of a Toy Train" camera-controls>
  <button slot="hotspot-hand" data-position="-0.023 0.0594 0.0714" data-normal="-0.3792 0.0004 0.9253">
    <div id="annotation">Whistle</div>
  </button>
</model-viewer>

Daha fazla bilgi için ek açıklamalar dokümanları sayfasına bakın.

Düzenleyici

Sürüm 1.1'de, modelinizi hızlı bir şekilde önizlemenize, farklı <model-viewer> yapılandırmalarını denemenize (ör. pozlama ve gölge yumuşaklığı) denemenize, poster resmi oluşturmanıza ve ek açıklamalar için etkileşimli olarak koordinat almanıza olanak tanıyan bir <model-viewer> "düzenleme" aracı kullanıma sunuluyor.

Oluşturma ve performans iyileştirmeleri

Oluşturma kalitesi, özellikle yüksek dinamik aralıklı (HDR) ortamlar için büyük ölçüde iyileştirilir. <model-viewer> artık görüntü alanında yalnızca tek bir <model-viewer> öğesi olduğunda da doğrudan oluşturma yolu kullanıyor. Bu da özellikle Firefox'ta performansı artırıyor. Son olarak, oluşturma çözünürlüğünü dinamik olarak ölçeklendirmek, kare hızını önemli ölçüde artırdı. Aşağıdaki örnekte bu son iyileştirmelerden bazıları gösterilmektedir.

<model-viewer camera-controls
              skybox-image="spruit_sunrise_1k_HDR.hdr"
              alt="A 3D model of a well-worn  helmet"
              src="DamagedHelmet.glb"></model-viewer>

Kararlılık

<model-viewer> ilk ana sürümüne ulaştığından API kararlılığına öncelik verilir. Bu nedenle, 2.0 sürümü yayınlanana kadar zarar veren değişiklikler önlenir.

Sonraki adım

<model-viewer> sürüm 1.0, en çok istenen özellikleri içeriyor, ancak ekibimiz henüz tamamlanmadı. Performans, kararlılık, belgeler ve araçlarda iyileştirmelerin yanı sıra daha fazla özellik eklenecektir. Önerileriniz varsa GitHub'da sorun bildirin. Ayrıca, PR'lere her zaman açığız. Twitter'da <model-viewer> hesabını takip ederek ve Spectrum'daki topluluk sohbetine göz atarak bağlantıda kalabilirsiniz.