games202作业1

最新推荐文章于 2024-09-10 21:54:45 发布

I'm alive.

最新推荐文章于 2024-09-10 21:54:45 发布

阅读量254

点赞数 3

文章标签：技术美术

本文链接：https://blog.csdn.net/weixin_45415576/article/details/140491660

版权

参考：
添加链接描述
 添加链接描述

一.硬阴影

在这里插入图片描述

//DirectionalLight.js
CalcLightMVP(translate, scale) {
        let lightMVP = mat4.create();
        let modelMatrix = mat4.create();
        let viewMatrix = mat4.create();
        let projectionMatrix = mat4.create();

        // Model transform
        mat4.translate(modelMatrix, modelMatrix, translate);
        mat4.scale(modelMatrix, modelMatrix, scale);

        // View transform
        mat4.lookAt(viewMatrix, this.lightPos, this.focalPoint, this.lightUp);
    
        // Projection transform
        mat4.ortho(projectionMatrix, -150, 150, -150, 150, 0.01, 500);

        mat4.multiply(lightMVP, projectionMatrix, viewMatrix);
        mat4.multiply(lightMVP, lightMVP, modelMatrix);

        return lightMVP;
    }

在这里插入图片描述

//phongFragment.glsl
float useShadowMap(sampler2D shadowMap, vec4 shadowCoord){
  float shadowz = unpack(texture2D(shadowMap, shadowCoord.xy));
  if(shadowz + EPS > shadowCoord.z)
    return 1.0;
  else
    return 0.0;
}

phongFragment.glsl
void main(void) {

  vec3 shadowCoord = vPositionFromLight.xyz / vPositionFromLight.w;
  shadowCoord = (shadowCoord + 1.0) / 2.0;

  float visibility;
  visibility = useShadowMap(uShadowMap, vec4(shadowCoord, 1.0));

  vec3 phongColor = blinnPhong();

  gl_FragColor = vec4(phongColor * visibility, 1.0);
  //gl_FragColor = vec4(phongColor, 1.0);
}

硬阴影效果图

可以看到锯齿明显

二.PCF

//phongFragment.glsl
float PCF(sampler2D shadowMap, vec4 coords, float filterSize) {
  poissonDiskSamples(coords.xy);

  float res = 0.0;
  float filterRange = filterSize / 2048.0;

  for(int i = 0; i < NUM_SAMPLES; i++){
    vec2 sampleuv = coords.xy + poissonDisk[i] * filterRange;
    float shadowz = unpack(texture2D(shadowMap, sampleuv));
    if(shadowz + 5.0 * EPS > coords.z)
      res += 1.0;
  }
  return res / float(NUM_SAMPLES);
}

//phongFragment.glsl
void main(void) {
  float visibility;
  float filterSize = 7.0;

  vec3 shadowCoord = vPositionFromLight.xyz / vPositionFromLight.w;
  shadowCoord = (shadowCoord + 1.0) / 2.0;
  visibility = PCF(uShadowMap, vec4(shadowCoord, 1.0), filterSize);
  vec3 phongColor = blinnPhong();

  gl_FragColor = vec4(phongColor * visibility, 1.0);
  }

j可以看到锯齿好了很多，采样点150，铝箔大小为7

三.PCSS

float findBlocker( sampler2D shadowMap,  vec2 uv, float zReceiver ) {
  poissonDiskSamples(uv);
 
  float res = 0.0;
  float searchSize = 20.0;
  float filterRange = searchSize / 2048.0;
  float blockerDepthSum = 0.0;
  float blockerCount = 0.0;
 
  for (int i = 0; i < BLOCKER_SEARCH_NUM_SAMPLES; i++) {
    vec2 sampleuv = uv + poissonDisk[i] * filterRange;
    float shadowz = unpack(texture2D(shadowMap, sampleuv));
    if(shadowz + EPS <= zReceiver) {
      blockerDepthSum += shadowz;
      blockerCount++;
    }
  }
  if(blockerCount == 0.0) {  // 当没有遮挡时，不需要PCF，核大小为0
    return zReceiver;
  }
	return blockerDepthSum / blockerCount;
}

#define LIGHTWIDTH 10.0
float PCSS(sampler2D shadowMap, vec4 coords) {
 
  // STEP 1: avgblocker depth
  float avgblockerDepth = clamp(findBlocker(shadowMap, coords.xy, coords.z), 1e-7, coords.z);
  // STEP 2: penumbra size
  float penumbraWidth = LIGHTWIDTH * (coords.z - avgblockerDepth) / avgblockerDepth;
  // STEP 3: filtering
  float filterSize = 2.0 * penumbraWidth;
  return PCF(shadowMap, coords, filterSize);
}

void main(void) {
  float visibility;

  vec3 shadowCoord = vPositionFromLight.xyz / vPositionFromLight.w;
  shadowCoord = (shadowCoord + 1.0) / 2.0;
  
  visibility = PCSS(uShadowMap, vec4(shadowCoord, 1.0));

  vec3 phongColor = blinnPhong();

  gl_FragColor = vec4(phongColor * visibility, 1.0);
}