Zooming

[gaitat]

Great article one of the few I have seen that goes into such detail.

One question. How do the lines respond to zooming in and out?
Does their thickness stay constant at the originally defined pixel width?
There are no examples for this.

[vorg]

@gaitat I've just figured it out. You just need to divide line thickness by point's z coordinate in the view (camera) space.

vec4 posViewA = uViewMatrix * uModelMatrix * vec4(aPointA, 1.0);
vec4 posViewB = uViewMatrix * uModelMatrix * vec4(aPointB, 1.0);
vec4 clip0 = uProjectionMatrix * posViewA;
vec4 clip1 = uProjectionMatrix * posViewB;
vec2 screen0 = uResolution * (0.5 * clip0.xy/clip0.w + 0.5);
vec2 screen1 = uResolution * (0.5 * clip1.xy/clip1.w + 0.5);

vec2 xBasis = normalize(screen1 - screen0);
vec2 yBasis = vec2(-xBasis.y, xBasis.x);
float width = uLineWidth * 1.0;        

//here
float widthA = uLineWidth / -posViewA.z;
float widthB = uLineWidth / -posViewB.z;
vec2 pt0 = screen0 + aColorA.a * widthA * (aPosition.x * xBasis + aPosition.y * yBasis);
vec2 pt1 = screen1 + aColorB.a * widthB * (aPosition.x * xBasis + aPosition.y * yBasis);

vec2 pt = mix(pt0, pt1, aPosition.z);
vec4 clip = mix(clip0, clip1, aPosition.z);
vColor = mix(aColorA, aColorB, aPosition.z);

gl_Position = vec4(clip.w * ((2.0 * pt) / uResolution - 1.0), clip.z + uLineZOffset, clip.w); 

if (length(aPointA) == 0.0 || length(aPointB) == 0.0) {
  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
}