Lesson 9: Shader Programming

[missdora]

Programmable Shaders

[missdora]

Vertex and Fragment Shaders:

• Vertex Shaders

  

  The transform triangle is then rasterized(栅格化). Triangle set up sends the data at each pixel inside a triangle to another programmable unit, the fragment shader.

• Fragment Shaders

  

[missdora]

Shader Architecture: 着色器架构（体系？）

• Shader Inputs:

  

  在使用着色器时，你可以定义三种变量，uniform变量、attribute变量与varying变量。对于大多数开发者来说，这三种变量可能比较陌生，你可以按照下述方法来理解这三种变量：

  uniform变量将被传递给顶点着色器与片元着色器，在渲染过程中这些变量值都是一致的，例如我们为一个光源的位置而使用的变量。

  attribute变量值将被设置给每一个个体顶点。attribute变量只用于顶点着色器。例如当每一个顶点颜色都不同时，可以使用attribute变量。在顶点集合中，每一个attribute变量值之间是一对一的关系。

  varying变量是顶点着色器中所定义的变量，该变量值被片元着色器共享。一个典型的用法是在顶点着色器中定义一个需要被利用在光源计算时的变量。

  参考: http://html5online.com.cn/articles/2012090101.html, http://www.cnblogs.com/yiyezhai/archive/2013/01/21/2864358.html

• Shader Material:

  

[missdora]

名词 -- Cel Shader: 是用于模拟卡通及动漫中光照的渲染技术。在传统的diffuse shading中，光照会根据物体的法线在其表面创建渐变；Cel Shading让渐变两极分化，像素只有亮或不亮，不需任何插值。

Demo: http://codepen.io/ytrusty/pen/eNXJBx

[missdora]

名词 -- Fresnel Reflectance：菲涅耳衍射，指的是光波在近场区域的衍射。菲涅耳衍射积分式可以用来计算光波在近场区域的传播

wikipedia 菲涅耳衍射

wikipedia 菲涅耳方程

As the object becomes more reflective in real life, there are less photons left to go off in other directions.

[missdora]

光照模型对比

Blinn-Phong光照模型(修正镜面光)

Blinn-Phong是一个基于Phong模型修正的模型，其公式为：

Ispec = Ks * Il * ( dot(N,H) )^Ns

其中N是入射点的单位法向量，H是光入射方向L和视点方向V的中间向量，通常也称之为半角向量（半角向量被广泛用于各类光照模型，原因不但在于半角向量蕴含的信息价值，也在于半角向量是很简单的计算：H = (L + V) / |L + V| ）。 Il是点光源强度 Ks 为镜面反射系数 Ns是高光指数

[missdora]

from Chapter [Energy Balanced Materials]

Blinn-Phong is not energy balanced

DEMO: http://www.realtimerendering.com/erich/udacity/exercises/unit3_energy_solution.html

[missdora]

from Chapter [Physically Based Materials] 名词 -- Tone Mapping: 色调映射。在有限動態範圍媒介上近似顯示高動態範圍圖像的一項計算機圖形學技術。列印設備、CRT 或者 LCD 顯示器以及投影機等都只有有限的動態範圍。本質上來講，色調映射要解決的問題是進行大幅度的對比度衰減將場景亮度變換到可以顯示的範圍，同時要保持圖像細節與顏色等對於表現原始場景非常重要的明暗資訊。 HDR 有应用到这个技术

Physically Based Reflection：

简称 PBR， 相比于朗伯反射, PBR提供了一个更加逼真的光线物体作用模型。术语physically来源于，PBR考虑了材料的物理属性, 比如能量守恒以及光的散射。

DEMO: http://blog.playcanvas.com/physically-based-rendering-comes-to-webgl/

[missdora]

from Chapter [BRDF]

名词 -- BRDF(The bidirectional reflectance distribution function 双向反射分布函数):

BRDF是比简单的光线追踪过程更接近光学物理原理的模型。对于一个表面，它用来定义给定入射方向上的辐射照度（irradiance）如何影响给定出射方向上的辐射率（radiance）。更笼统地说，它描述了入射光线经过某个表面反射后如何在各个出射方向上分布——这可以是从理想镜面反射到漫反射、各向同性（isotropic）或者各向异性（anisotropic）的各种反射。因此相比一般的光线追踪，BRDF涵盖了非常丰富的反射类型，例如各向异性的金属表面、磨砂玻璃等。

再者，BRDF常用于各种全局光照（global illumination）算法（例如path tracing），后者和光线追踪（ray tracing）算法分别是渲染算法中的两个类别。全局光照的特点在于能够捕捉间接光照（indirect illumination），即由非发光表面反射的光线进一步作用于其他表面（例如Cornell Box场景中彩色墙壁反射到白色长方体上的光线），并可以用于模拟焦散（caustic）等光线追踪算法通常很难或者无法实现的效果。这也是“全局”一词的含义——对光线在整个场景的传播都进行考虑，而不只是考虑局部（local）的传播。

实现全局光照和光线追踪都需要使用到最基本的光线投射（ray casting）算法，用来判定某条特定光线与表面的相交。

补充：还有比BRDF更加广义的BSDF（S = Scattering）——它将折射现象也纳入其中，以及进一步的BSSRDF（SS = Scattering-Surface）——它对光线在表面背后介质内部的传播也进行了考虑。

参考：http://www.zhihu.com/question/20286038

[missdora]

from Chapter [BSDF and BSSRDF]

BSDF:

BSSRDF:

参考：光照模型、阴影模型 http://content.gpwiki.org/index.php/D3DBook:Table_Of_Contents

参考：上海交通大学 6-(1)_Advanced Lighting and Shading PPT

[missdora]

from Chapter [Anisotropic Material]

Anisotropic(各异向性) Material VS Isotropic(等向性) Material

[missdora]

Monitor Response and Perception ??

[missdora]

from Chapter [Gamma Correction]

Gamma 校正

开发gamma编码是用来抵消阴极射线管（CRT）显示器的输入和输出特性。电子枪的电流，也就是光的亮度，与输入的正极电压的变化是非线性的。通过gamma压缩来改变输入信号抵消了这个非线性，因此输出图像就能有预期的亮度。

参考： https://www.evernote.com/shard/s75/sh/2ac839f1-d89f-42ad-a5bf-237467d523ae/efe0bd3451f5cf17e31e50f1ae226acc

[missdora]

from Chapter [Texturing and Postprocessing]

Image and Video Post-processing: https://www.evernote.com/shard/s75/sh/2c5bc774-674b-4998-b370-fecf541641ad/1ae5e1eea0209c6facfb1ba90373c681 Demo: shader post-processing http://www.airtightinteractive.com/demos/js/shaders/preview/ 详解：http://www.airtightinteractive.com/2013/02/intro-to-pixel-shaders-in-three-js/

[missdora]

from Problem set [Model Deformation] and [Vertex Normal Creation]

将一个平面通过修改顶点和 shader normal 变成曲面

/* Vertext.glsl */
varying vec3 vNormal;
varying vec3 vViewPosition;

uniform float uSphereRadius2;   // squared

void main() {
 // make a local variable we can modify
   vec3 newPosition = position;
   // set the position to be on a sphere centered at the origin
   newPosition.z = sqrt(uSphereRadius2 -
          newPosition.x * newPosition.x - newPosition.y * newPosition.y);
   // set the normal to be identical (results from it will be normalized later)
   vec3 newNormal = newPosition;
   // Offset the surface so the center stays in view; do after the normal is set.
   newPosition.z -= sqrt(uSphereRadius2);
   gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
   vNormal = normalize( normalMatrix * newNormal );
   vec4 mvPosition = modelViewMatrix * vec4( newPosition, 1.0 );
   vViewPosition = -mvPosition.xyz;

}