[Question] How to use createCameraTextureAsync to be ThreeJS background?

[rockmandash]

Hello, thank you for your wonderful library. I have spent so many days trying to figure out how to use the camera to be ThreeJS background. Right now, we have two options:

1. createCameraTextureAsync function inside Expo.GLView instance to get a new WebGLTexture instance
2. ExpoTHREE.AR.BackgroundTexture also return a new WebGLTexture instance, however, it only supports iOS currently. (Mine is Android)

And I have already found two examples:

1. expo-gl-react-camera-effects by @gre, but I looked into the source code, it didn't use createCameraTextureAsync, instead, it just pass the Expo.camera instance as uniforms and it work. I have no idea why that happen.
2. createCameraTextureAsync by ksesong, this example use shader to achieve insert camera texture into GLView.

And right now my code is this

onContextCreate = async gl => {
    const cameraTexture = await this.GLView.current.createCameraTextureAsync(
      this.Camera.current
    );

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(
      75,
      gl.drawingBufferWidth / gl.drawingBufferHeight,
      0.1,
      1000
    );
    const renderer = new ExpoTHREE.Renderer({ gl });
    renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight);

    camera.position.z = 4;

    const texture = new THREE.Texture();
    const properties = renderer.properties.get(texture);
    properties.__webglInit = true;
    properties.__webglTexture = cameraTexture;

    scene.background = texture;
}

After running this code, my app only shows up the first camera captured image, and it will stop. My GLView will not auto refresh, it will only show the first image my camera captured. I want to ask why ExpoTHREE.AR.BackgroundTexture will auto refresh, but createCameraTextureAsync won't? What is the right way to use createCameraTextureAsync with ThreeJS?

Thank you for listening my question!

[EvanBacon]

Are you remembering to call gl.endFrameEXP(). I believe graphics view does this automatically which causes the update. It's worth noting that the ARCamera saves reference to the texture and you use the pointer to automatically update in Expo. I think this is a newer method and only applies to the AR camera

[rockmandash]

@EvanBacon Thank you for your reply! I'm so sorry, I forgot to put my animation loop.

 const loop = () => {
      this._rafID = requestAnimationFrame(loop);
      renderer.render(scene, camera);
      gl.endFrameEXP();
    };
    loop();

I do have gl.endFrameEXP(); in my code.

[iyobo]

@rockmandash how did you move forward with this?

[titoasty]

Any news on this issue? I just had the same problem and can't find a workaround. I tried this: https://github.com/mrdoob/three.js/issues/5230#issuecomment-304013525, but still no luck. Any idea?

Thanks!