三.js MeshLine顶点实现答案

【问题标题】：three.js MeshLine vertex implementation三.js MeshLine顶点实现
【发布时间】：2022-01-26 09:58:31
【问题描述】：

我正在为粗线的正确顶点着色器实现而苦苦挣扎。我尝试使用尽管/MeshLine，但它没有正确的斜接，这对我来说是必须的。因此我开始了自己的实现（在https://blog.scottlogic.com/2019/11/18/drawing-lines-with-webgl.html 的帮助下）。

uniform vec2 uScreen;
uniform float uWidth;

attribute vec3 next;
attribute vec3 prev;
attribute float corner;

void main()
{
  vec4 varPos = vec4(position, 1.0);
  vec4 varPrev = vec4(prev, 1.0);
  vec4 varNext = vec4(next, 1.0);
  if (all(equal(varPos.xy, varPrev.xy))) {
    varPrev.xy = varPos.xy + normalize(varPos.xy - varNext.xy);
  }
  if (all(equal(varPos.xy, varNext.xy))) {
    varNext.xy = varPos.xy + normalize(varPos.xy - varPrev.xy);
  }
  vec2 AB = normalize(normalize(varPos.xy - varPrev.xy) * uScreen);
  vec2 BC = normalize(normalize(varNext.xy - varPos.xy) * uScreen);
  vec2 tangent = normalize(AB + BC);
  vec2 miter = vec2(-tangent.y, tangent.x);
  vec2 normalA = vec2(-AB.y, AB.x);
  float miterLength = 1.0 / dot(miter, normalA);
  vec2 vertexPosition = varPos.xy + (corner * miter * uWidth * miterLength) / uScreen.xy;
  vec4 finalPosition = projectionMatrix * viewMatrix * modelMatrix * vec4(vertexPosition, 1.,1.);
  gl_Position =  finalPosition;
}

我用下一个和上一个顶点坐标加倍点来计算斜接。 Corner 对于每个顶点都有 [1, -1, 1, -1,...] 等等（为了将顶点放在线的两侧）。这就是我到目前为止所拥有的并且可以正常工作 - 我得到了适当的斜接，但无论缩放如何，我都希望具有恒定的线宽。目前顶点是在模型坐标中计算的，当我放大时线条会变得更粗。我希望它们具有恒定的宽度 - 无论缩放如何，都假设为 5px。我尝试了类似于尽管/MeshLine 的东西，但没有运气（多边形会变形和扭曲）。

  finalPosition *= projectionMatrix;
  finalPosition.xy = finalPosition.xy / ( vec4( uScreen, 0., 1. ) * projectionMatrix ).xy;

我还尝试先将坐标转换为剪辑空间，然后计算斜接，但这也因斜接向量的标准化而失败，并导致以外的值。我有 OrthographicCamera，我的用例是 2D 空间上有很多多边形。

谁能解释一下如何达到这样的效果？

顺便说一句。我尝试手动将顶点乘以视图矩阵，然后是投影矩阵，最终得到了像 (0.0303837, -0.0236054, -0.5, -164978.) 这样的向量。我不明白，为什么 w 这么大？当自动执行计算时，w 始终为 1（我尝试手动将其设置为其他值）。

【问题讨论】：

标签： three.js glsl webgl vertex-shader

【解决方案1】：

我想出了以下解决方案：

  float sizeAttenuation = 1. / (projectionMatrix[0][0] * 5000.);
  float miterLength = sizeAttenuation / dot(miter, normalA);

但感觉有点hacky和硬编码。我敢打赌，有更好的方法来做到这一点。

【讨论】：