Demo here: unity-webgl-youtube by Tyler Gregg
I developed this little project to (sort of) allow youtube videos to be embedded in a Unity webGL game. It generally works well, but I’m sometimes getting weird browser behavior. I don’t know if these are browser bugs, three.js bugs, or if I just need better CSS.
Chrome on Windows works fine when building from Unity and running on localhost, but the itch demo shifts all the videos down for some reason:
Microsoft Edge works on my desktop, but on my laptop the videos are shifted right
But when the webdev panel is open and overlapping the content, it looks correct:
And in Safari on both Mac and iOS, videos are blank if they’re rotated exactly 90 or 270 degrees:
I “fixed” this by adding .0001 to the object’s rotation, but I’d love to know what the actual problem is.
Lastly, the video player surfaces sometimes glitch when close to the camera:
Thanks in advance to anyone that can help!
I’ve got a feeling that Unity doesn’t use Threejs.
If I type __THREE__ into the console, it says its not defined.
I promise that this project uses three.js. Here’s the console from my demo running on localhost:
I’m using both Unity and three.js at the same time. three.js renders the 3d-transformed youtube players, while Unity renders everything else on top of it.
three.js renders the 3d-transformed youtube players, while Unity renders everything else on top of it
While feasible, this approach is very inefficient in the use of device resources, and therefore not advisable. And from what the image shows, “everything else on” is something you could develop with threejs without major problems.
Regarding the positioning of the videos, I can confirm that it is a rendering delay and not a CSS problem. For sure it has to do with the fact that both framerates -the Unity one and the threejs one- are not synchronized. On desktop, it is enough to make a sudden camera movement to make the delay evident.
As a side note, if I were you I would review the initial decision to develop in Unity. Remember that the official documentation underlines that “Mobile devices are not supported by Unity WebGL”, so your application will not be seen by most internet users (now that mobile traffic is 55% worldwide, surpassing desktop).
P.S. the glitch you mention is derived from the clipping of the video element, this could be due to camera.near plane not being close enough
