can't invert matrix, determinant is 0

[dirkk0]

Hi,

first of all - thanks for this great component!

Then: I get tons of 'can't invert matrix, determinant is 0' warnings.
I saw that issue 1a04a62 addressed something like that?
So I rebuild the component, but the warnings are still there.

Everything is running great though, just the warnings are a bit annoying.

Thanks again,
Dirk

[supereggbert]

The commit is supposed to stop that but clearly somethings still up. I'm not 100% sure what could be wrong but at a guess it might be that you've not got a fixed with and height on the contents, in that case until it might be returning a zero for the size of the content which is resulting in the warning.

[dirkk0]

Hm -I started out with your example, which also throws this error ...?
https://supereggbert.github.io/aframe-htmlembed-component/dist/examples/index.html

I commented out the THREE.Matrix4().getInvers on line 505, and rebuild, but that didn't change anything.
Somehow I suspect that it is not your component but rather a side effect of something else.
When I comment out the render() method, nothing except the ground shows up, but the warning is still there. :/

[lmalave]

@supereggbert I am getting this issue as well, and I think it's because I'm including other CSS files. The thing is I have a site where it has a lot of CSS that is used for regular HTML and is outside of the A-Frame scene (for example a side panel that slides out). I tested and as soon as I include one of these CSS files like bootstrap.css or jquery-ui.css, that's where I start seeing hundreds of these errors to the point where it freezes up the page.

Does my explanation make sense? Is the issue that in order to use aframe-html-embed component, there really can't be any other CSS on the page other than the CSS that is being used for aframe-html-embed?

[supereggbert]

@lmalave Can you try again now with the master, I suspect it's caused by the plane being scaled to zero because it's content is initially zero. I've set a lower limit of scale to prevent a det of 0 on the transform matrix.

[dbradleyfl]

This might be the most bizarre bug I've ever tracked down....

I'm desperately trying to use your component in my project. I was getting the issue described here, but no html would render at all in my aframe scene. I basically did a manual binary search of my entire codebase and found the css for firebaseui was causing the issue. More specifically some of the "background-image: url(" rules. I was able to create a discrete example: https://codesandbox.io/s/aframe-htmlembed-component---test-c3e33

If you uncomment the style inside App.svelete, the html won't render in the scene and the console warns will go crazy.

I have no idea why this is happening. @supereggbert any help would be greatly appreciated 🙏

[supereggbert]

Thank you @dbradley that has pin pointed the cause of the 0 scale matrix problem. It looks like there are no CORS headers for the image so the resource can't be embeded. The component tries to embed all images since it doesn't know what will and won't be used in the html to be rendered to VR. I'll see if I can put a work around in place this weekend so if a resource fails to embed it simply won't get rendered.