How to update a CanvasTexture used as the scene background

Questions
1

My scene background is composed of an equirectangular CanvasTexture and I eventually want to be able to update the pixels in the texture.

I made a quick test with a hand generated pattern (not equirectangular) and hoped right clicking on the scene and triggered the function to redraw the pattern would do the right thing - JSFiddle here after setting the texture.needsUpdate flag.

The texture doesn’t update though after the drawPattern() function is called on a right mouse click. Is there a different needsUpdate flag I need to set to make this work?

2

When applying an equirectangular environment map to Scene.background, the engine assumes the texture is static. Internally it converts the texture to the cube map format (build-in materials do not have the GLSL for equirect env maps anymore) and this only happens once.

To solve this issue, you need to maintain the skybox on app level code (and not use Scene.background). Try this: https://jsfiddle.net/4qpw7csz/

3

That’s great - thank you.

Now you’ve shown me how to modify the canvas and have it update properly, the next bit of my experiment is to make some simple UI to drag out and edit regions - I’m hoping to get to a system that lets you define ‘hot areas’ and clicking on them links to other equirectangular images.

The math between moving from the mouse pointer screen position and the corresponding point on the canvas was stumping me but I think I can maybe cast a ray now that I have some geometry in the scene and use the hit point. Lots to explore anyhow - thank you.

BTW - I see some interesting artifacts with (only) some of the checker patterns - seems to vary too between none, part of the side of a square and the whole side. Some artifact of the shader?

4

It’s a known (and conceptual) issue that equirectangular environment maps are distorted at the poles. However, I’m not sure if other artifacts can appear in the final image. It would be interesting to see if the artifacts would disappear by using the cubemap format.

5

this solution works great

If i want to use the canvasTexture as environment also what would i need to do ?

Another method which works (but creates a new texture on each update)

const pmrem = new PMREMGenerator(renderer) // inititalise once

// canvas update function
		const oncanvasupdate=()=>{
			// do canvas ctx stuff ...
			canvasTexture.needsUpdate=true
			pmremTex=pmrem.fromEquirectangular(canvasTexture).texture
			scene.background=pmremTex
		}