iOS11webGL/index.html at master · VRagments/iOS11webGL · 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>360 Video</title>
    <meta name="description" content="360 Video - Hls WebGL">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.5.0/aframe.min.js"></script>
  <script type="text/javascript">
function getMaterialData( data ) {
  return {
    color: new THREE.Color( data.color ), // eslint-disable-line no-undef
    fog: data.fog,
    wireframe: data.wireframe,
    wireframeLinewidth: data.wireframeLinewidth,
  };
}

AFRAME.registerShader( 'video-shader', { // eslint-disable-line no-undef
  schema: {
    color: { type: 'color' },
    fog: { default: true },
    height: { default: 256 },
    offset: { default: { x: 0, y: 0 }, type: 'vec2' },
    repeat: { default: { x: 1, y: 1 }, type: 'vec2' },
    src: { type: 'map' },
    width: { default: 512 },
    wireframe: { default: false },
    wireframeLinewidth: { default: 2 },
  },

    /**
     * Initializes the shader.
     * Adds a reference from the scene to this entity as the camera.
     */
  init: function( data ) { // eslint-disable-line sort-keys
    this.material = new THREE.ShaderMaterial( { // eslint-disable-line no-undef
      fragmentShader: [
        'uniform sampler2D texture;',
        'varying vec2 vUV;',
        'void main() {',
        '	gl_FragColor = texture2D( texture, vUV  )' + (AFRAME.isIOS ? '.bgra' : '') + ';',
        '}',
      ].join( '\n' ),
      uniforms: {
        texture: { type: 't', value: this.map },
      },
      vertexShader: [
        'varying vec2 vUV;',
        'void main() {',
        '	vUV = vec2( uv.x, 1.0 - uv.y );',
        '	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
        '}',
      ].join( '\n' ),
    } );
    AFRAME.utils.material.updateMap( this, data );
  },

  update: function( data ) {
    this.updateMaterial( data );
    AFRAME.utils.material.updateMap( this, data );
  },

    /**
     * Updating existing material.
     *
     * @param {object} data - Material component data.
     */
  updateMaterial: function( data ) {
    var material = this.material;
    data = getMaterialData( data );
    Object.keys( data ).forEach( function( key ) {
      material[key] = data[key];
    } );
    material.uniforms = {
      texture: { type: 't', value: material.map },
    };
  },
} );
  </script>
  <script>
    function clickButton() {
      var vid = document.getElementById("video");
      vid.play();
    }
  </script>
  </head>
  <body>
    <button
          style="height: 50px"
          onClick="clickButton()"
    >
      "Play Video"
    </button>
    <a-scene>
      <a-assets>
        <video
          controls="false"
          id="video"
          src="guggenheim_lapse2.mp4.m3u8"
          playsinline="true"
          loop
        />
      </a-assets>

      <a-videosphere
        src="#video"
        rotation="0 180 0"
        shader="video-shader"
      >
      </a-videosphere>
    </a-scene>
  </body>
</html>