Qt Quick 3D - Custom Shaders Example | Qt Quick 3D 6.5.3
Description: Demonstrates the use of custom vertex and fragment shaders.

- Qt 6.5
- Qt Quick 3D
- Qt Quick 3D Examples and Tutorials
- Qt Quick 3D - Custom Shaders Example
- Qt Quick 3D | Commercial or GPLv3

# Qt Quick 3D - Custom Shaders Example

     // Copyright (C) 2019 The Qt Company Ltd.
     // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

     import QtQuick
     import QtQuick.Controls
     import QtQuick.Layouts

     Rectangle {
         property real time: time.sliderValue
         property real amplitude: amplitude.sliderValue
         property real alpha: alpha.sliderValue
         property bool animateRotation: animControl.checkBoxSet
         property bool texturing: texControl.checkBoxSet
         property bool textureFromItem : texControl2.checkBoxSet

         color: "#6b7080"
         width: parent.width
         height: 75

         Component {
             id: propertySlider
             RowLayout {
                 Label {
                     id: propText
                     text: name
                     color: "#222840"
                     font.pointSize: 12
                 }
                 Slider {
                     id: slider
                     from: fromValue
                     to: toValue
                     value: sliderValue
                     stepSize: 0.01
                     onValueChanged: sliderValue = value
                     Layout.minimumWidth: 100
                     Layout.maximumWidth: 200
                     background: Rectangle {
                         x: slider.leftPadding
                         y: slider.topPadding + slider.availableHeight / 2 - height / 2
                         implicitWidth: 120
                         implicitHeight: 4
                         width: slider.availableWidth
                         height: implicitHeight
                         radius: 1
                         color: "#222840"

                         Rectangle {
                             width: slider.visualPosition * parent.width
                             height: parent.height
                             color: "#848895"
                             radius: 1
                         }
                     }
                     handle: Rectangle {
                         x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width)
                         y: slider.topPadding + slider.availableHeight / 2 - height / 2
                         implicitWidth: 20
                         implicitHeight: 20
                         radius: 5
                         color: slider.pressed ? "#222840" : "#6b7080"
                         border.color: "#848895"
                     }
                 }
                 Label {
                     id: valueText
                     text: slider.value.toFixed(2)
                     color: "#222840"
                     font.pointSize: 12
                     font.bold: true
                     Layout.minimumWidth: 40
                     Layout.maximumWidth: 40
                 }
             }
         }

         Component {
             id: propertyCheckBox
             RowLayout {
                 Label {
                     text: checkBoxText
                     font.pointSize: 12
                     font.bold: true
                 }
                 CheckBox {
                     checked: false
                     onCheckedChanged: checkBoxSet = checked
                 }
             }
         }

         ScrollBar {
             id: hbar
             policy: parent.width < columnLayout.width ? ScrollBar.AlwaysOn : ScrollBar.AsNeeded
             orientation: Qt.Horizontal
             size: parent.width / columnLayout.width
             anchors.bottom: parent.bottom
             anchors.left: parent.left
             anchors.right: parent.right
         }

         ColumnLayout {
             id: columnLayout
             readonly property int leftMargin: 25
             x: leftMargin - hbar.position * width

             RowLayout {
                 spacing: 10
                 Loader {
                     id: time
                     property real sliderValue: 0.0
                     property string name: "Time"
                     property real fromValue: 0.0
                     property real toValue: 1.0
                     sourceComponent: propertySlider
                 }
                 Loader {
                     id: amplitude
                     property real sliderValue: 5.0
                     property string name: "Amplitude"
                     property real fromValue: 1.0
                     property real toValue: 20.0
                     sourceComponent: propertySlider
                 }
                 Loader {
                     id: alpha
                     property real sliderValue: 1.0
                     property string name: "Alpha"
                     property real fromValue: 0.0
                     property real toValue: 1.0
                     sourceComponent: propertySlider
                 }
                 Loader {
                     id: animControl
                     property string checkBoxText: "Rotate"
                     property bool checkBoxSet: false
                     sourceComponent: propertyCheckBox
                 }
                 Loader {
                     id: texControl
                     property string checkBoxText: "Texture"
                     property bool checkBoxSet: false
                     sourceComponent: propertyCheckBox
                 }
                 Layout.rightMargin: texControl.checkBoxSet ? 0 : texControl2.width + 10
                 Loader {
                     id: texControl2
                     visible: texControl.checkBoxSet
                     property string checkBoxText: "Texture with Item"
                     property bool checkBoxSet: false
                     sourceComponent: texControl.checkBoxSet ? propertyCheckBox : undefined
                 }
             }
         }
     }