Skip to content

Qt for WebAssembly

Specific issues when using Qt for WebAssembly

447 Topics 1.8k Posts
  • boiler plate code for opengl ES wasm

    Unsolved
    2
    0 Votes
    2 Posts
    199 Views
    SGaistS

    Hi,

    The sources of the examples are linked at the bottom of their detailed explanation. See here the cube example.

  • Touch controls

    Unsolved
    2
    0 Votes
    2 Posts
    236 Views
    K

    Interesting, I also now tested the same app with Qt 5.15 WASM and found that there double-tap with one finger behaved as a double-click. Why was it changed? I'd say the double-tap in 5.15 was much more intuitive than two-finger tap in 6.6.

  • dockerfile to compile qt6.5 for webassembly on ubuntu 18.04

    Unsolved
    11
    0 Votes
    11 Posts
    1k Views
    SGaistS

    @shome AFAIK, yes it should.

  • I have to touch the edittext to start entering text

    Unsolved
    2
    0 Votes
    2 Posts
    156 Views
    Axel SpoerlA

    @monettes
    That looks like a bug. Please report it at https://bugreports.qt.io

  • QOpenGLWidget is not supported on this platform.

    Unsolved
    5
    0 Votes
    5 Posts
    657 Views
    SGaistS

    @shome since you are targeting wasm, I would recommend to port your code to 6.5 at least. There's not much sense in trying to build it using an outdated version of Qt for such a new platform.

  • 0 Votes
    2 Posts
    337 Views
    F

    For testing I have patched out QWasmClipboard::initClipboardPermissions and bootstrapCheckPermissions (which also spawns async operations), now I am getting the same error for qtStdWebEventCallbackActivate, which looks like this bug:

    https://github.com/emscripten-core/emscripten/issues/18412 https://bugreports.qt.io/browse/QTBUG-102827
  • cmake configuration not found

    Unsolved
    1
    0 Votes
    1 Posts
    146 Views
    No one has replied
  • Opening keyboard on android chrome breaks html

    Solved
    2
    0 Votes
    2 Posts
    264 Views
    MesrineM

    @Mesrine

    The issue is not related to Qt for webassembly.
    The issue is related to opening a keyboard on mobile browsers triggers the window's resize event.
    The latter was used by my app to hide and show elements.

  • This topic is deleted!

    Unsolved
    1
    0 Votes
    1 Posts
    63 Views
    No one has replied
  • How to compile qt program to WebAssembly with cmake

    Solved
    3
    0 Votes
    3 Posts
    282 Views
    _

    @jsulm Thank you, I solved it .

    CMakeLists needs to contain :
    qt_standard_project_setup();
    qt_add_executable

  • 0 Votes
    3 Posts
    928 Views
    8Observer88

    It is a Chrome issue. Read Botje's comments: https://stackoverflow.com/questions/77951574/webgl-this-extension-has-very-low-support-on-mobile-devices

  • 0 Votes
    20 Posts
    1k Views
    8Observer88

    @8Observer8 said in Qt 6.6.1 WebAssebly: Triangle disappears when it was clicked:

    Color picking with glReadPixels works without problems on WebAssembly with QOpenGLWindow and QOpenGLWidget

    I had a problem with color picking on Android but it was solved here: https://forum.qt.io/post/787931

  • SQLite support on WebAssembly

    Unsolved
    2
    0 Votes
    2 Posts
    259 Views
    Christian EhrlicherC

    @Delphi251189 feel free to provide a patch for it.

  • The text is blurry

    Solved
    5
    0 Votes
    5 Posts
    561 Views
    GaoboG

    @JasonWong
    I have not found which option is the best, maybe we need to make a choice.
    Select the most clear option to use.

  • 0 Votes
    3 Posts
    859 Views
    P

    @stickabee Could you provide a more detailed implementation?
    Thank you :)

  • Backspace key does nothing in text inputs, only on Android

    Unsolved
    3
    2 Votes
    3 Posts
    341 Views
    JasonWongJ

    I think this issue is the similar as being unable to input Chinese characters. Currently, there are input issues when using Qt with WebAssembly. You can refer to this problem, which has seen no progress, T.T

    https://bugreports.qt.io/browse/QTBUG-107139

  • Failed to show GUI in WASM after JavaScript call

    Solved
    8
    0 Votes
    8 Posts
    493 Views
    8Observer88

    I wrote an example that play a sound using Web Audio API in Qt WebAssembly. It is a 2D sound but Web Audio API can play 3D sounds too. There are two buttons in this example: "Run" and "Play". The "Run" button must be pressed first and next the "Play" button must be pressed. You can run it by one click: https://replit.com/@8Observer8/play-audio-with-web-audio-api-qt6-cpp

    a4eaf8a3-6b99-4c83-a597-8a85d1b4a559-image.png

    main.cpp

    #include <QtWidgets/QApplication> #include <QtWidgets/QPushButton> #include <QtWidgets/QVBoxLayout> #include <QtWidgets/QWidget> #include <emscripten.h> EM_JS(void, call_init, (), { my_init(); }) EM_JS(void, call_run, (), { my_run(); }) EM_JS(void, call_play, (), { playSound(); }) class Widget : public QWidget { Q_OBJECT public: Widget() { call_init(); runButton = new QPushButton("Run"); playButton = new QPushButton("Play"); playButton->setEnabled(false); QVBoxLayout *vbox = new QVBoxLayout(); vbox->addWidget(runButton); vbox->addWidget(playButton); vbox->addStretch(); setLayout(vbox); connect(runButton, &QPushButton::pressed, this, &Widget::runButtonClick); connect(playButton, &QPushButton::pressed, this, &Widget::playButtonClick); } private slots: void runButtonClick() { call_run(); runButton->setEnabled(false); playButton->setEnabled(true); } void playButtonClick() { call_play(); } private: QPushButton *runButton; QPushButton *playButton; }; #include "main.moc" int main(int argc, char *argv[]) { QApplication a(argc, argv); Widget w; w.show(); return a.exec(); }

    my_script.js

    let audioContext, decideArrayBuffer, decideAudioBuffer; async function my_init() { console.log("init"); const decideResponse = await fetch("assets/sounds/decidemp3-14575.mp3"); decideArrayBuffer = await decideResponse.arrayBuffer(); } async function my_run() { console.log("my run"); audioContext = new window.AudioContext(); decideAudioBuffer = await audioContext.decodeAudioData(decideArrayBuffer); } function play(audioBuffer, isLoop = false) { const source = audioContext.createBufferSource(); source.buffer = audioBuffer; source.loop = isLoop; const gain = audioContext.createGain(); source.connect(gain).connect(audioContext.destination); gain.gain.value = 0.3; source.start(); return source; } function playSound() { play(decideAudioBuffer); }
  • 0 Votes
    6 Posts
    507 Views
    A

    @8Observer8 Thank you for your response. I'll keep an eye on the bug report.

  • 0 Votes
    7 Posts
    609 Views
    8Observer88

    I found a temporary solution that is good for me for now. I just deleted the sampling:

    OpenGLWidget() { // QSurfaceFormat surfaceFormat; // surfaceFormat.setMajorVersion(3); // surfaceFormat.setMinorVersion(0); // surfaceFormat.setSamples(4); // setFormat(surfaceFormat); }

    In this case I don't need to use GL_DRAW_FRAMEBUFFER and GL_READ_FRAMEBUFFER to read a pixel color using glReadPixels():

    void paintGL() override { glClear(GL_COLOR_BUFFER_BIT); // // Set draw buffer to be fbo. Read buffer is already the default one // glBindFramebuffer(GL_DRAW_FRAMEBUFFER, m_fbo->handle()); // // Blit from the default MSAA buffer to non-MSAA fbo // glBlitFramebuffer(0, 0, m_fbo->width(), m_fbo->height(), // 0, 0, m_fbo->width(), m_fbo->height(), // GL_COLOR_BUFFER_BIT, GL_NEAREST); // glBindFramebuffer(GL_DRAW_FRAMEBUFFER, context()->defaultFramebufferObject()); // // Set read buffer // glBindFramebuffer(GL_READ_FRAMEBUFFER, m_fbo->handle()); // Read the pixel GLubyte pixel[4]; glReadPixels(0, 0, 1, 1, GL_RGBA, GL_UNSIGNED_BYTE, pixel); // Set read buffer back to default // glBindBuffer(GL_READ_FRAMEBUFFER, context()->defaultFramebufferObject()); qDebug() << pixel[0] / 255.f << pixel[1] / 255.f << pixel[2] / 255.f; emit showPixelColorSignal(QVector3D(pixel[0] / 255.f, pixel[1] / 255.f, pixel[2] / 255.f)); }

    My applications works correctly on Android and WebAssembly. It read a pixel with green color (0, 1, 0):

    Android:

    a0b95b4f-30f1-4a9f-8c1f-d726fd90577e-image.png

    WebAssembly:

    730c5fca-dd06-454c-9f10-2320426c8a0a-image.png

  • Where is the em++ compiler located? How to install it?

    Solved
    4
    3 Votes
    4 Posts
    586 Views
    8Observer88

    I deleted the C:\emsdk folder and I deleted the C:\emsdk from Path. I run a new CMD. Typed this command:

    git clone https://github.com/emscripten-core/emsdk.git

    And this one: "emsdk.bat" install 3.1.37

    The emsdk was installed without problems:

    C:\emsdk>"emsdk.bat" install 3.1.37 Resolving SDK version '3.1.37' to 'sdk-releases-7c905cfc1ca6699f6ccb288ae174902cfbdcf0a2-64bit' Installing SDK 'sdk-releases-7c905cfc1ca6699f6ccb288ae174902cfbdcf0a2-64bit'.. Installing tool 'node-16.20.0-64bit'.. Downloading: C:/emsdk/downloads/node-v16.20.0-win-x64.zip from https://storage.googleapis.com/webassembly/emscripten-releases-builds/deps/node-v16.20.0-win-x64.zip, 28623474 Bytes Unpacking 'C:/emsdk/downloads/node-v16.20.0-win-x64.zip' to 'C:/emsdk/node/16.20.0_64bit' Done installing tool 'node-16.20.0-64bit'. Installing tool 'python-3.9.2-nuget-64bit'.. Downloading: C:/emsdk/downloads/python-3.9.2-4-amd64+pywin32.zip from https://storage.googleapis.com/webassembly/emscripten-releases-builds/deps/python-3.9.2-4-amd64+pywin32.zip, 14413267 Bytes Unpacking 'C:/emsdk/downloads/python-3.9.2-4-amd64+pywin32.zip' to 'C:/emsdk/python/3.9.2-nuget_64bit' Done installing tool 'python-3.9.2-nuget-64bit'. Installing tool 'java-8.152-64bit'.. Downloading: C:/emsdk/downloads/portable_jre_8_update_152_64bit.zip from https://storage.googleapis.com/webassembly/emscripten-releases-builds/deps/portable_jre_8_update_152_64bit.zip, 69241499 Bytes Unpacking 'C:/emsdk/downloads/portable_jre_8_update_152_64bit.zip' to 'C:/emsdk/java/8.152_64bit' Done installing tool 'java-8.152-64bit'. Installing tool 'releases-7c905cfc1ca6699f6ccb288ae174902cfbdcf0a2-64bit'.. Downloading: C:/emsdk/downloads/7c905cfc1ca6699f6ccb288ae174902cfbdcf0a2-wasm-binaries.zip from https://storage.googleapis.com/webassembly/emscripten-releases-builds/win/7c905cfc1ca6699f6ccb288ae174902cfbdcf0a2/wasm-binaries.zip, 419522512 Bytes Unpacking 'C:/emsdk/downloads/7c905cfc1ca6699f6ccb288ae174902cfbdcf0a2-wasm-binaries.zip' to 'C:/emsdk/upstream' Done installing tool 'releases-7c905cfc1ca6699f6ccb288ae174902cfbdcf0a2-64bit'. Done installing SDK 'sdk-releases-7c905cfc1ca6699f6ccb288ae174902cfbdcf0a2-64bit'.

    I activated the 3.1.37 version: "emsdk.bat" activate 3.1.37

    I added the C:\emsdk path to Qt Creator here: Edit -> Preferences... -> Devices -> WebAssembly

    812f3135-61de-48ac-aa90-b4bd11f8f687-image.png

    I created a new project and it works!

    7f997f8b-9ed0-4b9f-9d47-704c0be1209b-image.png

    main.cpp

    #include <QtWidgets/QApplication> #include <QtWidgets/QWidget> #include <QtWidgets/QLabel> #include <QtWidgets/QVBoxLayout> class Widget : public QWidget { public: Widget() { QLabel *label = new QLabel("Hello, WebAssemlym, from Qt!"); QVBoxLayout *layout = new QVBoxLayout(); layout->addWidget(label); setLayout(layout); } }; int main(int argc, char *argv[]) { QApplication app(argc, argv); Widget w; w.show(); return app.exec(); }

    pro

    QT += core gui widgets CONFIG += c++17 SOURCES += \ main.cpp