search

hiukim / mind-ar-js

Web Augmented Reality. Image Tracking, Face Tracking. Tensorflow.js
MIT License
2.22k stars 414 forks source link

how to use image assets with transparency #379

Closed carlesgutierrez closed 1 year ago

carlesgutierrez commented 1 year ago

Dears mind-ar-js users and creator, I've not seen documentation or issues related to this. I would like to use images with alpha ( png ) so the image overlapped might do the magic as 3d model does. Is there any way to allow it? Thanks a lot for this space and awesome framework.

dvbridges commented 1 year ago

Hi, you can set the material of a plane element to be your image asset, and set the opacity of the plane element. E.g., 

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="apple-mobile-web-app-capable" content="yes">    
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.1/dist/mindar-image-aframe.prod.js"></script>
  </head>

  <body>
    <a-scene mindar-image="filterMinCF:0.0001; filterBeta: 0.001; imageTargetSrc: https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.2.1/examples/image-tracking/assets/card-example/card.mind;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
      <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
      <a-assets>
        <img id="myImg" src="https://cdn.glitch.global/f5316bb0-3ab9-47ac-8aa7-6a1152453c0d/card.png?v=1681240450870" preload>
      </a-assets>
      <a-entity mindar-image-target="targetIndex: 0" id="target">
        <a-plane material="src: #myImg; opacity: 0.25; transparent: true"></a-plane>
      </a-entity>
    </a-scene>
  </body>
</html>

See also material docs - https://aframe.io/docs/0.4.0/components/material.html

carlesgutierrez commented 1 year ago

Thanks for your reply but my question is more about how to use the transparency of the png image it self. I guess is possible, I've seen it working with pictarize but not here with mind-ar-js -> alpha is painted in black instead of transparent.

My code: ( A4-TargetRelax2.png is an image with transparency )


<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://aframe.io/releases/1.4.1/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.1/dist/mindar-image-aframe.prod.js"></script>
  </head>
  <body>
      <a-scene mindar-image="imageTargetSrc: ./data/targets_nature_scaled5.mind;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">

      <a-assets>
         <img id="card" src="./data/A4-TargetRelax2.png" /> 
      </a-assets>

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

      <a-entity mindar-image-target="targetIndex: 0">
        <a-plane src="#card" position="0 0 0" height="1" width="1" rotation="0 0 0"></a-plane>
      </a-entity>

    </a-scene>
  </body>
</html>
dvbridges commented 1 year ago

Have you tried adding "transparent: true" to your a-plane? I have transparent background on transparent png files when using this.

carlesgutierrez commented 1 year ago

Thanks @dvbridges That was!