Qt3D

----------------------------------------------
概述
- 請閱讀QtHelp: Qt 3D Overview 
    https://www.kdab.com/overview-qt3d-2-0-part-1/
    http://blog.csdn.net/iron_lzn/article/details/51363959
- 上youtube 搜索 Qt 3D 視頻
－ 上kdab公司的網站，Qt3D的主要代碼都是kdab公司提供的
- 建模示例：https://www.kdab.com/qt-3d-animation-easter-teaser/
----------------------------------------------
功能
    2D and 3D rendering     : 2d/3d渲染
    Meshes and Geometry     : 面片和座標
    Materials               : 材質
    Shaders                 : 着色器
    Shadow mapping          : 陰影貼圖（一種實時陰影技術）
    Ambient occlusion       : 環境光遮蔽（一種全局光技術）
    High dynamic range      : 高動態範圍（HDR)
    Deferred rendering      : 延遲渲染（一種多光源渲染技術）
    Multitexturing          : 多材質
    Instanced rendering     : 實例渲染
    Uniform Buffer Objects  : 統一緩衝對象(HBO)
    
相關庫
    QT += 3dcore 3drender 3dinput 3dlogic 3dextras
    #include <Qt3DCore>
    #include <Qt3DRender>
    #include <Qt3DInput>
    #include <Qt3DLogic>
    #include <Qt3DExtras>
    QT += 3dcore 3drender 3dinput 3dlogic 3dextras qml quick 3dquick
    import Qt3D.Core 2.0      // 節點實體模型，基礎變化
    import Qt3D.Render 2.0    // 相機，緩衝，濾鏡，圖層，面片，光照，特效，材質，Shader，
    import Qt3D.Input 2.0     // 輸入
    import Qt3D.Logic 2.0     // 每幀動畫控制
    import Qt3D.Extras 2.0    // 第一人稱相機，軌道相機，反射貼圖，基礎模型等
    
繼承關係
    Node                            // qt3d 全部類的基類
        Entity                      // 
            Camera                  // 
        Component3D                 // 
            Layer                   // 
            Transform               // 
            CameraLens              // 
            ComputeCommand          // 
            FrameAction             // 
            InputSettings           // 
            KeyboardHandler         // 
            GeometryRenderer        // 
                Mesh                // 面片
                ConeMesh            // 圓錐體 ConeMesh {bottomRadius: 0.05; topRadius: 0; length : 0.1; rings : 10; slices: 10},
                CuboidMesh          // 長方體
                CylinderMesh        // 圓柱體 CylinderMesh{length : size; radius : 0.05; rings : 10; slices: 10}
                PlaneMesh           // 平面  PlaneMesh {width: 1.0; height: 1.0; meshResolution: Qt.size(2, 2)}
                SphereMesh          // 球體  SphereMesh {radius: 1}
                TorusMesh           // 三葉體
            Light                   // 光照基類
                DirectionLight      // 方向光（如太陽）
                PointLight          // 電光源（如燈泡）
                SportLight          // 聚光
            Material                               // 
                Texture2D                          // 
                DiffuseMapMaterial                 // 漫反射貼圖材質
                DiffuseSpecularMapMaterial         // 漫反射高光貼圖材質
                GoochMaterial                      // Gooch shading model, popular in CAD and CAM applications
                NormalDiffuseMapMaterial           // 
                NormalDiffuseMapAlphaMaterial      // 
                NormalDiffuseSpecularMapMaterial   // 
                PhongMaterial                      // 
                PhongAlphaMaterial                 // 
                PerVertexColorMaterial             // 
        AbstractTextureImage        // 
        Effect                      // 
        FilterKey                   // 
        FrameGraphNode              // FrameGraph 配置基類，用於控制渲染
            LayerFilter             // 層過濾（只顯示指定層的對象）
            CameraSelector          // 相機選擇器 
            ClearBuffers            // enables clearing of the specific render target buffers with specific values
            DispatchCompute         // FrameGraph node to issue work for the compute shader on GPU
            FrustumCulling          // enables frustum culling of the drawable entities based on the camera view and Geometry bounds of the entities
            NoDraw                  // Prevents from drawing anything
            RenderCapture           // Used to request render capture. User can specify a captureId to identify the request.
            RenderSurfaceSelector   // be used to select the surface
            RenderTargetSelector    // s used to select active RenderTarget for the FrameGraph
            RenderPassFilter        // 
            RenderStateSet          // 
            SortPolicy              // 
            TechniqueFilter         // 
            Viewport                // 
        KeyboardDevice              // 
        RenderPass                  // 
        RenderState                 // 
        RenderTargetOutput          // 
        ShaderPrograme
        CameraController
            FirstPersonCameraController  // 第一人稱相機控制器（相似cs）
            OrbitCameraController        // 軌道相機控制器（圍繞物體旋轉）
        Geometry                    // 
            ConeGeometry            // allows creation of a cone in 3D space
            CuboidGeometry          // allows creation of a cuboid in 3D space.
            CylinderGeometry        // 
            PlaneGeometry           // 
            SphereGeometry          // 
            TorusGeometry           // 


eg
    CuboidMesh {
        id: mesh
        property real multiplier: 0.0256
        xExtent: 512 * multiplier
        yExtent: 768 * multiplier
        zExtent: 2.0
        yzMeshResolution: Qt.size(20, 20)
        xzMeshResolution: Qt.size(20, 20)
        xyMeshResolution: Qt.size(20, 20)
    }

顯示OpenGL版本
    Rectangle {
        color: "black"
        Text {
            color: "white"
            anchors.centerIn: parent
            text: "Open%4 %1.%2 %3"
                .arg(OpenGLInfo.majorVersion)
                .arg(OpenGLInfo.minorVersion)
                .arg({0: "NoProfile", 1: "CoreProfile", 2: "CompatibilityProfile"}[OpenGLInfo.profile])
                .arg({0: "Unspecified", 1: "GL", 2: "GLES"}[OpenGLInfo.renderableType])
            styleColor: "#8b8b8b"
            style: Text.Sunken
            font.pointSize: 24
            onTextChanged: {
                Resources.setGlInfo(OpenGLInfo);
            }
        }
    }

----------------------------------------------
Scene3D
提供3d運行場景，嵌在普通qml中
----------------------------------------------
屬性
    activeCamera : Camera3D
    activeLight : Light3D
    devicePixelRatio : float
    graphPositionQuery : point
    invalidSelectionPoint : point
    primarySubViewport : rect
    secondarySubViewport : rect
    secondarySubviewOnTop : bool
    selectionQueryPosition : point
    slicingActive : bool
    viewport : rect 
    
示例
    Scene3D {
      id: scene3d
      anchors.fill: parent
      anchors.margins: 10
      focus: true
      aspects: ["input", "logic"]
      cameraAspectRatioMode: Scene3D.AutomaticAspectRatio
      AnimatedEntity {}
    }
          
    

----------------------------------------------
Entity
Entity有個屬性component，裏面能夠容納 Mesh, Transformation, Audio, Material.....，
這是一種很靈活的方式，可簡化3d對象類的層次，也便於擴展。
----------------------------------------------
標準寫法
    Entity {
        components: [
            Mesh {source: "assets/obj/toyplane.obj"},
            PhongMaterial {diffuse: "white"; shininess: 50}
        ]
    }
    
從文件中加載場景
    Entity {
        components: [
            SceneLoader {source: "qrc:/assets/test_scene.dae"}
        ]
    }

                      
----------------------------------------------
Camera
import Qt3D.Core 2.0
import Qt3D.Render 2.0
----------------------------------------------
第一人稱三角透視相機
    Camera {
        id: mainCamera
        objectName: "mainCamera"
        projectionType: CameraLens.PerspectiveProjection
        fieldOfView: 22.5
        aspectRatio: _window.width / _window.height
        onAspectRatioChanged: console.log( "aspectRatio = " + aspectRatio )
        nearPlane:   0.01
        farPlane:    1000.0
        viewCenter: Qt.vector3d( 0.0, 0.0, 0.0 )
        upVector:   Qt.vector3d( 0.0, 1.0, 0.0 )
    }
    FirstPersonCameraController { camera: mainCamera }
    

軌道透視相機（右鍵按住拖動，可對準原點旋轉相機）
    components: [
        RenderSettings {
            activeFrameGraph: ForwardRenderer {
                clearColor: Qt.rgba(0, 0.5, 1, 1)
                camera: camera
            }
        },
        InputSettings { }
    ]
    Camera {
        id: camera
        projectionType: CameraLens.PerspectiveProjection
        fieldOfView: 45
        aspectRatio: 16/9
        nearPlane : 0.1
        farPlane : 1000.0
        position: Qt.vector3d( 0.0, 0.0, -40.0 )
        upVector: Qt.vector3d( 0.0, 1.0, 0.0 )
        viewCenter: Qt.vector3d( 0.0, 0.0, 0.0 )
    }
    OrbitCameraController { camera: camera}

多角度觀測
    Viewport {
          id: mainViewport
          normalizedRect: Qt.rect(0, 0, 1, 1)
          ClearBuffers {
              buffers: ClearBuffers.ColorDepthBuffer
          }
    
          Viewport {
              id: topLeftViewport
              normalizedRect: Qt.rect(0, 0, 0.5, 0.5)
              CameraSelector { id: cameraSelectorTopLeftViewport }
          }
          Viewport {
              id: topRightViewport
              normalizedRect: Qt.rect(0.5, 0, 0.5, 0.5)
              CameraSelector { id: cameraSelectorTopRightViewport }
          }
          Viewport {
              id: bottomLeftViewport
              normalizedRect: Qt.rect(0, 0.5, 0.5, 0.5)
              CameraSelector { id: cameraSelectorBottomLeftViewport }
          }
          Viewport {
              id: bottomRightViewport
              normalizedRect: Qt.rect(0.5, 0.5, 0.5, 0.5)
              CameraSelector { id: cameraSelectorBottomRightViewport }
          }
      }

    


----------------------------------------------
Light
----------------------------------------------
方向光（平行光，如太陽）
    Enity {
        components: [
            DirectionalLight {
                worldDirection: Qt.vector3d(0.3, -3.0, 0.0).normalized();
                color: "#fbf9ce"
                intensity: 0.3
            }
        ]
    }

點光源（如燈泡）
    Entity {
        components: [
            PointLight {
                color: "red"
                intensity: 0.3
                constantAttenuation: 1.0
                linearAttenuation: 0.0
                quadraticAttenuation: 0.0025
            }
        ]
    }

聚光（如舞臺聚光燈）
    Entity {
        components: [
            SpotLight {
                localDirection: Qt.vector3d(0.0, -1.0, 0.0)
                color: "white"
                intensity: 0.6
            }
        ]
    }        
    




----------------------------------------------
Material（材質）
貼圖相關概念
    https://zhidao.baidu.com/question/167602912.html
    http://www.cnblogs.com/xiuj/p/5875461.html
    -------------------------------------------
    ambient                 : 環境色。物體本身發出的光。
    diffuse map             : 漫反射貼圖(色彩貼圖）, 它的做用是給模型上顏色和材質
    specular map            : 高光貼圖，不一樣材質，在光照下，它們的反射光的強弱都不一樣
    normal map              : 法線貼圖.用來表現凹凸
    -------------------------------------------
    gloss map               : 指示着色器對物體的表面的某些部分着色更亮一點，某些部分更暗一點，由於Gloss Maps只須要單通道, 可用alpha通道的圖或灰度圖
    emboss bump map         : 作表面的浮雕效果的
    opacity map             : 透明貼圖。透明通道製做頭髮或者損壞的衣服布料等等能夠用到
    shininess               : 光澤（0-1）
    lighting map 和 AO map  : 讓材質製做更加逼真，更加方便
Qt3D中材質
    用Material組件編寫
    提供了幾種材質組件，一般是幾種貼圖方式的組合
        PhongMaterial
        DiffuseMapMaterial
        NormalDiffuseMapMaterial
        GoochMaterial
----------------------------------------------
簡單色彩材質
    色彩材質
        ColorMaterial{
            diffuseColor: Qt.rgba(0.2, 0.5, 0.3, 1.0)
            specularColor: Qt.rgba(0, 0, 0, 1.0)
        }
    Phong 基礎光照模型材質
        PhongMaterial {
            ambient: Qt.rgba( 0.02, 0.02, 0.02, 1.0 )
            diffuse: Qt.rgba( 0.8, 0.0, 0.0, 1.0 )
            specular: Qt.rgba( 0.8, 0.0, 0.0, 1.0 )
            shininess: 1.0
        }
    PhongAlphaMaterial（帶透明通道的基礎Phong光照模型材質）
        PhongMaterial {
            ambient: Qt.rgba( 0.02, 0.02, 0.02, 1.0 )
            diffuse: Qt.rgba( 0.8, 0.0, 0.0, 1.0 )
            specular: Qt.rgba( 0.8, 0.0, 0.0, 1.0 )
            shininess: 1.0
            alpha: 0.8
        }
    GoochMaterial
        Gooch光照渲染模型。
        經常使用於CAD和CAM程序，徹底擬真不是該模型的目標，
        該模型同時使用 color 和 brightness 來顯示3d表面的彎曲部分;
        該模型混合了漫反射光／冷光／暖光來產生漸變色帶，冷光和暖光分別由alpha和beta參數影響。色帶區間：[cool + alpha * diffuse, warm + beta * diffuse]
        參數
            shininess : real
            diffuse : color
            specular : color
            coolColor : color
            warmColor : color
            alpha : real
            beta : real
    PerVertexColorMaterial
        Default implementation for rendering the color properties set for each vertex
        幫助上沒有任何參數



漫反射貼圖材質（Phong光照模型)
    漫反射貼圖材質（漫反射由貼圖提供）
        DiffuseMapMaterial {
            diffuse: "assets/chest/diffuse.webp"
            specular: Qt.rgba( 0.2, 0.2, 0.2, 1.0 )
            shininess: 2.0
            ambient: color
            textureScale: 1.0
        }
    漫反射高光貼圖材質（漫反射和高光均有貼圖提供）
        DiffuseSpecularMapMaterial{
            diffuse: "assets/chest/diffuse.webp"
            specular: "assets/chest/specular.webp"
            shininess: 2.0
            ambient: color
            textureScale: 1.0
        }
        
    
凹凸貼圖材質（用貼圖來模擬細節，減少建模複雜度）
    法線漫反射貼圖材質（實現了phong光照和凹凸貼圖模型）
        NormalDiffuseMapMaterial {
            ambient: Qt.rgba( 0.05, 0.05, 0.05, 1.0 )
            shininess: 5.0
            textureScale: 1.0
            diffuse: "assets/houseplants/pot.webp"
            normal: "assets/houseplants/pot_normal.webp"
            specular: Qt.rgba( 0.75, 0.75, 0.75, 1.0 )
            }
    法線漫反射貼圖質（和前一個的區別？）
        NormalDiffuseMapAlphaMaterial {
            ambient: Qt.rgba( 0.05, 0.05, 0.05, 1.0 )
            shininess: 1.0
            textureScale: 1.0
            diffuse: "qrc:/images/songtitle.png"
            normal: "qrc:/images/normalmap.png"
            specular: color
            }
    法線漫反射高光貼圖材質（高光能夠指定貼圖）
        NormalDiffuseSpecularMapMaterial {
            ambient: Qt.rgba( 0.05, 0.05, 0.05, 1.0 )
            shininess: 10.0
            textureScale: 10.0
            diffuse:  "assets/textures/pattern_09/diffuse.webp"
            normal:   "assets/textures/pattern_09/normal.webp"
            specular: "assets/textures/pattern_09/specular.webp"
            }


自定義材質（使用Shader技術實現）
    示例1
        Material {
            id: instancedPhongMaterial
            effect: Effect {
                techniques: Technique {
                    graphicsApiFilter {
                        api: GraphicsApiFilter.OpenGL
                        profile: GraphicsApiFilter.CoreProfile
                        minorVersion: 2
                        majorVersion: 3
                    }
                    filterKeys: FilterKey { name: "renderingStyle"; value: "forward" }
                    renderPasses: RenderPass {
                        shaderProgram: ShaderProgram {
                            vertexShaderCode: loadSource("qrc:/instanced.vert")
                            fragmentShaderCode: loadSource("qrc:/instanced.frag")
                        }
                    }
                }
            }
        }
    線框材質
        請查看官方示例「Wireframe qml example」
        WireframeMaterial {
            id: wireframeMaterial
            effect: WireframeEffect {}
            ambient: Qt.rgba( 0.2, 0.0, 0.0, 1.0 )
            diffuse: Qt.rgba( 0.8, 0.0, 0.0, 1.0 )
        }
    詳見官方示例：Planets qml example
    Texture2D {
          id: diffuseTexture
          minificationFilter: Texture.LinearMipMapLinear
          magnificationFilter: Texture.Linear
          wrapMode {
              x: WrapMode.Repeat
              y: WrapMode.Repeat
          }
          generateMipMaps: true
          maximumAnisotropy: 16.0
          TextureImage {source: "qrc:/texturePalette.png"}  
     }    


----------------------------------------------
Layer(QLayer>)
相似ps中的圖層，可在程序中控制某些圖層顯示隱藏
----------------------------------------------
  import Qt3D.Core 2.0
  import Qt3D.Render 2.0
  Entity {
      id: root
      components: RenderSettings {
          Viewport {
              ClearBuffers {
                  buffers: ClearBuffers.ColorDepthBuffer
                  CameraSelector {
                      camera: mainCamera
                      LayerFilter {layers: [layer1]}
                  }
              }
          }
      }
      Camera { id: mainCamera }

      // scene
      Entity {
          id: renderableEntity
          components: [ mesh, layer1 ]
      }
      Layer { id: layer1 }
      GeometryRenderer { id: mesh }
  }
  
  
  

----------------------------------------------
TechniqueFilter e
----------------------------------------------
import Qt3D.Core 2.0
import Qt3D.Render 2.0
TechniqueFilter {
    property alias camera: cameraSelector.camera
    property alias window: surfaceSelector.surface

    id: root
    objectName : "techniqueFilter"
    matchAll: [ FilterKey { name: "renderingStyle"; value: "forward" } ]  // Select the forward rendering Technique of any used Effect

    RenderSurfaceSelector {
        id: surfaceSelector
        Viewport {
            id: viewport
            objectName : "viewport"
            normalizedRect: Qt.rect(0.0, 0.0, 1.0, 1.0)
            CameraSelector {
                id : cameraSelector
                objectName : "cameraSelector"
                ClearBuffers {
                    buffers : ClearBuffers.ColorDepthBuffer
                    clearColor: "black"
                    SortPolicy {
                        sortTypes: [
                            SortPolicy.StateChangeCost,
                            SortPolicy.Material
                        ]
                    }
                }
            }
        }
    }
}


----------------------------------------------
AspectEngine
----------------------------------------------
3d模擬是AspectEngine來執行等
AbstractAspect
    Behavior 處理組件數據
    
RenderAspect
InputAspect
LoginAspect




----------------------------------------------
FrameGraph & ViewPort & Layer
描述了後期處理邏輯，如：陰影／透明／後期處理／多視圖/選擇渲染
import Qt3D.Core 2.0
import Qt3D.Render 2.0
----------------------------------------------
默認的RenderSetting
    Entity {
        Camera { id:camera ... }
        FirstPersonCameraController {camera:camera}
        components: [
            RenderSetting{
                activeFrameGraph : ForwardRenderer {camera:camera, clearColor:"transparent"},
                InputSetting{}
            }
        ]
        ...
    }

自定義RenderSetting（多視圖）
    RenderSettings {
      id: quadViewportFrameGraph
      property alias topLeftCamera: cameraSelectorTopLeftViewport.camera;
      property alias topRightCamera: cameraSelectorTopRightViewport.camera;
      property alias bottomLeftCamera: cameraSelectorBottomLeftViewport.camera;
      property alias bottomRightCamera: cameraSelectorBottomRightViewport.camera;
      property alias window: surfaceSelector.surface

      activeFrameGraph: RenderSurfaceSelector {
          id: surfaceSelector
          Viewport {
              id: mainViewport
              normalizedRect: Qt.rect(0, 0, 1, 1)

              ClearBuffers {
                  buffers: ClearBuffers.ColorDepthBuffer
              }

              Viewport {
                  id: topLeftViewport
                  normalizedRect: Qt.rect(0, 0, 0.5, 0.5)
                  CameraSelector { id: cameraSelectorTopLeftViewport }
              }

              Viewport {
                  id: topRightViewport
                  normalizedRect: Qt.rect(0.5, 0, 0.5, 0.5)
                  CameraSelector { id: cameraSelectorTopRightViewport }
              }

              Viewport {
                  id: bottomLeftViewport
                  normalizedRect: Qt.rect(0, 0.5, 0.5, 0.5)
                  CameraSelector { id: cameraSelectorBottomLeftViewport }
              }

              Viewport {
                  id: bottomRightViewport
                  normalizedRect: Qt.rect(0.5, 0.5, 0.5, 0.5)
                  CameraSelector { id: cameraSelectorBottomRightViewport }
              }
          }
      }
  }

選擇圖層渲染
    RenderSurfaceSelector{
        RenderTargetSelector{
            target: sceneTarget
            CameraSelector{
                camera: mainCamera
                ClearBuffer {
                    buffers: ClearBuffers.ColorDepthBuffer
                    clearColor: "white"
                    NoDraw{}
                }
                LayerFilter{
                    layers: [objectsLayer]
                    RenderPassFilter{
                        matchAny: FilterKey{name: "renderPass"; value: "allObjects"}
                    }
                }
                LayerFilter{
                    layers: [enviromentLayer]
                }
            }
        }
    }


----------------------------------------------
CustomMaterial & Effect
----------------------------------------------
import Qt3D.Core 2.0
import Qt3D.Render 2.0
Material {
    // 定義材質的參數
    id: root
    property color ambient: Qt.rgba( 0.05, 0.05, 0.05, 1.0 )
    property color diffuse: Qt.rgba( 0.7, 0.7, 0.7, 1.0 )
    property color specular: Qt.rgba( 0.95, 0.95, 0.95, 1.0 )
    property real shininess: 150.0
    property real lineWidth: 0.8
    property color lineColor: Qt.rgba( 0.0, 0.0, 0.0, 1.0 )
    parameters: [
        Parameter { name: "ka"; value: Qt.vector3d(root.ambient.r, root.ambient.g, root.ambient.b) },
        Parameter { name: "kd"; value: Qt.vector3d(root.diffuse.r, root.diffuse.g, root.diffuse.b) },
        Parameter { name: "ks"; value: Qt.vector3d(root.specular.r, root.specular.g, root.specular.b) },
        Parameter { name: "shininess"; value: root.shininess },
        Parameter { name: "line.width"; value: root.lineWidth },
        Parameter { name: "line.color"; value: root.lineColor }
    ]

    // 具體的效果實現邏輯（使用Shader實現）
    effect: Effect {
        parameters: [
            Parameter { name: "ka";  value: Qt.vector3d( 0.1, 0.1, 0.1 ) },
            Parameter { name: "kd";  value: Qt.vector3d( 0.7, 0.7, 0.7 ) },
            Parameter { name: "ks";  value: Qt.vector3d( 0.95, 0.95, 0.95 ) },
            Parameter { name: "shininess"; value: 150.0 }
        ]
        techniques: [
            Technique {
                graphicsApiFilter {
                    api: GraphicsApiFilter.OpenGL
                    profile: GraphicsApiFilter.CoreProfile
                    majorVersion: 3
                    minorVersion: 1
                }
                filterKeys: [ FilterKey { name: "renderingStyle"; value: "forward" } ]
                parameters: [
                    Parameter { name: "light.position"; value: Qt.vector4d( 0.0, 0.0, 0.0, 1.0 ) },
                    Parameter { name: "light.intensity"; value: Qt.vector3d( 1.0, 1.0, 1.0 ) },
                    Parameter { name: "line.width"; value: 1.0 },
                    Parameter { name: "line.color"; value: Qt.vector4d( 1.0, 1.0, 1.0, 1.0 ) }
                ]
                // 渲染通道
                renderPasses: [
                    RenderPass {
                        shaderProgram: ShaderProgram {
                            vertexShaderCode:   loadSource("qrc:/Materials/Shaders/robustwireframe.vert")
                            geometryShaderCode: loadSource("qrc:/Materials/Shaders/robustwireframe.geom")
                            fragmentShaderCode: loadSource("qrc:/Materials/Shaders/robustwireframe.frag")
                        }
                    }
                ]
            }
        ]
    }
}
shader 詳見Qt3D.Shader章節




----------------------------------------------
ObjectPicker & animation(5.9)
https://www.kdab.com/qt-3d-animation-easter-teaser/
ClipAnimator 5.9 提供。可加載設計好的動畫
----------------------------------------------
Entity {
    id: cube 
    components: [
        Transform {
            id: cubeTransform
        },
        Mesh {
            source: "qrc:/assets/egg/egg.obj"
        },
        TexturedMetalRoughMaterial {
            baseColor: TextureLoader {
                format: Texture.SRGB8_Alpha8
                source: "qrc:/assets/egg/basecolor.png"
            }
            metalness: TextureLoader { source: "qrc:/assets/egg/metalness.png" }
            roughness: TextureLoader { source: "qrc:/assets/egg/roughness.png" }
            normal: TextureLoader { source: "qrc:/assets/egg/normal.png" }
            ambientOcclusion: TextureLoader { source: "qrc:/assets/egg/ambientocclusion.png" }
        },
        ObjectPicker {
            onClicked: animator.running = true
        },
        ClipAnimator {
            id: animator
            loops: 3
            clip: AnimationClipLoader { source: "qrc:/jumpinganimation.json" }
            channelMapper: ChannelMapper {
                mappings: [
                    ChannelMapping { channelName: "Location"; target: cubeTransform; property: "translation" },
                    ChannelMapping { channelName: "Rotation"; target: cubeTransform; property: "rotation" },
                    ChannelMapping { channelName: "Scale"; target: cubeTransform; property: "scale3D" }
                ]
            }
        }
    ]
}




----------------------------------------------
-- 批量生成對象
----------------------------------------------
   NodeInstantiator {
      id: collection
      property int maxCount: parent.numberOfBars
      model: maxCount
      delegate: BarEntity {
          id: cubicEntity
          entityMesh: CuboidMesh {xExtent: 0.1; yExtent: 0.1; zExtent: 0.1}
          rotationTimeMs: sceneRoot.barRotationTimeMs
          entityIndex: index
          entityCount: sceneRoot.numberOfBars
          entityAnimationsState: animationState
          magnitude: 0
      }
    }

    NodeInstantiator {
        id: grid
        model: rows * columns
        property int rows: 6
        property int columns: 11

        Entity {
            property int _row: index / grid.columns
            property int _col: index % grid.columns

            components: [ sphereTransform, sphereMesh, sphereMaterial ]
            SphereMesh {
                id: sphereMesh
                slices: 60
                rings: 60
                radius: 0.65
            }
            Transform {
                id: sphereTransform
                translation: Qt.vector3d(-7.5 + _col * 1.5, -4.0 + _row * 1.5, 0)
            }
            MetalRoughMaterial {
                id: sphereMaterial
                baseColor: scene.baseColor
                metalness: 0.2 * _row
                roughness: 0.1 * _col
            }
        }
    }


----------------------------------------------
-- 雜
----------------------------------------------  
KeyboardInput
    可響應鍵盤消息
    
    
LogicComponent
    可設置邏輯。如物體位置／精靈建立／離屏銷燬等。
    
    
FrameGraph
    如何渲染場景
    
    
CameraSelector NoDraw    
    Viewport {
      CameraSelector {
          ClearBuffers {
              buffers: ClearBuffers.ColorDepthBuffer
              NoDraw { } // Prevents from drawing anything
          }
          RenderPassFilter {
              ...
          }
          RenderPassFilter {
              ...
          }
      }
    }

ClearBuffers
    ClearBuffers {
      buffers: ClearBuffers.DepthBuffer
      CameraSelector {
          id: lightCameraSelector
      }
    }
    

--------------------------------------------------    
三維旋轉控制
-------------------------------------------------- 
    // 旋轉
    Transform {
        id: modelTransform
        property real angle: 0
        matrix: {
            var m = cameraMatrix.inverted();
            m.translate(Qt.vector3d(6,
                                    -4 - (1.0 - showDetailsTransitionState) * 10,
                                    -20 * showDetailsTransitionState));
            m.rotate(modelTransform.angle, Qt.vector3d(0, 1, 0));  // 動畫繞y軸旋轉360度
            m.rotate(15, Qt.vector3d(0, 0, 1)); // 沿z軸傾斜15度
            return m;
        }
    }
    
    //
    Transform {
        id: cameraRotationTransform
        matrix: {
            var m = Qt.matrix4x4();
            m.rotate(-19 * window.carouselOffset, Qt.vector3d(0.0, 1.0, 0.0));
            m.rotate(5 * mainCamera.roll, Qt.vector3d(0.0, 0.0, 1.0));
            m.lookAt(Qt.vector3d( 0.0, 0.0, 0.0 ),
                     Qt.vector3d(-40 * Math.sin(mainCamera.yaw), mainCamera.roll * 3, -40 * Math.cos(mainCamera.yaw) ),
                     Qt.vector3d( 0.0, 1.0, 0.0 ));
            return m;
        }
    }
    
    Transform {
        id: modelTransform
        matrix: {
            var m = cameraMatrix.inverted();
            m.translate(Qt.vector3d(0.0, -1.5 + (1.5 * showDetailsTransitionState), -40));
            m.rotate(40 * Math.min(1.0, showDetailsTransitionState * 1.5), Qt.vector3d(0, 1, 0));
            m.translate(Qt.vector3d(-25 * Math.max(0, showDetailsTransitionState - 0.4), 0.0, 0.0));
            return m;
        }
    }    
-------------------------------------------------- 
貼圖位置的控制
-------------------------------------------------- 
import Qt3D.Core 2.0
import Qt3D.Render 2.0
Texture2D {
    property alias source: image.source
    minificationFilter: Texture.LinearMipMapLinear
    magnificationFilter: Texture.Linear
    generateMipMaps: true
    wrapMode {
        x: WrapMode.ClampToEdge
        y: WrapMode.ClampToEdge
    }
    TextureImage {
        id: image
    }
}