c++qtopengl-eswebassemblyqopenglwidget

WebGL: this extension has very low support on mobile devices


I wrote a simple example that draws a quad with a texture. When I run this example as WebAssembly: https://profound-sunflower-a5633b.netlify.app/ I see this message in the browser console: WebGL: this extension has very low support on mobile devices; do not rely on it for rendering effects: WEBGL_polygon_mode

It happens in the JS file on the GLctx.getExtension(ext); line:

        // .getSupportedExtensions() can return null if context is lost, so coerce to empty array.
        var exts = GLctx.getSupportedExtensions() || [];
        exts.forEach(function(ext) {
          // WEBGL_lose_context, WEBGL_debug_renderer_info and WEBGL_debug_shaders are not enabled by default.
          if (!ext.includes('lose_context') && !ext.includes('debug')) {
            // Call .getExtension() to enable that extension permanently.
            GLctx.getExtension(ext);
          }
        });

How to hide this message?

My example: simple-texture-in-one-file-opengl-qt6-cpp.zip

main.cpp

#include <QtWidgets/QApplication>
#include <QtGui/QOpenGLFunctions>
#include <QtOpenGL/QOpenGLBuffer>
#include <QtOpenGL/QOpenGLShaderProgram>
#include <QtOpenGL/QOpenGLTexture>
#include <QtOpenGLWidgets/QOpenGLWidget>

class OpenGLWidget : public QOpenGLWidget, private QOpenGLFunctions
{
public:
    OpenGLWidget(QWidget *parent = nullptr)
        : QOpenGLWidget(parent)
        , m_texture(QOpenGLTexture::Target::Target2D)
    {
        setWindowTitle("OpenGL, Qt6, C++");
        setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed);
        setFixedSize(350, 350);
    }

private:
    void initializeGL() override
    {
        initializeOpenGLFunctions();

        // qDebug() << "OpenGL version:" << (const char*) glGetString(GL_VERSION) << "\n";
        // qDebug() << "GLSL version: " << (const char*) glGetString(GL_SHADING_LANGUAGE_VERSION) << "\n";
        // qDebug() << "Vendor: " << (const char*) glGetString(GL_VENDOR) << "";

        m_texture.create();
        m_texture.bind();
        m_texture.setData(QImage(":/assets/textures/box_texture_512x512.png").mirrored());
        m_texture.setMinMagFilters(QOpenGLTexture::Filter::Linear, QOpenGLTexture::Filter::Linear);
        m_texture.setWrapMode(QOpenGLTexture::WrapMode::ClampToEdge);

        // Create and compile shaders
        shaderProgram.addShaderFromSourceCode(QOpenGLShader::ShaderTypeBit::Vertex,
            "attribute vec2 vertexPosition;"
            "attribute vec2 vertexTexCoord;"
            "varying vec2 texCoord;"
            "void main()"
            "{"
            "    gl_Position = vec4(vertexPosition, 0.0, 1.0);"
            "    texCoord = vertexTexCoord;"
            "}");

        shaderProgram.addShaderFromSourceCode(QOpenGLShader::ShaderTypeBit::Fragment,
            "#ifdef GL_ES\n"
            "precision mediump float;\n"
            "#endif\n"
            "varying vec2 texCoord;"
            "uniform sampler2D textureSampler;"
            "void main()"
            "{"
            "    gl_FragColor = texture2D(textureSampler, texCoord);"
            "}");

        // Create vertex buffer
        GLfloat vertices[] = {
            -0.5f, -0.5f, 0.0f, 0.0f,
            0.5f, -0.5f, 1.0f, 0.0f,
            0.5f,  0.5f, 1.0f, 1.0f,
            -0.5f,  0.5f, 0.0f, 1.0f
        };

        vertexBuffer.create();
        vertexBuffer.bind();
        vertexBuffer.allocate(vertices, sizeof(vertices));
    }

    void resizeGL(int w, int h) override
    {
        glViewport(0, 0, w, h);
    }

    void paintGL() override
    {
        // Clear the buffer
        glClearColor(0.2f, 0.2f, 0.2f, 1.f);
        glClear(GL_COLOR_BUFFER_BIT);

        // Use shader program
        shaderProgram.bind();

        // Bind texture
        m_texture.bind();

        // Bind vertex bufffer
        vertexBuffer.bind();
        shaderProgram.enableAttributeArray("vertexPosition");
        shaderProgram.enableAttributeArray("vertexTexCoord");
        shaderProgram.setAttributeBuffer("vertexPosition", GL_FLOAT,
            0, 2, sizeof(GLfloat) * 4);
        shaderProgram.setAttributeBuffer("vertexTexCoord", GL_FLOAT,
            sizeof(GLfloat) * 2, 2, sizeof(GLfloat) * 4);

        // Draw quad
        glDrawArrays(GL_TRIANGLE_FAN, 0, 4);
    }

private:
    QOpenGLBuffer vertexBuffer;
    QOpenGLShaderProgram shaderProgram;
    QOpenGLTexture m_texture;
};

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    OpenGLWidget w;
    w.show();
    return app.exec();
}

simple-texture-in-one-file-opengl-qt6-cpp.pro

QT       += core gui openglwidgets

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

CONFIG += c++17

# You can make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
# disables all the APIs deprecated before Qt 6.0.0
DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000

SOURCES += \
    main.cpp

HEADERS +=

# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target

RESOURCES += \
    assets.qrc

assets.qrc

<RCC>
    <qresource prefix="/">
        <file>assets/textures/box_texture_512x512.png</file>
    </qresource>
</RCC>

assets/textures/box_texture_512x512.png

box_texture_512x512.png


Solution

  • It is a Chrome issue. Read Botje's comments.