Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-71099

WASM: Images with layer effects and gradients are not rendered correctly

    XMLWordPrintable

Details

    • Bug
    • Resolution: Done
    • P2: Important
    • 5.12.0 Beta 2
    • 5.12.0 Beta 1
    • None
    • WebAssembly
    • 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.

      Attachments

        1. browser.png
          browser.png
          14 kB
        2. gradient.png
          gradient.png
          18 kB
        3. native.png
          native.png
          9 kB

        Activity

          People

            lpotter Lorn Potter
            cajus Cajus Pollmeier
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved: