卖主机网站,龙岩市官方网站,网站建设 开发人一丶一一人一一,网站群维护方案1 首先qt 已经封装了opengl#xff0c;那么我们就可以直接用了#xff0c;这里面有三个函数需要继承
virtual void initializeGL() override;
virtual void resizeGL(int w,int h) override;
virtual void paintGL() override;
这三个函数是实现opengl的重要函数。
2 我们…1 首先qt 已经封装了opengl那么我们就可以直接用了这里面有三个函数需要继承
virtual void initializeGL() override;
virtual void resizeGL(int w,int h) override;
virtual void paintGL() override;
这三个函数是实现opengl的重要函数。
2 我们需要写GLSL语句
static const char *vertexShaderSource #version 330\nlayout (location 0) in vec3 aPos;\n // 位置变量的属性位置值为0layout (location 1) in vec3 aColor;\n // 颜色变量的属性位置值为1layout (location 2) in vec2 aTexCoord;\n //纹理变量的属性位置值为2out vec3 ourColor;\n // 为片段着色器指定一个颜色输出out vec2 TexCoord;\n // 为片段着色器指定一个纹理输出 void main(){\ngl_Position vec4(aPos, 1.0);\n //顶点信息为4个值向量 // 注意我们如何把一个vec3作为vec4的构造器的参数ourColor aColor;\n // 输出颜色变量输入颜色TexCoord aTexCoord;\n // 输出纹理变量输入纹理}\n;static const char *fragmentShaderSource #version 330\nout vec4 FragColor;\n //输出颜色in vec3 ourColor;\n //输入的颜色 vertexShaderSource这里面的输入颜色in vec2 TexCoord;\n //输入的纹理 vertexShaderSource这里面的输入纹理uniform sampler2D texture1;\n //得到输入的纹理 void main(){\nFragColor texture(texture1, TexCoord);\n }\n;
上面的语句不懂的可以查询或者私信问我。
3 我们设置点顶点颜色和纹理
float vertices[] { // 位置 // 颜色 //纹理 // positions // colors // texture coords 0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 1.0f, // top right 0.5f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f, // bottom right -0.5f, -0.5f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, // bottom left -0.5f, 0.5f, 0.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f // top left };
这里面位置颜色是什么意思呢举例 图1
第一行位置 0.5f, 0.5f, 0.0f 这是以窗口中心为0,0点所绘制的图形在紫色位置-x -1, x 1, -y -1, y1。点在一半的位置
第一行颜色1.0f, 0.0f, 0.0f 意思是RGB,只显示红色。
第一行纹理1.0f, 1.0f 是什么意思呢看下面图说明 图2 图3 第一个图是位置第二个是纹理纹理坐标和顶点坐标大不相同它的中心点00位于纹理图案的左下角所以它的范围是0-1的这里会取1是因为希望得到完整的图案取0.5也可以最终结果的图案为原图长的一半宽的一半。
到此我们在看图1 里面的紫色的点的纹理是什么呢是不是就是1,1点呢答案是的。
4 我们开始一步步写三角形
class myGlWidget : public QOpenGLWidget,public QOpenGLExtraFunctions
{
public:myGlWidget(QWidget *parent);~myGlWidget();
protected:virtual void initializeGL() override;virtual void resizeGL(int w,int h) override;virtual void paintGL() override;QVectorfloat vertices;QOpenGLShaderProgram* program;QOpenGLBuffer vbo;QOpenGLVertexArrayObject vao;QOpenGLTexture* m_texture;QOpenGLTexture* m_texture2;QOpenGLBuffer m_ebo;
};
void myGlWidget::initializeGL()
{// 为当前环境初始化OpenGL函数initializeOpenGLFunctions();glClearColor(1.0f, 1.0f, 1.0f, 1.0f); //设置背景色为白色//初始化纹理对象m_texture new QOpenGLTexture(QOpenGLTexture::Target2D);m_texture-setData(QImage(:/cube1.png).mirrored()); //加载砖块图片m_texture-setMinMagFilters(QOpenGLTexture::LinearMipMapLinear,QOpenGLTexture::Nearest);//设置缩小和放大的方式,缩小图片采用LinearMipMapLinear线性过滤,并使用多级渐远纹理邻近过滤,放大图片采用:Nearest邻近过滤m_texture-setWrapMode(QOpenGLTexture::DirectionS,QOpenGLTexture::Repeat);m_texture-setWrapMode(QOpenGLTexture::DirectionT,QOpenGLTexture::Repeat);//m_texture-allocateStorage();//创建着色器程序program new QOpenGLShaderProgram;program-addShaderFromSourceCode(QOpenGLShader::Vertex,vertexShaderSource);program-addShaderFromSourceCode(QOpenGLShader::Fragment,fragmentShaderSource);program-link();program-bind();//激活Program对象//初始化VBO,将顶点数据存储到buffer中,等待VAO激活后才能释放
// float vertices[] {
// // 位置 // 颜色 //纹理
// // positions // colors // texture coords
// 0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 1.0f, // top right
// 0.5f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f, // bottom right
// -0.5f, -0.5f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, // bottom left
// -0.5f, 0.5f, 0.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f // top left
// };float vertices[] {// ---- 位置 ---- ---- 颜色 ---- - 纹理坐标 --1.0f, -1.0f, 1.0f, 1.0f, 0.0f, 0.0f, 0.0f, 1.0f, // 右上1.0f, -1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f, // 右下-1.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, // 左下1.0f, 1.0f, 1.0f, 1.0f, 1.0f, 0.0f, 1.0f, 0.0f // 左上};vbo.create();vbo.bind(); //绑定到当前的OpenGL上下文,vbo.allocate(vertices, sizeof(vertices));vbo.setUsagePattern(QOpenGLBuffer::StaticDraw); //设置为一次修改多次使用//初始化VAO,设置顶点数据状态(顶点法线纹理坐标等)vao.create();vao.bind();// void setAttributeBuffer(int location, GLenum type, int offset, int tupleSize, int stride 0);program-setAttributeBuffer(0, GL_FLOAT, 0, 3, 8 * sizeof(float)); //设置aPos顶点属性program-setAttributeBuffer(1, GL_FLOAT, 3 * sizeof(float), 3, 8 * sizeof(float)); //设置aColor顶点颜色program-setAttributeBuffer(2, GL_FLOAT, 6 * sizeof(float), 2, 8 * sizeof(float)); //设置aColor顶点颜色//offset:第一个数据的偏移量//tupleSize:一个数据有多少个元素,比如位置为xyz,颜色为rgb,所以是3//stride:步长,下个数据距离当前数据的之间距离,比如右下位置和左下位置之间间隔了:3个xyz值3个rgb值,所以填入 6 * sizeof(float)program-enableAttributeArray(0); //使能aPos顶点属性program-enableAttributeArray(1); //使能aColor顶点颜色program-enableAttributeArray(2); //使能顶点纹理//解绑所有对象//vao.release();//vbo.release();}
void myGlWidget::resizeGL(int w, int h)
{this-glViewport(0,0,w,h); //定义视口区域
}
void myGlWidget::paintGL()
{this-glClearColor(0.1f,0.5f,0.7f,1.0f); //设置清屏颜色this-glClear(GL_COLOR_BUFFER_BIT);// 渲染Shader//vao.bind();//m_texture-bind();program-setUniformValue(texture1, 0);m_texture-bind(0); //glDrawElements(GL_TRIANGLES, 4, GL_UNSIGNED_INT, 0);glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);//绘制纹理 //绘制3个定点,样式为三角形}
这样我们就绘制了一个带纹理的图形 5 那如果我们想旋转怎么做呢
我们修改下glsl语句这里我们增加一个矩阵
static const char *vertexShaderSource #version 330\nlayout (location 0) in vec3 aPos;\n // 位置变量的属性位置值为0layout (location 1) in vec3 aColor;\n // 颜色变量的属性位置值为1layout (location 2) in vec2 aTexCoord;\n //纹理变量的属性位置值为2out vec3 ourColor;\n // 为片段着色器指定一个颜色输出out vec2 TexCoord;\n // 为片段着色器指定一个纹理输出uniform mat4 transform;\nvoid main(){\ngl_Position transform * vec4(aPos, 1.0);\n //顶点信息为4个值向量 // 注意我们如何把一个vec3作为vec4的构造器的参数ourColor aColor;\n // 输出颜色变量输入颜色TexCoord aTexCoord;\n // 输出纹理变量输入纹理}\n;
我们在修改响应的代码
void myGlWidget::paintGL()
{this-glClearColor(0.1f,0.5f,0.7f,1.0f); //设置清屏颜色this-glClear(GL_COLOR_BUFFER_BIT);QMatrix4x4 matrix;matrix.setToIdentity();matrix.translate(0.4f,0.0,0.0);matrix.rotate(45,0,0,1);matrix.scale(0.5);// 渲染Shader//vao.bind();//m_texture-bind();program-setUniformValue(texture1, 0);m_texture-bind(0);program-setUniformValue(transform, matrix);//glDrawElements(GL_TRIANGLES, 4, GL_UNSIGNED_INT, 0);glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);//绘制纹理 //绘制3个定点,样式为三角形}
这样我们纹理图就旋转了45°。
6 如果我们想绘制一个混合贴图需要怎么做呢
我们继续修改glsl语句
static const char *vertexShaderSource #version 330\nlayout (location 0) in vec3 aPos;\n // 位置变量的属性位置值为0layout (location 1) in vec3 aColor;\n // 颜色变量的属性位置值为1layout (location 2) in vec2 aTexCoord;\n //纹理变量的属性位置值为2out vec3 ourColor;\n // 为片段着色器指定一个颜色输出out vec2 TexCoord;\n // 为片段着色器指定一个纹理输出uniform mat4 transform;\nvoid main(){\ngl_Position transform * vec4(aPos, 1.0);\n //顶点信息为4个值向量 // 注意我们如何把一个vec3作为vec4的构造器的参数ourColor aColor;\n // 输出颜色变量输入颜色TexCoord aTexCoord;\n // 输出纹理变量输入纹理}\n;static const char *fragmentShaderSource #version 330\nout vec4 FragColor;\n //输出颜色in vec3 ourColor;\n //输入的颜色 vertexShaderSource这里面的输入颜色in vec2 TexCoord;\n //输入的纹理 vertexShaderSource这里面的输入纹理uniform sampler2D texture1;\n //得到输入的纹理uniform sampler2D texture2;\n //得到输入的纹理void main(){\nFragColor mix(texture(texture1, TexCoord), texture(texture2, TexCoord), 0.7)* vec4(ourColor, 1.0);\n}\n;
修改对应的代码
static const char *vertexShaderSource #version 330\nlayout (location 0) in vec3 aPos;\n // 位置变量的属性位置值为0layout (location 1) in vec3 aColor;\n // 颜色变量的属性位置值为1layout (location 2) in vec2 aTexCoord;\n //纹理变量的属性位置值为2out vec3 ourColor;\n // 为片段着色器指定一个颜色输出out vec2 TexCoord;\n // 为片段着色器指定一个纹理输出uniform mat4 transform;\nvoid main(){\ngl_Position transform * vec4(aPos, 1.0);\n //顶点信息为4个值向量 // 注意我们如何把一个vec3作为vec4的构造器的参数ourColor aColor;\n // 输出颜色变量输入颜色TexCoord aTexCoord;\n // 输出纹理变量输入纹理}\n;static const char *fragmentShaderSource #version 330\nout vec4 FragColor;\n //输出颜色in vec3 ourColor;\n //输入的颜色 vertexShaderSource这里面的输入颜色in vec2 TexCoord;\n //输入的纹理 vertexShaderSource这里面的输入纹理uniform sampler2D texture1;\n //得到输入的纹理uniform sampler2D texture2;\n //得到输入的纹理void main(){\nFragColor mix(texture(texture1, TexCoord), texture(texture2, TexCoord), 0.7)* vec4(ourColor, 1.0);\n}\n;myGlWidget::myGlWidget(QWidget *parent):QOpenGLWidget(parent), m_ebo(QOpenGLBuffer::IndexBuffer), vbo(QOpenGLBuffer::VertexBuffer)
{}myGlWidget::~myGlWidget()
{}void myGlWidget::resizeGL(int w, int h)
{this-glViewport(0,0,w,h); //定义视口区域
}
void myGlWidget::paintGL()
{this-glClearColor(0.1f,0.5f,0.7f,1.0f); //设置清屏颜色this-glClear(GL_COLOR_BUFFER_BIT);QMatrix4x4 matrix;matrix.setToIdentity();matrix.translate(0.4f,0.0,0.0);matrix.rotate(45,0,0,1);matrix.scale(0.5);// 渲染Shader//vao.bind();//m_texture-bind();program-setUniformValue(texture1, 0);m_texture-bind(0);program-setUniformValue(texture2, 1);m_texture2-bind(1);program-setUniformValue(transform, matrix);//glDrawElements(GL_TRIANGLES, 4, GL_UNSIGNED_INT, 0);glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);//绘制纹理 //绘制3个定点,样式为三角形}void myGlWidget::initializeGL()
{// 为当前环境初始化OpenGL函数initializeOpenGLFunctions();glClearColor(1.0f, 1.0f, 1.0f, 1.0f); //设置背景色为白色//初始化纹理对象m_texture new QOpenGLTexture(QOpenGLTexture::Target2D);m_texture-setData(QImage(:/cube1.png).mirrored()); //加载砖块图片m_texture-setMinMagFilters(QOpenGLTexture::LinearMipMapLinear,QOpenGLTexture::Nearest);//设置缩小和放大的方式,缩小图片采用LinearMipMapLinear线性过滤,并使用多级渐远纹理邻近过滤,放大图片采用:Nearest邻近过滤m_texture-setWrapMode(QOpenGLTexture::DirectionS,QOpenGLTexture::Repeat);m_texture-setWrapMode(QOpenGLTexture::DirectionT,QOpenGLTexture::Repeat);//m_texture-allocateStorage();// //初始化纹理对象m_texture2 new QOpenGLTexture(QOpenGLTexture::Target2D);m_texture2-setData(QImage(:/0.png).mirrored()); //返回图片的镜像,设置为Y轴反向,因为在opengl的Y坐标中,0.0对应的是图片底部m_texture2-setMinMagFilters(QOpenGLTexture::LinearMipMapLinear,QOpenGLTexture::Nearest);//设置缩小和放大的方式,缩小图片采用LinearMipMapLinear线性过滤,并使用多级渐远纹理邻近过滤,放大图片采用:Nearest邻近过滤m_texture2-setWrapMode(QOpenGLTexture::DirectionS,QOpenGLTexture::Repeat);m_texture2-setWrapMode(QOpenGLTexture::DirectionT,QOpenGLTexture::Repeat);//m_texture2-allocateStorage();//创建着色器程序program new QOpenGLShaderProgram;program-addShaderFromSourceCode(QOpenGLShader::Vertex,vertexShaderSource);program-addShaderFromSourceCode(QOpenGLShader::Fragment,fragmentShaderSource);program-link();program-bind();//激活Program对象//初始化VBO,将顶点数据存储到buffer中,等待VAO激活后才能释放
// float vertices[] {
// // 位置 // 颜色 //纹理
// // positions // colors // texture coords
// 0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 1.0f, // top right
// 0.5f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f, // bottom right
// -0.5f, -0.5f, 0.0f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, // bottom left
// -0.5f, 0.5f, 0.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f // top left
// };float vertices[] {// ---- 位置 ---- ---- 颜色 ---- - 纹理坐标 --1.0f, -1.0f, 1.0f, 1.0f, 0.0f, 0.0f, 0.0f, 1.0f, // 右上1.0f, -1.0f, 1.0f, 0.0f, 1.0f, 0.0f, 1.0f, 1.0f, // 右下-1.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, // 左下1.0f, 1.0f, 1.0f, 1.0f, 1.0f, 0.0f, 1.0f, 0.0f // 左上};vbo.create();vbo.bind(); //绑定到当前的OpenGL上下文,vbo.allocate(vertices, sizeof(vertices));vbo.setUsagePattern(QOpenGLBuffer::StaticDraw); //设置为一次修改多次使用//初始化VAO,设置顶点数据状态(顶点法线纹理坐标等)vao.create();vao.bind();// void setAttributeBuffer(int location, GLenum type, int offset, int tupleSize, int stride 0);program-setAttributeBuffer(0, GL_FLOAT, 0, 3, 8 * sizeof(float)); //设置aPos顶点属性program-setAttributeBuffer(1, GL_FLOAT, 3 * sizeof(float), 3, 8 * sizeof(float)); //设置aColor顶点颜色program-setAttributeBuffer(2, GL_FLOAT, 6 * sizeof(float), 2, 8 * sizeof(float)); //设置aColor顶点颜色//offset:第一个数据的偏移量//tupleSize:一个数据有多少个元素,比如位置为xyz,颜色为rgb,所以是3//stride:步长,下个数据距离当前数据的之间距离,比如右下位置和左下位置之间间隔了:3个xyz值3个rgb值,所以填入 6 * sizeof(float)program-enableAttributeArray(0); //使能aPos顶点属性program-enableAttributeArray(1); //使能aColor顶点颜色program-enableAttributeArray(2); //使能aColor顶点颜色//解绑所有对象//vao.release();//vbo.release();}
这样我们就可以看到两个混合的贴图。
