3

I'm experimenting with QtQuick3D on Qt 5.15. It's feature to embed QtQuick Items is quite awesome. I like to create a rectangle (100 x 100 units) and fill it with an Image (1000 x 1000 pixels).

That works nice when I define a Material and assign it (see Model okButCodeSpread, right rectangle in screenshot), but its more to code.

Its a lot shorter to define a Node and embed an Image. However, I struggle to control the size of the texture in this case. Whatever I try, it's blurry. See Model doesNotWork and left rectangle in screenshot.

I found a work around by scaling the Image up and the Node down. See Model okButUgly, middle rectangle in screenshot.

Any ideas who to get a crisp texture for Model doesNotWork?

Also, how can hide the image in 2D used to define the Material? Setting in visible property to false causes the texture in 3D to be solid black...

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick3D 1.15
import QtQuick3D.Helpers 1.15

Window {
    width: 640
    height: 480
    visible: true

    Image {
        id: image   
        layer.enabled: true
        width: 1000
        height: 1000
        source: "test.png"
    }

    View3D {
        id: view
        width: 400
        height: 400
        renderMode: View3D.Inline

        environment: SceneEnvironment {
            clearColor: "dimgray"
            backgroundMode: SceneEnvironment.Color
        }

        PerspectiveCamera {
            id: cam
            position: Qt.vector3d(0, 0, 350)
        }

        DirectionalLight {
        }

        WasdController {
            controlledObject: cam
        }

        DefaultMaterial {
            id: mat
            diffuseMap: Texture {
                sourceItem: image
            }
        }

        Node {
            id: doesNotWork
            position: Qt.vector3d(-150, 0, 0)

            Image {
                layer.enabled: true
                layer.textureSize: Qt.size(1000, 1000)
                sourceSize: Qt.size(1000, 1000)
                width: 100
                height: 100
                source: "test.png"
           }
        }

        Node {
            id: okButUgly        
            property real scaleFactor: 10
            position: Qt.vector3d(0, 0, 0)
            scale: Qt.vector3d(1/scaleFactor, 1/scaleFactor , 1/scaleFactor)

            Image {
                width: 100 * okButUgly.scaleFactor
                height: 100 * okButUgly.scaleFactor           
                source: "test.png"
            }
        }

        Model {
            id: okButCodeSpread
            position: Qt.vector3d(150, 0, 0)
            source: "#Rectangle"
            materials: mat
        }
    }

    DebugView {
        source: view
    }
}

Screenshot

marsl
  • 959
  • 1
  • 14
  • 25

0 Answers0