google/filament

Error with wasm version on latest Chrome update

Closed this issue · 3 comments

Error When Using WASM Version with Latest Chrome Update

I encountered an issue with opening an OpenGL context when using the Filament library with the latest update of Chromium, dated April 18th.

Steps to Reproduce the Bug:

  1. Build the Filament WebGL version using the build.sh script inside the Filament repository with the following command:

    ./build.sh -l -p webgl -i release
    
  2. When using the built Filament library to build and run the following code, an error occurs:

    filament::Engine::create(filament::Engine::Backend(backend));
  3. The log from the problematic case is as follows:
    image

  4. The issue has been confirmed under the following testing environment:

  • case 1
    • OS: Windows 11
    • GPU: NVIDIA RTX 3080 Ti
    • Backend: OpenGL (WebGL)
    • Browsers: Chrome, Edge
  • case 2
    • OS: MacOS (M1)
    • GPU: M1
    • Backend: OpenGL (WebGL)
    • Browser: Chrome

Additional Context:

  • To identify when the issue started, I verified the following:

    1. This bug has not occurred in other browsers yet. It works fine in the following browsers:

      • Safari
      • Naver Whale
    2. To determine from which Chrome version the same issue occurs, I tested with the version of Chrome released just before the update on April 12th, and it worked without any issues. Here is the link to the release notes of the problematic version:
      https://chromereleases.googleblog.com/2024/04/stable-channel-update-for-desktop_16.html

    3. To check if the issue is related to using GL itself in WebAssembly with the updated Chrome version, I built and ran a simple GL code that successfully drew a triangle. The example code used is shown in the picture below.

스크린샷 2024-04-18 오후 5 53 55
  • index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebGL Triangle with Emscripten</title>
</head>
<body>
<canvas id="canvas" width="900" height="480"></canvas>
<script src="triangle.js"></script>
</body>
</html>
  • triangle.cpp
#include <emscripten.h>
#include <emscripten/html5.h>
#include <GLES2/gl2.h>
#include <iostream>
#include <vector>

const char* vertexShaderSource = R"glsl(
    attribute vec4 position;
    void main() {
        gl_Position = position;
    }
)glsl";

const char* fragmentShaderSource = R"glsl(
    precision mediump float;
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 적색
    }
)glsl";

GLuint compileShader(GLenum type, const char* source) {
    GLuint shader = glCreateShader(type);
    glShaderSource(shader, 1, &source, NULL);
    glCompileShader(shader);

    GLint isCompiled = 0;
    glGetShaderiv(shader, GL_COMPILE_STATUS, &isCompiled);
    if (isCompiled == GL_FALSE) {
        GLint maxLength = 0;
        glGetShaderiv(shader, GL_INFO_LOG_LENGTH, &maxLength);
        std::vector<GLchar> errorLog(maxLength);
        glGetShaderInfoLog(shader, maxLength, &maxLength, &errorLog[0]);
        glDeleteShader(shader); // 실패한 쉐이더 삭제
        std::cerr << "Shader compilation failed: " << &errorLog[0] << std::endl;
        return 0;
    }
    return shader;
}

GLuint linkProgram(GLuint vertexShader, GLuint fragmentShader) {
    GLuint program = glCreateProgram();
    glAttachShader(program, vertexShader);
    glAttachShader(program, fragmentShader);
    glLinkProgram(program);

    GLint isLinked = 0;
    glGetProgramiv(program, GL_LINK_STATUS, &isLinked);
    if (isLinked == GL_FALSE) {
        GLint maxLength = 0;
        glGetProgramiv(program, GL_INFO_LOG_LENGTH, &maxLength);
        std::vector<GLchar> infoLog(maxLength);
        glGetProgramInfoLog(program, maxLength, &maxLength, &infoLog[0]);
        glDeleteProgram(program);
        std::cerr << "Shader linking failed: " << &infoLog[0] << std::endl;
        return 0;
    }
    glDetachShader(program, vertexShader);
    glDetachShader(program, fragmentShader);
    return program;
}

void renderFrame(GLuint program) {
    glClearColor(0.1f, 0.2f, 0.3f, 1.0f);
    glClear(GL_COLOR_BUFFER_BIT);

    glUseProgram(program);
    glEnableVertexAttribArray(0);
    float vertices[] = {0.0f, 0.5f, -0.5f, -0.5f, 0.5f, -0.5f};
    glVertexAttribPointer(0, 2, GL_FLOAT, GL_FALSE, 0, vertices);
    glDrawArrays(GL_TRIANGLES, 0, 3);
    glDisableVertexAttribArray(0);
    emscripten_webgl_commit_frame();
}

int main() {
    EmscriptenWebGLContextAttributes attrs;
    emscripten_webgl_init_context_attributes(&attrs);
    attrs.alpha = attrs.depth = attrs.stencil = attrs.antialias = attrs.preserveDrawingBuffer = false;
    attrs.enableExtensionsByDefault = true;
    attrs.premultipliedAlpha = false;
    attrs.majorVersion = 2;
    attrs.minorVersion = 0;

    EMSCRIPTEN_WEBGL_CONTEXT_HANDLE ctx = emscripten_webgl_create_context("#canvas", &attrs);
    emscripten_webgl_make_context_current(ctx);

    GLuint vertexShader = compileShader(GL_VERTEX_SHADER, vertexShaderSource);
    GLuint fragmentShader = compileShader(GL_FRAGMENT_SHADER, fragmentShaderSource);
    GLuint shaderProgram = linkProgram(vertexShader, fragmentShader);

    emscripten_set_main_loop_arg((em_arg_callback_func)renderFrame, (void*)(uintptr_t)shaderProgram, 0, 1);

    return 0;
}
  • build script
emcc triangle.cpp -o triangle.js -s WASM=1 -s USE_WEBGL2=1 -s FULL_ES2=1 --shell-file index.html -s "EXPORTED_RUNTIME_METHODS=['ccall','cwrap']" -s EXPORTED_FUNCTIONS='["_main"]'

I'm not able to repro, would you mind providing the version of Filament you're using?

Thank you for checking. I have forked from this commit and modified the code for my own use:
74765f0
I branched off at version v1.24.0.

Since you mentioned that you couldn't reproduce the issue, I checked again and noticed that there have been many updates to the filament/backend/src/opengl/OpenGLDriver.cpp file in the meantime. I will compare this part with the repository I am currently using.

Thank you.

Sounds good. Please re-open if you think this is still happening with the latest Filament. Thank you.