TransferControlToOffscreen vs new OffscreenCanvas

Questions
1

Hi, I’m trying to use worker to render scene. I want to render some dynamic font use CanvasTexture. But I find when use TransferControlToOffscreen, if I change the text, the render loop will stop, but new OffscreenCanvas do not.

//if use new OffscreenCanvas, render loop will work fine.
//if not, canvas2 is transferd from main thread, when change the text, render loop will stop sometimes
//canvas2=new OffscreenCanvas(200,200);  
canvas2.height = 200;
canvas2.width = 200;
let context = canvas2.getContext('2d');
context.font = "40px Helvetica";
context.fillStyle = 'red';
context.fillText("123", canvas2.width / 2, canvas2.height / 2);
this.sprite = new THREE.Sprite(new THREE.SpriteMaterial({map: new THREE.CanvasTexture(canvas2)}));
this.sprite.scale.set(50, 50, 50);
this.scene.add(this.sprite);

Change like this:

export function click() {
	let tempCanvas = sprite.material.map.image;
    let tempContext = tempCanvas.getContext("2d");
	tempContext.clearRect(0, 0, 200, 200);
	tempContext.fillText(String(Math.random().toFixed(2)), 100, 100);
	sprite.material.map.needsUpdate = true;
}

Could anyone tell the difference between them? Thanks in advance.

2

Here is a sample. Just re-run and click the second canvas, the render loop will stop.

3

FYI: clicking in both canvases just changes the random number in the middle. the black balls keep moving uninterrupted in both canvases.

Edit: tried is many times, sometimes the second canvas really freezes, the first one keeps changing. No clues why this happens sometimes, not not other times. Mystery.

4

If run in local not codepen, it will trigger consistently in three clicks. If not trigger, please refresh the browser.

5

After some experimentation, it appears the issue may be related to garbage collection? If I declare a canvas in the HTML and simply hide it, the problem doesn’t occur.

	<canvas id="canvas3"style="display: none;" ></canvas>

// spriteCanvas2 = document.createElement('canvas').transferControlToOffscreen();
spriteCanvas2=document.getElementById('canvas3').transferControlToOffscreen();
6

Hi, It maybe caused by the Garbage Collection. Please refer to here and here.

7

Does it happen with Firefox or other non-Chromium browsers?

8

I haven’t tried it yet.