我正在将一个基于SVG的ZUI移植到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):
带有带状效应的网格
![Grid with banding](https://istack.dev59.com/vdQQq.webp)
![Zoomed in grid with unwanted thicker lines](https://istack.dev59.com/RzSsF.webp)