Merge pull request #38 from oscarmarinmiro/aframe_1_3_0

Aframe 1 3 0
c-frame · Mar 1, 2022 · cb94d3a · cb94d3a
2 parents 80eaacd + 01d48ba
commit cb94d3a
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 80,926 deletions.
diff --git a/dist/aframe-stereo-component.js b/dist/aframe-stereo-component.js
@@ -139,48 +139,35 @@
 
 	              object3D.rotation.y = Math.PI / 2;
 
-	              // If left eye is set, and the split is horizontal, take the left half of the video texture. If the split
-	              // is set to vertical, take the top/upper half of the video texture.
-
-	              if (this.data.eye === "left") {
-	                var uvs = geometry.faceVertexUvs[ 0 ];
-	                var axis = this.data.split === "vertical" ? "y" : "x";
-	                for (var i = 0; i < uvs.length; i++) {
-	                    for (var j = 0; j < 3; j++) {
-	                        if (axis == "x") {
-	                            uvs[ i ][ j ][ axis ] *= 0.5;
-	                        }
-	                        else {
-	                            uvs[ i ][ j ][ axis ] *= 0.5;
-	                            uvs[ i ][ j ][ axis ] += 0.5;
-	                        }
-	                    }
-	                }
-	              }
 
-	              // If right eye is set, and the split is horizontal, take the right half of the video texture. If the split
-	              // is set to vertical, take the bottom/lower half of the video texture.
-
-	              if (this.data.eye === "right") {
-	                var uvs = geometry.faceVertexUvs[ 0 ];
-	                var axis = this.data.split === "vertical" ? "y" : "x";
-	                for (var i = 0; i < uvs.length; i++) {
-	                    for (var j = 0; j < 3; j++) {
-	                        if (axis == "x") {
-	                            uvs[ i ][ j ][ axis ] *= 0.5;
-	                            uvs[ i ][ j ][ axis ] += 0.5;
-	                        }
-	                        else {
-	                            uvs[ i ][ j ][ axis ] *= 0.5;
-	                        }
-	                    }
-	                }
-	              }
+	            // Calculate texture offset and repeat and modify UV's
+	            // (cannot use in AFrame material params, since mappings are shared when pointing to the same texture,
+	            // thus, one eye overrides the other) -> https://stackoverflow.com/questions/16976365/two-meshes-same-texture-different-offset
+
+	            var axis = this.data.split === 'horizontal' ? 'y' : 'x';
+
+	            // !!! NOTE THAT UV texture coordinates, start at the bottom left point of the texture, so y axis coordinates for left eye on horizontal split
+	            // are 0.5 - 1.0, and for the right eye are 0.0 - 0.5 (they are swapped from THREE.js 'y' axis logic)
+
+	            var offset = this.data.eye === 'left' ? (axis === 'y' ? {x: 0, y: 0} : {x: 0, y: 0.5}) : (axis === 'y' ? {x: 0.5, y: 0} : {x: 0, y: 0});
+
+	            var repeat = axis === 'y' ? {x: 0.5, y: 1} : {x: 1, y: 0.5};
+
+	            var uvAttribute = geometry.attributes.uv;
+
+	            for (var i = 0; i < uvAttribute.count; i++ ) {
+	                var u = uvAttribute.getX(i)*repeat.x + offset.x;
+	                var v = uvAttribute.getY(i)*repeat.y + offset.y;
+
+	                uvAttribute.setXY(i, u, v);
+
+	            }
+
+	            // Needed in BufferGeometry to update UVs
 
-	              // As AFrame 0.2.0 builds bufferspheres from sphere entities, transform
-	              // into buffergeometry for coherence
+	            uvAttribute.needsUpdate = true
 
-	              object3D.geometry = new THREE.BufferGeometry().fromGeometry(geometry);
+	            object3D.geometry = geometry
 
 	          }
 	          else{

diff --git a/dist/aframe-stereo-component.min.js b/dist/aframe-stereo-component.min.js
diff --git a/examples/basic_image/index.html b/examples/basic_image/index.html
@@ -1,6 +1,7 @@
 <html>
   <head>
     <title>A-Frame Layer Component - Basic</title>
+    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
     <script src="../build.js"></script>
   </head>
   <body>
@@ -19,7 +20,7 @@
       <a-sky id="sky1" src="#left" stereo="eye:left"></a-sky>
       <a-sky id="sky2" src="#right" stereo="eye:right"></a-sky>
 
-      <-- or alternatively -->
+      <!-- or alternatively -->
 
       <!--<a-sky id="sky1" src="http://i.imgur.com/YAaxpv6.jpg" stereo="eye:left"></a-sky>-->
       <!--<a-sky id="sky2" src="http://i.imgur.com/JUxTnzK.jpg" stereo="eye:right"></a-sky>-->

diff --git a/examples/basic_video/index.html b/examples/basic_video/index.html
@@ -1,40 +1,24 @@
 <html>
   <head>
     <title>A-Frame Layer Component - Basic</title>
+    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
     <script src="../build.js"></script>
   </head>
   <body>
 
 
-    <a-scene>
-
-      <video id="Mary" loop src="textures/MaryOculus.mp4">
-          <source src="textures/MaryOculus.mp4" type="video/mp4"/>
-      </video>
-
-
-
 
 
-      <a-camera position="0 0 10" stereocam="eye:left;"></a-camera>
-
-      <a-entity geometry="primitive: sphere;
-                      radius: 100;
-                      segmentsWidth: 64;
-                      segmentsHeight: 64;"
-              material="shader: flat; src:#Mary;"
-              scale="-1 1 1" stereo="eye:left">
-      </a-entity>
-
-      <a-entity geometry="primitive: sphere;
-                      radius: 100;
-                      segmentsWidth: 64;
-                      segmentsHeight: 64;"
-              material="shader: flat; src:#Mary;"
-              scale="-1 1 1" stereo="eye:right">
-      </a-entity>
-
+    <a-scene>
 
+       <a-assets>
+           <video src="textures/MaryOculus.mp4" id="myVideo"></video>
+       </a-assets>
+      <!-- Camera -->
+      <a-entity camera look-controls position="0 0 0" stereocam="eye:left;"></a-entity>
+      <!-- Video spheres -->
+      <a-entity scale="-1 1 1" play-on-click geometry="primitive:sphere; radius:100; segmentsWidth: 64; segmentsHeight:64" material="shader:flat; src:#myVideo; side:back" stereo="eye:left"></a-entity>
+      <a-entity scale="-1 1 1" play-on-click geometry="primitive:sphere; radius:100; segmentsWidth: 64; segmentsHeight:64" material="shader:flat; src:#myVideo; side:back" stereo="eye:right"></a-entity>
 
     </a-scene>