重庆 网站 建设,静乐县城乡建设局网站,住房和建设执业资格注册中心网站,骏域网站建设专家电话1、定义与功能
顶点着色器 顶点着色器#xff0c;是图形渲染管线中的第一个可编程阶段#xff0c;它的主要任务是#xff0c;处理从CPU发送到GPU的顶点数据#xff0c;包括#xff1a;1、顶点位置的变换#xff08;如#xff1a;模型空间 - 世界空间 - 视图控件…1、定义与功能
顶点着色器 顶点着色器是图形渲染管线中的第一个可编程阶段它的主要任务是处理从CPU发送到GPU的顶点数据包括1、顶点位置的变换如模型空间 - 世界空间 - 视图控件 - 投影空间的转换2、光照计算3、传递数据到后续的渲染阶段(传递数据到片元着色器)
片元着色器
片元着色器是图形渲染管线中处理像素级渲染的阶段它接收由顶点着色器插值得到的片元即屏幕上的像素或像素的候选者并生成最终的颜色和其他与像素相关的数据
2、顶点/片元之间的数据传递 1、顶点数据传递顶点着色器处理完顶点数据后会将结果包括位置、颜色、纹理坐标等传递给片元着色器这通常是通过 varying 变量来实现的这些变量在光栅化阶段被线性插值以生成每个片元对应的值2、光照与纹理在某些情况下顶点着色器会执行初步的光照计算并将结果作为输入传递给片元着色器片元着色器则负责执行更详细的光照计算如计算每个像素上的光照强度和颜色同时片元着色器还负责纹理映射即从纹理中读取颜色信息并应用到相应的像素上
3、渲染流程 在渲染流程中顶点着色器首先处理顶点数据然后将处理后的数据传递给光栅化器光栅化器将顶点数据转换为片元数据并将这些数据以及顶点着色器输出的varying变量传递给片元着色器最后片元着色器处理这些数据生成最终的颜色值并将其写入帧缓冲区以供显示
4、关系总结 依赖关系1、片元着色器依赖于顶点着色器的输出数据来进行进一步的计算和处理没有顶点着色器提供的顶点数据、varying变量插值结果片元着色器就无法正常工作。2、顶点着色器和片元着色器共同协作完成了从顶点数据到像素颜色的整个渲染过程。
码子
vertex.glsl 顶点着色器 precision关键字指定后续声明的浮点数类型的精度在图形渲染中特别是使用GPU进行渲染时浮点数的精度可以根据需要进行调整以平衡渲染质量和性能precision lowp float; // 后续所有浮点数的精度为lowp低精度-2^8 - 2^8precision lowp mediump; // 后续所有浮点数的精度为mediump中精度-2^10 - 2^10precision lowp highp; // 后续所有浮点数的精度为highp高精度-2^16 - 2^16
precision lowp float;attribute在顶点着色器中声明变量在较新的GLSL版本中attribute已经被in关键字所取代vec3一个数据类型代表一个三维向量
attribute vec3 position;uniform mat4 modelMatrix; modelMatrix模型矩阵用于将顶点从模型空间 - 世界空间
uniform mat4 viewMatrix; viewMatrix视图矩阵用于将顶点从世界空间 - 观察空间
uniform mat4 projectionMatrix; projectionMatrix投影矩阵用于将顶点从观察空间 - 裁剪空间并最终映射到屏幕坐标上attribute vec2 uv; uv每个顶点的纹理坐标u, v
varying vec2 vUv; vUv传递给片段着色器的纹理坐标// 获取时间
uniform float uTime; uTime一个统一变量用于传递时间信息可以用于动画效果varying float vElevation;void main() {将输入的纹理坐标传递给片段着色器vUv uv;用于将顶点的位置从模型空间 - 世界空间vec4 modelPosition modelMatrix*vec4(position, 1.0);顶点着色器处理的每个顶点都有一个位置(position)这个位置是一个三维向量(vec3)包含x、y、z三个坐标// modelPosition.x 1.0;// modelPosition.z 1.0;// modelPosition.z modelPosition.x; 1、通过正弦函数动态地调整顶点的z坐标创建了一种基于时间和顶点位置的波动效果基于顶点x坐标和时间的正弦波值并将其幅度缩放为原始值的5%意味着随着uTime时间的增加顶点的z坐标将根据其在x轴上的位置以正弦波的形式变化。2、sin((modelPosition.x uTime) * 10.0)为什么乘以10呢因为正弦函数sin的周期是2π意味着它完成一个完整的波形从0到1再到0需要2π个单位但是对(modelPosition.x uTime)乘以10之后实际上是在对正弦函数sin的周期进行缩放使得原本需要2π单位才能完成的波形现在只需要(2π / 10) 0.2π单位就能完成一次完整的周期所以乘以10.0意味着波形在相同的空间或时间范围内完成了更多的周期从而增加了波形的频率 modelPosition.z sin((modelPosition.xuTime)*10.0)*0.05;modelPosition.z sin((modelPosition.yuTime)*10.0)*0.05;vElevation modelPosition.z; 将调整后的z值传递给片段着色器计算顶点在裁剪空间中的位置gl_Position projectionMatrix*viewMatrix*modelPosition;
}
