WebGL 3D 透视.pdfVIP

WebGL 3D 透视 WebGL 3D 透视 在上⼀篇⽂章中，我们就学习过如何做三维，但三维没有任何透视。它是利⽤⼀个 谓的“正交”的观点，它固然有其⽤途，但这通常不是⼈们说 “3D” 时他们想要的。 相反，我们需要补充透视。只不过什么是透视？它基本上是⼀种事物越远显得更⼩的 特征。 看上⾯的例⼦，我们看到越远的东西被画得越⼩。鉴于我们⽬前样品的⼀个让较远的 物体显得更⼩简单的⽅法就是将 clipspace X 和 Y 除以 Z 。 可以这样想：如果你有⼀条从 （10 ，15 ）到 (20 ,15) 的线段，10个单位长。在我们⽬ 前的样本中，它将绘制 10 像素长。但是如果我们除以 Z ，例如例⼦中如果是 Z 是 1 10 / 1 = 10 20 / 1 = 20 abs(10-20) = 10 这将是 10 像素，如果 Z 是 2 ，则有 10 / 2 = 5 20 / 2 = 10 abs(5 - 10) = 5 5 像素长。如果 Z = 3 ，则有 10 / 3 = 3.333 20 / 3 = 6.666 abs(3.333 - 6.666) = 3.333 你可以看到，随着 Z 的增加，随着它变得越来越远，我们最终会把它画得更⼩。如果 我们在 clipspace 中除，我们可能得到更好的结果，因为 Z 将是⼀个较⼩的数字 （-1 到 + 1）。如果在除之前我们加⼀个 fudgeFact r 乘以 Z ，对于⼀个给定的距离我们可 以调整事物多⼩。 让我们尝试⼀下。⾸先让我们在乘以我们的 “fudgefact r” 后改变顶点着⾊器除以 Z 。 script id=2d-vertex-shader type=x-shader/x-vertex ... u iform float u_fudgeFactor; ... void mai () { // Multiply the positio by the matrix . vec4 positio = u_matrix * a_positio ; // Adjust the z to divide by float zToDivideBy = 1.0 + positio .z * u_fudgeFactor; // Divide x a d y by z. gl_Positio = vec4(positio .xy / zToDivideBy, positio .zw); } /script 注意，因为在 clipspace 中 Z 从 -1 到 + 1，我加 1 得到 zToDivideBy 从 0 到 +2 * fudgeFact r 我们也需要更新代码，让我们设置 fudgeFact r 。 ... var fudgeLocatio = gl.getU iformLocatio (program, u_fudgeFact ... var fudgeFactor = 1; ... fu ctio drawSce e() { ... // Set the fudgeFactor gl.u iform1f(fudgeLocatio , fudgeFactor); // Draw the geometry . gl.drawArrays(gl.TRIANGLES, 0, 16 * 6); 下⾯是结果。 如果没有明确的把 “fudgefact r” 从 1 变化到 0 来看事物看起来像什么样⼦在我们除以 Z 之前。 WebGL 在我们的顶点着⾊器中把 X ，Y ，Z ，W 值分配给 gl_Position 并且⾃动除以 W 。 我们可以证明通过改变着⾊这很容易实现，⽽不是⾃⼰做除法，在 gl_Position.w 中加 zToDivideBy 。 script id=2d-vertex-shader type=x-shader/x-vertex ... u iform float u_fudgeFactor; ... void mai () { // Multiply the positio by the matrix . vec4 positio = u_matrix * a_positio ; // Adjust the z to d