[core] Very low rendering quality on 4K displays on `PLATFORM_WEB`

[ypujante]

I have been trying to port my application RE Edit which is a raylib/ImGui application to the web platform to offer a demo (since there is no filesystem access available I cannot really run it in a browser until it is available in wasm...)

I have a prototype running and it looks quite bad:

• On macOS (showing web on the left, native on the right):

• On Windows (showing that the resolution is 4K on the left, web on the right):

I have created a small reproducible test case to show the issue which uses raylib only (top is web, bottom is native):

The source code for the test case is this:

#include "raylib.h"

int main()
{
  InitWindow(800, 450, "raylib [core] example - basic window");

  SetTargetFPS(60);

  while (!WindowShouldClose())
  {
    BeginDrawing();
    ClearBackground(RAYWHITE);
    DrawText("The quick brown fox jumps over the lazy dog", 10, 10, 20, BLACK);
    DrawText("Congrats! You created your first window!", 10, 40, 20, LIGHTGRAY);
    DrawFPS(10, 70);

    EndDrawing();
  }

  CloseWindow();

  return 0;
}

Is this a bug in raylib? A bug in glfw3? Or a misconfiguration? I have followed the steps described here but there isn't any mention of the quality of the rendering nor how to make it look better on 4K displays.

@ypujante Could you please test it with minshell.html instead of shell.html. shell.html has a width:100%; CSS (L79) which is likely affecting the scaling. Or just delete L79 from shell.html.

Edit: added line marks; editing.

[ypujante]

@ubkp I would gladly test it but I don't know what you mean by using minshell.html. The compilation produces this set of files:

-rw-r--r--@  1 ypujante  staff     1678 Oct  3 09:58 raylib_web_cmake.data
-rw-r--r--@  1 ypujante  staff   102483 Oct  3 09:58 raylib_web_cmake.html
-rw-r--r--@  1 ypujante  staff   268052 Oct  3 09:58 raylib_web_cmake.js
-rwxr-xr-x@  1 ypujante  staff  1601058 Oct  3 09:58 raylib_web_cmake.wasm*

The file raylib_web_cmake.html only contains this section:

      #output {
        width: 100%;
        height: 200px;
...

Commenting out width: 100% or turning it on/off in the browser makes no difference

@ypujante When compiling with emscripten (check this) you'll, at some point, pass which shell file it should use. It's likely defaulting to -shell-file shell.html.

Option 1. Go to the src dir and edit the shell.html file to delete this line (L79) from it. Then recompile.

Option 2. Open your cmake file, search for -shell-file shell.html, change it to -shell-file minshell.html. Then recompile.

Edit: Option 3. Go to the src dir, rename shell.html to shell.html.old. Then rename minshell.html to shell.html. Then recompile.

[ypujante]

I used option 2 (the options is --shell-file not -shell-file).

The result is the same. No difference at all

@ypujante Do you have this case on a repository or branch that I could download to test?

[ypujante]

Here is the (self contained) project with instructions to build in CMakeLists.txt

raylib-web-cmake.zip

# build instructions
# mkdir build
# cd build
# cmake .. -DCMAKE_TOOLCHAIN_FILE=/usr/local/emsdk/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake -DPLATFORM=Web -DCMAKE_BUILD_TYPE=Debug
# cmake --build . --target raylib_web_cmake

Make sure to replace CMAKE_TOOLCHAIN_FILE with your emscripten location

[ypujante]

Also for the record, I just swapped the embedded raylib (self contained in the project) with master as of this morning. There is no difference.

@ypujante Okay. I'm rebuilding emscripten here to test.

@ypujante Thanks for the zip file, it helped a lot.

Unfortunately, I was not able to replicate the issue. Tested it here right now on Firefox (111.0.1 64-bit) and Chromium (117.0.5938.132 64-bit) both running on Linux (Fedora 38 64-bit) and it appears to be rendering correctly for me on both:

[ypujante]

Thank you for testing. Are you on a 4K monitor? I have tested only on Windows and macOS with 4K monitors. Both have the issue.

Here is my build in case you want to try it as well (in case it is a build problem)

rwc.tgz

@ypujante I tested it on a LG UHD TV 4K.

Tried testing your rwc.tgz but it's missing the .data file. Could you reupload it?

[ypujante]

Actually I would argue that your test shows the problem. If you zoom in, you can see that there is aliasing around the edges of the letter. Aliasing which is NOT present in the native application.

I captured with my phone what I am talking about:

macOS web => aliasing around the letters

macOS native => NO aliasing

linux web (what you uploaded) => aliasing around the letters which is identical to what I see

[ypujante]

Not sure why .data is required but here it is:

rwc.tgz

[ypujante]

I also uploaded my "real" test (note that it is 20MB: https://github.com/pongasoft/re-edit/releases/download/v1.6.2/RE-Edit-wasm.tgz). It contains 3 files (note that there is a space in the filename which needs to be converted to %20 when you generate the URL: RE%20Edit.html)

This generates the output as seen in the screenshot on my first post

@ypujante The .data file is required because without it there's this error:

Here are my results for rwc.tgz:

I really can't notice the edges issue (but that could be my bad eyesight). But by your zoom photos it could be another of those OpenGL ES blending issues.