GPUImage 顶点着色器和片元着色器 详解

原创 2016年08月31日 14:37:14

//顶点着色器
//v.shader

//顶点着色器是一个可编程的处理单元,执行顶点变换、纹理坐标变换、光照、材质等顶点的相关操作,每顶点执行一次。替代了传统渲染管线中顶点变换、光照以及纹理坐标的处理,开发人员可以根据自己的需求自行开发,大大增加了程序的灵活性。
//顶点着色器主要是传入相应的Attribute变量、Uniforms变量、采样器以及临时变量,经过顶点着色器后生成Varying变量。

attribute vec4 position;// 应用程序传入顶点着色器的顶点位置

//vec2                包含了2个浮点数的向量
//vec3                包含了3个浮点数的向量
//vec4                包含了4个浮点数的向量

//(1)attribute变量(属性变量)只能用于顶点着色器中,不能用于片元着色器。一般用该变量来表示一些顶点数据,如:顶点坐标、纹理坐标、颜色等。
//(2)uniforms变量(一致变量)用来将数据值从应用程其序传递到顶点着色器或者片元着色器。该变量有点类似C语言中的常量(const),即该变量的值不能被shader程序修改。一般用该变量表示变换矩阵、光照参数、纹理采样器等。
//(3)varying变量(易变变量)是从顶点着色器传递到片元着色器的数据变量。顶点着色器可以使用易变变量来传递需要插值的颜色、法向量、纹理坐标等任意值。在顶点与片元shader程序间传递数据是很容易的,一般在顶点shader中修改varying变量值,然后片元shader中使用该值,当然,该变量在顶点及片元这两段shader程序中声明必须是一致的。例如:下面代码中应用程序中由顶点着色器传入片元着色器中的coord变量。
//(4)gl_Position为内建变量,表示变换后点的空间位置。顶点着色器从应用程序中获得原始的顶点位置数据,这些原始的顶点数据在顶点着色器中经过平移、旋转、缩放等数学变换后,生成新的顶点位置。新的顶点位置通过在顶点着色器中写入gl_Position传递到渲染管线的后继阶段继续处理。

attribute vec2 textCoord;// 应用程序传入顶点着色器的顶点纹理坐标

varying lowp vec2 coord;// 用于传递给片元着色器的顶点纹理数据


uniform mat4 modelViewProjectionMatrix;// 应用程序传入顶点着色器的矩阵坐标

void main(){
    
    coord = textCoord;
//    gl_Position = position;
    
    gl_Position = modelViewProjectionMatrix * position;
}


//片元着色器
// f.shader

//

varying lowp vec2 coord;// 接收从顶点着色器过来的纹理坐标 

uniform sampler2D colorMap;// 纹理采样器,代表一幅纹理


void main(){
//    gl_FragColor = vec4(0, 1, 0, 1);
    
//    片元的颜色 由“texture2D”函数计算出来,实际上就是按纹理坐标从纹理像素中取样。
    gl_FragColor = texture2D(colorMap, coord.st);// 进行纹理采样
    
    
//    此片元着色器的主要功能为根据接收的记录片元纹理坐标的易变变量中的纹理坐标,调用texture2D内建函数从采样器中进行纹理采样,得到此片元的颜色值。最后,将采样到的颜色值传给gl_FragColor内建变量,完成片元的着色。
    
//    片元着色器是一个处理片元值及其相关联数据的可编程单元,片元着色器可执行纹理的访问、颜色的汇总、雾化等操作,每片元执行一次。片元着色器替代了纹理、颜色求和、雾以及Alpha测试,这一部分是需要开发者自己开发的。
//    
//    (1)varying指的是从顶点着色器传递到片元着色器的数据变量
//    (2)gl_FragColor为内置变量,用来保存片元着色器计算完成的片元颜色值,此颜色值将送入渲染管线的后继阶段进行处理。
    
    //varying在片元着色器里面表示从顶点着色器传过来的输入参数;
    //片元着色器不能直接传如参数,只能接收顶点着色器的输出;
    
}


UnityShader从入门到放弃(二)表面着色器和顶点、片元着色器

1.表面着色器:表面着色器是Unity特有的一种着色器代码类型,表面着色器定义在SubShader中。表面着色器需要编写的代码量很少,Unity会自动处理一些细节。但是表面着色器的本质和顶点、片元着色...
  • IT_break
  • IT_break
  • 2017年09月06日 22:33
  • 298

WebGL学习系列-片元着色器简介

前言到目前为止,我们绘制过点、三角形、矩形等,但使用的都是单色系。之前曾经说过着色器的概念,着色器分为顶点着色器和片元着色器,我们一直在使用顶点着色器,而对片元着色器基本没有提及过,本小节将展开对片元...
  • yanyan19880509
  • yanyan19880509
  • 2017年03月01日 22:18
  • 742

Unity Shader入门精要笔记(六):由一个简单的顶点/片元着色器谈起

本系列文章由Aimar_Johnny编写,欢迎转载,转载请标明出处,谢谢。 http://blog.csdn.net/lzhq1982/article/details/73747162 本系列笔记...
  • lzhq1982
  • lzhq1982
  • 2017年07月02日 16:25
  • 1085

opengl es yuv转rgb 顶点和片元着色器脚本

  • 2017年04月01日 16:36
  • 951B
  • 下载

WebGL-片元着色器 1.Bloom特效实现

编辑文章 第一件事先上demo吧     Bloom特效 demo下载地址 这篇文章耽误了很久。 首先说一下目的。今天是为了实现一个模糊特效的算法,这个算法常用与游戏里面post proces...
  • Chase_freedom
  • Chase_freedom
  • 2017年01月05日 10:06
  • 831

OpenGL ES 2.0——顶点着色器Vertex Shader

在上篇文章中,我们提到了OpenGL ES 2.0中的两个非常重要的着色器,它们分别是顶点着色器和片元着色器,那么我们接下来的学习内容就从这两个着色器开始。在此之前,我们可以先来看一下OpenGL E...
  • linshuhe1
  • linshuhe1
  • 2016年04月06日 18:13
  • 4125

Unity Shader 顶点和片段着色器(Vertex and Fragment Shader)

顶点着色器主要是处理顶点的平移,缩放等位置或者大小相关的函数。 片段着色器主要处理的是像素的颜色。 我们先来看一个简单的例子。 首先我们通过"Create->3D Object->Plane"来创建一...
  • jk823394954
  • jk823394954
  • 2015年10月19日 11:16
  • 3002

Shader(顶点片段着色器)

//第一种 Shader "VRShader/DiffuseShader" { Properties { _Color("MainColor", Color) = (1, 1, 1, 1) ...
  • ff_0528
  • ff_0528
  • 2017年02月08日 22:23
  • 516

DirectX11 顶点着色器示例

顶点着色器示例 下面是一个顶点着色器的示例,它的代码非常简单:cbuffer cbPerObject { float4x4 gWVP; };void VS(float3 iPosL : PO...
  • sinat_24229853
  • sinat_24229853
  • 2015年09月30日 09:03
  • 1121

I 顶点着色器基础

ShaderX 中文简译
  • baesky
  • baesky
  • 2010年07月27日 16:26
  • 1969
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:GPUImage 顶点着色器和片元着色器 详解
举报原因:
原因补充:

(最多只允许输入30个字)