Reply To: 作业资料 & 代码勘误

[YunHsiao]

<h2 id=”-1″>作业 1</h2>

• <p>框架提供的 unpack 函数算法实现不准确，在不加 bias 时，会导致严重的 banding（地面一半白一半黑而不是典型的 z-fighting 效果），一定程度上影响作业调试。
  准确算法参考这里：</p>

  <code class="lang-cpp"><span class="hljs-comment">// shaders/shadowShader/shadowFragment.glsl</span>
  vec4 pack (<span class="hljs-type">float</span> depth) {
      <span class="hljs-comment">// 使用rgba 4字节共32位来存储z值,1个字节精度为1/256</span>
      const vec4 bitShift = vec4(<span class="hljs-number">1.0</span>, <span class="hljs-number">255.0</span>, <span class="hljs-number">65025.0</span>, <span class="hljs-number">16581375.0</span>);
      const vec4 bitMask = vec4(<span class="hljs-number">1.0</span>/<span class="hljs-number">255.0</span>, <span class="hljs-number">1.0</span>/<span class="hljs-number">255.0</span>, <span class="hljs-number">1.0</span>/<span class="hljs-number">255.0</span>, <span class="hljs-number">0.0</span>);
      <span class="hljs-comment">// gl_FragCoord:片元的坐标,fract():返回数值的小数部分</span>
      vec4 rgbaDepth = fract(depth * bitShift); <span class="hljs-comment">//计算每个点的z值</span>
      rgbaDepth -= rgbaDepth.gbaa * bitMask; <span class="hljs-comment">// Cut off the value which do not fit in 8 bits</span>
      return rgbaDepth;
  }
  
  <span class="hljs-comment">// shaders/phongShader/phongFragment.glsl</span>
  <span class="hljs-type">float</span> unpack(vec4 rgbaDepth) {
      const vec4 bitShift = vec4(<span class="hljs-number">1.0</span>, <span class="hljs-number">1</span>/<span class="hljs-number">255.0</span>, <span class="hljs-number">1</span>/<span class="hljs-number">65025.0</span>, <span class="hljs-number">1</span>/<span class="hljs-number">16581375.0</span>);
      return dot(rgbaDepth, bitShift);
  }
  

• 课程框架的清屏操作代码不完整，实际上是没有真正每帧清屏的。glClearColor 和 glClearDepth 只是指定清屏颜色，实际的执行还得再加一句 glClear。

  <code class="lang-js"><span class="hljs-comment">// renderers/WebGLRenderer.js</span>
  <span class="hljs-keyword">gl</span>.clearColor(0.0, 0.0, 0.0, 1.0); <span class="hljs-comment">// Clear to black, fully opaque</span>
  <span class="hljs-keyword">gl</span>.clearDepth(1.0); <span class="hljs-comment">// Clear everything</span>
  <span class="hljs-keyword">gl</span>.<span class="hljs-keyword">clear</span>(<span class="hljs-keyword">gl</span>.COLOR_BUFFER_BIT | <span class="hljs-keyword">gl</span>.DEPTH_BUFFER_BIT);
  

  清屏操作在处理平面上的一些 artefact 时可以用上。

• 在课程视频 P3 80:26 时，闫老师的原话是："……也就意味着如果 light 离你比较远，也就是在 shadowmap 上找一个比较小的范围"。这里应该是口误，light 越远应该查询范围越大。这个细节没有在课程任何其他地方提及，除非自己翻一下 N 厂的原论文实现，考虑到不是每个同学都会这么做，所以这个口误影响比较大。