CSS3D Renderer YouTube Issues

Questions
1

I placed a YouTube video in my app using the CSS3D renderer, you can see a simplified example in the JSFiddle below.

I have 2 issues:

1 - The video goes black at certain angles. Not sure why.

2 - The YouTube API’s div handling is causing problems:

  • The YouTube API works by replacing a blank div of your making with an iframe, however the API isn’t disposing of the original div which occludes the the video. (The div is pink in the JSFiddle)
  • I came up with a hacky solution: set the div width to 0px with jquery. But the presence of this random div is causing performance issues in my app - getting rid of it also gets rid of the YouTube div.

Any insight on either of these issues would be much appreciated!
https://jsfiddle.net/fractalfantasy/ed9fw57x/22/

2

/cc

3

Not an answers to your question, but do you know that you can set ‘pointer-events: none;’ to your webgl div to be able to interact with the iframe?

4

No I actually didn’t realize this :slight_smile: However in my app I still need the pointer events in the webgl frame for interaction, which is why I’m using the YouTube API. The play button works locally, not sure why it doesn’t play on JSFiddle.

Thanks and sorry for the double post!

I was able to solve problem #1. The black flickering was caused by the Youtube API div being given a color. If you keep the color blank it doesn’t flicker - however the div still causes performance issues when it’s not visible - it’s hard to demonstrate this issue in JSFiddle (very inexpensive scene and the the YouTube video is not playing)

5

One thing I notice in my app is if I don’t press play on the YouTube and just look around the performance is super slow (like 10FPS) once i press play it’s all gucci and back up to 60 fps!

6

(Many?) pointer events can still be used, as is shown here, not sure why the orbit control stops working in your example. Sometimes the pointer events css are activated on a mouseover on the youtube div, and removed on the mouse-out. But a separate button also works, of course :wink:

7

OK I found found the cause of the performance issue:

  • THREE.CSS3DRenderer struggles to matrix transform when YouTubes overlay elements (titles, logo, buttons etc…) are present, causing FPS to drop low. This is also noticable in the official three.js css3d youtube example, where performance sucks until all videos are playing, and youtubes overlay elements are gone.
  • When the YouTube is playing and the overlay elements dissapear after a few seconds the css renderer stops struggling with the transformations, and FPS goes back up.
  • I suspect this could be fixed/optimized in the THREE.CSS3DRenderer, but I have no idea where I’d start… so I came up with a hacky solution.

MY HACKY SOLUTION

  • Set the “css” div display to “none” when the overlay elements are visible, and set it to visible when they go away (after ~7 second/s)

  • Here’s my code:

      function onPlayerStateChange(event) {
  	var playerState = event.data;
  	if (playerState === 1 ){ //playing
  		setTimeout(function(){ 
  			$("#css").css("display", "block");
  		}, 7000);
  		
  	}
  	if (playerState === -1 | playerState === 0  ){ //unstarted | ended | paused | buffering | cued
  		$("#css").css("display", "none");
  		
  	}
  // console.log({yo});
  }

Hope this helps someone in the same predicament - if I come across a better solution I’ll update this answer.