Updating Images

[Michaelazzz]

Hey everyone

So I am currently working on my CS master's degree and building an astronomical data viewing web application with React and WebXR.
I have been using three-mesh-ui to implement the GUI in the VR environment, with some help from your react-three-fiber sandbox.

However, I have run into a dilemma that I have been banging my head against a wall about, probably due to my inexperience.
The question is, how would you go about changing/updating an image on a block panel?
I have attempted a few ways but none of them seems to work. Primarily when I view the application on the Oculus browser with a headset like the Quest 2 the image does not update.

Any input on this would be appreciated very much.

PS - would any of you be interested in seeing the progress of the application so far?

[swingingtom]

PS - would any of you be interested in seeing the progress of the application so far?
Yes of course, feel free to share it

I might have clue where your issue comes from, and I may be able to give you a hint on that, but could you provide a simple codesandbox to illustrate the way you tried to change the background texture ? Im not a react-three-fiber user, so it will help a lot.

[Michaelazzz]

Great, here is the link to the codesandbox.
codesandbox

If you take a look at the code it converts a canvas to a dataURL which is used to create a texture.
The canvas is updated every couple of seconds and the newly updated canvas is converted to texture for the panel.
As you can see it updates just fine in the browser.

[swingingtom]

Hello @Michaelazzz, Im sorry but I didn't correctly understood your question at first. I don't have the proper headset to reproduce the issue.

If there is a way to reproduce it without the headset, I could investigate further.
In the meantime I let your question to other members.

Good luck, and don't forget to share your current progress

[Michaelazzz]

Thank you and no worries, but can you tell me how three-mesh-ui uses textures?
I have been playing around with my code and I managed to get an error stating this.backgroundUniforms.u_texture.value.image is null. I believe it has something to do with the updateBackgroundMaterial function in the Material manager.
Is there a specific format the texture must be in order for it to be usable?

[swingingtom]

As you said, the issue might comes from computing the textureSize in MaterialManager::updateBackgroundMaterial

Is there a specific format the texture must be in order for it to be usable?

Nope. As it fully rely on three Texture, no additional format is required.

From the sandbox you previously shared

textureLoader.load(dataURL, (texture) => {
      if (!ref.current) return
      // @ts-ignore
      ref.current.set({ backgroundTexture: texture })
})

You could check that the texture you set, actually have the image property set.
Also be sure that is doesnt trigger other handlers THREE.TextureLoader::load( url, onLoad, onProgress, __onError__ ) {
And maybe try with THREE.CanvasTexture instead ?

[swingingtom]

Could you try first to use a new TextureLoader

new THREE.TextureLoader().load(dataURL, (texture) => {
      if (!ref.current) return
      // @ts-ignore
      ref.current.set({ backgroundTexture: texture })
})

EDIT: Never mind...