IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 开发工具 -> opengl-第四章:glsl入门 -> 正文阅读

[开发工具]opengl-第四章:glsl入门

提示

本次代码可以参考https://github.com/SkadyCat/QKEngine
commit 版本 

在这里插入图片描述

1. 一个简单的引擎框架

目前我们的QKEngine的调用方式如下:

#include <BaseWindow.h>



int main(int argc, char *argv[])
{
	BaseWindow window;
	float*res = new float[3 * 4]{
		  0.5f,  0.5f, 0.0f,  // top right
		  0.5f, -0.5f, 0.0f,  // bottom right
		 -0.5f, -0.5f, 0.0f,  // bottom left
		 -0.5f,  0.5f, 0.0f
	};
	window.addVBO("VBO",3,4,res);
	window.addVAO("VAO", [] {
		//glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);//操作状态
	});
	window.compileShader("vertex", "fragment");
	window.run();
	window.shutDown();
	return 0;
}

数据,VAOBuffer和VBOBuffer,以及shader
我们将shader进行了文本化,你可以在这个夹里面编写你的sahder,

在这里插入图片描述
然后直接通过

window.compileShader(string vertexShader,string fragmentShader);
//编译你的shader

一个示例程序

我编写了一个shader文本如下图所示

在这里插入图片描述
shader的开发工具主要采用vscode
在这里插入图片描述
然后我们就可以直接在引擎里面调用这个shader程序了
在这里插入图片描述
直接compile这个文件名即可

在comile的函数里面,我们主要通过读取通过bat程序拷贝到sln统计目录下的Resources文件夹,获取里面的shader代码,之后直接直接获取里面的文本数据,实现了隔离。
在这里插入图片描述

2. glsl的基本格式

2.1 main函数

显然的,shader程序必然存在调用入口,其入口就是main函数
#version 330 core
layout (location = 0) in vec3 aPos;

void main()
{
    gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);
}

location 显然就是我们对数据的属性的描述
这个在第二章有介绍到,我们将位置属性x,y,z定义为[位置为0]的属性。

2.2 内置变量(状态)

将opengl当做是一个大型状态机,那么我们就能对其中的状态进行修饰,在后面
会有单独的一章用于总结各种内置状态

显然的,本章主要关注的一个内置状态就是gl_Position,当我们设定这个状态时
opengl自动的去操作这个gl_Position的数据,而gl_Position的数据则通过
//in关键字
layout (location = 0) in vec3 aPos;

在这里,buffer in vertexBuffer
我们将显存中的buffer输入到顶点的buffer里面

显然的location = 0 很容易就想到是我们定义的第一个顶点属性

2.3 gl_Position状态的设定

我们可以修改gl_Position的状态
#version 330 core
layout (location = 0) in vec3 aPos;

void main()
{
    gl_Position = vec4(aPos.x, aPos.y, 0.0, 1.0);
}

如果我们将vec4改成vec2,就会出现
在这里插入图片描述
这是因为gl_Position的构造函数是vec4类型的,所以就会出现类型不匹配

2.4从vertexShader传递数据给fragmentShader

在顶点着色器定义一个out类型变量vertexColor

#version 330 core
layout (location = 0) in vec3 aPos;
out vec4 vertexColor;
void main()
{
    gl_Position = vec4(aPos.x, aPos.y,0.0,1.0);
    vertexColor = vec4(0.4,0.6,0.3,1.0);
}

在片元着色器定义一个in类型变量vertexColor

#version 330 core
out vec4 FragColor;
in vec4 vertexColor;
void main()
{
    FragColor = vertexColor;
} 

运行:
在这里插入图片描述

  开发工具 最新文章
Postman接口测试之Mock快速入门
ASCII码空格替换查表_最全ASCII码对照表0-2
如何使用 ssh 建立 socks 代理
Typora配合PicGo阿里云图床配置
SoapUI、Jmeter、Postman三种接口测试工具的
github用相对路径显示图片_GitHub 中 readm
Windows编译g2o及其g2o viewer
解决jupyter notebook无法连接/ jupyter连接
Git恢复到之前版本
VScode常用快捷键
上一篇文章      下一篇文章      查看所有文章
加:2021-07-14 23:09:10  更:2021-07-14 23:09:41 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/3 0:44:22-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码