Skip to content

Commit

Permalink
- Build & Dist
Browse files Browse the repository at this point in the history
  • Loading branch information
@oscarmarinmiro
oscarmarinmiro committed Mar 1, 2022
1 parent e5ca1fd commit 01d48ba
Show file tree
Hide file tree
Showing 5 changed files with 44 additions and 60 deletions.
65 changes: 26 additions & 39 deletions dist/aframe-stereo-component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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{
Expand Down
2 changes: 1 addition & 1 deletion dist/aframe-stereo-component.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion examples/basic_video/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<video src="textures/MaryOculus.mp4" id="myVideo"></video>
</a-assets>
<!-- Camera -->
<a-entity camera look-controls position="0 0 0" stereocam="eye:right;"></a-entity>
<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>
Expand Down
19 changes: 8 additions & 11 deletions examples/build.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,22 +78,22 @@ module.exports = {
// (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

const axis = this.data.split === 'horizontal' ? 'y' : 'x';
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)

const 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 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});

const repeat = axis === 'y' ? {x: 0.5, y: 1} : {x: 1, y: 0.5}
var repeat = axis === 'y' ? {x: 0.5, y: 1} : {x: 1, y: 0.5};

const uvAttribute = geometry.attributes.uv
var uvAttribute = geometry.attributes.uv;

for (let i = 0; i < uvAttribute.count; i++ ) {
let u = uvAttribute.getX(i)*repeat.x + offset.x
let v = uvAttribute.getY(i)*repeat.y + offset.y
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)
uvAttribute.setXY(i, u, v);

}

Expand Down Expand Up @@ -136,8 +136,6 @@ module.exports = {
// If this value is false, it means that (a) this is a video on a sphere [see init method]
// and (b) of course, tick is not added

console.log('tick')

if(!this.video_click_event_added && this.data.playOnClick){
if(typeof(this.el.sceneEl.canvas) !== 'undefined'){

Expand All @@ -150,7 +148,6 @@ module.exports = {
var self = this;

this.el.sceneEl.canvas.onclick = function () {
console.log('canvas clicked')
self.videoEl.play();
};

Expand Down
16 changes: 8 additions & 8 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,22 +70,22 @@ module.exports = {
// (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

const axis = this.data.split === 'horizontal' ? 'y' : 'x';
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)

const 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 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});

const repeat = axis === 'y' ? {x: 0.5, y: 1} : {x: 1, y: 0.5}
var repeat = axis === 'y' ? {x: 0.5, y: 1} : {x: 1, y: 0.5};

const uvAttribute = geometry.attributes.uv
var uvAttribute = geometry.attributes.uv;

for (let i = 0; i < uvAttribute.count; i++ ) {
let u = uvAttribute.getX(i)*repeat.x + offset.x
let v = uvAttribute.getY(i)*repeat.y + offset.y
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)
uvAttribute.setXY(i, u, v);

}

Expand Down

0 comments on commit 01d48ba

Please sign in to comment.