Bug 274301
| Summary: | render not work in offscreencanvas in some case | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | skyler <iskyler1993> |
| Component: | Canvas | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | ahmad.saleem792, deleted_user, dino, mattwoodrow, simon.fraser, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 17 | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
skyler
we have found a case that rendering in offscreencanvas not work on both mac safari and iOS safari (17.4.1)
Use Cases:
1. create work0, pass the offscreencanvas to it
2. work0 post the offscreencanvas back to main thread
3. main thread create worker1 and pass the offscreencanvas to it
4. use raf in worker1
and we found that if we make the handler in step 3(named SpawnThread) to execute in setTimeout, rendering would be ok
not sure if it's a bug, but the case work on chrome
the sample code below
test.html
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var Module = (window.Module = {});
var workerJs = "./test.worker.js";
var worker0 = new Worker(workerJs);
function spawnThread(data) {
var worker = new Worker(workerJs);
worker.postMessage({
type: "load",
});
worker.postMessage(
{
type: "run1",
canvas: data.canvas,
},
[data.canvas]
);
}
worker0.onmessage = function (event) {
if (event.data.type === "loaded") {
console.log("main thread receive worker0 loaded");
} else if (event.data.type === "spawnThread") {
console.log("spawnThread");
// setTimeout(spawnThread, 0, event.data);
spawnThread(event.data);
}
};
worker0.postMessage({
type: "load",
});
var offscreencanvas = canvas.transferControlToOffscreen();
worker0.postMessage(
{
type: "run0",
canvas: offscreencanvas,
},
[offscreencanvas]
);
</script>
</html>
```
test.worker.js
```
var gl;
var initGL = function (data) {
var canvas = data.canvas;
gl = canvas.getContext("webgl");
if (!gl) {
console.error("Failed to get the rendering context for WebGL");
return;
}
};
var r = 0.01;
var renderLoop = function () {
console.log("start renderLoop");
function renderFunc() {
if (r > 1) {
r = 0.01;
}
r += 0.01;
gl.clearColor(r, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
requestAnimationFrame(renderFunc);
}
requestAnimationFrame(renderFunc);
};
self.onmessage = function (event) {
if (event.data.type === "load") {
console.log("worker onload");
} else if (event.data.type === "run0") {
console.log("worker on run0");
postMessage(
{
type: "spawnThread",
canvas: event.data.canvas,
},
[event.data.canvas]
);
} else if (event.data.type === "run1") {
console.log("worker on run1");
initGL(event.data);
renderLoop();
}
};
```
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
skyler
*** Bug 274300 has been marked as a duplicate of this bug. ***
Radar WebKit Bug Importer
<rdar://problem/128664357>
Ahmad Saleem
@sykler - is this recent regression and this used to work before? Appreciate if you can share following details?
skyler
(In reply to Ahmad Saleem from comment #3)
> @sykler - is this recent regression and this used to work before? Appreciate
> if you can share following details?
I just tested on both mac safari 17.4 and iOS 17.4.1, not sure if it work on safari before 17.4.1
Deleted User
Might share the same root-cause with https://bugs.webkit.org/show_bug.cgi?id=290042.