WebXR integrations and Lens distortion effect

[danrossi]

I've integrated three webxr fixes for post processing, with some modifications in a fork and a custom lens distortion effect that seems to be working. However my use case for distortion is a webxr polyfill for Iphone, as the standard one is broken with three.

I am requiring to distort each webxr camera, right now what I have is it shows half distortion for each eye because its applying to the whole viewport.

Is there extra things required in my effect to apply for each eye ?

postprocessing demos I've updated showing initial webxr integration

https://danrossi.github.io/postprocessing/public/demo/#bloom

Required fixes

https://github.com/danrossi/postprocessing/blob/main/src/core/EffectComposer.js#L240
https://github.com/danrossi/postprocessing/blob/main/src/passes/EffectPass.js#L579
https://github.com/danrossi/postprocessing/blob/main/src/passes/RenderPass.js#L291
https://github.com/danrossi/postprocessing/blob/main/src/passes/RenderPass.js#L328

The required three fixes

mrdoob/three.js#26160

Reference

#452
#440

Lens distortion examples
https://danrossi.github.io/three-lens-distortion/example/postprocessing.html
https://danrossi.github.io/three-lens-distortion/example/postprocessing-video.html

The effect and shader
https://github.com/danrossi/three-lens-distortion/blob/main/src/LensDistortionEffect.js
https://github.com/danrossi/three-lens-distortion/blob/main/src/glsl/lens-distortion.frag

Each eye is a half distortion for fullscreen

I'm trying to replicate it looking like this.

Any thoughts would be appreciated.

[vanruesc]

I'm trying to replicate it looking like this

#452 (comment)

In that thread it was also mentioned that we should wait for mrdoob/three.js#26160 to get merged first.

[danrossi]

I have a branch with the integrated webxr fix by updating npm in that branch. Although I copied over a bundle with merged updated three. It seems to be working with the changes I made. But it becomes fullscreen effects. I have to manipulate the new effect to be applied on both half viewports. Im sure there is a trick, maybe in a custom pass.

I cant generate github pages of the manual to show the demo updates I made working. Screenshot here

#452 (comment)

Right now each eye is half the fullscreen effect on each side. I have to lens distort each eye individually.

https://github.com/danrossi/postprocessing/tree/webxr-render-fix

[danrossi]

I managed to deploy the manual demos here showing XR from that branch working but its on cloudfront so needs index.html on the ends of the urls.

https://dev.electroteque.org/postprocessing/manual/demos/light-shadow/bloom/index.html

[vanruesc]

But it becomes fullscreen effects. I have to manipulate the new effect to be applied on both half viewports. Im sure there is a trick

See the last part of this answer. Postprocessing doesn't support viewport/scissor settings yet.

I managed to deploy the manual demos here showing XR from that branch working but its on cloudfront so needs index.html on the ends of the urls.

The manual has intentionally not been published yet. It's no big deal, but I'd appreciate it if you could unpublish that.

[danrossi]

Its just a test to show my XR fixes working against that PR. You want it down ? I'll make a single simplified test then. I'll add a PR with the fixes when its ready. I think you suggested something that might help me figure out something with scissor test.

[danrossi]

I've moved my examples here with the lens effect. The video one I have to try and get it scissor tested then to apply both sides. Before the xr fixes in my branch both cameras are being rendered to one eye so is fullscreen effect now.

https://danrossi.github.io/webxr-polyfill/examples/postprocessing.html
https://danrossi.github.io/webxr-polyfill/examples/postprocessing-video.html