Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Handle 360_CUBE projection #86

Merged
merged 5 commits into from
May 23, 2018
Merged

Conversation

dillontiner
Copy link
Contributor

No description provided.

@jbroberg
Copy link
Contributor

Awesome. Do you have a link to a good sample we can test with? I have some of my own but I'd love to see what you tested against.

@dillontiner
Copy link
Contributor Author

dillontiner commented May 14, 2018

Added the cubemap video I've been using for reference under the samples directory. It's just a sample I downloaded and transformed with transform360. The video itself leaves some visible seams on the cube edges for reasons explored in this blog post, which fall on the encoding side.

@dillontiner dillontiner reopened this May 14, 2018
Copy link
Contributor

@brandonocasey brandonocasey left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested this with some content that i generated and it looks great. I just have one comment about moving this.movieMaterial around since it is going to be different.

src/plugin.js Outdated
@@ -387,7 +386,8 @@ class VR extends Plugin {
this.videoTexture.magFilter = THREE.LinearFilter;
this.videoTexture.format = THREE.RGBFormat;

this.movieMaterial = new THREE.MeshBasicMaterial({ map: this.videoTexture, overdraw: true, side: THREE.FrontSide });
// double sided to render inside of cube
this.movieMaterial = new THREE.MeshBasicMaterial({ map: this.videoTexture, overdraw: true, side: THREE.DoubleSide });
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems like we may just want to put this in this.changeprojection_ and have a separate creation in 360, 360_TR/360_LR, and 360_CUBE. Previously we had this set to DoubleSide but it results in un-needed drawing on the outside of the sphere in 360.

@dillontiner
Copy link
Contributor Author

I paired each projection's this.movieMaterial assignment with its this.movieGeometry definition.

I also updated the cubemap faces so they precisely match the equivalent equirectangular video. Just for reference, the cubemap I worked with has the following orientation from the output of transform360:
| Left | Right | Top |
| Bottom | Front | Back |


const left = [new THREE.Vector2(0, 0.5), new THREE.Vector2(0.333, 0.5), new THREE.Vector2(0.333, 1), new THREE.Vector2(0, 1)];
const right = [new THREE.Vector2(0.333, 0.5), new THREE.Vector2(0.666, 0.5), new THREE.Vector2(0.666, 1), new THREE.Vector2(0.333, 1)];
const top = [new THREE.Vector2(0.666, 0.5), new THREE.Vector2(1, 0.5), new THREE.Vector2(1, 1), new THREE.Vector2(0.666, 1)];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@ishita12
Copy link

QA LGTM

@brandonocasey brandonocasey merged commit 19ae76d into videojs:master May 23, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants