intermosh.github.io/disk.html at main · intermosh/intermosh.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js"></script>
    <style>      .a-enter-vr-button {
      display: none;
    }</style>
    <script>
      AFRAME.registerComponent('additive-shader', {
        schema: {
          targetIndex: { type: 'number', default: 0 }
        },

        init: function () {
          // Obtener video correspondiente al índice
          const video = document.getElementById(`video${this.data.targetIndex}`);

          const texture = new THREE.VideoTexture(video);

          if (!video) {
      console.error(`Video ${videoId} no encontrado`);
      return;
    }

          // Optimización de textura
          texture.minFilter = THREE.LinearFilter;
          texture.magFilter = THREE.LinearFilter;
          texture.format = THREE.RGBAFormat;

          // Crear material con shader optimizado
          const material = new THREE.ShaderMaterial({
            uniforms: {
              baseTexture: { value: texture },
              threshold: { value: 0.2 }
            },
            vertexShader: `
              varying vec2 vUv;
              void main() {
                vUv = uv;
                gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
              }
            `,
            fragmentShader: `
              uniform sampler2D baseTexture;
              uniform float threshold;
              varying vec2 vUv;

              void main() {
                vec4 color = texture2D(baseTexture, vUv);
                // Cálculo de luminancia optimizado
                float luminance = (color.r + color.g + color.b) * 0.333;
                // Transparencia en lugar de discard
                gl_FragColor = vec4(color.rgb, step(threshold, luminance));
              }
            `,
            transparent: true,
            blending: THREE.AdditiveBlending,
            depthTest: false,
            uniformsNeedUpdate: true
          });

          this.el.getObject3D('mesh').material = material;
        }
      });

      // Manejo mejorado de reproducción de videos
      document.addEventListener('DOMContentLoaded', () => {
        const videos = Array.from(document.querySelectorAll('video'));

      });
    </script>
  </head>
  <body>
    <a-scene mindar-image="imageTargetSrc: assets/target.mind;"
             vr-mode-ui="enabled: false"
             device-orientation-permission-ui="enabled: true"
             renderer="antialias: false; highRefreshRate: true"
             id="ar-scene"
             loaded="console.log('Escena y assets cargados')">

      <a-assets>
        <!-- Videos -->
      <a-asset-item id="cinematronic" src="assets/stickers/logo.gltf"></a-asset-item>
      <video id="fondo" preload="auto"  autoplay loop="true" src="assets/stickers/fondo.mp4"></video>
      <video id="frente" preload="auto"  autoplay loop="true" src="assets/stickers/frente.mp4"></video>

      </a-assets>


      <!-- Targets -->
       <a-entity mindar-image-target="targetIndex: 0">
     <!--   <a-plane width="1" height="0.7" position="0 0 0"
                 additive-shader="targetIndex: 0"></a-plane> -->

         <!-- <a-video src="#fondo" width="1" height="1" position="0 -0.5 0" rotation="0 0 0" opacity="0.5"></a-video>
         <a-video src="#frente" width="1" height="1" position="0 -0.8 0" rotation="0 0 0" opacity="0.2"></a-video> -->

          <a-entity position="0 -0.5 0" scale="0.1 0.1 0.1" rotation="0 0 0" gltf-model="#cinematronic"></a-entity>
      </a-entity>
      </a-entity>

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

    </a-scene>
    <script>


    function initTargetListeners(targetEl) {
      targetEl.addEventListener('targetFound', () => {
        console.log('Target found:', targetEl.id);

      });

      targetEl.addEventListener('targetLost', () => {
        console.log('Target lost:', targetEl.id);

      });
    }

    const targets = document.querySelectorAll('[mindar-image-target]');
    targets.forEach((targetEl) => {
      initTargetListeners(targetEl);
    });


    document.querySelectorAll('video').forEach(video => {
  video.addEventListener('error', (e) => {
    console.error('Error en video:', e.target.error);
  });
});

  </script>
  </body>
</html>