[Webkit-unassigned] [Bug 274301] New: render not work in offscreencanvas in some case

Thu May 16 23:55:29 PDT 2024

https://bugs.webkit.org/show_bug.cgi?id=274301

            Bug ID: 274301
           Summary: render not work in offscreencanvas in some case
           Product: WebKit
           Version: Safari 17
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Canvas
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: iskyler1993 at gmail.com
                CC: dino at apple.com

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();
  }
};

```

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20240517/9c0d9d23/attachment.htm>