fix: map RGBA8 internal format to RGBA texture format

[eXponenta]

Fix for #24
Follow #27 #26

Fix is needs because a Three still use a rgba8 as target of projection layer, and in polyfill this is down.

https://github.com/mrdoob/three.js/blob/master/src/renderers/webxr/WebXRManager.js#L307

Issues demo:

https://0zzmoo.csb.app/

https://codesandbox.io/s/happy-raman-0zzmoo?file=/src/index.ts

[eXponenta]

For Three's webgl2 it fix 'invalid format' but 'Draw framebuffer is incomplete is still thrown.
...

for webgl1 three not use a layers context:

https://github.com/mrdoob/three.js/blob/master/src/renderers/webxr/WebXRManager.js#L268

[dmliao]

Thanks for taking the time to write this PR! When you say 'draw framebuffer is incomplete' is still thrown, is that with the changes in this PR? Do you have an example that I can run where the polyfill fails? I can take a better look at things that way.

I'm also reviewing the code now, and will have comments on that shortly.

[eXponenta]

I still can't figure out easy fix. Convert to draft.

PR change a invalid texture format error, that prevent to use ProjectionLayer in ThreeJS.
Maybe this is side-effect of webxr-emulator polyfill, but i know that same combination is working for another runtime:

https://exponenta.github.io/web-xr-ogl-js/dist/

@dmliao topic is updated

See:

https://codesandbox.io/s/happy-raman-0zzmoo?file=/src/index.ts

[dmliao]

The internal format issue should be fixed with #34.

However...the codesandbox is still producing incomplete framebuffers, and I haven't quite figured out why yet; my only thought right now is that #33 might be related, if the polyfill isn't giving a width and height for the projection layer to THREE.JS. I'll continue investigating.

[eXponenta]

The internal format issue should be fixed with #34.

However...the codesandbox is still producing incomplete framebuffers, and I haven't quite figured out why yet; my only thought right now is that #33 might be related, if the polyfill isn't giving a width and height for the projection layer to THREE.JS. I'll continue investigating.

@dmliao Yep, invalid projection size is problem, then also needs reset frambuffer state of TheeJS too.
https://github.com/mrdoob/three.js/blob/dev/src/renderers/webxr/WebXRManager.js#L319

https://github.com/abdullaBest/threejs-webxr-layers-polyfill/blob/main/public/js/render.js#L354

I think that this edge case needs to mark in readme.