Bug 240337 – Internal error compiling shader with Metal backend

• Component: WebGL
• Status: NEW

We are implementing pixi.js on our webview  app. However, this issue only took place when running on Mac OS 12 with intel chip.

Only some simple things are implemented like `new Pixi.application`, but canvas just disappered from DOM. Adding `forceCanvas` won't work either.

e.g. 
```
constructor() {
  this.app = new Pixi.Application({
      width: props.width,
      height: SIGPATH_HEIGHT,
      transparent: true,
      antialias: true,
      autoResize: true,
      resolution: 2
 });
  this.graphic = new Pixi.Graphics();
  this.app.stage.addChild(this.graphic);
  this.app.ticker.add(someDrawFunction);
}

render() {
   this.canvas.appendChild(this.app.view);
}

```

It's quite vague to track the root cause by the errors below:

```
Pixi.js Error: Could not initialize shader.

gl.VALIDATE_STATUS – false

gl.getError() – 1282

Pixi.js Warning: gl.getProgramInfoLog()
"Internal error compiling shader with Metal backend.
Please submit this shader, or website as a bug to https://bugs.webkit.org
"

TypeError: Argument 1 ('program') to WebGLRenderingContext.getProgramParameter must be an instance of WebGLProgram
```

Is there any method for us to debug this issue or provide more informations? Thanks a lot!


### Environment
- **`pixi.js` version**: _4.8.6_
- **Browser & Version**:  navigator.userAgent _"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_16) AppleWebKit/605.1.15 (KHTML, like Gecko) BIAS FX/1.0 (Desktop)"_
- **OS & Version**: _mac os Monterey 12.0.1_

[Kimmo Kinnunen]

Thank you for the report. This is likely already fixed in the Monterey updates, the reporting version is 12.0.1. 
The most recent macOS Monterey version is 12.3.1. If you are able, please test with this.
The issue might be worked around by changing the Pixi.js shaders.
It might be that the shaders contain variable names that clash with the implementation internal variable names, such as "or", "and" or similar.  These would need to be renamed.
Alternatively it might be that the shaders assign to certain type of swizzles in out params, e.g. use void func(inout vec3 p) { .. }; func(myvar.rgb); These would need to have a non-swizzle temporary variable.

We have test this issue on Monterey 12.3.1. Seems like bug still exist.
According to your workaround suggestion on the clash of variable names, since we did not implement any shader instance on our project, does it mean that shader issue occurs in pixi library itself?

[Radar WebKit Bug Importer]

<rdar://problem/93569232>

[Kenneth Russell]

Could you please provide a self-contained test case that reproduces the problem?