在WebGL片段着色器中绘制网格

sgrove 发表于 Dev

卑鄙的

由于某些原因，我正在将ZUI从SVG移植到WebGL，并且我想使用片段着色器渲染网格。

这是我要使用的基本效果https://dl.dropboxusercontent.com/u/412963/steel/restel_2.mp4

我想有一个三角形，每10个单位有1px的细线，每100个单位有2px的较粗的线（这里的单位是任意的，但与世界空间一致，而不与屏幕空间一致）。

这是我到目前为止的内容，没有视频中的第二粗线（请注意，这实际上是我打开的缓冲区的副本，显然是不对的）：

顶点着色器：

attribute vec3 aVertexPosition;

uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;

varying float vX;
varying float vY;

void main(void) {
  vX = aVertexPosition.x;
  vY = aVertexPosition.y;
  gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
}

片段着色器：

precision mediump float;

uniform vec2 resolution;
uniform float uZoomFactor;

varying float vX;
varying float vY;

void main(void) {
  float distance = gl_FragCoord.z / gl_FragCoord.w;
  float fuzz = 1.0 / distance;

  float minorLineFreq;

  if (distance > 10.0) {
    minorLineFreq = 1.0;
  } else if (distance > 5.0) {
    minorLineFreq = 1.0;
  } else {
    minorLineFreq = 0.10;
  }

  float xd = mod(vX, minorLineFreq) * 88.1;
  float yd = mod(vY, minorLineFreq) * 88.1;

  if (xd < fuzz) {
    gl_FragColor = vec4(0.0,0.0,0.0,1.0);
  } else if (yd < fuzz) {
    gl_FragColor = vec4(0.0,0.0,0.0,1.0);
  } else {
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
  }
}

它会在一定距离处产生大约正确的图像（但请注意在有2px线而不是1px的情况下的镶边效果）：

带状带状网格 网格放大网格，增加不必要的粗线 用不必要的粗线放大网格

那么，如何在WebGL片段着色器内部获得一个一致的网格，该网格在每个距离都具有1px的粗线？

卑鄙的

我相信我已经找到了可以接受的解决方案。

使用以下顶点（绘制为三角形带）：

[ 1.0  1.0  0.0
 -1.0  1.0  0.0
  1.0 -1.0  0.0
 -1.0 -1.0  0.0]

顶点着色器：

attribute vec4 aVertexPosition;

void main(void) {
  gl_Position = aVertexPosition;
}

片段着色器：

precision mediump float;

uniform float vpw; // Width, in pixels
uniform float vph; // Height, in pixels

uniform vec2 offset; // e.g. [-0.023500000000000434 0.9794000000000017], currently the same as the x/y offset in the mvMatrix
uniform vec2 pitch;  // e.g. [50 50]

void main() {
  float lX = gl_FragCoord.x / vpw;
  float lY = gl_FragCoord.y / vph;

  float scaleFactor = 10000.0;

  float offX = (scaleFactor * offset[0]) + gl_FragCoord.x;
  float offY = (scaleFactor * offset[1]) + (1.0 - gl_FragCoord.y);

  if (int(mod(offX, pitch[0])) == 0 ||
      int(mod(offY, pitch[1])) == 0) {
    gl_FragColor = vec4(0.0, 0.0, 0.0, 0.5);
  } else {
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
  }
}