Update viewer_ar.js

viewer_ar.js

@@ -223,19 +223,19 @@
     var BLOB_SIZE = 0.7;
     var BLOB_OFFSET_Y = 0.005;
 
-    function makeBlobTexture(app, size) {
-      size = size || 256;
-      var cvs = document.createElement('canvas');
+    function makeBlobTexture(app, size = 256) {
+      const cvs = document.createElement('canvas');
       cvs.width = cvs.height = size;
-      var ctx = cvs.getContext('2d');
-      var r = size * 0.45;
-      var grd = ctx.createRadialGradient(size / 2, size / 2, r * 0.2, size / 2, size / 2, r);
-      grd.addColorStop(0, 'rgba(0,0,0,0.35)');
-      grd.addColorStop(1, 'rgba(0,0,0,0.0)');
+      const ctx = cvs.getContext('2d');
+    
+      const r = size * 0.45;
+      const grd = ctx.createRadialGradient(size/2, size/2, r*0.2, size/2, size/2, r);
+      grd.addColorStop(0, 'rgba(0,0,0,0.35)'); // centre sombre
+      grd.addColorStop(1, 'rgba(0,0,0,0.0)');  // bords transparents
       ctx.fillStyle = grd;
       ctx.fillRect(0, 0, size, size);
-
-      var tex = new pc.Texture(app.graphicsDevice, {
+    
+      const tex = new pc.Texture(app.graphicsDevice, {
         width: size,
         height: size,
         format: pc.PIXELFORMAT_R8_G8_B8_A8,
@@ -247,28 +247,44 @@
       return tex;
     }
 
+
     function createBlobShadowAt(pos, rot) {
-      var tex = makeBlobTexture(app, 256);
-      var blobMat = new pc.StandardMaterial();
-      blobMat.diffuse = new pc.Color(0, 0, 0);
+      const tex = makeBlobTexture(app, 256);
+    
+      const blobMat = new pc.StandardMaterial();
+      // Couleur noire (ombre)
+      blobMat.diffuse.set(0, 0, 0);
+    
+      // >>> CLÉ : utiliser l’alpha de la texture pour la transparence
       blobMat.opacity = 1.0;
-      blobMat.blendType = pc.BLEND_PREMULTIPLIED;
+      blobMat.opacityMap = tex;              // on se sert du canal A
+      blobMat.opacityMapChannel = 'a';
+    
+      // Pas besoin d’éclairage sur une “ombre peinte”
+      blobMat.useLighting = false;
+    
+      // Mélange standard + pas d’écriture dans le depth (évite de masquer le modèle)
+      blobMat.blendType = pc.BLEND_NORMAL;   // (si halos bizarres, essayer PREMULTIPLIED)
       blobMat.depthWrite = false;
-      blobMat.diffuseMap = tex;
+    
+      // Optionnel: adoucir un poil le tri/transpa
+      blobMat.alphaTest = 0;                 // on ne découpe pas “dur”, on laisse le gradient
       blobMat.update();
-
-      var e = new pc.Entity("BlobShadow");
+    
+      const e = new pc.Entity("BlobShadow");
       e.addComponent("render", { type: "plane", castShadows: false, receiveShadows: false });
       e.render.material = blobMat;
-
+    
+      // Place légèrement au-dessus du sol pour éviter le z-fighting
       e.setPosition(pos.x, pos.y + BLOB_OFFSET_Y, pos.z);
-      e.setRotation(rot);
+      e.setRotation(rot);                    // suit le plan horizontal détecté
       e.setLocalScale(BLOB_SIZE, 1, BLOB_SIZE);
-
+    
       app.root.addChild(e);
       return e;
     }
 
+
     // Euler base
     var baseEulerX = 0, baseEulerZ = 0;