In the realm of Conway's Game of Life, I delved into the world of custom shaders using three.js and A-Frame. The beauty of my creation shines through on desktop browsers, seamlessly blending reality with the virtual. However, upon entering the VR domain via the Quest browser, a troublesome flickering emerges, disrupting the harmony between scene and blackness.
The culprit may lie within the RenderTarget settings or the switch between render targets within my code. This critical section resides in an A-Frame component tick function, orchestrating a delicate dance between two render targets and the main stage:
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);
To add to the complexity, I made sure to disable the depth buffer on the RenderTarget objects. The blueprint of my creation can be found on GitHub at https://github.com/stemkoski/A-Frame-Examples/blob/master/conway-shader.html, while a living version can be experienced firsthand at .
My query lingers: How can I quell the unruly flickering in VR mode, all while harnessing the power of RenderTargets in A-Frame?