美文网首页
(八)顶点着色器

(八)顶点着色器

作者: YongtaoHuang | 来源:发表于2019-10-16 17:34 被阅读0次

OpenGL ES 3.0可编程管线如下图所示。其中阴影部分的顶点着色器和片段着色器是可编程阶段。


可编程管线.png

本章将举几个常用例子,例如:模型视图和投影矩阵变换顶点位置、生成逐顶点漫反射和反射颜色的顶点照明、纹理坐标生成、顶点蒙皮和位移贴图。

顶点着色器概述

顶点着色器.png
顶点着色器的输入包括:
1、属性:用顶点数组提供的逐顶点数据
2、统一变量和统一变量缓冲区:顶点着色器使用的不变数据
3、采样器:代表顶点着色器使用的纹理的特殊统一变量类型
4、着色器程序:顶点着色器程序源代码或者生成的可执行文件
顶点着色器的输出:图元光栅化时,为了生成的片段需要计算这些输出变量。

顶点着色器内建变量

内建变量可以分成
1、特殊变量(顶点着色器的输入输出)
2、统一状态(深度范围)
3、规定最大值(属性数量、顶点着色器输出变量数量和统一变量数量)

内建特殊变量

OpenGL ES 3.0有内建的特殊变量。

gl_VertexID // 顶点的整数索引
gl_InstanceID // 实例化绘图调用中图元的实例编号
gl_Position // 输出顶点位置的裁剪坐标
gl_PointSize // 以像素表示的点精灵尺寸
gl_FrontFacing // 根据顶点着色器生成的位置值和渲染的图元类型生成的

内建统一状态

顶点着色器内可用的唯一内建统一状态是窗口坐标中的深度范围。

struct gl_DepthRangeParameters {
    highp float near; // near Z
    highp float far; // far Z
    highp float diff; // far – near
}
uniform gl_DepthRangeParameters gl_DepthRange;

内建常量

// 指定的顶点属性的最大数量
const mediump int gl_MaxVertexAttribs = 16;
// 可以使用的的vec4统一变量数目的最大数量
const mediump int gl_MaxVertexUniformVectors = 256;
// 输出向量的最大值
const mediump int gl_MaxVertexOutputVectors = 16;
// 可用的纹理单元的最大数量
const mediump int gl_MaxVertexTextureImageUnits = 16;
// 顶点和片段着色器中可用的纹理单元最大数量的总和
const mediump int gl_MaxCombinedTextureImageUnits = 32;

精度限定符

指定精度的关键字是lowp、mediump和highp。

precision highp float;

指定所有float数变量的默认精度为高精度。

顶点着色器中的统一变量限制数量

任何兼容OpenGL ES 3.0实现必须支持的gl_MaxVertexUniformVectors的最小值为256个vec4项目。

统一变量存储用于存储如下变量:
1、用统一变量限定符声明的变量
2、常数变量
3、字面值
4、特定于实现的常量

顶点着色器示例

矩阵变换

下述代码是使用矩阵变换位置的顶点着色器:

#version 300 es
// uniforms used by the vertex shader
uniform mat4 u_mvpMatrix; // matrix to convert position from
// model space to clip space
// attribute inputs to the vertex shader
layout(location = 0) in vec4 a_position; // input position value
layout(location = 1) in vec4 a_color; // input color
// vertex shader output, input to the fragment shader
out vec4 v_color;
void main() {
    v_color = a_color;
    gl_Position = u_mvpMatrix * a_position;
}

上述的统一变量u_mvpMatrix的形式引入了模型-视图-投影(MVP)矩阵的概念。
模型矩阵:将物体坐标变换为世界坐标
视图矩阵:将世界坐标变换为眼睛坐标
投影矩阵:将眼睛坐标变换为裁剪坐标

顶点着色器中的照明

这个小节主要包括直射光和聚光灯两种种照明。

直射光.png 聚光灯.png

生成纹理坐标

球面图纹理坐标生成:

// position is the normalized position coordinate in eye space.
// normal is the normalized normal coordinate in eye space.
// This function returns a vec2 texture coordinate.
vec2 sphere_map ( vec3 position, vec3 normal ) {
    reflection = reflect ( position, normal );
    m = 2.0 * sqrt ( reflection.x * reflection.x + reflection.y * reflection.y + ( reflection.z + 1.0 ) * ( reflection.z + 1.0 ) );
    return vec2(( reflection.x / m + 0.5 ), ( reflection.y / m + 0.5 ) );
}

立方体图纹理坐标生成:

// position is the normalized position coordinate in eye space.
// normal is the normalized normal coordinate in eye space.
// This function returns the reflection vector as a vec3 texture
// coordinate.
vec3 cube_map ( vec3 position, vec3 normal ) {
    return reflect ( position, normal );
}

顶点蒙皮

顶点蒙皮用于平滑多边形之间的连接点,这通过向每个顶点应用具有相应权重的附加变换矩阵来实现。常用于3D游戏中的角色模型。计算公式如下图:

顶点蒙皮计算公式.png

n是用于变换顶点的矩阵数量
P是顶点位置
P'是变换蒙皮后的位置
N是顶点的法线
N'是变换蒙皮后的法线
Mi是每个顶点第i个矩阵相关的矩阵

变换反馈

变换反馈模式允许将顶点着色器的输出捕捉到缓冲区对象中。然后,输出缓冲区可以作为后续绘图调用中顶点数据的来源。这种方法用于再GPU上执行动画而无需任何CPU干预。
要指定变换反馈模式期间捕捉的一组顶点属性,可以使用如下命令:

void glTransformFeedbackVaryings(GLuint program,
    GLsizei count,
    const char** varyings,
    GLenum bufferMode)

顶点纹理

OpenGL ES 3.0支持顶点着色器中的纹理查找操作。
位移贴图技术的典型应用之一就是渲染地形和水面。

将OpenGL ES 1.1顶点管线作为ES 3.0顶点着色器

实现OpenGL ES 1.1顶点管线的如下固定功能:
1、再必要时将法线和位置变换到眼睛,还执行法线的比例调整或者规范化。
2、为8个光源计算顶点照明方程,每个顶点拥有双面照明和彩色材料。
3、换纹理坐标。
4、计算传递给片段着色器的雾化因子。
5、计算逐顶点用户裁剪平面因子。
6、将位置变换到裁剪空间。

小结

本章用几个例子高度概括了顶点着色器融入管线和再定点着色器中执行变换、照明、蒙皮和位移贴图的方法。

相关文章

  • OpenGL ES手册翻译---2.OpenGL ES操作(三)

    2.10 顶点着色器 顶点着色器处理通过DrawArrays和DrawElements指定的顶点。每个被顶点着色器...

  • OpenGL ES -顶点着色器

    顶点着色器输入包括: 着色器程序 - 描述顶点上执行操作的顶点着色器源代码和可执行文件 顶点着色器输入 - 顶点数...

  • WebGL编程指南入门基础篇

    WebGL编程指南入门基础篇 着色器介绍 着色器分为顶点着色器 跟 片元着色器 顶点着色器描述顶点特性,包括位置,...

  • 七:GLSL灰度,翻转,马赛克滤镜

    默认 顶点着色器代码: 片元着色器代码: 灰度滤镜 顶点着色器代码不变,片元着色器代码: 颠倒滤镜 顶点着色器代码...

  • OpenGL ES 着色器语言GLSL

    在OpenGL ES中着色器分为顶点着色器和片元着色器。顶点着色器是针对每个顶点执行一次,用于确定顶点的位置。片元...

  • webgl 着色器

    GUI 渲染能够让我们看到界面,主要是靠着色器进行渲染的.着色器一般分为顶点着色器,片元着色器. 顶点着色器顶点着...

  • OpenGL ES纹理翻转方法

    1.顶点取反1 顶点着色器 片元着色器 2.顶点取反2 顶点着色器 rotateMatrix Z轴旋转矩阵 片元着...

  • OpenGL ES 渲染流程

    OpenGL ES 渲染流程 1、总体流程 2、流程细节 2.1、顶点着色器 顶点着色器的输入着色器程序:描述顶点...

  • QML Book 第九章 着色器渲染 2

    9.5 顶点着色器 顶点着色器可用于操纵着色器效果提供的顶点。在正常情况下,着色效果有 4 个顶点(左上角 top...

  • 视觉学习第二节课

    OpenGL 渲染流程图解析 1:渲染需要确定顶点数据,顶点着色器进行顶点的渲染。有几个顶点顶点着色器执行几次。 ...

网友评论

      本文标题:(八)顶点着色器

      本文链接:https://www.haomeiwen.com/subject/auagpctx.html