MindAR nedir? Nasıl Kullanılır?

Yazan /

Bu yazdımda MindAR nedir? MindAR ile nasıl basit bir proje geliştirebiliriz ve bu porjeyi geliştirirken bilmemiz gerekenler neler onlar üzerine konuşacağız.

Öncelikle MindAR için orjinal dökümanına şuradaki linkten ulaşabilirsiniz: https://hiukim.github.io/mind-ar-js-doc/

Şimdi örnek bir proje üzerinden ilerleyelim. Aşağıdaki kod satırları telefonun kamerası ile iki farklı görseli tarattığınızda onlara göre 3boyutlu model oluşturuyor.

Yani kek görselini telefonunuzun kamerası ile taratırsan 3Boyutlu kek açılır, eğer kahve fotoğrafını taratırsanız kahve açılır.

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v7.4.0/dist/aframe-extras.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js"></script>
  </head>
  <body>
    <a-scene
      mindar-image="imageTargetSrc: ./assets/coffeandcake.mind"
      
      color-space="sRGB"
      renderer="colorManagement: true, physicallyCorrectLights"
      vr-mode-ui="enabled: false"
      device-orientation-permission-ui="enabled: false"
    >
      <a-assets>
        <a-asset-item id="cakeModel" src="./assets/cake/cake.glb"></a-asset-item>
        <a-asset-item id="coffeModel" src="./assets/coffe/coffe.glb"></a-asset-item>
        
      </a-assets>

      <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>

      <a-entity mindar-image-target="targetIndex: 0">
        <a-gltf-model rotation="0 0 0" position="0 -0.25 0" scale="0.05 0.05 0.05" src="#cakeModel" animation-mixer>
        </a-gltf-model>
      </a-entity>
      
      <a-entity mindar-image-target="targetIndex: 1">
        <a-gltf-model rotation="0 0 0" position="0 -0.25 0" scale="0.05 0.05 0.05" src="#coffeModel" animation-mixer>
        </a-gltf-model>
      </a-entity>
      

      
    </a-scene>
  </body>
</html>

Şimdi biraz detaya girelim.

Image Targets Compiler ne işe yarar?

Ne Yapar: Senin kek.jpg veya kahve.png gibi normal resimlerini alır.

Nasıl Yapar: Bu resimleri analiz eder ve onların “tanınabilir özelliklerini” (keskin köşeler, desenler, kontrastlar gibi) çıkarır. Bu özellikler, resmin dijital bir parmak izi gibidir.

Sonuç: Bu “parmak izi” verilerini, bilgisayarın hızlıca okuyabileceği optimize edilmiş tek bir .mind dosyası içinde toplar.

mindar-image (A-Scene Niteliği)

imageTargetSrc: ... kısmı ise MindAR’a şunu söyler: “Kamerayı açtığında, tanıman için kullanacağın ‘parmak izi’ dosyası (yani .mind dosyası) budur.”

targetIndex: 0 ve targetIndex: 1

Bunlar, .mind dosyanızın içindeki “sıra numaralarıdır”.

  • Compiler’a görselleri yüklerken bir sıra oluşturdun (örn: 1. kek, 2. kahve).
  • targetIndex: 0: .mind dosyasına eklediğin ilk görselin (kek) kimliğidir.
  • targetIndex: 1: .mind dosyasına eklediğin ikinci görselin (kahve) kimliğidir.
  • Bu indeks numaraları, MindAR’ın hangi hedefi bulduğunu kodunuza bildirmesinin yoludur.

<a-entity mindar-image-target="...">

Bu etiket, 3D modeliniz için bir “çapa” (anchor) veya “taşıyıcıdır”.

  • Ne Yapar: Normalde görünmezdir.
  • mindar-image-target="targetIndex: 0" özelliği sayesinde MindAR’a şu komutu verir: “Eğer kamerada index 0‘ı (keki) bulursan, beni (bu a-entity‘yi) görünür yap ve tam o fiziksel kek resminin üzerine yerleştir.”
  • İçine koyduğun <a-gltf-model> de bu sayede görünür hale gelir. Kısacası bu etiket, “bulunan hedef (index)” ile “gösterilecek 3D model” arasındaki köprüdür.

Bu, aframe-extras (ekstra özellikler) kütüphanesinden gelen bir bileşendir.

  • Ne İşe Yarar: Yüklediğin 3D modelin (.glb veya .gltf) içinde gömülü bir animasyon varsa (mesela dönme, zıplama, yürüme gibi), animation-mixer bu animasyonu otomatik olarak bulur ve oynatır.
  • Eğer modelin animasyonlu değilse hiçbir şey yapmaz, ama kodda durmasının bir zararı da yoktur.

&lt;html>
│
├── &lt;head>
│   │   (Tarayıcı ayarları ve gerekli kütüphanelerin (script) yüklendiği yer)
│   │
│   ├── &lt;meta> (Mobil uyumluluk için viewport ayarı)
│   ├── &lt;script> (A-Frame kütüphanesi)
│   ├── &lt;script> (A-Frame Extras - animasyonlar vb. için)
│   └── &lt;script> (MindAR kütüphanesi)
│
└── &lt;body>
    │   (Sayfada görünen tüm içeriğin bulunduğu yer)
    │
    └── &lt;a-scene>
        │   (Tüm AR deneyiminin ana kapsayıcısı. MindAR ayarları burada yapılır)
        │   (Özellik: mindar-image="imageTargetSrc: ...")
        │
        ├── &lt;a-assets>
        │   │   (Modeller, resimler gibi varlıkların önceden yüklenmesini sağlar)
        │   │
        │   ├── &lt;a-asset-item> (ID: cakeModel, Kaynak: cake.glb)
        │   └── &lt;a-asset-item> (ID: coffeModel, Kaynak: coffe.glb)
        │
        ├── &lt;a-camera>
        │   │   (Kullanıcının bakış açısı, yani telefonun kamerası)
        │
        ├── &lt;a-entity> (Hedef 0)
        │   │   (Bu, .mind dosyanızdaki "targetIndex: 0" olan resmi temsil eder)
        │   │
        │   └── &lt;a-gltf-model>
        │       │   (Hedef 0 algılandığında görünecek 3D model)
        │       │   (Kaynak: #cakeModel)
        │
        └── &lt;a-entity> (Hedef 1)
            │   (Bu, .mind dosyanızdaki "targetIndex: 1" olan resmi temsil eder)
            │
            └── &lt;a-gltf-model>
                │   (Hedef 1 algılandığında görünecek 3D model)
                │   (Kaynak: #coffeModel)

Yorum bırakın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Scroll to Top