Update ar.html

ar.html

@@ -257,7 +257,77 @@
         </a-entity>
         --> 
 
-      <!-- TARGET MINDAR (AR REALE) 1:1 -->
+      <script>
+        AFRAME.registerShader('soft-video', {
+          schema: {
+            src: {type: 'map'},
+            softness: {type: 'number', default: 0.15} // 0.15 controlla la quantità di sfocatura
+          },
+          init: function (data) {
+            this.material = new THREE.ShaderMaterial({
+              uniforms: {
+                map: { value: undefined },
+                softness: { value: data.softness }
+              },
+              vertexShader: `
+                varying vec2 vUV;
+                void main() {
+                  vUV = uv;
+                  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+                }
+              `,
+              fragmentShader: `
+                uniform sampler2D map;
+                uniform float softness;
+                varying vec2 vUV;
+                void main() {
+                  vec4 tex = texture2D(map, vUV);
+                  // Calcola la trasparenza basata sulla distanza dai bordi
+                  float alphaX = smoothstep(0.0, softness, vUV.x) * (1.0 - smoothstep(1.0 - softness, 1.0, vUV.x));
+                  float alphaY = smoothstep(0.0, softness, vUV.y) * (1.0 - smoothstep(1.0 - softness, 1.0, vUV.y));
+                  gl_FragColor = vec4(tex.rgb, tex.a * alphaX * alphaY);
+                }
+              `,
+              transparent: true
+            });
+          },
+          update: function (data) {
+            this.material.uniforms.map.value = data.src;
+            this.material.uniforms.softness.value = data.softness;
+          }
+        });
+      </script>
+      
+      <a-scene mindar-image="imageTargetSrc: ./targets.mind;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
+          <a-assets>
+              <video id="vid" src="./tuo_video.mp4" loop="true" crossorigin="anonymous"></video>
+          </a-assets>
+      
+          <a-entity id="example-target" mindar-image-target="targetIndex: 0">
+              
+              <a-entity id="ar-content-group"
+                        animation="property: position; to: 0 0.1 0; dir: alternate; dur: 2000; loop: true; easing: easeInOutSine">
+                  
+                  <a-entity id="myVid"
+                       geometry="primitive: plane; width: 1.25; height: 1"
+                       material="shader: soft-video; src: #vid; softness: 0.2; transparent: true"
+                       position="0 0 0">
+                  </a-entity>
+      
+                  <a-text value="INNOVATION_LAB_DEV" 
+                          color="#00ff41" 
+                          align="center" 
+                          width="1.5" 
+                          position="0 -0.65 0.01"
+                          font="https://cdn.aframe.io/fonts/Roboto-msdf.json"
+                          animation="property: opacity; from: 0.3; to: 1; dir: alternate; dur: 800; loop: true">
+                  </a-text>
+      
+              </a-entity>
+          </a-entity>
+      </a-scene>
+      
+      <!-- TARGET MINDAR (AR REALE) 5:4 
        <a-entity id="example-target" mindar-image-target="targetIndex: 0">
             <a-entity id="ar-content-group">
                 <a-entity id="myVid" 
@@ -271,7 +341,7 @@
                 </a-text>
             </a-entity>
         </a-entity>
-    </a-scene>
+    </a-scene>-->
 
     <!-- LOGIC -->
     <script>