Details
-
Bug
-
Resolution: Done
-
P2: Important
-
5.12.0 Beta 1
-
None
-
Build on Linux. QT build from branch 5.12. emscripten 1.38.13.
QT base built using `./configure -xplatform wasm-emscripten -developer-build -release -static -no-feature-thread -nomake tests -nomake examples -no-dbus -no-headersclean -no-ssl -no-warnings-are-errors`
qtbase 9436e3c315420c7ebfb36628e6bf388c780bf0ca
qtdeclarative 10e7d4aaa499d9a046f794b96a0caffeb3271f1a
qtgraphicaleffects 314a2b53a885a41f0a220fdcd5e8cd4592078b29
qtquickcontrols 352be75dec15cb333f58d0075d89b2ebc7a2e46b
qtquickcontrols2 fba7e3cf5c8ad287ceaaeb381989159d8baa96ecBuild on Linux. QT build from branch 5.12. emscripten 1.38.13. QT base built using `./configure -xplatform wasm-emscripten -developer-build -release -static -no-feature-thread -nomake tests -nomake examples -no-dbus -no-headersclean -no-ssl -no-warnings-are-errors` qtbase 9436e3c315420c7ebfb36628e6bf388c780bf0ca qtdeclarative 10e7d4aaa499d9a046f794b96a0caffeb3271f1a qtgraphicaleffects 314a2b53a885a41f0a220fdcd5e8cd4592078b29 qtquickcontrols 352be75dec15cb333f58d0075d89b2ebc7a2e46b qtquickcontrols2 fba7e3cf5c8ad287ceaaeb381989159d8baa96ec
-
-
88868a0a3aa94331fb722d6032149593e762308e (qt/qtdeclarative/5.12)
Description
While playing around with the QT for WebAssembly TP, I experienced some rendering issues that make the result differ from a native build.
If you try to fill a rounded Rectangle with a background image, the image itself does not display. Its just rendered in the color of the target shape (seems to default to white).
The flowing QML snippet may be helpful to reproduce it, I've placed a dummy project on github for reference.
import QtQuick 2.11 import QtQuick.Window 2.11 import QtGraphicalEffects 1.0 Window { visible: true width: 640 height: 480 color: "grey" Rectangle { id: mask width: 100 height: 100 radius: 50 anchors.centerIn: parent } Image { anchors.fill: mask fillMode: Image.TileHorizontally source: "gradient.png" layer.enabled: true layer.effect: OpacityMask { maskSource: mask } } /** Same optical problem with the linear gradient LinearGradient { anchors.fill: mask start: Qt.point(0, 0) end: Qt.point(0, mask.height) source: mask width: mask.width height: mask.height gradient: Gradient { GradientStop { position: 0.0; color: "#F60000" } GradientStop { position: 1.0; color: "#F6F600" } } } */ }
The browser console (chrome in this case) prints:
VM877:1 WebGL: INVALID_FRAMEBUFFER_OPERATION: clear: conflicting DEPTH/STENCIL/DEPTH_STENCIL attachments VM877:1 WebGL: INVALID_FRAMEBUFFER_OPERATION: drawElements: conflicting DEPTH/STENCIL/DEPTH_STENCIL attachments VM877:1 WebGL: INVALID_FRAMEBUFFER_OPERATION: clear: conflicting DEPTH/STENCIL/DEPTH_STENCIL attachments VM877:1 WebGL: INVALID_FRAMEBUFFER_OPERATION: drawElements: conflicting DEPTH/STENCIL/DEPTH_STENCIL attachments
The same optical issue occurs with a Gradient, although it's not included via layer effects. So it may be a different problem.
Please let me know, if I can add any additional information.