GAMES202-高质量实时渲染（homework1）

Homework1

shadow Map

首先需要完成MVP矩阵的构造，在这里的mvp用来表示如果一个模型在shadowmap视角下的位置

    CalcLightMVP(translate, scale) {let lightMVP = mat4.create();let modelMatrix = mat4.create();let viewMatrix = mat4.create();let projectionMatrix = mat4.create();// Model transformmat4.translate(modelMatrix,modelMatrix,translate);mat4.scale(modelMatrix,modelMatrix,scale);// View transformmat4.lookAt(viewMatrix, this.lightPos, this.focalPoint, this.lightUp);// Projection transformmat4.ortho(projectionMatrix, -100,100,-100,100,0.1,400); // 实测far要得400可以覆盖到整个平面mat4.multiply(lightMVP, projectionMatrix, viewMatrix);mat4.multiply(lightMVP, lightMVP, modelMatrix);return lightMVP;}

他在顶点着色器中使用，目的是传递每个顶点位置在光源视角下坐标 vPositionFromLight = uLightMVP * vec4(aVertexPosition, 1.0);
在片段着色器中，先实现比较的函数

float useShadowMap(sampler2D shadowMap, vec4 shadowCoord){// shadowmap中存储的深度float lightDepth = unpack(texture2D(shadowMap, shadowCoord.xy));// 着色点深度float shadowDepth = shadowCoord.z;float visibility = 1.0;// 被挡住了if (shadowDepth > lightDepth) {visibility = 0.0;}return visibility;
}

在主函数中，需要先对光源坐标处理一下，因为它是经过透视投影处理后的NDC坐标，而shadowMap上取值其实需要的是UV坐标（0，1）之间，所以需要先转到[0,1]之间
⚠️：透视除法在透视投影时才需要，我看别的博客都写了，其实是不需要的

  float visibility = 1.0;// 透视投影时才需要// vec3 shadowCoord = vPositionFromLight.xyz / vPositionFromLight.w;vec3 shadowCoord = (vPositionFromLight.xyz+1.0)/2.0;visibility = useShadowMap(uShadowMap, vec4(shadowCoord, 1.0));

请添加图片描述
居然没出现自阴影问题，我们手动创建一个，首先光源位置修改在engine.js中lightPos

	// Add lights// light - is open shadow map == truelet lightPos = [0, 90, 80];let focalPoint = [0, 0, 0];let lightUp = [0, 1, 0]const directionLight = new DirectionalLight(5000, [1, 1, 1], lightPos, focalPoint, lightUp, true, renderer.gl);renderer.addLight(directionLight);

把光源变斜一点，就会发现场景从远到近逐渐出现自阴影现象
y = 40
请添加图片描述
y=30
y=20

y=10这时候整个地板都出错了

加一个自偏移，就解决了

  if (shadowDepth  > lightDepth + 0.01) {visibility = 0.0;}

请添加图片描述
下面是偏移量改为0.05的效果，效果就太差了，偏移量应该根据光照的角度动态调整

走样的情况，下面就用PCF来解决～
请添加图片描述

PCF(Percentage Closer Filter)

简单理解就是不只判断shadowmap的一个位置，而是一圈位置的平均。
作业中提供了两种采样，它的作用就是减少计算量，没必要真的一个一个便利来取均值，偏移记录在了vec2 poissonDisk[NUM_SAMPLES];
下面是我的实现

float PCF(sampler2D shadowMap, vec4 coords) {poissonDiskSamples(coords.xy);// 采样数float numSamples = 0.0;// 没有遮挡的采样数float numUnBlock = 0.0;// 过滤核大小float filterSize = 5.0;float mapSize = 2048.0;// 过滤核范围float filterRange = filterSize / mapSize;for(int i = 0;i<NUM_SAMPLES;i++){vec2 samplexCoor = coords.xy + poissonDisk[i] * filterRange;// 采样时可能会越界if(samplexCoor.x > 0.0 && samplexCoor.x < 1.0 && samplexCoor.y > 0.0 && samplexCoor.y < 1.0) {numSamples++;if(useShadowMap(shadowMap,vec4(samplexCoor,coords.z,1.0)) == 1.0) {numUnBlock++;}}}return numUnBlock/numSamples;
}

锯齿位置的变化（过滤核大小为5）
请添加图片描述
当改为20时

改为100时，出现了大量噪点

PCSS(Percentage Closer Soft Shadow)

用PCF来做软阴影，一句话来说就是动态修改过滤核的尺寸，达到不同的因子区域不同的软硬程度

第一步需要在一定范围内搜索深度比着色点进的点，从而得到一个平均深度

float findBlocker( sampler2D shadowMap,  vec2 uv, float zReceiver ) {int numSamples = 0;float sumDepth = 0.0;float searchSize = 15.0;float mapSize = 2048.0;float searchRange = searchSize / mapSize;for( int i = 0; i < BLOCKER_SEARCH_NUM_SAMPLES; i ++ ) {vec2 sampleCoor = uv + poissonDisk[i] * searchRange;// 采样时可能会越界if(sampleCoor.x > 0.0 && sampleCoor.x < 1.0 && sampleCoor.y > 0.0 && sampleCoor.y < 1.0) {float depth = unpack(texture2D(shadowMap, sampleCoor));if(depth < zReceiver) {sumDepth += depth;numSamples++;}}}if(numSamples > 0) {return sumDepth / float(numSamples);} else {return zReceiver;}
}

下来就计算半影尺寸并把它作为过滤核尺寸来进行PCF

float PCSS(sampler2D shadowMap, vec4 coords){uniformDiskSamples(coords.xy);// STEP 1: avgblocker depthfloat avgBlockerDepth = findBlocker(shadowMap, coords.xy, coords.z);// STEP 2: penumbra size// 假设光源尺寸为50float Wlight = 50.0;float penumbraSize = (coords.z - avgBlockerDepth) * Wlight / avgBlockerDepth;// STEP 3: filtering// 把半影尺寸当做过滤核大小return PCF(shadowMap, coords,penumbraSize);
}