OpenGL ES 学习教程(二) 可编程管线，Shader，一个彩色三角形！

最新推荐文章于 2020-08-11 10:23:31 发布
最新推荐文章于 2020-08-11 10:23:31 发布
阅读量2.6k 收藏 1
点赞数
分类专栏： OpenGL ES 学习教程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huutu/article/details/50111329
版权

如果你还手里有老老版  OpenGL编程指南 ，打开来看一看，在真正开始用 OpenGL绘制图形时，使用的是下面的API：

glBegin(GL_TRIANGLES);							// 绘制三角形

		glVertex3f( 0.0f, 1.0f, 0.0f);					// 上顶点

		glVertex3f(-1.0f,-1.0f, 0.0f);					// 左下

		glVertex3f( 1.0f,-1.0f, 0.0f);					// 右下

glEnd();

这就是已经被抛弃的 固定管线编程 。

http://blog.csdn.net/huutu

先去洗个脑，扔掉你所学过的那些 固定管线 编程 的OpenGL API，留下你脑袋里面的强大的图形数学知识，让我们进入可编程管线。


上图中虚线是 固定管线，黑色粗实线 是 可编程管线 。

可以看到这里 用了 顶点程序、片元程序字样，就是说，这两个过程是可编程的，要我们自己写代码去控制。

顶点程序就是常说的 顶点 Shader ，后缀一般是vsh  ， 片元程序 就是常说的 片段Shader，后缀一般是 fsh 。

转自http://blog.csdn.net/huutu http://www.thisisgame.com.cn

好。

我们编写的 Shader 代码是可以运行在GPU上的，既然是作为一段程序，那么和我们平时写的C++代码一样，想要最后运行起来也要经过一个流程。

1、创建一个项目 glCreateProgram

2、创建一个代码文件 glCreateShader

3、输入代码 glShaderSource

4、编译代码 glCompileShader

5、查看编译是否错误 glGetShaderiv

6、把Shader添加到项目中 glAttachShader

7、链接每个Shader glLinkProgram

8、获取链接状态 glGetProgramiv

9、运行这个项目 glUseProgram


下面是一个Shader 的完整例子，包含上面的流程

#pragma once
#include
   
   
    
    
#include
    
    
     
     
#include
     
     
      
      

class ShaderID
{
public:
	ShaderID()
	{
		m_shaderId = -1;
	}

	int m_shaderId;
};

//封装OpenGL 的glProgram的一些信息;
class GLProgram
{
public:
	int m_programId;
	ShaderID m_vertexShader;
	ShaderID m_fragmentShader;


public:
	GLProgram()
	{
		m_programId = -1;
	}

public:
	//加载shader并且创建glProgram;
	bool createProgram(const char *vertex, const char *fragment)
	{
		bool error = false;
		do
		{
			if (vertex)
			{
				//创建Shader;
				m_vertexShader.m_shaderId = glCreateShader(GL_VERTEX_SHADER);
				//源码;
				glShaderSource(m_vertexShader.m_shaderId, 1, &vertex, 0);
				//编译;
				glCompileShader(m_vertexShader.m_shaderId);

				GLint compileStatus;
				glGetShaderiv(m_vertexShader.m_shaderId, GL_COMPILE_STATUS, &compileStatus);

				error = (compileStatus == GL_FALSE);
				if (error)
				{
					GLchar message[256];
					glGetShaderInfoLog(m_vertexShader.m_shaderId, sizeof(message), 0, message);
					assert((message && 0) != 0);
					break;
				}
			}

			if (fragment)
			{
				//创建Shader;
				m_fragmentShader.m_shaderId = glCreateShader(GL_FRAGMENT_SHADER);
				//源码;
				glShaderSource(m_fragmentShader.m_shaderId, 1, &fragment, 0);
				//编译;
				glCompileShader(m_fragmentShader.m_shaderId);

				GLint compileStatus;
				glGetShaderiv(m_fragmentShader.m_shaderId, GL_COMPILE_STATUS, &compileStatus);

				error = (compileStatus == GL_FALSE);
				if (error)
				{
					GLchar message[256];
					glGetShaderInfoLog(m_fragmentShader.m_shaderId, sizeof(message), 0, message);
					assert((message && 0) != 0);
					break;
				}
			}

			//创建gl程序;
			m_programId = glCreateProgram();

			//代码添加到program中;
			if (m_vertexShader.m_shaderId)
			{
				glAttachShader(m_programId, m_vertexShader.m_shaderId);
			}
			if (m_fragmentShader.m_shaderId)
			{
				glAttachShader(m_programId, m_fragmentShader.m_shaderId);
			}

			//链接;
			glLinkProgram(m_programId);

			GLint linkStatus;
			glGetProgramiv(m_programId, GL_LINK_STATUS, &linkStatus);

			if (linkStatus == GL_FALSE)
			{
				GLchar message[256];
				glGetProgramInfoLog(m_programId, sizeof(message), 0, message);
				assert((message && 0) != 0);
				break;
			}

			//使用program;
			//glUseProgram(m_programId);

		} while (false);
		
		if (error)
		{
			if (m_fragmentShader.m_shaderId)
			{
				glDeleteShader(m_fragmentShader.m_shaderId);
				m_fragmentShader.m_shaderId = 0;
			}

			if (m_vertexShader.m_shaderId)
			{
				glDeleteShader(m_vertexShader.m_shaderId);
				m_vertexShader.m_shaderId = 0;
			}

			if (m_programId)
			{
				glDeleteProgram(m_programId);
				m_programId = 0;
			}
		}

		return true;
	}

	virtual void begin()
	{
		glUseProgram(m_programId);
	}

	virtual void end()
	{
		glUseProgram(0);
	}
};
转自http://blog.csdn.net/huutu http://www.thisisgame.com.cn

一对简单的 Vertex Shader 和 Fragment Shader 可能长的像下面

const char* vertexShader=
		{
			"precision lowp float;"
			"uniform mat4 m_mvp;"
			"attribute vec3 m_position;"
			"attribute vec4 m_color;"

			"varying vec4 m_outColor;"

			"void main()"
			"{"
			"	vec4 pos=vec4(m_position,1);"
			"	gl_Position=m_mvp*pos;"
			"	m_outColor=m_color;"
			"}"
		};

		const char* fragmentShader =
		{
			"precision lowp float;"
			"varying vec4 m_outColor;"

			"void main()"
			"{"
			"	gl_FragColor=m_outColor;"
			"}"
		};

uniform 、attribute 都是变量修饰符。这两个修饰符修饰的变量 ，我们可以在 C++ 代码中获取到然后给他们赋值。

varying 修饰符修饰的变量代表在 Vertex 和 Fragment 之间传递。不能从C++代码中操作。


uniform mat4 m_mvp  

我们从C++中传入 MVP 矩阵

attribute vec3 m_position

我们从C++中传入 顶点位置

attribute vec4 m_color

我们从C++中传入 顶点颜色


好了。下面就让我们来设置这些变量。

这里继承了上面的类

#pragma once
#include"GLProgram.h"

class GLProgram_Color :public GLProgram
{
public:

	//传入shader中的值;
	GLint m_position;
	GLint m_color;
	GLint m_mvp;

public:
	GLProgram_Color()
	{
		m_position = -1;
		m_color = -1;
		m_mvp = -1;
	}

	~GLProgram_Color()
	{}

	GLint getPositionAttribute() const
	{
		return m_position;
	}

	GLint getColorAttribute() const
	{
		return m_color;
	}

	GLint getMVP() const
	{
		return m_mvp;
	}

	//attribute:只能在Vertexshader中使用;
	//Unifrom:在Vertex和Fragment中共享使用,且不能被修改;
	//Varying:从Vertex传递数据到Fragment中使用;
	virtual bool Initialize()
	{
		const char* vertexShader=
		{
			"precision lowp float;"
			"uniform mat4 m_mvp;"
			"attribute vec3 m_position;"
			"attribute vec4 m_color;"

			"varying vec4 m_outColor;"

			"void main()"
			"{"
			"	vec4 pos=vec4(m_position,1);"
			"	gl_Position=m_mvp*pos;"
			"	m_outColor=m_color;"
			"}"
		};

		const char* fragmentShader =
		{
			"precision lowp float;"
			"varying vec4 m_outColor;"

			"void main()"
			"{"
			"	gl_FragColor=m_outColor;"
			"}"
		};

		bool ret = createProgram(vertexShader, fragmentShader);
		if (ret)
		{
			m_position = glGetAttribLocation(m_programId, "m_position");
			m_color = glGetAttribLocation(m_programId, "m_color");
			m_mvp = glGetUniformLocation(m_programId, "m_mvp");
		}
		return ret;
	}

	virtual void begin()
	{
		glUseProgram(m_programId);
		glEnableVertexAttribArray(m_position);
		glEnableVertexAttribArray(m_color);
	}

	virtual void end()
	{
		glDisableVertexAttribArray(m_position);
		glDisableVertexAttribArray(m_color);
		glUseProgram(0);
	}
};

转自http://blog.csdn.net/huutu http://www.thisisgame.com.cn

可以看到，在创建Shader 并且编译成功之后，就可以获取 Shader 中的变量了。

bool ret = createProgram(vertexShader, fragmentShader);
if (ret)
{
    m_position = glGetAttribLocation(m_programId, "m_position");
    m_color = glGetAttribLocation(m_programId, "m_color");
    m_mvp = glGetUniformLocation(m_programId, "m_mvp");
}

然后像下面这样去传入值 到这几个变量 

glUniformMatrix4fv(m_program.m_mvp, 1, false, &proj[0][0]);

glVertexAttribPointer(m_program.m_position, 2, GL_FLOAT, false, sizeof(glm::vec3), pos);
glVertexAttribPointer(m_program.m_color, 4, GL_FLOAT, false, sizeof(glm::vec4), color);

 

这里说下MVP 
 

MVP是一个矩阵，是由 模型矩阵 乘以 视图矩阵 乘以 投影矩阵 得来的，代表对世界坐标系中的一个点执行的一系列 操作。
 

想详细了解的请百度相关资料，关键字：OpenGL 矩阵变换
 

 

好了，我们在教程一的基础上添加了 一些修改，创建了Shader、给Shader设置了值，并且引入了一个三方库 GLM 来进行矩阵的计算。
 

示例程序下载：
 

 

http://pan.baidu.com/s/1eQjW5O2
 

 

 

 

转自http://blog.csdn.net/huutu http://www.thisisgame.com.cn
 
 

 

 


 
 


 

                

        

        

    




    

      

        

            

              
                
                  _Captain
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  3
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
OpenGL（一） OpenGL管线 与 可编程管线流程

				
			

			

				

					阿修罗道
				

				

					03-10
					
					4748
					
				

			

		

		

			
				
由于OpenGL是一个纯渲染核心，要写OpenGL程序，得先搭建一个外壳程序。不同平台下外壳程序的实现各有不同，这个系列的文章都在win32的平台上进行。具体实现，网上能找到很多，所以这不是本文的重点。本篇主要构建探讨 OpenGL管线 本身，具体说来，就是构建可编程管线。

			
		

	



                

              
                



	

		

			

				
					
Unity Shader:Unity网格(1)---顶点，三角形朝向，法线，uv，以及双面渲染三角形

				
			

			

				

					liu_if_else的博客
				

				

					06-15
					
					1万+
					
				

			

		

		

			
				
1，顶点顶点是网格最基础的组成部分，可通过mesh.vertices获取和赋值。mesh.vertices是一个Vector3的数组，每个Vector3代表了此顶点在世界空间中的位置。顶点的位置，数量没有任何限制。几个同样的顶点可以组合成若干不同形状，不同数量的三角形。mesh = new Mesh ();
Vector3[] v3s=new Vector3[4];
v3s [0] = new Ve

			
		

	



                


  
              

                


	

		

			

				
					
现代OpenGL+Qt学习笔记之三：显示一个彩色三角形

				
			

			

				

					ydf
				

				

					09-11
					
					1万+
					
				

			

		

		

			
				
现代OpenGL+Qt学习笔记之三：显示一个彩色三角形主要内容  本文的主要内容是在现代OpenGL+Qt学习笔记之二程序框架的基础上，在OpenGL部件中绘制一个彩色三角形。涉及内容有顶点着色器、片元着色器、着色程序和OpenGL缓存对象等着色器  在程序中，着色器（shader）都表示一小段GLSL程序，它可以说是现代OpenGL区别于传统OpenGL的最主要特性。在现代OpenGL中，通过着色

			
		

	





	

		

			

				
					
OpenGL ES 2.0 -- 制作 3D 彩色旋转三角形 - 顶点着色器  片元着色器 使用详解

				
			

			

				

					369540808
				

				

					12-05
					
					355
					
				

			

		

		

			
				
最近开始关注OpenGL ES 2.0 这是真正意义上的理解的第一个3D程序 , 从零开始学习 .

案例下载地址 :http://download.csdn.net/detail/han1202012/6651095需要SDK-10 版本2.3.3

一. 程序介绍

1. 样例展示

该程序打开之后会出现一个旋转的三角形, 该三角形一直绕x轴z方向旋转 如图 :



...

			
		

	



		

			
		



	

		

			

				
					
android平台下OpenGL ES 3.0绘制彩色三角形

				
			

			

				

					handy周
				

				

					11-05
					
					3166
					
				

			

		

		

			
				
本例基于android平台下OpenGLES3.0绘制圆点、直线和三角形
目录

顶点着色器
片段着色器
颜色配置
基于sdk绘制彩色三角形
基于ndk绘制彩色三角形

顶点着色器
#version 300 es
layout (location = 0) in vec4 vPosition;
layout (location = 1) in vec4 aColor;
out vec4 vColo...

			
		

	





	

		

			

				
					
opengl从固定渲染管线到可编程渲染管线

				
			

			

				

					翻肚鱼儿的博客
				

				

					08-11
					
					790
					
				

			

		

		

			
				
流水线概述

下图描述了一个简化的图形处理流水线，虽然简略但仍然可以展示着色器编程（shader programming）的一些重要概念。



一个固定流水线包括如下功能：

顶点变换（Vertex Transformation）

这里一个顶点是一个信息集合，包括空间中的位置、顶点的颜色、法线、纹理坐标等。这一阶段的输入是独立的顶点信息，固定功能流水线在这一阶段通常进行如下工作：

·顶点位置变换

·为每个顶点计算光照

·纹理坐标的生成与变换

图元组合和光栅化（Primitive Assembly

			
		

	





	

		

			

				
					
【OpenGL ES】绘制彩色三角形

				
			

			

				

					11-07
				

			

		

		

			
				
使用 OpenGL ES 绘制彩色三角形，包含三个彩色点、三角形边、三角形块

			
		

	





	

		

			

				
					
OpenGL:学习现代3D图形编程之一，画一个三角形

				
			

			

				

					03-24
				

			

		

		

			
				
画一个白色的三角形，详见我的博客

			
		

	





	

		

			

				
					
Android OpenGLES2.0等腰直角三角形和彩色的三角形（三）

				
			

			

				

					08-31
				

			

		

		

			
				
主要为大家详细介绍了Android OpenGLES2.0等腰直角三角形和彩色的三角形，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
OpenGL三维彩色平滑着色正方体，自由旋转，由三角形绘制

				
			

			

				

					10-21
				

			

		

		

			
				
OpenGL三维彩色平滑着色正方体，自由旋转，由三角形绘制

			
		

	





	

		

			

				
					
Android平台 OpenGL ES3.0绘制点、线、三角形实现源码

				
			

			

				

					12-10
				

			

		

		

			
				
Android平台，OpenGL ES3.0 点、线、三角形绘制方式源码实现举例。 相关绘制方式文章讲解请参考： https://xiaxl.blog.csdn.net/article/details/8873002

			
		

	





	

		

			

				
					
OpenGL 的空间变换（下）：空间变换

				
			

			

				

					ProgramerOJ
				

				

					04-23
					
					532
					
				

			

		

		

			
				
通过本文的上篇 OpenGL 的空间变换（上）：矩阵在空间几何中的应用  ，我们了解了矩阵的基础概念。并且掌握了矩阵在空间几何中的应用。接下来，我们将结合矩阵来了解 OpenGL 的空间变换。

			
		

	





	

		

			

				
					
opengl从画三角形到画一个立方体（五）

				
			

			

				

					小孔明的专栏
				

				

					10-23
					
					2546
					
				

			

		

		

			
				
前面的章节中，讲到了如何画一个立方体，本节的内容是画多个立方体，并让其旋转起来，不旋转，很难看到立体的效果。 
首先，如何画多个立方体，我们知道MVP矩阵的作用，然后我们只要对local的坐标进行平移，旋转操作就可以画多个立方体了。glm::vec3 cubePosition[] = {
        glm::vec3(0.0f, 0.0f, 0.0f),
        glm::vec3(0

			
		

	





	

		

			

				
					
openGL绘制正方体分别实现简单颜色绘制、纹理绘制、光照绘制

				
			

			

				

					学习使我快乐
				

				

					12-17
					
					1万+
					
				

			

		

		

			
				
使用openGL绘制正方体；
面1：使用简单颜色绘制，颜色为绿色；
面2：使用简单颜色绘制，颜色为渐变色；
面3：绘制一维纹理；
面4：绘制二维纹理；
面5：光照绘制，黄色；
面6：光照绘制，橘色；
绘制效果如下：


需要注意的问题：
1、  在绘制纹理和光照的时候，要正确设置每个面的法线方向；使用函数glNormal3f( )进行设置;
2、  使用光照的时候，如果只是

			
		

	





	

		

			

				
					
使用 Shader 填充颜色

				
			

			

				

					blue的博客
				

				

					06-25
					
					1744
					
				

			

		

		

			
				
Android 不仅可以使用颜色填充图形,还可以使用shader对象指定的渲染效果来填充图形. 
Shader 本身是一个抽象类.提供了如下实现类:
BitmapShader, 使用位图平铺的渲染效果.
ComposeShader, 使用组合渲染效果来填充图片.
LinearGradient, 使用线性渐变来填充图形
RadialGradient, 使用圆形渐变来填充图形
SweepGradient

			
		

	





	

		

			

				
					
【GLSL教程】（一）图形流水线

					
热门推荐

				
			

			

				

					racehorse的专栏
				

				

					07-08
					
					7万+
					
				

			

		

		

			
				
这是一些列来自lighthouse3d的GLSL教程，非常适合入门。我将边学习边翻译该教程的内容，同时记录在这里，方便以后查询。流水线概述下图描述了一个简化的图形处理流水线，虽然简略但仍然可以展示着色器编程（shader programming）的一些重要概念。一个固定流水线包括

			
		

	





	

		

			

				
					
openGl画一个简单的立方体

				
			

			

				

					u010710525的专栏
				

				

					03-18
					
					3328
					
				

			

		

		

			
				
#include 
"stdafx.h"
#include 

voiddisplay()
{
 glClear(GL_COLOR_BUFFER_BIT);
 glMatrixMode(GL_MODELVIEW);
 glLoadIdentity();
 gluLookAt(1.0,1.0,1.0,0.0,0.0,0.0,0.0,1.0,0.0);
 glutWireCube(

			
		

	





	

		

			

				
					
opengl可编程管线 拾取

					
最新发布

				
			

			

				

					01-24
				

			

		

		

			
				
OpenGL可编程管线（OpenGL Programmable Pipeline）是一种用于图形渲染的编程框架，通过编写顶点/片元着色器程序来实现对图形渲染过程的控制。而拾取（Picking）是指通过特定的手段选择或者捕捉到场景中的一个或多个物体。

在OpenGL可编程管线中，实现拾取可以通过以下步骤完成：

1. 为需要拾取的物体设置唯一的标识符（ID）：在渲染场景时，为每个物体分配一个唯一的ID，可以通过OpenGL提供的函数生成一个一致的ID。

2. 渲染场景：正常渲染整个场景，使用顶点和片元着色器进行图形渲染，但是需要使用ID来标识每个物体。

3. 读取选择像素：通过获取鼠标位置对应的像素颜色，获取用户点击（或者鼠标悬停）的位置的像素颜色。

4. 解析像素颜色：将获取到的像素颜色转换为对应的ID。

5. 处理拾取结果：根据解析得到的ID，找到对应的物体，对其进行进一步的处理。

需要注意的是，拾取过程中必须保证物体的ID是唯一的，并且ID应该与物体渲染时使用的颜色没有冲突。此外，为了提高效率，可以利用一些空间划分的方法（如包围盒）来快速排除不需要的物体。

总之，OpenGL可编程管线提供了一种灵活的方式来实现图形渲染的控制，而拾取则是通过对特定物体设置唯一的标识符，并通过像素颜色解析来选择或捕获到场景中的物体。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 3

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值