Qt 3D的研究(四):指定渲染的材质以及效果

原创 2015年02月28日 11:16:29

Qt 3D的研究(四):指定渲染的材质以及效果

       在上一篇文章中我了解到了怎样简单地显示模型。Qt3D内置了一个obj模型的解析器,这样可以将简单的obj模型载入并且显示出来。其实Qt3D对于渲染的配置还是很厉害的,通过设定材质,我们可以得到很不错的渲染效果,而且可以通过设定Effect,将自己指定的着色器载入,让Qt 3D和OpenGL进行编译,得到自己想要的渲染效果。

蒋彩阳原创文章,首发地址:http://blog.csdn.net/gamesdev/article/details/43983493。欢迎同行前来探讨。

       在上一篇文章介绍的QML代码的基础上,我们简单地添加一个材质。代码如下:

    Entity
    {
        Mesh
        {
            id: mesh
            objectName: "toyPlane"
            source: "qrc:/toyplane.obj"
        }

        //! [4]
        PhongMaterial
        {
            id: phongMaterial
        }
        //! [4]

        components: [ mesh, phongMaterial ]
    }

       运行结果如下:

       这里我们在//! [4]之间添加了一个常用的材质:Phong材质。Phong光照模型是一种常见的光照模型,他揭示了生成高光的方法。以前我的博客也介绍并且实现了这样的光照模型。之所以它的广泛性,Qt 3D将其封装了一个类,方便操作。图中显示的是使用Phong光照模型,让玩具飞机呈现光滑透明的效果。我们也可以设定具体的参数,让光照呈现不同的效果:设定全局光(ambient)、漫反射(diffuse)、镜面反射(specular)以及自发光亮度(shininess)。添加的代码如下所示:

import Qt3D 2.0
import Qt3D.Render 2.0

Entity
{
    id: root

    Camera
    {
        id: camera
        position: Qt.vector3d( 0.0, 0.0, 40.0 )
        projectionType: CameraLens.PerspectiveProjection
        fieldOfView: 45
        aspectRatio: 16.0 / 9.0
        nearPlane : 0.1
        farPlane : 1000.0
        upVector: Qt.vector3d( 0.0, 1.0, 0.0 )
        viewCenter: Qt.vector3d( 0.0, 0.0, 0.0 )
    }

    components: FrameGraph
    {
        ForwardRenderer
        {
            clearColor: Qt.rgba( 0, 0, 0, 1 )
            camera: camera
        }
    }

    Entity
    {
        Mesh
        {
            id: mesh
            objectName: "toyPlane"
            source: "qrc:/toyplane.obj"
        }

        //! [4]
        PhongMaterial
        {
            id: phongMaterial
            ambient: Qt.rgba( 0.6, 0.2, 0.1, 1 )
            diffuse: Qt.rgba( 0.2, 0.6, 0.1, 1 )
            specular: Qt.rgba( 0.2, 0.9, 0.1, 1 )
            shininess: 0.6
        }
        //! [4]

        components: [ mesh, phongMaterial ]
    }

    Configuration
    {
        controlledCamera: camera
    }
}

       程序运行结果如下所示:

       这里呈现了一个金光闪闪的玩具飞机模型。

       如果我们想自己写着色器来为我们的模型着色,Qt 3D也提供了相应的方法,可以不借助C++代码来实现,直接在QML指定即可。这里我们需要设定Effect(效果)、Technique(使用的OpenGL技术)、RenderPass(渲染遍数)、ShaderProgram(着色器)。下面是QML代码:

import Qt3D 2.0
import Qt3D.Render 2.0

Entity
{
    id: root

    Camera
    {
        id: camera
        position: Qt.vector3d( 0.0, 0.0, 40.0 )
        projectionType: CameraLens.PerspectiveProjection
        fieldOfView: 45
        aspectRatio: 16.0 / 9.0
        nearPlane : 0.1
        farPlane : 1000.0
        upVector: Qt.vector3d( 0.0, 1.0, 0.0 )
        viewCenter: Qt.vector3d( 0.0, 0.0, 0.0 )
    }

    components: FrameGraph
    {
        ForwardRenderer
        {
            clearColor: Qt.rgba( 0, 0, 0, 1 )
            camera: camera
        }
    }

    Entity
    {
        Mesh
        {
            id: mesh
            source: "qrc:/toyplane.obj"
        }

        //! [5]
        Material
        {
            id: material
            effect: effect

            Effect
            {
                id: effect
                techniques: [ technique ]

                Technique
                {
                    id: technique
                    openGLFilter
                    {
                        api: OpenGLFilter.Desktop
                        profile: OpenGLFilter.None
                        majorVersion: 2
                        minorVersion: 0
                    }

                    renderPasses: [ renderPass ]

                    RenderPass
                    {
                        id: renderPass
                        shaderProgram: simpleSP

                        ShaderProgram
                        {
                            id: simpleSP
                            vertexShaderCode: loadSource( "qrc:/Simple.vert" )
                            fragmentShaderCode: loadSource( "qrc:/Simple.frag" )
                        }
                    }
                }
            }
        }
        //! [5]

        components: [ mesh, material ]
    }

    Configuration
    {
        controlledCamera: camera
    }
}

       代码新添加的部分在//! [5]中。这里我们没有使用默认的PhoneMaterial,而是使用它的父类Material,并且通过指定Effect来实现自己需要的渲染效果。Effect中含有的Technique表示使用的OpenGL技术,因为OpenGL有多个版本,分OpenGL和OpenGL ES,还分core profile和compatibility profile,这样使得种种技术变得十分繁杂。所以Qt 3D提出了Technique这个概念。通过指定api、profile以及majorVersion和minorVersion版本,来使用我们需要的OpenGL API。接着是RenderPass渲染遍(这个翻译总感觉不好),它表示一次渲染需要多少遍渲染操作。比如说在shadow map这个技术中,需要渲染不止一遍,所以要指定两个RenderPass。而每一遍的RenderPass,需要指定着色器程序。因此,我们载入相应的着色器文件,来让系统编译以及链接之,最后得以渲染。本例中,我们实现一个最简单的着色器Simple.vert以及Simple.frag,他们如下所示:

// Simple.vert
#version 100

attribute vec3 vertexPosition;
uniform mat4 mvp;

void main( void )
{
    gl_Position = mvp * vec4( vertexPosition, 1.0 );
}
// Simple.frag
#version 100

void main( void )
{
    gl_FragColor = vec4( 1.0, 0.8, 0.2, 1.0 );
}

       这里需要说明的是,Qt 3D在MeshData中指定了默认的属性(attribute)变量和一致性(uniform)变量,它们如下:

属性(attribute)变量

一致性(uniform)变量

vertexPosition

modelMatrix

vertexTexCoord

viewMatrix

vertexNormal

projectionMatrix

vertexColor

modelView

vertexTangent

modelViewProjection

 

mvp

 

inverseModelMatrix

 

inverViewMatrix

 

inverseProjectionMatrix

 

inverseModelView

 

inverseModelViewProjection

 

modelNormalMatrix

 

modelViewNormal

 

viewportMatrix

 

inverseViewportMatrix

 

time

※这些变量并没有在文档中列出,可能随着版本的变化而变得不同

 

       这是一个非常简单的着色器,它以单色输出。下面是运行截图:

       通过逐渐丰富着色器的内容,可以让程序获取更加美妙的渲染效果。

Qt 3D的研究(四):指定渲染的材质以及效果

在上一篇文章中我了解到了怎样简单地显示模型。Qt3D内置了一个obj模型的解析器,这样可以将简单的obj模型载入并且显示出来。其实Qt3D对于渲染的配置还是很厉害的,通过设定材质,我们可以得到很不错的...
  • jiangcaiyang123
  • jiangcaiyang123
  • 2015年02月28日 11:16
  • 3882

Qt新渲染底层Scene Graph研究(三)

上一篇文章介绍了Qt Quick和Scene Graph的一些理论上的内容。这也是我最新的研究成果。接下来我要介绍一下如何使用Scene Graph来制作一些好玩的效果。这也是我进行一次Scene G...
  • jiangcaiyang123
  • jiangcaiyang123
  • 2015年01月27日 16:54
  • 3749

【猫猫的Unity Shader之旅】之双面材质和多Pass渲染

默认情况下,我们编写的Shader都只对模型的正面进行渲染,因为大多数模型都是封闭的,我们看不到反面。在实际的开发过程中,也经常会遇到需要正反面都渲染的时候,比如开发手游的时候经常需要用一个面片+透明...
  • dbtxdxy
  • dbtxdxy
  • 2015年06月01日 13:35
  • 6437

3D材质球 多重效果

  • 2013年12月04日 16:29
  • 3.11MB
  • 下载

Unity3D研究之自制批量关联材质与贴图插件

 美术做过的模型导出fbx,美术把Fbx和贴图文件给了程序,程序把Fbx导入工程可能会出现贴图和材质没有关联上的问题,如果场景材质非常多,一个一个去给材质贴图非常的费劲。我有一个办法,最好让美术...
  • donghong2008
  • donghong2008
  • 2014年07月18日 09:52
  • 1425

Qt 3D教程(三)实现对模型材质参数的控制

上一篇教程介绍的是显示一个三维模型的基本步骤,接下来我们需要实现的是添加材质,并且希望我们通过按钮来控制材质的参数。这样的效果看起来很像一个3D模型材质编辑器的样子。那我们来尝试一下吧。...
  • jiangcaiyang123
  • jiangcaiyang123
  • 2015年07月29日 18:13
  • 4063

Qt 3D的研究(七):渲染至纹理

最近几天都没有怎么研究Qt 3D了,但是随着Qt5.5发布的日子一天天的靠近,我也不能懈怠,希望利用Qt 3D,将能够实现的功能进行实现,并且对Qt 3D获取一个新的认识。两天多没有研究了,现在信心却...
  • jiangcaiyang123
  • jiangcaiyang123
  • 2015年03月09日 16:44
  • 2780

unity3d中水草海草摇动效果顶点动画材质

因为最近要尝试在untiy3d做写实海底的效果 为了让画面更加逼真,海底植物必不可少 然而海底的海藻海草之类需要加上动画就比较麻烦了 一般的骨骼动画加起来比较麻烦,而且效果比较单调,消耗也很大 更不用...
  • shenmifangke
  • shenmifangke
  • 2017年04月28日 22:42
  • 2498

Qt 3D的研究(十):描边渲染(轮廓渲染)以及Silhouette Shader

之前写了两篇文章,介绍了我在边缘检测上面的研究,实际上,使用GPU对渲染图像进行边缘检测,前提是需要进行两遍渲染,前一遍渲染的结果作为后一遍结果的输入纹理,接着在第二遍渲染的时候,对二维图像做一些图像...
  • jiangcaiyang123
  • jiangcaiyang123
  • 2015年03月19日 13:28
  • 2804

3D设计灯光材质渲染巨匠软件

  • 2011年03月25日 21:29
  • 5.78MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Qt 3D的研究(四):指定渲染的材质以及效果
举报原因:
原因补充:

(最多只允许输入30个字)