Qt OpenGL（09）在着色器中实现旋转的彩色正方体

已于 2023-12-09 14:50:19 修改
阅读量841 收藏 3
点赞数 1
分类专栏： # Qt OpenGL 文章标签： qt 开发语言 opengl
于 2023-01-12 15:27:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hitzsf/article/details/128660434
版权

文章目录

在着色器中实现旋转的彩色正方体

一直觉得用OpenGL 画一个立方体或者彩色的立方体或者贴图的立方体甚至旋转着的立方体都是一件很容易的事情。具体方法可以参考 [变换 - LearnOpenGL CN (learnopengl-cn.github.io)](https://learnopengl-cn.github.io/01 Getting started/07 Transformations/) 这一章。简单的旋转矩阵就能轻松实现，用Qt的内容替换一下，轻轻松松。所以也没去总结该章笔记。

在《交互式计算机图形学 基于OpenGL着色器的自顶向下方法 第6版_中文版》有个代码案例，是在 GLSL 中实现的旋转，实现的方法挺巧妙，而且代码也有利于 GLSL 的熟悉和学习。

旋转矩阵

这部分内容 就参考 《 LearnOpenGL CN 》中的内容吧。这是旋转的思路。

在3D空间中旋转需要定义一个角 和 一个旋转轴(Rotation Axis)。物体会沿着给定的旋转轴旋转特定角度。

在这里插入图片描述

使用三角函数，给定一个角度，可以把一个向量变换为一个经过旋转的新向量。通常是使用正弦和余弦函数（一般简称sin和cos）各种巧妙的组合得到的。

旋转矩阵在3D空间中每个单位轴都有不同定义，旋转角度用θ表示：
【csdn 不支持 latex 公式，还是截图】

沿x轴旋转：

在这里插入图片描述

沿y轴旋转：

在这里插入图片描述

沿z轴旋转：

在这里插入图片描述

在顶点着色器中实现

顶一个vec3的变量 theta

uniform vec3 theta;  // 传入的是角度

计算余弦和正弦值

vec3 angles = radians(theta);  // 转成弧度
vec3 c = cos(angles);
vec3 s = sin(angles);

定义3个旋转矩阵

    mat4 rx = mat4( 1.0, 0.0,  0.0, 0.0,
                    0.0, c.x, -s.x, 0.0,
                    0.0, s.x,  c.x, 0.0,
                    0.0, 0.0,  0.0, 1.0
                    );
    mat4 ry = mat4( c.y, 0.0,  s.y, 0.0,
                    0.0, 1.0,  0.0, 0.0,
                   -s.y, 0.0,  c.y, 0.0,
                    0.0, 0.0,  0.0, 1.0
                );
    mat4 rz = mat4( c.z, -s.z, 0.0, 0.0,
                    s.z,  c.z, 0.0, 0.0,
                    0.0,  0.0, 1.0, 0.0,
                    0.0,  0.0, 0.0, 1.0
                );
    gl_Position = rx * ry * rz * vPosition;  // 输出顶点位置

最终代码

在这里插入图片描述

gif的问题，色彩过渡不够线性

#include "Widget.h"
#include "qnamespace.h"
#include <QApplication>
#include <QMouseEvent>
#include <QThread>
#include <QVector3D>
#include <vcruntime.h>
#include <vector>

#define qRandom   QRandomGenerator::global ()
#define qout if( 1 ) qDebug() << __FILE__ << __LINE__ << ": "

int rotateAngle = 0;

typedef QVector4D color4;
//typedef QVector3D point3;
typedef QVector4D point4;

const int NumVertices = 36;

point4 points[NumVertices];
point4 colors[NumVertices];

// 中心位于坐标原点，边与坐标轴平行的单位立方体的顶点
point4 vertices_points[8] = {
    { -0.5, -0.5,  0.5, 1.0 },
    { -0.5,  0.5,  0.5, 1.0 },
    {  0.5,  0.5,  0.5, 1.0 },
    {  0.5, -0.5,  0.5, 1.0 },
    { -0.5, -0.5, -0.5, 1.0 },
    { -0.5,  0.5, -0.5, 1.0 },
    {  0.5,  0.5, -0.5, 1.0 },
    {  0.5, -0.5, -0.5, 1.0 },
};

point4 vertex_colors[8] = {
    point4(  0.0,  0.0,  0.0, 1.0),
    point4(  1.0,  0.0,  0.0, 1.0),
    point4(  1.0,  1.0,  0.0, 1.0),
    point4(  0.0,  1.0,  0.0, 1.0),
    point4(  0.0,  0.0,  1.0, 1.0),
    point4(  1.0,  0.0,  1.0, 1.0),
    point4(  1.0,  1.0,  1.0, 1.0),
    point4(  0.0,  1.0,  1.0, 1.0),
};

// 相对于每个坐标轴的旋转角度（°）
enum {Xaxis, Yaxis, Zaxis, NumAxes};
int         Axis  = Zaxis;
//float   Theta[NumAxes] = { 0.0, 0.0, 0.0 };
QVector3D   Theta = { 0.0, 0.0, 0.0 };

//GLuint  theta;  // 顶点着色器中 uniform 变量 theta 的存储位置

//--------------------------------------
// 立方体的每个面生成两个三角形，并且将颜色赋给每个顶点
int Index = 0;
void quad( int a, int b, int c, int d )
{
    colors[Index] = vertex_colors[a]; points[Index] = vertices_points[a]; ++Index;
    colors[Index] = vertex_colors[b]; points[Index] = vertices_points[b]; ++Index;
    colors[Index] = vertex_colors[c]; points[Index] = vertices_points[c]; ++Index;
    colors[Index] = vertex_colors[a]; points[Index] = vertices_points[a]; ++Index;
    colors[Index] = vertex_colors[c]; points[Index] = vertices_points[c]; ++Index;
    colors[Index] = vertex_colors[d]; points[Index] = vertices_points[d]; ++Index;
}
//--------------------------------------
// 生成12个三角形：36个顶点（每个顶点赋一种颜色）
void colorcube(void)
{
    quad(1,0,3,2);
    quad(2,3,7,6);
    quad(3,0,4,7);
    quad(6,5,1,2);
    quad(4,5,6,7);
    quad(5,4,0,1);
}
Widget::Widget(QWidget *parent)
    : QOpenGLWidget(parent)
{
    setWindowTitle ("10_cube");
    resize (200,200);
    ratio = qApp->devicePixelRatio ();

    colorcube();
//    qout << sizeof(vertices);
//    qout << sizeof(point4);
}

Widget::~Widget()
{
    makeCurrent ();
    glDeleteBuffers (1,&VBO);
    glDeleteVertexArrays (1,&VAO);
    doneCurrent ();
}


void Widget::initializeGL()
{
    initializeOpenGLFunctions ();


    const char *version =(const char *) glGetString (GL_VERSION);
    qout << QString(version);

    // ---------------------------------
    glGenBuffers (1,&VBO);
    glBindBuffer (GL_ARRAY_BUFFER,VBO);
    glBufferData (GL_ARRAY_BUFFER,
                  sizeof(points) + sizeof(colors),
                  nullptr,
                  GL_STATIC_DRAW);

    glBufferSubData (GL_ARRAY_BUFFER, 0 ,               sizeof(points) , points );
    glBufferSubData (GL_ARRAY_BUFFER, sizeof(points) ,  sizeof(colors) , colors );

    // ---------------------------------
    glGenVertexArrays (1,&VAO);
    glBindVertexArray(VAO);
    glVertexAttribPointer(0,    // vao 索引，
                          4,    // 变量中元素的个数，
                          GL_FLOAT, // 类型
                          GL_FALSE, // 标准化，
                          4 * sizeof(float),  // 步长，
                          (void*)0 );   // 变量的偏移量
    glEnableVertexAttribArray(0); // 使用 location = 0 的索引

    glVertexAttribPointer(1,    // vao 索引，
                          4,    // 变量中元素的个数，
                          GL_FLOAT, // 类型
                          GL_FALSE, // 标准化
                          4 * sizeof(float),  // 步长
                          (void*)sizeof(points) );   // 变量的偏移量
    glEnableVertexAttribArray(1); // 使用 location = 1 的索引

 	// ---------------------------------

    QString filename = ":/shader";
    shaderProgram.addShaderFromSourceFile (QOpenGLShader::Vertex,   filename+".vert");
    shaderProgram.addShaderFromSourceFile (QOpenGLShader::Fragment, filename+".frag");
    shaderProgram.link ();

    glBindBuffer (GL_ARRAY_BUFFER,0);

    // 控制多边形的正面和背面的绘图模式
//    glPolygonMode (GL_FRONT_AND_BACK,GL_LINE);

    // 深度测试
    glEnable(GL_DEPTH_TEST);

}


void Widget::paintGL()
{
    glClearColor(0.2f, 0.3f, 0.3f, 1.0f);   // 设置背景色
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    glViewport ((max-min)/2 ,0,min,min);

    glBindVertexArray(VAO);
    shaderProgram.bind ();

    shaderProgram.setUniformValue ("theta",Theta);
    qout << Theta;
//    shaderProgram.setUniformValueArray ("theta",Theta,1,3);

    glDrawArrays (GL_TRIANGLES, 0, NumVertices );

    if( 1 ){
        QThread::currentThread ()->msleep (50);
        Theta[Axis] += 3;
        if( Theta[Axis] > 360.0 )
            Theta[Axis] = - 360.0;
        update ();
    }
}

void Widget::resizeGL(int w, int h)
{
    qout << "resizeGL";
    min = std::min (w,h) * ratio;
    max = std::max (w,h) * ratio;
}

// 利用鼠标键切换旋转角度
void Widget::mousePressEvent(QMouseEvent *e)
{
    auto b = e->button ();
    switch (b) {
        case Qt::LeftButton:
            Axis = 0;
//            Theta[1] = 0.0;
//            Theta[2] = 0.0;
            break;
        case Qt::MiddleButton:
            Axis = 1;
//            Theta[0] = 0.0;
//            Theta[2] = 0.0;
            break;
        case Qt::RightButton:
            Axis = 2;
//            Theta[0] = 0.0;
//            Theta[1] = 0.0;
            break;
        default:
            break;
    }
}
hitzsf
关注
专栏目录
Qt OpenGL（二十六）——Qt OpenGL 核心模式-旋转的彩色三角形
ifeng12358的博客
12-06 1061
上篇文章我们把三角形上色成了，彩色的三角形： 离我们想要绘制的图形，旋转的三角形，又近了一步，本篇文章就让这个彩色的三角形旋转起来。不过从上篇开始使用的代码就是Qt封装的类了，不过也是核心模式的，步骤基本上和前几篇的都一致，你可以认为只不过是使用的函数有点不一样。如果我们要让三角形旋转起来，需要插入一个概念：变换，OpenGL中的变换包括：视图、模型、模型视图、投影、视口等。关于这部分的简单说明，大家可以查看冯一川之前的文章：OpenGL（二）——OpenGL基础知识点（一）OpenGL（三）——OpenG
OpenGL 着色器基础 - 旋转平移调试
04-18
本资源是本人相关博客内容的相关代码，包含了全部的VS2015 工程文件、环境配置、OpenGL工具库、源码及注释。博客地址： https://blog.csdn.net/xiongyuanxy/article/details/89356061 因为博客比较长，偏重相机原理介绍，所以特地上传代码给学习OpenGL的同学使用。代码已经编译调试通过。Debug模式和Release模式的依赖库都配置好了，可以作为其他OpenGL开发的起始程序。 操作说明： 程序开始后，可以拖动鼠标左键和右键进行视角旋转。中键负责平移，滚轮负责缩放。 着色器部分，只包含最简单的顶点着色器和片元着色器。 本例中使用OpenGL传统管线渲染了坐标轴和屏幕文字，用于输出参考信息，确认着色器的正确性，方便初学者学习着色器。每行代码都有注释，请认真理解。
【Qt OpenGL教程】04：旋转
热门推荐
cly116的博客
08-02 1万+
这次教程中，我们将在第03课的基础上，教大家如何旋转三角形和四边形。我们将让三角形沿y轴旋转，四边形沿x轴旋转，最终我们能得到一个三角形和四边形自动旋转的场景。
OpenGL着色器透视变换实例-通过旋转平移调试着色器
xiongyuanxy的博客
04-17 1210
OpenGL 着色器新手样例 带透视变换和旋转平移缩放OpenGL着色器样例 - 最简单的顶点着色器 + 片元着色器头文件和宏定义全局变量部分读取着色器从文本中读取着色器代码初始化着色器初始化VBO计算相机位姿创建文本画坐标轴初始化函数渲染函数键盘相应函数鼠标操作main 函数顶点着色器片元着色器如何调试 OpenGL着色器样例 - 最简单的顶点着色器 + 片元着色器 先上结果图： 学习Open...
Qt OpenGL----着色、3D和旋转
mojianc的专栏
05-04 1486
在本文中主要是通过绘制一个三角锥和立方体来介绍openGL中的着色、3D和旋转的应用。废话不多说，直接上代码： 类定义： #ifndef MYGL_H_ #define MYGL_H_ #include #include class MyGLWidget : public QGLWidget { Q_OBJECT public: MyGLWidget(QWidget * p
opengl绘制彩色立方体
09-01
基于opengl绘制一个六个面不同颜色的立方体，并且通过鼠标来控制立方体沿三个坐标轴的旋转。
opengl+qt实现模型旋转平移
最新发布
06-23
opengl+qt实现模型旋转平移opengl+qt实现模型旋转平移opengl+qt实现模型旋转平移opengl+qt实现模型旋转平移opengl+qt实现模型旋转平移opengl+qt实现模型旋转平移opengl+qt实现模型旋转平移opengl+qt实现模型旋转平移...
Qt5+OpenGL 实现彩色正方体显示、缩放、旋转和拖拽平移
weixin_43493507的博客
11-11 5184
随手记录Qt学习开发过程中遇到的问题和解决方法 环境：Qt5.12.9 考虑采用OpenGL固定管线绘制图像效率低下，一直想学习采用OpenGL ES2.0的方式进行图像绘制，网上基本这方面的可参考资料不够丰富， 自己OpenGL的基础又十分欠缺，完全是在一步步自己摸索着学习的。建议跟我一样对OpenGL本身基础就差的同志们，先到https://learnopengl-cn.github.io/这个网站上自学一下，尤其是从“入门-》你好，三角形”这部分开始，讲得真的非常清楚，一定要耐心学习。 不废话了，下面
QT Opengl 图形旋转
04-06
在OpenGL中，可以使用`glRotatef()`函数或更现代的矩阵操作来实现。例如，你可以通过设置旋转角度、旋转轴（X、Y、Z轴）来改变图形的旋转状态。在`paintGL()`中，每次窗口重绘时，旋转角度会增加，从而产生旋转动画...
Qt调用OpenGL API实现彩色旋转立方体
05-09
详见博客：https://blog.csdn.net/caoshangpa/article/details/80258907 源码中包含了glu和glut等库
彩色立方体OpenGL
12-04
#include "StdAfx.h" #include GLfloat step = 0.0;//定义旋转角度 static GLfloat c1[] = { 0.0,0.0,1.0 }, c2[] = { 0.0,1.0,1.0 }, c3[] = { 1.0,1.0,1.0 }, c4[] = { 1.0,0.0,1.0 }, c5[] = { 1.0,0.0,0.0 }, c6[] = { 1.0,1.0,0.0 }, c7[] = { 0.0,1.0,0.0 }, c8[] = { 1.0,1.0,1.0 };//颜色立方体的颜色 void myinit(void); //初始化设置 void myReshape(GLsizei w, GLsizei h); //屏幕大小改变时响应函数 void display(void); //屏幕绘制响应函数 void controlIdleFunc(int button, int state, int x, int y); //鼠标点击响应函数 void DrawColorBox(void); //绘制立方体函数 void myinit(void)
立方体颜色渐变opengl
03-28
使用opengl 实现立方体的动态消隐…………………………
用OPENGL写的彩色立方体
11-18
用OpenGL编写的彩色立方体,c++ and opengl , good example
opengl qt 绘制单个立方体 并旋转
03-28
opengl 在qt 上绘制单个立方体并旋转的例子。
Qt OpenGL实现立方体的纹理贴图和旋转
05-04
Qt中OpenGL实现立方体的纹理贴图和旋转
QT与OpenGL之旋转
Jcy
12-06 4103
这篇文章是来讲述如何在OpenGL中选择图形的，我拿上次写的三角形来实现。 在OpenGL中有专门负责旋转的函数glRotatef(Angle, X Vector, Y Vector, Z Vector)；此函数负责让对象绕着某个轴旋转。 Angle通常是某个变量代表对象转过的角度； X Vector，Y Vector， Z Vector三个参数共同决定旋转轴的方向，（1, 0, 0）表示描
Qt5版NeHe OpenGL教程之三：旋转
草上爬的博客
05-11 2953
这一课会把第二课中的三角形绕Y轴逆时针旋转45°，正方形绕X轴顺时针旋转45°头文件中添加两个变量表示三角形和正方形旋转的角度。private: QOpenGLContext *m_context; GLfloat rtri; // 用于三角形的角度 GLfloat rquad; // 用于正方形的角度在构造函数中赋值Lesson3::Lesson3(QWind...
OpenGL 彩色旋转立方体
weixin_30830327的博客
08-02 654
/* * * 彩色旋转立方体 * 1. 定义六个面，同时定义每个顶点的颜色（与顶点坐标相对应） * 2. 启用 GL_SMOOTH 方式渲染 * * */ #include <stdio.h> #include<GL\glut.h> static float xrot = 0.0; static float yrot = 0.0;...
QT + OpenGl 绘制一个简单的旋转立方体，每一面都设置不同颜色
UP_123321的博客
03-29 1535
这篇文章主要是介绍一些被qt封装之后的函数，相比openGl的原始函数更加简单。要绘制一个立方体首先需要顶点坐标和索引坐标需要着色器管理类需要openGl核心函数在定义好这些变量之后，需要能显示openGL的窗口类 QOpenGLWidget，有三个关键性的函数需要重载。
Qt OpenGL教程：QGLWidget与NeHeWidget实现
- `initializeGL()`：在这个函数中，你可以设置OpenGL的状态，如启用深度测试、着色器、纹理等。这是在窗口首次显示或重新初始化时调用的。 - `paintGL()`：这是绘制OpenGL图形的主要函数。每当窗口需要更新时...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值