Bug: WEBGL: INVALID_VALUE: shaderSource: string not ASCII (Older chrome version)

[dragoon]

Current Behavior

Shader is not compiled

Expected Behavior

Shader is compiled

Steps to Reproduce

Got to https://beta.zima.pages.dev/test/onecard using Chromium 68

Environment

• pixi.js: 8.0.1
• Browser & Version: Chrome/Chromium 68
• OS & Version: Windows 11
• Running Example: https://beta.zima.pages.dev/test/onecard

Possible Solution

No response

Additional Information

This only happens on version PIXI 8 onwards.

I have looked at the shader source and checked it for non-printable characters and didn't found any except \n.
Shader source is something like this:

"#define SHADER_NAME batch-vertex-2
 
 
        #ifdef GL_ES // This checks if it's WebGL1
        #define in attribute
        #define out varying
        #endif
        precision highp float;
 
    in vec2 aPosition;
    in vec2 aUV;
 
    out vec4 vColor;
    out vec2 vUV;
 
    //-----header START-----//
//----global-uniforms-bit----//
 
          uniform mat3 uProjectionMatrix;
          uniform mat3 uWorldTransformMatrix;
          uniform vec4 uWorldColorAlpha;
          uniform vec2 uResolution;
 
//----color-bit----//
 
            in vec4 aColor;
 
//----texture-batch-bit----//
 
                in vec2 aTextureIdAndRound;
                out float vTextureId;
 
 
//----round-pixels-bit----//
 
            vec2 roundPixels(vec2 position, vec2 targetSize)
            {       
                return (floor((position * 0.5 + 0.5) * targetSize) / targetSize) * 2.0 - 1.0;
            }
 
//----header FINISH----//
 
    void main(void){
 
        mat3 worldTransformMatrix = uWorldTransformMatrix;
        mat3 modelMatrix = mat3(
            1.0, 0.0, 0.0,
            0.0, 1.0, 0.0,
            0.0, 0.0, 1.0
          );
        vec2 position = aPosition;
 
 
 
        vColor = vec4(1.);
        vUV = aUV;
 
        //-----main START-----//
//----color-bit----//
 
            vColor *= vec4(aColor.rgb * aColor.a, aColor.a);
 
//----texture-batch-bit----//
 
                vTextureId = aTextureIdAndRound.y;
 
//----main FINISH----//
 
        mat3 modelViewProjectionMatrix = uProjectionMatrix * worldTransformMatrix * modelMatrix;
 
        gl_Position = vec4((modelViewProjectionMatrix * vec3(position, 1.0)).xy, 0.0, 1.0);
 
        vColor *= uWorldColorAlpha;
 
        //-----end START-----//
//----texture-batch-bit----//
 
                if(aTextureIdAndRound.x == 1.)
                {
                    gl_Position.xy = roundPixels(gl_Position.xy, uResolution);
                }
 
//----end FINISH----//
    }
 
        "

[GoodBoyDigital]

hey there! thanks for sharing the issue. I have a few questions for ya that would help me to understand what might be going on.

• is this the exact code that does not compile?

• which chrome version are you using?

• is it a consistent error?

• if you could create aplayground demonstrating the issue that would be ace!

Thanks in advance!

[dragoon]

Hi @GoodBoyDigital, I'll try to answer:

• yes, this is the exact code
• Chrome 68 (yes it's old, I'm using PIXI in the app for LG TVs, and 2020 models are based on Chrome 68)
• Yes it's consistent
• Will do

[GoodBoyDigital]

good to know thanks!

[dragoon]

Hi @GoodBoyDigital, here you can see the error:
https://beta.zima.pages.dev/test/onecard

I wasn't able to do it in any of the public editors since they seems to not support chrome 68 anymore, but I did not minify JS for my example, you can clearly see where the error is happening.

[dragoon]

Hi @GoodBoyDigital , I found the issue, it's the comment string which Chrome 68 incorrectly interprets (it's the "'" character):

// This checks if it's WebGL1

When I removed the comment form shader source, shader compiles correctly.
We can replace it with "it is" I suppose :)

[dragoon]

I created a tiny PR for this change:
#10320

Feel free to adapt it on your own if necessary