[rlgl.h] WebGL default shaders not linking on no less than 1 browser

[branc116]

Please, before submitting a new issue verify and check:

• [+] I tested it on latest raylib version from master branch
• [+] I checked there is no similar issue already reported
• [+] I checked the documentation on the wiki
• [+] My code has no errors or misuse of raylib

Issue description

Init

When using default shader on web, there is a linking error and nothing is shown.

More testing

I noticed this when working on something that I work on, but now I see that the same problem is present in older versions of raylib.
On https://www.raylib.com/examples.html every example outputs the same linking error.

My guess

My guess is that this may have something to do with my browser. I can recall that the same examples worked maybe 2 months ago..

Testing my guess

I can confirm It's a bug in the browser...
Tested on a different browser:

* Working:        Brave Browser 116.1.57.47 
* Working:        Brave - Beta 1.58.83, Chromium 116.0.5845.62 ( Andriod )
* Not working: Brave Browser 116.1.58.84 beta
* Working:        Chromium 118.0.5969.0

I'm sad and a bit mad

What do I do? I guess this is brave problem.
It looks like everything works on every browser exept for anything on browser that I'm using...

Environment

On desktop:

INFO: Initializing raylib 4.6-dev
INFO: DISPLAY: Device initialized successfully
INFO:     > Display size: 1366 x 768
INFO:     > Screen size:  1280 x 720
INFO:     > Render size:  1280 x 720
INFO:     > Viewport offsets: 0, 0
INFO: GLAD: OpenGL extensions loaded successfully
INFO: GL: Supported extensions count: 226
INFO: GL: OpenGL device information:
INFO:     > Vendor:   Intel
INFO:     > Renderer: Mesa Intel(R) UHD Graphics 600 (GLK 2)
INFO:     > Version:  4.6 (Core Profile) Mesa 23.1.6
INFO:     > GLSL:     4.60
INFO: GL: VAO extension detected, VAO functions loaded successfully
INFO: GL: NPOT textures extension detected, full NPOT textures supported
INFO: GL: DXT compressed textures supported
INFO: GL: ETC2/EAC compressed textures supported

On web:

INFO: DISPLAY: Device initialized successfully
INFO:     > Display size: 800 x 450
INFO:     > Screen size:  800 x 450
INFO:     > Render size:  800 x 450
INFO:     > Viewport offsets: 0, 0
INFO: GL: Supported extensions count: 63
INFO: GL: OpenGL device information:
INFO:     > Vendor:   WebKit
INFO:     > Renderer: WebKit WebGL
INFO:     > Version:  OpenGL ES 2.0 (WebGL 1.0 (OpenGL ES 2.0 Chromium))
INFO:     > GLSL:     OpenGL ES GLSL ES 1.00 (WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium))
INFO: GL: VAO extension detected, VAO functions loaded successfully
WARNING: GL: NPOT textures extension not found, limited NPOT support (no-mipmaps, no-repeat)
INFO: GL: DXT compressed textures supported
INFO: GL: ETC1 compressed textures supported

Browser: Brave Browser 116.1.58.84 beta
OS: Arch Linux x86_64
Host: VivoBook_ASUSLaptop E210MAB_E210MA 1.0
Kernel: 6.4.10-arch1-1
Resolution: 1366x768
WM: dwm
CPU: Intel Celeron N4020 (2) @ 2.800GHz
GPU: Intel GeminiLake [UHD Graphics 600]
Memory: 819MiB / 3742MiB

Issue Screenshot

I've put printf inside a function that compiles shaders so that you can see shaders that are being compiled.

INFO: Initializing raylib 4.6-dev
INFO: Supported raylib modules:
INFO:     > rcore:..... loaded (mandatory)
INFO:     > rlgl:...... loaded (mandatory)
INFO:     > rshapes:... loaded (optional)
INFO:     > rtextures:. loaded (optional)
INFO:     > rtext:..... loaded (optional)
INFO:     > rmodels:... loaded (optional)
INFO:     > raudio:.... loaded (optional)
INFO: DISPLAY: Device initialized successfully
INFO:     > Display size: 800 x 450
INFO:     > Screen size:  800 x 450
INFO:     > Render size:  800 x 450
INFO:     > Viewport offsets: 0, 0
INFO: GL: Supported extensions count: 63
INFO: GL: OpenGL device information:
INFO:     > Vendor:   WebKit
INFO:     > Renderer: WebKit WebGL
INFO:     > Version:  OpenGL ES 2.0 (WebGL 1.0 (OpenGL ES 2.0 Chromium))
INFO:     > GLSL:     OpenGL ES GLSL ES 1.00 (WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium))
INFO: GL: VAO extension detected, VAO functions loaded successfully
WARNING: GL: NPOT textures extension not found, limited NPOT support (no-mipmaps, no-repeat)
INFO: GL: DXT compressed textures supported
INFO: GL: ETC1 compressed textures supported
INFO: TEXTURE: [ID 2] Texture loaded successfully (1x1 | R8G8B8A8 | 1 mipmaps)
INFO: TEXTURE: [ID 2] Default texture loaded successfully
#version 100                       
attribute vec3 vertexPosition;     
attribute vec2 vertexTexCoord;     
attribute vec4 vertexColor;        
varying vec2 fragTexCoord;         
varying vec4 fragColor;            
uniform mat4 mvp;                  
void main()                        
{                                  
    fragTexCoord = vertexTexCoord; 
    fragColor = vertexColor;       
    gl_Position = mvp*vec4(vertexPosition, 1.0); 
}                                  

INFO: SHADER: [ID 3] Vertex shader compiled successfully
#version 100                       
precision mediump float;           
varying vec2 fragTexCoord;         
varying vec4 fragColor;            
uniform sampler2D texture0;        
uniform vec4 colDiffuse;           
void main()                        
{                                  
    vec4 texelColor = texture2D(texture0, fragTexCoord); 
    gl_FragColor = texelColor*colDiffuse*fragColor;      
}                                  

INFO: SHADER: [ID 4] Fragment shader compiled successfully
WARNING: SHADER: [ID 5] Failed to link shader program
WARNING: SHADER: [ID 5] Link error: 
WARNING: SHADER: [ID 0] Failed to load default shader
INFO: RLGL: Render batch vertex buffers loaded successfully in RAM (CPU)
INFO: RLGL: Render batch vertex buffers loaded successfully in VRAM (GPU)
INFO: RLGL: Default OpenGL state initialized successfully
INFO: TEXTURE: [ID 11] Texture loaded successfully (128x128 | GRAY_ALPHA | 1 mipmaps)
INFO: FONT: Default font loaded successfully (224 glyphs)
INFO: TIMER: Target time per frame: 16.667 milliseconds

Code Example

emcc -o www/index.html -I./src -DGRAPHICS_API_OPENGL_ES2 -DPLATFORM_WEB -sENVIRONMENT=web -sALLOW_MEMORY_GROWTH -sUSE_GLFW=3 -s ASYNCIFY -g ./examples/core/core_basic_window.c src/raudio.c src/rcore.c src/rmodels.c src/rshapes.c src/rtext.c src/rtextures.c src/utils.c

[raysan5]

@branc116 Thank you very much for the detailed report. It seems a browser-specific issue...

Just checked the OpenGL ES GLSL 100 specs, section 4.5.2, and the precision qualifier for vertex shader shouldn't be required. The default precision qualifier for floats in that case is:

precision highp float;

But, as per Section 4.5.3 Default Precision Qualifiers, fragment shader must define a precision qualifier (already done in code):

The fragment language has no default precision qualifier for floating point types. Hence for float, floating
point vector and matrix variable declarations, either the declaration must include a precision qualifier or
the default float precision must have been previously declared.

The issue probably lies in this explanation:

If an implementation cannot provide the declared precision for storage of a variable in a compilation unit,
it must result in a compilation or link error.

So, it seems the browser is not able to provide the required precision storage for the float data, that's an issue with the browser.

About the proposed solution, it seems good but it implies losing float resolution in the vertex transformation process, previously to rasterization. I don't know if it could translate into sligh visual artifacts, considering it affects all floating-point data types (scalars, vectors, matrices)...

In any case, the specs also say:

It is useful, but not required, for the fragment language to provide the same floating point range and 
precision as is required for the vertex shader

So, long story short, I'm merging proposed change but if I detect some issue on rendering I will just revert it.