Using WebGL2 fails within pyodide (SDL_GL_CreateContext => EGL_BAD_CONFIG)

[pthom]

Hello, I'm trying to port a C++ library to pyodide. This library use WebGL2 + SDL2 and already works with emscripten (demo). For info, pyodide is a python distribution for the browser.

In this context I'm trying to reproduce what worked when building the library for Emscripten. However, I encountered an issue with the following lines:

    // Require OpenGL ES with major version 3
    SDL_GL_SetAttribute(SDL_GL_CONTEXT_FLAGS, 0);
    SDL_GL_SetAttribute(SDL_GL_CONTEXT_PROFILE_MASK, SDL_GL_CONTEXT_PROFILE_ES);
    SDL_GL_SetAttribute(SDL_GL_CONTEXT_MAJOR_VERSION, 3);
    SDL_GL_SetAttribute(SDL_GL_CONTEXT_MINOR_VERSION, 0);
    auto window = SDL_CreateWindow("my window", 0, 0, 600, 400, window_flags);
    auto glContext = SDL_GL_CreateContext((SDL_Window *)window);
    if (glContext == nullptr)
    {
        std::string msg = std::string("Impl_CreateGlContext error: ") + SDL_GetError();
        printf("%s\n", msg.c_str());
    }

SDL_GL_CreateContext will fail with the message: Could not create EGL context (call to eglCreateContext failed, reporting an error of EGL_BAD_CONFIG). This error comes probably from this line in the emscripten repository.

I'm compiling with the flags -sUSE_SDL=2 -lSDL2 -sMAX_WEBGL_VERSION=2 (to which I tried to add -sMIN_WEBGL_VERSION=2)

I reported this issue to the pyodide team here.

However, it seems that the error is raised deep in the emscripten code. If someone has some time to invest on this question, I would be very grateful! (I would just need a clue that points me to the right direction)

---

Notes:

• As far as I can understand by reading the emscripten documentation, I think that OpenGL and EGL are two different graphics rendering targets. Is my understanding right, and in this case, Is the error related to the fact that the application starts an EGL context instead of an OpenGL context?
• using Webgl 1 does work (using canvasElement.getContext("webgl")and not setting SDL_GL_CONTEXT_MAJOR_VERSION in C++)
• pyodide is a complex project which uses a slightly modified version of Emscripten. However, the patches are quite small and unrelated.

Inside the HTML page that is launched by pyodide, one can see this code:

<script>
        function get_webgl2_canvas() 
        {
            var canvasElement = document.getElementById("canvas");
        
            // Event listener for WebGL context loss
            canvasElement.addEventListener("webglcontextlost", function(event) 
                {
                    alert("WebGL context lost, please reload the page");
                    event.preventDefault();
                }, 
                false);
            
            if (typeof WebGL2RenderingContext !== 'undefined') 
            {
                var contextAttributes = {
                    stencil: true,
                    depth: true,
                    antialias: true,
                    preserveDrawingBuffer: false
                };

                var context = canvasElement.getContext("webgl2", contextAttributes);

                if (!context) 
                {
                    console.error("WebGL 2 not available, falling back to WebGL");
                    context = canvasElement.getContext("webgl", { stencil: true });
                    if (!context) 
                    {
                        alert("WebGL not available with stencil buffer");
                    }
                    else
                    {
                        console.log("WebGL 2 context without stencil created")
                    }
                }
                else
                {
                    console.log("WebGL 2 context with stencil created")
                }                
                return canvasElement;
            } 
            else 
            {
                alert("WebGL 2 not supported by this browser");
            }
        }

        async function main()
        {
            canvas = get_webgl2_canvas()

            let pyodide = await loadPyodide();
            // Temporary workaround for pyodide#3697
            pyodide._api._skip_unwind_fatal_error = true;

            await pyodide.loadPackage(["daft_lib"], { checkIntegrity: false })
            pyodide.canvas.setCanvas3D(canvas);  // setCanvas3D will call `Module.canvas = canvas` 

            pyodide.runPythonAsync(python_code);
        }

        window.addEventListener('load', main)
    </script>


    <canvas class=emscripten id=canvas oncontextmenu=event.preventDefault() width="600" height="400"></canvas>

[pthom]

Closing this: this was an issue on my side (a context had already been created on the JavaScript side so that the creation failed on the C++ side).