Better thick lines shader

src/Rendering/babylon.edgesRenderer.js

@@ -26,7 +26,7 @@ var BABYLON;
             }
             this._lineShader = new BABYLON.ShaderMaterial("lineShader", this._source.getScene(), "line", {
                 attributes: ["position", "normal"],
-                uniforms: ["worldViewProjection", "color", "width"]
+                uniforms: ["worldViewProjection", "color", "width", "aspectRatio"]
             });
             this._lineShader.disableDepthWrite = true;
             this._lineShader.backFaceCulling = false;
@@ -76,18 +76,22 @@ var BABYLON;
                 this._linesPositions.push(p1.y);
                 this._linesPositions.push(p1.z);
                 // Normals
-                this._linesNormals.push(normal.x);
-                this._linesNormals.push(normal.y);
-                this._linesNormals.push(normal.z);
-                this._linesNormals.push(-normal.x);
-                this._linesNormals.push(-normal.y);
-                this._linesNormals.push(-normal.z);
-                this._linesNormals.push(-normal.x);
-                this._linesNormals.push(-normal.y);
-                this._linesNormals.push(-normal.z);
-                this._linesNormals.push(normal.x);
-                this._linesNormals.push(normal.y);
-                this._linesNormals.push(normal.z);
+                this._linesNormals.push(p1.x);
+                this._linesNormals.push(p1.y);
+                this._linesNormals.push(p1.z);
+                this._linesNormals.push(-1);
+                this._linesNormals.push(p1.x);
+                this._linesNormals.push(p1.y);
+                this._linesNormals.push(p1.z);
+                this._linesNormals.push(1);
+                this._linesNormals.push(p0.x);
+                this._linesNormals.push(p0.y);
+                this._linesNormals.push(p0.z);
+                this._linesNormals.push(-1);
+                this._linesNormals.push(p0.x);
+                this._linesNormals.push(p0.y);
+                this._linesNormals.push(p0.z);
+                this._linesNormals.push(1);
                 // Indices
                 this._linesIndices.push(offset);
                 this._linesIndices.push(offset + 1);
@@ -173,7 +177,7 @@ var BABYLON;
             // Merge into a single mesh
             var engine = this._source.getScene().getEngine();
             this._vb0 = new BABYLON.VertexBuffer(engine, this._linesPositions, BABYLON.VertexBuffer.PositionKind, false);
-            this._vb1 = new BABYLON.VertexBuffer(engine, this._linesNormals, BABYLON.VertexBuffer.NormalKind, false);
+            this._vb1 = new BABYLON.VertexBuffer(engine, this._linesNormals, BABYLON.VertexBuffer.NormalKind, false, false, 4);
             this._buffers[BABYLON.VertexBuffer.PositionKind] = this._vb0;
             this._buffers[BABYLON.VertexBuffer.NormalKind] = this._vb1;
             this._ib = engine.createIndexBuffer(this._linesIndices);
@@ -190,7 +194,8 @@ var BABYLON;
             engine.bindMultiBuffers(this._buffers, this._ib, this._lineShader.getEffect());
             scene.resetCachedMaterial();
             this._lineShader.setColor4("color", this._source.edgesColor);
-            this._lineShader.setFloat("width", this._source.edgesWidth / 100.0);
+            this._lineShader.setFloat("width", this._source.edgesWidth / 50.0);
+            this._lineShader.setFloat("aspectRatio", engine.getAspectRatio(scene.activeCamera));
             this._lineShader.bind(this._source.getWorldMatrix());
             // Draw order
             engine.draw(true, 0, this._indicesCount);

src/Rendering/babylon.edgesRenderer.ts

@@ -40,7 +40,7 @@
             this._lineShader = new ShaderMaterial("lineShader", this._source.getScene(), "line",
                 {
                     attributes: ["position", "normal"],
-                    uniforms: ["worldViewProjection", "color", "width"]
+                    uniforms: ["worldViewProjection", "color", "width", "aspectRatio"]
                 });
 
             this._lineShader.disableDepthWrite = true;
@@ -104,21 +104,25 @@
                 this._linesPositions.push(p1.z);
 
                 // Normals
-                this._linesNormals.push(normal.x);
-                this._linesNormals.push(normal.y);
-                this._linesNormals.push(normal.z);
-
-                this._linesNormals.push(-normal.x);
-                this._linesNormals.push(-normal.y);
-                this._linesNormals.push(-normal.z);
-
-                this._linesNormals.push(-normal.x);
-                this._linesNormals.push(-normal.y);
-                this._linesNormals.push(-normal.z);
-
-                this._linesNormals.push(normal.x);
-                this._linesNormals.push(normal.y);
-                this._linesNormals.push(normal.z);
+                this._linesNormals.push(p1.x);
+                this._linesNormals.push(p1.y);
+                this._linesNormals.push(p1.z);
+                this._linesNormals.push(-1);
+
+                this._linesNormals.push(p1.x);
+                this._linesNormals.push(p1.y);
+                this._linesNormals.push(p1.z);
+                this._linesNormals.push(1);
+
+                this._linesNormals.push(p0.x);
+                this._linesNormals.push(p0.y);
+                this._linesNormals.push(p0.z);
+                this._linesNormals.push(-1);
+
+                this._linesNormals.push(p0.x);
+                this._linesNormals.push(p0.y);
+                this._linesNormals.push(p0.z);
+                this._linesNormals.push(1);
 
                 // Indices
                 this._linesIndices.push(offset);
@@ -226,7 +230,7 @@
             // Merge into a single mesh
             var engine = this._source.getScene().getEngine();
             this._vb0 = new VertexBuffer(engine, this._linesPositions, VertexBuffer.PositionKind, false);
-            this._vb1 = new VertexBuffer(engine, this._linesNormals, VertexBuffer.NormalKind, false);
+            this._vb1 = new VertexBuffer(engine, this._linesNormals, VertexBuffer.NormalKind, false, false, 4);
 
             this._buffers[VertexBuffer.PositionKind] = this._vb0;
             this._buffers[VertexBuffer.NormalKind] = this._vb1;
@@ -250,7 +254,8 @@
 
             scene.resetCachedMaterial();
             this._lineShader.setColor4("color", this._source.edgesColor);
-            this._lineShader.setFloat("width", this._source.edgesWidth / 100.0);
+            this._lineShader.setFloat("width", this._source.edgesWidth / 50.0);
+            this._lineShader.setFloat("aspectRatio", engine.getAspectRatio(scene.activeCamera));
             this._lineShader.bind(this._source.getWorldMatrix());
 
             // Draw order

src/Shaders/line.vertex.fx

@@ -2,20 +2,30 @@
 
 // Attributes
 attribute vec3 position;
-attribute vec3 normal;
+attribute vec4 normal;
 
 // Uniforms
 uniform mat4 worldViewProjection;
 
 uniform float width;
+uniform float aspectRatio;
 
 void main(void) {
 	vec4 viewPosition = worldViewProjection * vec4(position, 1.0);
-	vec4 viewNormal = worldViewProjection * vec4(normal, 0.0);
-	vec3 direction = cross(viewNormal.xyz, vec3(0., 0., 1.));
+	vec4 viewPositionNext = worldViewProjection * vec4(normal.xyz, 1.0);
 
-	direction = normalize(direction);
-	viewPosition.xy += direction.xy *  width;
+	vec2 currentScreen = viewPosition.xy / viewPosition.w;
+	vec2 nextScreen = viewPositionNext.xy / viewPositionNext.w;
 
-	gl_Position = viewPosition;
+	currentScreen.x *= aspectRatio;
+	nextScreen.x *= aspectRatio;
+
+	vec2 dir = normalize(nextScreen - currentScreen);
+	vec2 normalDir = vec2(-dir.y, dir.x);
+
+	normalDir *= width / 2.0;
+	normalDir.x /= aspectRatio;
+
+	vec4 offset = vec4(normalDir * normal.w, 0.0, 0.0);
+	gl_Position = viewPosition + offset;
 }

src/babylon.engine.js

@@ -1803,7 +1803,7 @@ var BABYLON;
         };
         Engine.prototype.readPixels = function (x, y, width, height) {
             var data = new Uint8Array(height * width * 4);
-            this._gl.readPixels(0, 0, width, height, this._gl.RGBA, this._gl.UNSIGNED_BYTE, data);
+            this._gl.readPixels(x, y, width, height, this._gl.RGBA, this._gl.UNSIGNED_BYTE, data);
             return data;
         };
         // Dispose

src/babylon.engine.ts

@@ -2147,7 +2147,7 @@
 
         public readPixels(x: number, y: number, width: number, height: number): Uint8Array {
             var data = new Uint8Array(height * width * 4);
-            this._gl.readPixels(0, 0, width, height, this._gl.RGBA, this._gl.UNSIGNED_BYTE, data);
+            this._gl.readPixels(x, y, width, height, this._gl.RGBA, this._gl.UNSIGNED_BYTE, data);
             return data;
         }