网站开发合同审核要点,设计吧,天津哪里可以做网站,阿里云的轻量服务器怎么做网站本系列根据国外一个图形小哥的讲解为本#xff0c;整合互联网的一些资料#xff0c;结合自己的一些理解。 CPU vs GPU
CPU支持#xff1a;
快速缓存分支适应性高性能
GPU支持#xff1a;
多个 ALU快速板载内存并行任务的高吞吐量#xff08;在每个片段、顶点上执行着色… 本系列根据国外一个图形小哥的讲解为本整合互联网的一些资料结合自己的一些理解。 CPU vs GPU
CPU支持
快速缓存分支适应性高性能
GPU支持
多个 ALU快速板载内存并行任务的高吞吐量在每个片段、顶点上执行着色器程序
CPU 是更复杂的计算单元因为它具有大量指令来支持各种功能。而GPU以SIMD方式工作单指令多数据它擅长使用数千个核心以并行方式处理大量数据。综上所述CPU 非常适合任务并行性GPU 非常适合数据并行。
渲染管线比较 左侧的固定管线提供了固定的渲染管道光栅化后有固定的方式处理顶点和片段。而可编程管道使我们能够灵活地控制顶点和片段处理器。
顶点处理器的输入/输出
作为输入数据每个顶点中存储有颜色、法线、位置、纹理坐标和其他数据。
纹理数据是着色器变量通常尺寸较大且速度较慢。
模型视图矩阵、材质和光照都是uniform变量这些由所有顶点共享。
片段处理器的输入/输出
大多数输入数据来自顶点处理器。
例如当我们想要使用 Gouraud 着色渲染场景时我们应该在顶点着色器中为每个片段插入颜色因子。然后在片段着色器中我们只需将计算出的颜色分配给每个片段。
着色器如何通信
uniform参数在整个执行过程中设置。attribute参数为每个顶点设置。varying参数从顶点着色器传递到片段着色器例如逆转换法线。对于不同的参数两个处理器中使用相同的变量名称。 如何编写着色器
在现代openGL中我们应该在着色器程序中编写光照处理逻辑。与简单着色方法相关有两种着色方式
逐顶点着色gouraud 着色
通过这种方式我们计算顶点着色器内部的照明然后将varying参数传递给片段着色器。
逐片段着色phong 着色
在片段着色中对每个顶点的法线进行插值然后通过将发现作为varying参数在片段着色器中计算照明。
归一化
照明计算可以使用法线向量和光方向向量的点积来计算。
我们可以采用单位向量来简化计算因为两个向量归一化后点积的结果等于余弦项。
由于经过各种变换向量的长度并不总是相同。所以在这种情况下我们需要不断地对向量进行归一化。 在右侧图像中解释了如何获取三角形的法向量。
假设我们知道组成三角形的三个点我们可以通过点相减得到三角形边的两个向量。然后如果我们对顺时针方向的两个边向量进行叉积我们可以得到一个与三角形表面正交的向量。经过归一化最终我们得到了三角形的法向量。
2. 指定光源静态
对于每个光源我们可以设置一个RGBA。
vec4 diffuse0 vec4(1.0, 0.0, 0.0, 1.0);
vec4 ambient0 vec4(1.0, 0.0, 0.0, 1.0);
vec4 specular0 vec4(1.0, 0.0, 0.0, 1.0);
vec4 light_pos vec4(1.0, 2.0, 3.0, 1.0);局部 BRDF 照明模型遵循此方程。
根据光源的类型我们需要不同地计算照度。
3. 移动光源
光源是其位置或方向受模型视图矩阵影响的几何对象。
如果我们将灯安装在汽车上光源就会随着汽车移动。 需要更新位置
4. 材质属性
根据材质属性相同的照明可以以不同的方式表示。
5. 背面可见性
大多数情况下物体是不透明的无法看到物体的背面。
但是如果一个物体具有像镜子一样的透明面则背面的法线向量将变得与正面的方向相似。也就是说它是可见的。
我们也可以在着色器中处理这个问题。
Shader程序示例Gouraud着色
顶点着色器
in vec4 vPosition;
in vec3 vNormal;
//using vPosition vNormal attribute, we calculate this
out vec4 color; // vertex shade// light and material properties
uniform vec4 ambientProduct, diffuseProduct, specularProduct
uniform mat4 modelView
uniform mat4 projection;
uniform vec4 lightPos;
uniform float shininess;void main()
{// Transform vertex position into eye coordinates.vec3 pos (modelView * vPosition).xyz; // swizzling component;vec3 L normalize(lightPos.xyz - pos);vec3 E normalize(-pos);vec3 H normalize(LE);// Transform vertex normal into eye coordinatesvec3 N normalize(ModelView * vec4(vNormal, 0.0).xyz);// compute terms in illumination equation.// assume no atteunationfloat kd max(dot(N,L), 0.0);vec4 diffuse kd * diffuseProduct;float ks pow(max(dot(N,H),0.0), shininess); // simplified phong modelvec4 specular ks * specularProduct;if(dot(L,N) 0.0) specular vec4(0.0,0.0,0.0, 1.0);// gl_Position is built-in uniform variablegl_Position projection * modelView * vPosition;// output.color ambientProduct diffuse specular;color.a 1.0;}片段着色器
in vec4 color;void main()
{gl_FragColor color;
}着色器中的纹理映射
应用纹理的三个基本步骤
在应用程序中指定纹理
读取或生成图像例如读取png文件自己生成深度图将其分配给纹理此处应用最近邻/线性插值/MipMap 算法启用纹理
给顶点指定纹理坐标 指定纹理参数包裹wrapping、过滤filtering
纹理如何映射到对象
在 UV 坐标中每个颜色信息都是针对每个位置定义的。
根据我们设置的纹理坐标映射到相应的UV坐标并得到它的颜色。
