I wrote a custom shader for Conway's Game of Life, using three.js and A-Frame, which does all processing in the fragment shader. It works perfectly in a web browser on desktop. It also appears to work in the Quest browser, but when entering VR mode, the entire screen begins to flicker between the scene and a black screen.
I suspect that the problem is with the RenderTarget settings, or the way in which I switch between render targets, but I am not sure. The relevant code occurs within an A-Frame component tick function, which periodically switches between two render targets and back to the main scene as follows:
this.el.sceneEl.renderer.setRenderTarget(this.renderTarget0);
this.el.sceneEl.renderer.render(this.rtScene0, this.rtCamera);
this.el.sceneEl.renderer.setRenderTarget(this.renderTarget1);
this.el.sceneEl.renderer.render(this.rtScene1, this.rtCamera);
this.el.sceneEl.renderer.setRenderTarget(null);
If it is relevant, I have also disabled the depth buffer on the RenderTarget objects. The full code is available on GitHub at https://github.com/stemkoski/A-Frame-Examples/blob/master/conway-shader.html and a live version is at https://stemkoski.github.io/A-Frame-Examples/conway-shader.html.
My question is: how can I stop the screen from flickering in VR mode, while using RenderTargets in A-Frame?
If you follow Mugen87 comment quoted by Marquizzo ( " The idea is to disable xr, perform the rendering and then enable xr again"). All is working fine in VR. To disable XR and shadow map before the gpgpu computation do:
this.el.sceneEl.renderer.xr.enabled = false;
this.el.sceneEl.renderer.shadowMap.autoUpdate = false;
And reactivate it after with (if in vr):
this.el.sceneEl.renderer.xr.enabled = true;
this.el.sceneEl.renderer.shadowMap.autoUpdate = true;
Working A-Frame source code :
https://glitch.com/edit/#!/experienced-political-share?path=index.html%3A204%3A12
Demo: