Qt OpenGL（05）标准化设备坐标(NDC)

2023-11-09 16:59
文章标签 标准化 qt 坐标 05 设备 opengl ndc

本文主要是介绍Qt OpenGL（05）标准化设备坐标(NDC)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • OpenGL中的坐标简介
  • 标准化设备坐标
    • 标准化设备坐标绘制 x y z 三个轴线
    • 完整代码
      • 顶点着色器
      • 片段着色器
      • Widget.h
      • Widget.cpp
  • 总结

OpenGL中的坐标简介

OpenGL 基于绘制流水线模型，而且绘制流水线的第一个步骤是对顶点进行一 系列的操作, 其中大部分属于几何操作。这些操作可以用一系列坐标变换来表示。

对于基于固定功能绘制流水线和立即绘制模式的 OpenGL 版本，绘制流水线中存在 6 个标架。 其中有些会用于我们的 OpenGL 应用程序代码中，有些则会用于我们编写的着色器中。并不是所有的这 6 个标架对应用程序都是可见的。同一个顶点在不同的标架下会有不同的表示。

这 6 个坐标在绘制流水线中通常按照下面的先后顺序出现：

  1. 对象坐标系或者建模坐标系
  2. 世界坐标系
  3. 眼坐标系或者照相机坐标系
  4. 裁减坐标系
  5. 标准化的设备坐标系
  6. 窗口坐标系或者屏幕坐标系

标准化设备坐标

先了解一下 标准化设备坐标 ：( Normalized Device Coordinates, NDC )

标准化设备坐标是一个 x、y 和 z 值在 -1.0 到 1.0 的一小段空间。任何落在范围外的坐标都会被丢弃/裁剪，不会显示在你的屏幕上。下面你会看到我们定义的在标准化设备坐标中的三角形(忽略z轴)：

在这里插入图片描述

最后通过使用由 glViewport 函数提供的数据，进行视口变换(Viewport Transform)，标准化设备坐标会变换为屏幕空间坐标(Screen-space Coordinates)。

引用：[你好，三角形 - LearnOpenGL CN (learnopengl-cn.github.io)](https://learnopengl-cn.github.io/01 Getting started/04 Hello Triangle/)

标准化设备坐标绘制 x y z 三个轴线

在这里插入图片描述

上面的讲述忽略了 z 轴，下面绘制出 z 轴出来，对 NDC 坐标有个几何上的直观印象。

  1. 准备三个轴线的端点的坐标

    float lines[] = {// x-1.0f, 0.0f, 0.0f,1.0f, 0.0f, 0.0f,// y0.0f, -1.0f, 0.0f,0.0f,  1.0f, 0.0f,// z0.0f,  0.0f, -1.0f,0.0f,  0.0f,  1.0f,
};

    利用 glDrawArrays (GL_LINES,0,2) 绘制

  2. 三个轴的正方形的端点的索引

    因为数据已经存在线段的坐标中，所以可以使用 索引对象 EBO ，保存 x, y, z 轴的正方向端点的索引

    unsigned int end[] = {1,3,5
};

    利用 glDrawArrays (GL_LINES,0,2) 绘制

  3. 绑定显卡缓存数据VBO

        glGenBuffers (1,&VBO);glBindBuffer (GL_ARRAY_BUFFER,VBO);glBufferData (GL_ARRAY_BUFFER,sizeof(lines) + sizeof(end) ,NULL,GL_STATIC_DRAW);glBufferSubData (GL_ARRAY_BUFFER,0,sizeof(lines),lines );

  4. 指定顶点数组对象：Vertex Array Object，VAO

    这个 A A A 我更愿意理解成 a t t r i b u t e attribute attribute 或者 a s s i s t a n t assistant assistant，为 GPU 缓存中的数据分类并记录哪些是位置数据，哪些是颜色数据等。

        glGenVertexArrays (1,&VAO);glBindVertexArray(VAO);glVertexAttribPointer(0,    // vao 索引，对应顶点着色器中的变量的位置 ： “layout (location = 0) in vec3 aPos;”3,    // 变量中元素的个数， 比如 aPos变量 有 3 个数据【x,y,z】组成GL_FLOAT, // 类型GL_FALSE, // 标准化，是否在 [-1,1] 之间3 * sizeof(float),  // 步长，表示下个元组的首元素 和 该元组首元素之间的大小，因为顶点数据中 可能还夹杂颜色、法向量等数据(void*)0 );   // 变量的偏移量，在多个变量混合时指定变量的偏移glEnableVertexAttribArray(0); // 使能 location = 0 位置

  5. 指定元素缓冲对象（ EBO 或者叫 IBO ）

    EBO 理解成 VAO 的成员，让VAO中已经记录成功的变量从新组合或者复用

        glGenBuffers(1, &EBO);glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(end), end, GL_STATIC_DRAW);

  6. 设置着色器程序

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

  7. 渲染过程

        // 绘制 x y zglLineWidth (20.0f);    // 线宽shaderProgram.setUniformValue ("u_color",1.0f, 0.0f, 0.0f, 1.0f); // 红色glDrawArrays (GL_LINES,0,2); // 画 x 轴shaderProgram.setUniformValue ("u_color",0.0f, 1.0f, 0.0f, 1.0f); // 绿色glDrawArrays (GL_LINES,2,2); // 画 y 轴shaderProgram.setUniformValue ("u_color",0.0f, 0.0f, 1.0f, 1.0f); // 蓝色glDrawArrays (GL_LINES,4,2); // 画 z 轴// 绘制 endglPointSize (30.0f);    // 点大小shaderProgram.setUniformValue ("u_color",1.0f, 0.0f, 0.0f, 1.0f);   // 红色glDrawElements (GL_POINTS,1,GL_UNSIGNED_INT,0); // x 端点shaderProgram.setUniformValue ("u_color",0.0f, 1.0f, 0.0f, 1.0f);   // 绿色glDrawElements (GL_POINTS,1,GL_UNSIGNED_INT, (void *)(sizeof(unsigned int)*1)); // y 端点shaderProgram.setUniformValue ("u_color",0.0f, 0.0f, 1.0f, 1.0f);   // 蓝色glDrawElements (GL_POINTS,1,GL_UNSIGNED_INT, (void *)(sizeof(unsigned int)*2)); // z 端点

完整代码

顶点着色器

因为 z 轴正对屏幕，如果不做旋转，显示不出 z 轴，所以需要一个模型矩阵 model 变量

#version 330 core
layout (location = 0) in vec3 aPos;
uniform mat4 model;void main()
{gl_Position = model * vec4(aPos.x, aPos.y, aPos.z, 1.0);
};

片段着色器

通过 u_color 设置不同的颜色

#version 330 core
uniform vec4 u_color;
void main()
{gl_FragColor = vec4( u_color );
}

Widget.h

#ifndef WIDGET_H
#define WIDGET_H#include <QOpenGLWidget>
#include <QOpenGLFunctions_3_3_Core>
#include <QOpenGLShaderProgram>class Widget : public QOpenGLWidget,QOpenGLFunctions_3_3_Core
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);~Widget();// QOpenGLWidget interface
protected:virtual void initializeGL() override;virtual void paintGL() override;virtual void resizeGL(int w, int h) override;private:unsigned int VAO, VBO, EBO;QOpenGLShaderProgram shaderProgram;int min,max;double ratio;
};
#endif // WIDGET_H

Widget.cpp

#include "Widget.h"
#include <QApplication>
#include <QEvent>
#include <QThread>#define qRandom   QRandomGenerator::global ()
#define qout if( 1 ) qDebug() << __FILE__ << __LINE__ << ": "float lines[] = {// x-1.0f, 0.0f, 0.0f,1.0f, 0.0f, 0.0f,// y0.0f, -1.0f, 0.0f,0.0f,  1.0f, 0.0f,// z0.0f,  0.0f, -1.0f,0.0f,  0.0f,  1.0f,
};unsigned int end[] = {1,3,5
};
//float end[] = {
//    // x
//    1.0f,  0.0f, 0.0f,
//    // y
//    0.0f,  1.0f, 0.0f,
//    // z
//    0.0f,  0.0f, 1.0f,
//};Widget::Widget(QWidget *parent): QOpenGLWidget(parent)
{setWindowTitle ("07_xyz");resize (200,200);ratio = qApp->devicePixelRatio ();}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(lines) ,NULL,GL_STATIC_DRAW);glBufferSubData (GL_ARRAY_BUFFER,0,sizeof(lines),lines );QString filename = ":/shader";shaderProgram.addShaderFromSourceFile (QOpenGLShader::Vertex,   filename+".vert");shaderProgram.addShaderFromSourceFile (QOpenGLShader::Fragment, filename+".frag");shaderProgram.link ();glGenVertexArrays (1,&VAO);glBindVertexArray(VAO);glVertexAttribPointer(0,    // vao 索引，对应顶点着色器中的变量的位置 ： “layout (location = 0) in vec3 aPos;”3,    // 变量中元素的个数， 比如 aPos变量 有 3 个数据【x,y,z】组成GL_FLOAT, // 类型GL_FALSE, // 标准化，是否在 [-1,1] 之间3 * sizeof(float),  // 步长，表示下个元组的首元素 和 该元组首元素之间的大小，因为顶点数据中 可能还夹杂颜色、法向量等数据(void*)0 );   // 变量的偏移量，在多个变量混合时指定变量的偏移glEnableVertexAttribArray(0); // 使用 location = 0 的索引glGenBuffers(1, &EBO);glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(end), end, GL_STATIC_DRAW);glBindBuffer (GL_ARRAY_BUFFER,0);//    glPolygonMode (GL_FRONT_AND_BACK,GL_LINE);// 深度测试glEnable(GL_DEPTH_TEST);
}int rotateAngle = 0;
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);shaderProgram.bind ();glBindVertexArray(VAO);shaderProgram.setUniformValue ("u_color",1.0f, 0.5f, 0.2f, 1.0f);QMatrix4x4 model;model.rotate ( -15, 1.0f, 0.0f, 0.0f);model.rotate ( rotateAngle+15, 0.0f, 1.0f, 0.0f);shaderProgram.setUniformValue ("model",model);// 绘制 x y zglLineWidth (20.0f);    // 线宽glPointSize (30.0f);    // 点大小shaderProgram.setUniformValue ("u_color",1.0f, 0.0f, 0.0f, 1.0f); // 红色glDrawArrays (GL_LINES,0,2); // 画 x 轴glDrawElements (GL_POINTS,1,GL_UNSIGNED_INT,0); // x 端点shaderProgram.setUniformValue ("u_color",0.0f, 1.0f, 0.0f, 1.0f); // 绿色glDrawArrays (GL_LINES,2,2); // 画 y 轴glDrawElements (GL_POINTS,1,GL_UNSIGNED_INT, (void *)(sizeof(unsigned int)*1)); // y 端点shaderProgram.setUniformValue ("u_color",0.0f, 0.0f, 1.0f, 1.0f); // 蓝色glDrawArrays (GL_LINES,4,2); // 画 z 轴glDrawElements (GL_POINTS,1,GL_UNSIGNED_INT, (void *)(sizeof(unsigned int)*2)); // z 端点//    qout << this->windowState ();
//    if( this->windowState () != Qt::WindowMinimized && 1 ){if( 1 ){QThread::currentThread ()->msleep (50);rotateAngle += 1 ;update ();}
}void Widget::resizeGL(int w, int h)
{qout << "resizeGL";min = std::min (w,h) * ratio;max = std::max (w,h) * ratio;
}

总结

在这里插入图片描述

如图所示，在 NDC 坐标中 Z Z Z 的正向是朝屏幕内部的，这结果还真是让人意外。

这篇关于Qt OpenGL（05）标准化设备坐标(NDC)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/377411。

相关文章

VS配置好Qt环境之后但无法打开ui界面的问题解决

VS配置好Qt环境之后但无法打开ui界面的问题解决

《VS配置好Qt环境之后但无法打开ui界面的问题解决》本文主要介绍了VS配置好Qt环境之后但无法打开ui界面的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 目UKeLvb录找到Qt安装目录中designer.UKeLvBexe的路径找到vs中的解决方案资源
阅读更多...
Qt之QMessageBox的具体使用

Qt之QMessageBox的具体使用

《Qt之QMessageBox的具体使用》本文介绍Qt中QMessageBox类的使用,用于弹出提示、警告、错误等模态对话框,具有一定的参考价值,感兴趣的可以了解一下... 目录1.引言2.简单介绍3.常见函数4.按钮类型（QMessage::StandardButton）5.分步骤实现弹窗6.总结1.引言
阅读更多...
Qt中Qfile类的使用

Qt中Qfile类的使用

《Qt中Qfile类的使用》很多应用程序都具备操作文件的能力,包括对文件进行写入和读取,创建和删除文件,本文主要介绍了Qt中Qfile类的使用,具有一定的参考价值,感兴趣的可以了解一下... 目录1.引言2.QFile文件操作3.演示示例3.1实验一3.2实验二【演示 QFile 读写二进制文件的过程】4.
阅读更多...
Android与iOS设备MAC地址生成原理及Java实现详解

Android与iOS设备MAC地址生成原理及Java实现详解

《Android与iOS设备MAC地址生成原理及Java实现详解》在无线网络通信中,MAC（MediaAccessControl）地址是设备的唯一网络标识符,本文主要介绍了Android与iOS设备M... 目录引言1. MAC地址基础1.1 MAC地址的组成1.2 MAC地址的分类2. android与I
阅读更多...
嵌入式Linux之使用设备树驱动GPIO的实现方式

嵌入式Linux之使用设备树驱动GPIO的实现方式

《嵌入式Linux之使用设备树驱动GPIO的实现方式》：本文主要介绍嵌入式Linux之使用设备树驱动GPIO的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录一、设备树配置1.1 添加 pinctrl 节点1.2 添加 LED 设备节点二、编写驱动程序2.1
阅读更多...
Qt实现网络数据解析的方法总结

Qt实现网络数据解析的方法总结

《Qt实现网络数据解析的方法总结》在Qt中解析网络数据通常涉及接收原始字节流,并将其转换为有意义的应用层数据,这篇文章为大家介绍了详细步骤和示例,感兴趣的小伙伴可以了解下... 目录1. 网络数据接收2. 缓冲区管理（处理粘包/拆包）3. 常见数据格式解析3.1 jsON解析3.2 XML解析3.3 自定义
阅读更多...
使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取
阅读更多...
C++如何通过Qt反射机制实现数据类序列化

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类，并对数据类进行存储、打印、调试等操作。由于数据类
阅读更多...
Qt中QGroupBox控件的实现

Qt中QGroupBox控件的实现

《Qt中QGroupBox控件的实现》QGroupBox是Qt框架中一个非常有用的控件,它主要用于组织和管理一组相关的控件,本文主要介绍了Qt中QGroupBox控件的实现,具有一定的参考价值,感兴趣... 目录引言一、基本属性二、常用方法2.1 构造函数 2.2 设置标题2.3 设置复选框模式2.4 是否
阅读更多...
QT进行CSV文件初始化与读写操作

QT进行CSV文件初始化与读写操作

《QT进行CSV文件初始化与读写操作》这篇文章主要为大家详细介绍了在QT环境中如何进行CSV文件的初始化、写入和读取操作,本文为大家整理了相关的操作的多种方法,希望对大家有所帮助... 目录前言一、CSV文件初始化二、CSV写入三、CSV读取四、QT 逐行读取csv文件五、Qt如何将数据保存成CSV文件前言
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2