Fix aligned projections

Author: dy

fill-vert.glsl

@@ -14,10 +14,10 @@ const float MAX_LINES = 256.;
 void main() {
 	float depth = (MAX_LINES - 4. - id) / (MAX_LINES);
 
-	vec2 position = (position + translate) * scale
-       + (positionFract + translateFract) * scale
-       + (position + translate) * scaleFract
-       + (positionFract + translateFract) * scaleFract;
+	vec2 position = position * scale
+       + positionFract * scale
+       + position * scaleFract + translate
+       + positionFract * scaleFract + translateFract;
 
 	gl_Position = vec4(position * 2.0 - 1.0, depth, 1);
 

index.js

@@ -426,6 +426,7 @@ function createLine (regl, options) {
 				options = extend({}, defaults, options)
 			}
 
+
 			//calculate state values
 			updateDiff(state, options, [{
 				thickness: parseFloat,
@@ -442,6 +443,7 @@ function createLine (regl, options) {
 					let count = Math.floor(positions.length / 2)
 					let bounds = getBounds(positions, 2)
 
+					// FIXME: make it dynamic
 					if (!state.range && !options.range) {
 						options.range = bounds
 					}
@@ -579,10 +581,20 @@ function createLine (regl, options) {
 					let bounds = state.bounds
 					if (!range) range = bounds
 
-					let nrange = normalize(range.slice(), 2, bounds)
+					let boundsW = bounds[2] - bounds[0],
+						boundsH = bounds[3] - bounds[1]
+
+					let rangeW = range[2] - range[0],
+						rangeH = range[3] - range[1]
 
-					state.scale = [Math.min(1 / (nrange[2] - nrange[0]),  MAX_SCALE), Math.min(1 / (nrange[3] - nrange[1]),  MAX_SCALE)]
-					state.translate = [-nrange[0], -nrange[1]]
+					state.scale = [
+						boundsW / rangeW,
+						boundsH / rangeH
+					]
+					state.translate = [
+						-range[0] / rangeW + bounds[0] / rangeW || 0,
+						-range[1] / rangeH + bounds[1] / rangeH || 0
+					]
 
 					state.scaleFract = fract32(state.scale)
 					state.translateFract = fract32(state.translate)

miter-vert.glsl

@@ -137,17 +137,17 @@ void main() {
 		aBotCoord += normalize(startBotJoin * normalWidth) * abClipping;
 	}
 
-	vec2 aTopPosition = (aTopCoord + translate) * scale;
-	vec2 aBotPosition = (aBotCoord + translate) * scale;
+	vec2 aTopPosition = (aTopCoord) * scale + translate;
+	vec2 aBotPosition = (aBotCoord) * scale + translate;
 
-	vec2 bTopPosition = (bTopCoord + translate) * scale;
-	vec2 bBotPosition = (bBotCoord + translate) * scale;
+	vec2 bTopPosition = (bTopCoord) * scale + translate;
+	vec2 bBotPosition = (bBotCoord) * scale + translate;
 
 	//position is normalized 0..1 coord on the screen
 	vec2 position = (aTopPosition * lineTop + aBotPosition * lineBot) * lineStart + (bTopPosition * lineTop + bBotPosition * lineBot) * lineEnd;
 
-	startCoord = (aCoord + translate) * scaleRatio + viewport.xy;
-	endCoord = (bCoord + translate) * scaleRatio + viewport.xy;
+	startCoord = aCoord * scaleRatio + translate * viewport.zw + viewport.xy;
+	endCoord = bCoord * scaleRatio + translate * viewport.zw + viewport.xy;
 
 	gl_Position = vec4(position  * 2.0 - 1.0, depth, 1);
 
@@ -160,7 +160,7 @@ void main() {
 			vec2 startMiterWidth = vec2(startJoinDirection) * thickness * miterLimit * .5;
 			startCutoff = vec4(aCoord, aCoord);
 			startCutoff.zw += vec2(-startJoinDirection.y, startJoinDirection.x) / scaleRatio;
-			startCutoff = (startCutoff + translate.xyxy) * scaleRatio.xyxy;
+			startCutoff = startCutoff * scaleRatio.xyxy + translate.xyxy * viewport.zwzw;
 			startCutoff += viewport.xyxy;
 			startCutoff += startMiterWidth.xyxy;
 		}
@@ -169,7 +169,7 @@ void main() {
 			vec2 endMiterWidth = vec2(endJoinDirection) * thickness * miterLimit * .5;
 			endCutoff = vec4(bCoord, bCoord);
 			endCutoff.zw += vec2(-endJoinDirection.y, endJoinDirection.x)  / scaleRatio;
-			endCutoff = (endCutoff + translate.xyxy) * scaleRatio.xyxy;
+			endCutoff = endCutoff * scaleRatio.xyxy + translate.xyxy * viewport.zwzw;
 			endCutoff += viewport.xyxy;
 			endCutoff += endMiterWidth.xyxy;
 		}
@@ -181,7 +181,7 @@ void main() {
 			vec2 startMiterWidth = vec2(startJoinDirection) * thickness * abs(dot(startJoinDirection, currNormal)) * .5;
 			startCutoff = vec4(aCoord, aCoord);
 			startCutoff.zw += vec2(-startJoinDirection.y, startJoinDirection.x) / scaleRatio;
-			startCutoff = (startCutoff + translate.xyxy) * scaleRatio.xyxy;
+			startCutoff = startCutoff * scaleRatio.xyxy + translate.xyxy * viewport.zwzw;
 			startCutoff += viewport.xyxy;
 			startCutoff += startMiterWidth.xyxy;
 		}
@@ -190,7 +190,7 @@ void main() {
 			vec2 endMiterWidth = vec2(endJoinDirection) * thickness * abs(dot(endJoinDirection, currNormal)) * .5;
 			endCutoff = vec4(bCoord, bCoord);
 			endCutoff.zw += vec2(-endJoinDirection.y, endJoinDirection.x)  / scaleRatio;
-			endCutoff = (endCutoff + translate.xyxy) * scaleRatio.xyxy;
+			endCutoff = endCutoff * scaleRatio.xyxy + translate.xyxy * viewport.zwzw;
 			endCutoff += viewport.xyxy;
 			endCutoff += endMiterWidth.xyxy;
 		}

rect-vert.glsl

@@ -14,10 +14,10 @@ varying vec2 tangent;
 const float MAX_LINES = 256.;
 
 vec2 project(vec2 position, vec2 positionFract, vec2 scale, vec2 scaleFract, vec2 translate, vec2 translateFract) {
-  return (position + translate) * scale
-       + (positionFract + translateFract) * scale
-       + (position + translate) * scaleFract
-       + (positionFract + translateFract) * scaleFract;
+  return position * scale
+       + positionFract * scale
+       + position * scaleFract + translate
+       + positionFract * scaleFract + translateFract;
 }
 
 void main() {

test.js

@@ -101,10 +101,13 @@ panZoom(cnv, e => {
 
 
 /** Test cases */
-t.only('reverse direction', t => {
+t('aligned line', t => {
   batch.push(extend({}, options, {
-    positions: [ 0, 0, 0, 1 ]
+    positions: [ 0, 0, 1, 0 ],
+    type: 'rect'
   }))
+
+  t.end()
 })
 
 t('multiple points', t => {
@@ -196,7 +199,7 @@ t('closed path', t => {
   t.end()
 })
 
-t('time case', t => {
+t.only('time case', t => {
   batch.push({
     type: 'rect',
     positions: [25741380000,1293840000000,25741380001,1293926400000,25741380002,1294012800000,25741380003,1294099200000,25741380004,1294185600000,1477434180000,1294272000000,1477434180001,1294358400000,1477434180002,1294444800000,1477434180003,1294531200000,1477434180004,1294617600000],