在WebGL片段着色器中繪製網格

Question

我正在從SVG移植到ZGL的ZUI，原因有幾個，我想使用片段着色器渲染網格。

這裏我要爲https://dl.dropboxusercontent.com/u/412963/steel/restel_2.mp4

我想有一個具有薄三角形的基本效果，1px的線每10個單位，和較厚的2px的線每100個單位（在這裏的單位是任意的，但與世界空間一致，而不是屏幕空間）。

這裏是我到目前爲止，沒有二次粗線像視頻（注意，這是從字面上我開的緩衝副本，顯然是不對的）：

頂點着色器：

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的線代替1像素的）：

網格條紋 放大網格不需要較粗的線

所以，我怎麼能在每個距離獲得一致的網格，1px的粗線，所有WebGL片段着色器的內部？

Answer 1

我相信我找到了一個可以接受的解決方案。

使用下面的頂點（在三角形帶繪製）：

[ 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); 
    } 
} 

給出的結果（根據音調和偏移）如：