Revert "Switch from Chromeless to Playwright for tests"

Switch from Chromeless to Playwright for tests

package.json

@@ -37,7 +37,7 @@
     "gh-pages": "^1.0.0",
     "jsdoc": "^3.5.5",
     "json": "^9.0.4",
-    "scratch-vm": "0.2.0-prerelease.20190213162739",
+    "scratch-vm": "0.2.0-prerelease.20191227164934",
     "tap": "^11.0.0",
     "travis-after-all": "^1.4.4",
     "uglifyjs-webpack-plugin": "^1.2.5",
@@ -53,7 +53,7 @@
     "minilog": "3.1.0",
     "raw-loader": "^0.5.1",
     "scratch-storage": "^1.0.0",
-    "scratch-svg-renderer": "0.2.0-prerelease.20200109070519",
+    "scratch-svg-renderer": "0.2.0-prerelease.20200507183648",
     "twgl.js": "4.4.0"
   }
 }

src/BitmapSkin.js

@@ -18,9 +18,6 @@ class BitmapSkin extends Skin {
         /** @type {!RenderWebGL} */
         this._renderer = renderer;
 
-        /** @type {WebGLTexture} */
-        this._texture = null;
-
         /** @type {Array<int>} */
         this._textureSize = [0, 0];
     }
@@ -59,16 +56,6 @@ class BitmapSkin extends Skin {
         return this._texture || super.getTexture();
     }
 
-    /**
-     * Get the bounds of the drawable for determining its fenced position.
-     * @param {Array<number>} drawable - The Drawable instance this skin is using.
-     * @param {?Rectangle} result - Optional destination for bounds calculation.
-     * @return {!Rectangle} The drawable's bounds. For compatibility with Scratch 2, we always use getAABB for bitmaps.
-     */
-    getFenceBounds (drawable, result) {
-        return drawable.getAABB(result);
-    }
-
     /**
      * Set the contents of this skin to a snapshot of the provided bitmap data.
      * @param {ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement} bitmapData - new contents for this skin.
@@ -95,22 +82,17 @@ class BitmapSkin extends Skin {
             textureData = context.getImageData(0, 0, bitmapData.width, bitmapData.height);
         }
 
-        if (this._texture) {
-            gl.bindTexture(gl.TEXTURE_2D, this._texture);
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureData);
-            this._silhouette.update(textureData);
-        } else {
-            // TODO: mipmaps?
+        if (this._texture === null) {
             const textureOptions = {
-                auto: true,
-                wrap: gl.CLAMP_TO_EDGE,
-                src: textureData
+                auto: false,
+                wrap: gl.CLAMP_TO_EDGE
             };
 
             this._texture = twgl.createTexture(gl, textureOptions);
-            this._silhouette.update(textureData);
         }
 
+        this._setTexture(textureData);
+
         // Do these last in case any of the above throws an exception
         this._costumeResolution = costumeResolution || 2;
         this._textureSize = BitmapSkin._getBitmapSize(bitmapData);

src/Drawable.js

@@ -685,6 +685,9 @@ class Drawable {
         const localPosition = getLocalPosition(drawable, vec);
         if (localPosition[0] < 0 || localPosition[1] < 0 ||
             localPosition[0] > 1 || localPosition[1] > 1) {
+            dst[0] = 0;
+            dst[1] = 0;
+            dst[2] = 0;
             dst[3] = 0;
             return dst;
         }

src/EffectTransform.js

@@ -130,15 +130,21 @@ class EffectTransform {
         const effects = drawable.enabledEffects;
         const uniforms = drawable.getUniforms();
 
-        if ((effects & ShaderManager.EFFECT_INFO.ghost.mask) !== 0) {
-            // gl_FragColor.a *= u_ghost
-            inOutColor[3] *= uniforms.u_ghost;
-        }
-
         const enableColor = (effects & ShaderManager.EFFECT_INFO.color.mask) !== 0;
         const enableBrightness = (effects & ShaderManager.EFFECT_INFO.brightness.mask) !== 0;
 
         if (enableColor || enableBrightness) {
+            // gl_FragColor.rgb /= gl_FragColor.a + epsilon;
+            // Here, we're dividing by the (previously pre-multiplied) alpha to ensure HSV is properly calculated
+            // for partially transparent pixels.
+            // epsilon is present in the shader because dividing by 0 (fully transparent pixels) messes up calculations.
+            // We're doing this with a Uint8ClampedArray here, so dividing by 0 just gives 255. We're later multiplying
+            // by 0 again, so it won't affect results.
+            const alpha = inOutColor[3] / 255;
+            inOutColor[0] /= alpha;
+            inOutColor[1] /= alpha;
+            inOutColor[2] /= alpha;
+
             // vec3 hsl = convertRGB2HSL(gl_FragColor.xyz);
             const hsl = rgbToHsl(inOutColor);
 
@@ -171,6 +177,20 @@ class EffectTransform {
             }
             // gl_FragColor.rgb = convertHSL2RGB(hsl);
             inOutColor.set(hslToRgb(hsl));
+
+            // gl_FragColor.rgb *= gl_FragColor.a + epsilon;
+            // Now we're doing the reverse, premultiplying by the alpha once again.
+            inOutColor[0] *= alpha;
+            inOutColor[1] *= alpha;
+            inOutColor[2] *= alpha;
+        }
+
+        if ((effects & ShaderManager.EFFECT_INFO.ghost.mask) !== 0) {
+            // gl_FragColor *= u_ghost
+            inOutColor[0] *= uniforms.u_ghost;
+            inOutColor[1] *= uniforms.u_ghost;
+            inOutColor[2] *= uniforms.u_ghost;
+            inOutColor[3] *= uniforms.u_ghost;
         }
 
         return inOutColor;

src/PenSkin.js

@@ -25,6 +25,12 @@ const DefaultPenAttributes = {
     diameter: 1
 };
 
+/**
+ * Reused memory location for storing a premultiplied pen color.
+ * @type {FloatArray}
+ */
+const __premultipliedColor = [0, 0, 0, 0];
+
 
 /**
  * Reused memory location for projection matrices.
@@ -38,11 +44,6 @@ const __projectionMatrix = twgl.m4.identity();
  */
 const __modelTranslationMatrix = twgl.m4.identity();
 
-/**
- * Reused memory location for rotation matrix for building a model matrix.
- * @type {FloatArray}
- */
-const __modelRotationMatrix = twgl.m4.identity();
 
 /**
  * Reused memory location for scaling matrix for building a model matrix.
@@ -88,9 +89,6 @@ class PenSkin extends Skin {
         /** @type {HTMLCanvasElement} */
         this._canvas = document.createElement('canvas');
 
-        /** @type {WebGLTexture} */
-        this._texture = null;
-
         /** @type {WebGLTexture} */
         this._exportTexture = null;
 
@@ -106,6 +104,12 @@ class PenSkin extends Skin {
         /** @type {boolean} */
         this._silhouetteDirty = false;
 
+        /** @type {Uint8Array} */
+        this._silhouettePixels = null;
+
+        /** @type {ImageData} */
+        this._silhouetteImageData = null;
+
         /** @type {object} */
         this._lineOnBufferDrawRegionId = {
             enter: () => this._enterDrawLineOnBuffer(),
@@ -123,10 +127,10 @@ class PenSkin extends Skin {
 
         const NO_EFFECTS = 0;
         /** @type {twgl.ProgramInfo} */
-        this._stampShader = this._renderer._shaderManager.getShader(ShaderManager.DRAW_MODE.stamp, NO_EFFECTS);
+        this._stampShader = this._renderer._shaderManager.getShader(ShaderManager.DRAW_MODE.default, NO_EFFECTS);
 
         /** @type {twgl.ProgramInfo} */
-        this._lineShader = this._renderer._shaderManager.getShader(ShaderManager.DRAW_MODE.lineSample, NO_EFFECTS);
+        this._lineShader = this._renderer._shaderManager.getShader(ShaderManager.DRAW_MODE.line, NO_EFFECTS);
 
         this._createLineGeometry();
 
@@ -154,13 +158,6 @@ class PenSkin extends Skin {
         return true;
     }
 
-    /**
-     * @returns {boolean} true if alpha is premultiplied, false otherwise
-     */
-    get hasPremultipliedAlpha () {
-        return true;
-    }
-
     /**
      * @return {Array<number>} the "native" size, in texels, of this skin. [width, height]
      */
@@ -188,7 +185,7 @@ class PenSkin extends Skin {
     clear () {
         const gl = this._renderer.gl;
         twgl.bindFramebufferInfo(gl, this._framebuffer);
-        
+
         /* Reset framebuffer to transparent black */
         gl.clearColor(0, 0, 0, 0);
         gl.clear(gl.COLOR_BUFFER_BIT);
@@ -219,10 +216,15 @@ class PenSkin extends Skin {
      * @param {number} y1 - the Y coordinate of the end of the line.
      */
     drawLine (penAttributes, x0, y0, x1, y1) {
+        // For compatibility with Scratch 2.0, offset pen lines of width 1 and 3 so they're pixel-aligned.
+        // See https://github.com/LLK/scratch-render/pull/314
+        const diameter = penAttributes.diameter || DefaultPenAttributes.diameter;
+        const offset = (diameter === 1 || diameter === 3) ? 0.5 : 0;
+
         this._drawLineOnBuffer(
             penAttributes,
-            this._rotationCenter[0] + x0, this._rotationCenter[1] - y0,
-            this._rotationCenter[0] + x1, this._rotationCenter[1] - y1
+            x0 + offset, y0 + offset,
+            x1 + offset, y1 + offset
         );
 
         this._silhouetteDirty = true;
@@ -232,72 +234,16 @@ class PenSkin extends Skin {
      * Create 2D geometry for drawing lines to a framebuffer.
      */
     _createLineGeometry () {
-        // Create a set of triangulated quads that break up a line into 3 parts:
-        // 2 caps and a body. The y component of these position vertices are
-        // divided to bring a value of 1 down to 0.5 to 0. The large y values
-        // are set so they will still be at least 0.5 after division. The
-        // divisor is scaled based on the length of the line and the lines
-        // width.
-        //
-        // Texture coordinates are based on a "generated" texture whose general
-        // shape is a circle. The line caps set their texture values to define
-        // there roundedness with the texture. The body has all of its texture
-        // values set to the center of the texture so it's a solid block.
         const quads = {
             a_position: {
                 numComponents: 2,
                 data: [
-                    -0.5, 1,
-                    0.5, 1,
-                    -0.5, 100000,
-
-                    -0.5, 100000,
-                    0.5, 1,
-                    0.5, 100000,
-
-                    -0.5, 1,
-                    0.5, 1,
-                    -0.5, -1,
-
-                    -0.5, -1,
-                    0.5, 1,
-                    0.5, -1,
-
-                    -0.5, -100000,
-                    0.5, -100000,
-                    -0.5, -1,
-
-                    -0.5, -1,
-                    0.5, -100000,
-                    0.5, -1
-                ]
-            },
-            a_texCoord: {
-                numComponents: 2,
-                data: [
-                    1, 0.5,
-                    0, 0.5,
-                    1, 0,
-
-                    1, 0,
-                    0, 0.5,
-                    0, 0,
-
-                    0.5, 0,
-                    0.5, 1,
-                    0.5, 0,
-
-                    0.5, 0,
-                    0.5, 1,
-                    0.5, 1,
-
                     1, 0,
                     0, 0,
-                    1, 0.5,
-
-                    1, 0.5,
+                    1, 1,
+                    1, 1,
                     0, 0,
-                    0, 0.5
+                    0, 1
                 ]
             }
         };
@@ -317,13 +263,6 @@ class PenSkin extends Skin {
 
         twgl.bindFramebufferInfo(gl, this._framebuffer);
 
-        // Needs a blend function that blends a destination that starts with
-        // no alpha.
-        gl.blendFuncSeparate(
-            gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA,
-            gl.ONE, gl.ONE_MINUS_SRC_ALPHA
-        );
-
         gl.viewport(0, 0, bounds.width, bounds.height);
 
         gl.useProgram(currentShader.program);
@@ -344,13 +283,13 @@ class PenSkin extends Skin {
     _exitDrawLineOnBuffer () {
         const gl = this._renderer.gl;
 
-        gl.blendFuncSeparate(gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ZERO, gl.ONE);
-
         twgl.bindFramebufferInfo(gl, null);
     }
 
     /**
      * Draw a line on the framebuffer.
+     * Note that the point coordinates are in the following coordinate space:
+     * +y is down, (0, 0) is the center, and the coords range from (-width / 2, -height / 2) to (height / 2, width / 2).
      * @param {PenAttributes} penAttributes - how the line should be drawn.
      * @param {number} x0 - the X coordinate of the beginning of the line.
      * @param {number} y0 - the Y coordinate of the beginning of the line.
@@ -364,40 +303,18 @@ class PenSkin extends Skin {
 
         this._renderer.enterDrawRegion(this._lineOnBufferDrawRegionId);
 
-        const diameter = penAttributes.diameter || DefaultPenAttributes.diameter;
-        const length = Math.hypot(Math.abs(x1 - x0) - 0.001, Math.abs(y1 - y0) - 0.001);
-        const avgX = (x0 + x1) / 2;
-        const avgY = (y0 + y1) / 2;
-        const theta = Math.atan2(y0 - y1, x0 - x1);
-        const alias = 1;
-
-        // The line needs a bit of aliasing to look smooth. Add a small offset
-        // and a small size boost to scaling to give a section to alias.
-        const translationVector = __modelTranslationVector;
-        translationVector[0] = avgX - (alias / 2);
-        translationVector[1] = avgY + (alias / 4);
-
-        const scalingVector = __modelScalingVector;
-        scalingVector[0] = diameter + alias;
-        scalingVector[1] = length + diameter - (alias / 2);
-
-        const radius = diameter / 2;
-        const yScalar = (0.50001 - (radius / (length + diameter)));
+        // Premultiply pen color by pen transparency
+        const penColor = penAttributes.color4f || DefaultPenAttributes.color4f;
+        __premultipliedColor[0] = penColor[0] * penColor[3];
+        __premultipliedColor[1] = penColor[1] * penColor[3];
+        __premultipliedColor[2] = penColor[2] * penColor[3];
+        __premultipliedColor[3] = penColor[3];
 
         const uniforms = {
-            u_positionScalar: yScalar,
-            u_capScale: diameter,
-            u_aliasAmount: alias,
-            u_modelMatrix: twgl.m4.multiply(
-                twgl.m4.multiply(
-                    twgl.m4.translation(translationVector, __modelTranslationMatrix),
-                    twgl.m4.rotationZ(theta - (Math.PI / 2), __modelRotationMatrix),
-                    __modelMatrix
-                ),
-                twgl.m4.scaling(scalingVector, __modelScalingMatrix),
-                __modelMatrix
-            ),
-            u_lineColor: penAttributes.color4f || DefaultPenAttributes.color4f
+            u_lineColor: __premultipliedColor,
+            u_lineThickness: penAttributes.diameter || DefaultPenAttributes.diameter,
+            u_penPoints: [x0, -y0, x1, -y1],
+            u_stageSize: this.size
         };
 
         twgl.setUniforms(currentShader, uniforms);
@@ -490,8 +407,6 @@ class PenSkin extends Skin {
 
         twgl.bindFramebufferInfo(gl, this._framebuffer);
 
-        gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
-
         this._drawRectangleRegionEnter(this._stampShader, this._bounds);
     }
 
@@ -501,8 +416,6 @@ class PenSkin extends Skin {
     _exitDrawToBuffer () {
         const gl = this._renderer.gl;
 
-        gl.blendFuncSeparate(gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ZERO, gl.ONE);
-
         twgl.bindFramebufferInfo(gl, null);
     }
 
@@ -607,6 +520,9 @@ class PenSkin extends Skin {
         gl.clearColor(0, 0, 0, 0);
         gl.clear(gl.COLOR_BUFFER_BIT);
 
+        this._silhouettePixels = new Uint8Array(Math.floor(width * height * 4));
+        this._silhouetteImageData = this._canvas.getContext('2d').createImageData(width, height);
+
         this._silhouetteDirty = true;
     }
 
@@ -644,24 +560,17 @@ class PenSkin extends Skin {
             // Render export texture to another framebuffer
             const gl = this._renderer.gl;
 
-            const bounds = this._bounds;
-
             this._renderer.enterDrawRegion(this._toBufferDrawRegionId);
 
             // Sample the framebuffer's pixels into the silhouette instance
-            const skinPixels = new Uint8Array(Math.floor(this._canvas.width * this._canvas.height * 4));
-            gl.readPixels(0, 0, this._canvas.width, this._canvas.height, gl.RGBA, gl.UNSIGNED_BYTE, skinPixels);
+            gl.readPixels(
+                0, 0,
+                this._canvas.width, this._canvas.height,
+                gl.RGBA, gl.UNSIGNED_BYTE, this._silhouettePixels
+            );
 
-            const skinCanvas = this._canvas;
-            skinCanvas.width = bounds.width;
-            skinCanvas.height = bounds.height;
-
-            const skinContext = skinCanvas.getContext('2d');
-            const skinImageData = skinContext.createImageData(bounds.width, bounds.height);
-            skinImageData.data.set(skinPixels);
-            skinContext.putImageData(skinImageData, 0, 0);
-
-            this._silhouette.update(this._canvas);
+            this._silhouetteImageData.data.set(this._silhouettePixels);
+            this._silhouette.update(this._silhouetteImageData, true /* isPremultiplied */);
 
             this._silhouetteDirty = false;
         }

src/RenderWebGL.js

@@ -196,7 +196,7 @@ class RenderWebGL extends EventEmitter {
         gl.disable(gl.DEPTH_TEST);
         /** @todo disable when no partial transparency? */
         gl.enable(gl.BLEND);
-        gl.blendFuncSeparate(gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ZERO, gl.ONE);
+        gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
     }
 
     /**
@@ -220,9 +220,20 @@ class RenderWebGL extends EventEmitter {
      * @param {int} pixelsTall The desired height in device-independent pixels.
      */
     resize (pixelsWide, pixelsTall) {
+        const {canvas} = this._gl;
         const pixelRatio = window.devicePixelRatio || 1;
-        this._gl.canvas.width = pixelsWide * pixelRatio;
-        this._gl.canvas.height = pixelsTall * pixelRatio;
+        const newWidth = pixelsWide * pixelRatio;
+        const newHeight = pixelsTall * pixelRatio;
+
+        // Certain operations, such as moving the color picker, call `resize` once per frame, even though the canvas
+        // size doesn't change. To avoid unnecessary canvas updates, check that we *really* need to resize the canvas.
+        if (canvas.width !== newWidth || canvas.height !== newHeight) {
+            canvas.width = newWidth;
+            canvas.height = newHeight;
+            // Resizing the canvas causes it to be cleared, so redraw it.
+            this.draw();
+        }
+
     }
 
     /**
@@ -834,7 +845,8 @@ class RenderWebGL extends EventEmitter {
                 projection,
                 {
                     extraUniforms,
-                    ignoreVisibility: true // Touching color ignores sprite visibility
+                    ignoreVisibility: true, // Touching color ignores sprite visibility,
+                    effectMask: ~ShaderManager.EFFECT_INFO.ghost.mask
                 });
 
             gl.stencilFunc(gl.EQUAL, 1, 1);
@@ -1123,7 +1135,8 @@ class RenderWebGL extends EventEmitter {
         gl.clear(gl.COLOR_BUFFER_BIT);
         try {
             gl.disable(gl.BLEND);
-            this._drawThese([drawableID], ShaderManager.DRAW_MODE.default, projection,
+            // ImageData objects store alpha un-premultiplied, so draw with the `straightAlpha` draw mode.
+            this._drawThese([drawableID], ShaderManager.DRAW_MODE.straightAlpha, projection,
                 {effectMask: ~ShaderManager.EFFECT_INFO.ghost.mask});
         } finally {
             gl.enable(gl.BLEND);
@@ -1554,7 +1567,7 @@ class RenderWebGL extends EventEmitter {
         const projection = twgl.m4.ortho(bounds.left, bounds.right, bounds.top, bounds.bottom, -1, 1);
 
         // Draw the stamped sprite onto the PenSkin's framebuffer.
-        this._drawThese([stampID], ShaderManager.DRAW_MODE.stamp, projection, {ignoreVisibility: true});
+        this._drawThese([stampID], ShaderManager.DRAW_MODE.default, projection, {ignoreVisibility: true});
         skin._silhouetteDirty = true;
     }
 
@@ -1744,14 +1757,6 @@ class RenderWebGL extends EventEmitter {
             }
 
             twgl.setUniforms(currentShader, uniforms);
-
-            /* adjust blend function for this skin */
-            if (drawable.skin.hasPremultipliedAlpha){
-                gl.blendFuncSeparate(gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
-            } else {
-                gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
-            }
-
             twgl.drawBufferInfo(gl, this._bufferInfo, gl.TRIANGLES);
         }
 
@@ -1760,14 +1765,16 @@ class RenderWebGL extends EventEmitter {
 
     /**
      * Get the convex hull points for a particular Drawable.
-     * To do this, draw the Drawable unrotated, unscaled, and untranslated.
-     * Read back the pixels and find all boundary points.
-     * Finally, apply a convex hull algorithm to simplify the set.
+     * To do this, calculate it based on the drawable's Silhouette.
      * @param {int} drawableID The Drawable IDs calculate convex hull for.
      * @return {Array<Array<number>>} points Convex hull points, as [[x, y], ...]
      */
     _getConvexHullPointsForDrawable (drawableID) {
         const drawable = this._allDrawables[drawableID];
+
+        drawable.updateMatrix();
+        drawable.skin.updateSilhouette(this._getDrawableScreenSpaceScale(drawable));
+
         const [width, height] = drawable.skin.size;
         // No points in the hull if invisible or size is 0.
         if (!drawable.getVisible() || width === 0 || height === 0) {
@@ -1775,110 +1782,120 @@ class RenderWebGL extends EventEmitter {
         }
 
         /**
-         * Return the determinant of two vectors, the vector from A to B and
-         * the vector from A to C.
+         * Return the determinant of two vectors, the vector from A to B and the vector from A to C.
          *
-         * The determinant is useful in this case to know if AC is counter
-         * clockwise from AB. A positive value means the AC is counter
-         * clockwise from AC. A negative value menas AC is clockwise from AB.
+         * The determinant is useful in this case to know if AC is counter-clockwise from AB.
+         * A positive value means that AC is counter-clockwise from AB. A negative value means AC is clockwise from AB.
          *
          * @param {Float32Array} A A 2d vector in space.
          * @param {Float32Array} B A 2d vector in space.
          * @param {Float32Array} C A 2d vector in space.
-         * @return {number} Greater than 0 if counter clockwise, less than if
-         * clockwise, 0 if all points are on a line.
+         * @return {number} Greater than 0 if counter clockwise, less than if clockwise, 0 if all points are on a line.
          */
-        const CCW = function (A, B, C) {
+        const determinant = function (A, B, C) {
             // AB = B - A
             // AC = C - A
             // det (AB BC) = AB0 * AC1 - AB1 * AC0
             return (((B[0] - A[0]) * (C[1] - A[1])) - ((B[1] - A[1]) * (C[0] - A[0])));
         };
 
-        // https://github.com/LLK/scratch-flash/blob/dcbeeb59d44c3be911545dfe54d
-        // 46a32404f8e69/src/scratch/ScratchCostume.as#L369-L413 Following
-        // RasterHull creation, compare and store left and right values that
-        // maintain a convex shape until that data can be passed to `hull` for
-        // further work.
-        const L = [];
-        const R = [];
+        // This algorithm for calculating the convex hull somewhat resembles the monotone chain algorithm.
+        // The main difference is that instead of sorting the points by x-coordinate, and y-coordinate in case of ties,
+        // it goes through them by y-coordinate in the outer loop and x-coordinate in the inner loop.
+        // This gives us "left" and "right" hulls, whereas the monotone chain algorithm gives "top" and "bottom" hulls.
+        // Adapted from https://github.com/LLK/scratch-flash/blob/dcbeeb59d44c3be911545dfe54d46a32404f8e69/src/scratch/ScratchCostume.as#L369-L413
+
+        const leftHull = [];
+        const rightHull = [];
+
+        // While convex hull algorithms usually push and pop values from the list of hull points,
+        // here, we keep indices for the "last" point in each array. Any points past these indices are ignored.
+        // This is functionally equivalent to pushing and popping from a "stack" of hull points.
+        let leftEndPointIndex = -1;
+        let rightEndPointIndex = -1;
+
         const _pixelPos = twgl.v3.create();
         const _effectPos = twgl.v3.create();
-        let ll = -1;
-        let rr = -1;
-        let Q;
+
+        let currentPoint;
+
+        // *Not* Scratch Space-- +y is bottom
+        // Loop over all rows of pixels, starting at the top
         for (let y = 0; y < height; y++) {
             _pixelPos[1] = y / height;
-            // Scan from left to right, looking for a touchable spot in the
-            // skin.
+
+            // We start at the leftmost point, then go rightwards until we hit an opaque pixel
             let x = 0;
             for (; x < width; x++) {
                 _pixelPos[0] = x / width;
                 EffectTransform.transformPoint(drawable, _pixelPos, _effectPos);
                 if (drawable.skin.isTouchingLinear(_effectPos)) {
-                    Q = [x, y];
+                    currentPoint = [x, y];
                     break;
                 }
             }
-            // If x is equal to the width there are no touchable points in the
-            // skin. Nothing we can add to L. And looping for R would find the
-            // same thing.
+
+            // If we managed to loop all the way through, there are no opaque pixels on this row. Go to the next one
             if (x >= width) {
                 continue;
             }
-            // Decrement ll until Q is clockwise (CCW returns negative) from the
-            // last two points in L.
-            while (ll > 0) {
-                if (CCW(L[ll - 1], L[ll], Q) < 0) {
+
+            // Because leftEndPointIndex is initialized to -1, this is skipped for the first two rows.
+            // It runs only when there are enough points in the left hull to make at least one line.
+            // If appending the current point to the left hull makes a counter-clockwise turn,
+            // we want to append the current point. Otherwise, we decrement the index of the "last" hull point until the
+            // current point makes a counter-clockwise turn.
+            // This decrementing has the same effect as popping from the point list, but is hopefully faster.
+            while (leftEndPointIndex > 0) {
+                if (determinant(leftHull[leftEndPointIndex], leftHull[leftEndPointIndex - 1], currentPoint) > 0) {
                     break;
                 } else {
-                    --ll;
+                    // leftHull.pop();
+                    --leftEndPointIndex;
                 }
             }
-            // Increment ll and then set L[ll] to Q. If ll was -1 before this
-            // line, this will set L[0] to Q. If ll was 0 before this line, this
-            // will set L[1] to Q.
-            L[++ll] = Q;
 
-            // Scan from right to left, looking for a touchable spot in the
-            // skin.
+            // This has the same effect as pushing to the point list.
+            // This "list head pointer" coding style leaves excess points dangling at the end of the list,
+            // but that doesn't matter; we simply won't copy them over to the final hull.
+
+            // leftHull.push(currentPoint);
+            leftHull[++leftEndPointIndex] = currentPoint;
+
+            // Now we repeat the process for the right side, looking leftwards for a pixel.
             for (x = width - 1; x >= 0; x--) {
                 _pixelPos[0] = x / width;
                 EffectTransform.transformPoint(drawable, _pixelPos, _effectPos);
                 if (drawable.skin.isTouchingLinear(_effectPos)) {
-                    Q = [x, y];
+                    currentPoint = [x, y];
                     break;
                 }
             }
-            // Decrement rr until Q is counter clockwise (CCW returns positive)
-            // from the last two points in L. L takes clockwise points and R
-            // takes counter clockwise points. if y was decremented instead of
-            // incremented R would take clockwise points. We are going in the
-            // right direction for L and the wrong direction for R, so we
-            // compare the opposite value for R from L.
-            while (rr > 0) {
-                if (CCW(R[rr - 1], R[rr], Q) > 0) {
+
+            // Because we're coming at this from the right, it goes clockwise this time.
+            while (rightEndPointIndex > 0) {
+                if (determinant(rightHull[rightEndPointIndex], rightHull[rightEndPointIndex - 1], currentPoint) < 0) {
                     break;
                 } else {
-                    --rr;
+                    --rightEndPointIndex;
                 }
             }
-            // Increment rr and then set R[rr] to Q.
-            R[++rr] = Q;
+
+            rightHull[++rightEndPointIndex] = currentPoint;
         }
 
-        // Known boundary points on left/right edges of pixels.
-        const boundaryPoints = L;
-        // Truncate boundaryPoints to the index of the last added Q to L. L may
-        // have more entries than the index for the last Q.
-        boundaryPoints.length = ll + 1;
-        // Add points in R to boundaryPoints in reverse so all points in
-        // boundaryPoints are clockwise from each other.
-        for (let j = rr; j >= 0; --j) {
-            boundaryPoints.push(R[j]);
+        // Start off "hullPoints" with the left hull points.
+        const hullPoints = leftHull;
+        // This is where we get rid of those dangling extra points.
+        hullPoints.length = leftEndPointIndex + 1;
+        // Add points from the right side in reverse order so all points are ordered clockwise.
+        for (let j = rightEndPointIndex; j >= 0; --j) {
+            hullPoints.push(rightHull[j]);
         }
-        // Simplify boundary points using convex hull.
-        return hull(boundaryPoints, Infinity);
+
+        // Simplify boundary points using hull.js.
+        // TODO: Remove this; this algorithm already generates convex hulls.
+        return hull(hullPoints, Infinity);
     }
 
     /**
@@ -1902,13 +1919,11 @@ class RenderWebGL extends EventEmitter {
             }
             */
             Drawable.sampleColor4b(vec, drawables[index].drawable, __blendColor);
-            // if we are fully transparent, go to the next one "down"
-            const sampleAlpha = __blendColor[3] / 255;
-            // premultiply alpha
-            dst[0] += __blendColor[0] * blendAlpha * sampleAlpha;
-            dst[1] += __blendColor[1] * blendAlpha * sampleAlpha;
-            dst[2] += __blendColor[2] * blendAlpha * sampleAlpha;
-            blendAlpha *= (1 - sampleAlpha);
+            // Equivalent to gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA)
+            dst[0] += __blendColor[0] * blendAlpha;
+            dst[1] += __blendColor[1] * blendAlpha;
+            dst[2] += __blendColor[2] * blendAlpha;
+            blendAlpha *= (1 - (__blendColor[3] / 255));
         }
         // Backdrop could be transparent, so we need to go to the "clear color" of the
         // draw scene (white) as a fallback if everything was alpha

src/SVGSkin.js

@@ -90,7 +90,8 @@ class SVGSkin extends Skin {
         const textureOptions = {
             auto: false,
             wrap: this._renderer.gl.CLAMP_TO_EDGE,
-            src: textureData
+            src: textureData,
+            premultiplyAlpha: true
         };
 
         const mip = twgl.createTexture(this._renderer.gl, textureOptions);

src/ShaderManager.js

@@ -154,10 +154,15 @@ ShaderManager.EFFECTS = Object.keys(ShaderManager.EFFECT_INFO);
  */
 ShaderManager.DRAW_MODE = {
     /**
-     * Draw normally.
+     * Draw normally. Its output will use premultiplied alpha.
      */
     default: 'default',
 
+    /**
+     * Draw with non-premultiplied alpha. Useful for reading pixels from GL into an ImageData object.
+     */
+    straightAlpha: 'straightAlpha',
+
     /**
      * Draw a silhouette using a solid color.
      */
@@ -169,14 +174,9 @@ ShaderManager.DRAW_MODE = {
     colorMask: 'colorMask',
 
     /**
-     * Sample a "texture" to draw a line with caps.
+     * Draw a line with caps.
      */
-    lineSample: 'lineSample',
-
-    /**
-     * Draw normally except for pre-multiplied alpha
-     */
-    stamp: 'stamp'
+    line: 'line'
 };
 
 module.exports = ShaderManager;

src/Silhouette.js

@@ -20,7 +20,7 @@ let __SilhouetteUpdateCanvas;
  * @return {number} Alpha value for x/y position
  */
 const getPoint = ({_width: width, _height: height, _colorData: data}, x, y) => {
-    // 0 if outside bouds, otherwise read from data.
+    // 0 if outside bounds, otherwise read from data.
     if (x >= width || y >= height || x < 0 || y < 0) {
         return 0;
     }
@@ -39,6 +39,7 @@ const __cornerWork = [
 
 /**
  * Get the color from a given silhouette at an x/y local texture position.
+ * Multiply color values by alpha for proper blending.
  * @param {Silhouette} The silhouette to sample.
  * @param {number} x X position of texture (0-1).
  * @param {number} y Y position of texture (0-1).
@@ -46,7 +47,31 @@ const __cornerWork = [
  * @return {Uint8ClampedArray} The dst vector.
  */
 const getColor4b = ({_width: width, _height: height, _colorData: data}, x, y, dst) => {
-    // 0 if outside bouds, otherwise read from data.
+    // 0 if outside bounds, otherwise read from data.
+    if (x >= width || y >= height || x < 0 || y < 0) {
+        return dst.fill(0);
+    }
+    const offset = ((y * width) + x) * 4;
+    // premultiply alpha
+    const alpha = data[offset + 3] / 255;
+    dst[0] = data[offset] * alpha;
+    dst[1] = data[offset + 1] * alpha;
+    dst[2] = data[offset + 2] * alpha;
+    dst[3] = data[offset + 3];
+    return dst;
+};
+
+/**
+ * Get the color from a given silhouette at an x/y local texture position.
+ * Do not multiply color values by alpha, as it has already been done.
+ * @param {Silhouette} The silhouette to sample.
+ * @param {number} x X position of texture (0-1).
+ * @param {number} y Y position of texture (0-1).
+ * @param {Uint8ClampedArray} dst A color 4b space.
+ * @return {Uint8ClampedArray} The dst vector.
+ */
+const getPremultipliedColor4b = ({_width: width, _height: height, _colorData: data}, x, y, dst) => {
+    // 0 if outside bounds, otherwise read from data.
     if (x >= width || y >= height || x < 0 || y < 0) {
         return dst.fill(0);
     }
@@ -78,15 +103,21 @@ class Silhouette {
          */
         this._colorData = null;
 
+        // By default, silhouettes are assumed not to contain premultiplied image data,
+        // so when we get a color, we want to multiply it by its alpha channel.
+        // Point `_getColor` to the version of the function that multiplies.
+        this._getColor = getColor4b;
+
         this.colorAtNearest = this.colorAtLinear = (_, dst) => dst.fill(0);
     }
 
     /**
      * Update this silhouette with the bitmapData for a skin.
-     * @param {*} bitmapData An image, canvas or other element that the skin
+     * @param {ImageData|HTMLCanvasElement|HTMLImageElement} bitmapData An image, canvas or other element that the skin
+     * @param {boolean} isPremultiplied True if the source bitmap data comes premultiplied (e.g. from readPixels).
      * rendering can be queried from.
      */
-    update (bitmapData) {
+    update (bitmapData, isPremultiplied = false) {
         let imageData;
         if (bitmapData instanceof ImageData) {
             // If handed ImageData directly, use it directly.
@@ -109,6 +140,12 @@ class Silhouette {
             imageData = ctx.getImageData(0, 0, width, height);
         }
 
+        if (isPremultiplied) {
+            this._getColor = getPremultipliedColor4b;
+        } else {
+            this._getColor = getColor4b;
+        }
+
         this._colorData = imageData.data;
         // delete our custom overriden "uninitalized" color functions
         // let the prototype work for itself
@@ -124,7 +161,7 @@ class Silhouette {
      * @returns {Uint8ClampedArray} dst
      */
     colorAtNearest (vec, dst) {
-        return getColor4b(
+        return this._getColor(
             this,
             Math.floor(vec[0] * (this._width - 1)),
             Math.floor(vec[1] * (this._height - 1)),
@@ -151,10 +188,10 @@ class Silhouette {
         const xFloor = Math.floor(x);
         const yFloor = Math.floor(y);
 
-        const x0y0 = getColor4b(this, xFloor, yFloor, __cornerWork[0]);
-        const x1y0 = getColor4b(this, xFloor + 1, yFloor, __cornerWork[1]);
-        const x0y1 = getColor4b(this, xFloor, yFloor + 1, __cornerWork[2]);
-        const x1y1 = getColor4b(this, xFloor + 1, yFloor + 1, __cornerWork[3]);
+        const x0y0 = this._getColor(this, xFloor, yFloor, __cornerWork[0]);
+        const x1y0 = this._getColor(this, xFloor + 1, yFloor, __cornerWork[1]);
+        const x0y1 = this._getColor(this, xFloor, yFloor + 1, __cornerWork[2]);
+        const x1y1 = this._getColor(this, xFloor + 1, yFloor + 1, __cornerWork[3]);
 
         dst[0] = (x0y0[0] * x0D * y0D) + (x0y1[0] * x0D * y1D) + (x1y0[0] * x1D * y0D) + (x1y1[0] * x1D * y1D);
         dst[1] = (x0y0[1] * x0D * y0D) + (x0y1[1] * x0D * y1D) + (x1y0[1] * x1D * y0D) + (x1y1[1] * x1D * y1D);

src/Skin.js

@@ -33,6 +33,9 @@ class Skin extends EventEmitter {
         /** @type {Vec3} */
         this._rotationCenter = twgl.v3.create(0, 0);
 
+        /** @type {WebGLTexture} */
+        this._texture = null;
+
         /**
          * The uniforms to be used by the vertex and pixel shaders.
          * Some of these are used by other parts of the renderer as well.
@@ -76,13 +79,6 @@ class Skin extends EventEmitter {
         return false;
     }
 
-    /**
-     * @returns {boolean} true if alpha is premultiplied, false otherwise
-     */
-    get hasPremultipliedAlpha () {
-        return false;
-    }
-
     /**
      * @return {int} the unique ID for this Skin.
      */
@@ -147,10 +143,10 @@ class Skin extends EventEmitter {
      * Get the bounds of the drawable for determining its fenced position.
      * @param {Array<number>} drawable - The Drawable instance this skin is using.
      * @param {?Rectangle} result - Optional destination for bounds calculation.
-     * @return {!Rectangle} The drawable's bounds.
+     * @return {!Rectangle} The drawable's bounds. For compatibility with Scratch 2, we always use getAABB.
      */
     getFenceBounds (drawable, result) {
-        return drawable.getFastBounds(result);
+        return drawable.getAABB(result);
     }
 
     /**
@@ -171,6 +167,23 @@ class Skin extends EventEmitter {
      */
     updateSilhouette () {}
 
+    /**
+     * Set this skin's texture to the given image.
+     * @param {ImageData|HTMLCanvasElement} textureData - The canvas or image data to set the texture to.
+     */
+    _setTexture (textureData) {
+        const gl = this._renderer.gl;
+
+        gl.bindTexture(gl.TEXTURE_2D, this._texture);
+        // Premultiplied alpha is necessary for proper blending.
+        // See http://www.realtimerendering.com/blog/gpus-prefer-premultiplication/
+        gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureData);
+        gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+
+        this._silhouette.update(textureData);
+    }
+
     /**
      * Set the contents of this skin to an empty skin.
      * @fires Skin.event:WasAltered
@@ -199,6 +212,9 @@ class Skin extends EventEmitter {
             this._emptyImageTexture = twgl.createTexture(gl, textureOptions);
         }
 
+        this._rotationCenter[0] = 0;
+        this._rotationCenter[1] = 0;
+
         this._silhouette.update(this._emptyImageData);
         this.emit(Skin.Events.WasAltered);
     }

src/TextBubbleSkin.js

@@ -42,9 +42,6 @@ class TextBubbleSkin extends Skin {
         /** @type {HTMLCanvasElement} */
         this._canvas = document.createElement('canvas');
 
-        /** @type {WebGLTexture} */
-        this._texture = null;
-
         /** @type {Array<number>} */
         this._size = [0, 0];
 
@@ -272,9 +269,7 @@ class TextBubbleSkin extends Skin {
                 this._texture = twgl.createTexture(gl, textureOptions);
             }
 
-            gl.bindTexture(gl.TEXTURE_2D, this._texture);
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureData);
-            this._silhouette.update(textureData);
+            this._setTexture(textureData);
         }
 
         return this._texture;

src/shaders/sprite.frag

@@ -33,24 +33,26 @@ uniform float u_mosaic;
 uniform float u_ghost;
 #endif // ENABLE_ghost
 
-#ifdef DRAW_MODE_lineSample
+#ifdef DRAW_MODE_line
 uniform vec4 u_lineColor;
-uniform float u_capScale;
-uniform float u_aliasAmount;
-#endif // DRAW_MODE_lineSample
+uniform float u_lineThickness;
+uniform vec4 u_penPoints;
+#endif // DRAW_MODE_line
 
 uniform sampler2D u_skin;
 
 varying vec2 v_texCoord;
 
+// Add this to divisors to prevent division by 0, which results in NaNs propagating through calculations.
+// Smaller values can cause problems on some mobile devices.
+const float epsilon = 1e-3;
+
 #if !defined(DRAW_MODE_silhouette) && (defined(ENABLE_color))
 // Branchless color conversions based on code from:
 // http://www.chilliant.com/rgb2hsv.html by Ian Taylor
 // Based in part on work by Sam Hocevar and Emil Persson
 // See also: https://en.wikipedia.org/wiki/HSL_and_HSV#Formal_derivation
 
-// Smaller values can cause problems on some mobile devices
-const float epsilon = 1e-3;
 
 // Convert an RGB color to Hue, Saturation, and Value.
 // All components of input and output are expected to be in the [0,1] range.
@@ -107,7 +109,7 @@ const vec2 kCenter = vec2(0.5, 0.5);
 
 void main()
 {
-	#ifndef DRAW_MODE_lineSample
+	#ifndef DRAW_MODE_line
 	vec2 texcoord0 = v_texCoord;
 
 	#ifdef ENABLE_mosaic
@@ -153,16 +155,12 @@ void main()
 
 	gl_FragColor = texture2D(u_skin, texcoord0);
 
-    #ifdef ENABLE_ghost
-    gl_FragColor.a *= u_ghost;
-    #endif // ENABLE_ghost
+	#if defined(ENABLE_color) || defined(ENABLE_brightness)
+	// Divide premultiplied alpha values for proper color processing
+	// Add epsilon to avoid dividing by 0 for fully transparent pixels
+	gl_FragColor.rgb = clamp(gl_FragColor.rgb / (gl_FragColor.a + epsilon), 0.0, 1.0);
 
-	#ifdef DRAW_MODE_silhouette
-	// switch to u_silhouetteColor only AFTER the alpha test
-	gl_FragColor = u_silhouetteColor;
-	#else // DRAW_MODE_silhouette
-
-	#if defined(ENABLE_color)
+	#ifdef ENABLE_color
 	{
 		vec3 hsv = convertRGB2HSV(gl_FragColor.xyz);
 
@@ -178,11 +176,29 @@ void main()
 
 		gl_FragColor.rgb = convertHSV2RGB(hsv);
 	}
-	#endif // defined(ENABLE_color)
+	#endif // ENABLE_color
 
-	#if defined(ENABLE_brightness)
+	#ifdef ENABLE_brightness
 	gl_FragColor.rgb = clamp(gl_FragColor.rgb + vec3(u_brightness), vec3(0), vec3(1));
-	#endif // defined(ENABLE_brightness)
+	#endif // ENABLE_brightness
+
+	// Re-multiply color values
+	gl_FragColor.rgb *= gl_FragColor.a + epsilon;
+
+	#endif // defined(ENABLE_color) || defined(ENABLE_brightness)
+
+	#ifdef ENABLE_ghost
+	gl_FragColor *= u_ghost;
+	#endif // ENABLE_ghost
+
+	#ifdef DRAW_MODE_silhouette
+	// Discard fully transparent pixels for stencil test
+	if (gl_FragColor.a == 0.0) {
+		discard;
+	}
+	// switch to u_silhouetteColor only AFTER the alpha test
+	gl_FragColor = u_silhouetteColor;
+	#else // DRAW_MODE_silhouette
 
 	#ifdef DRAW_MODE_colorMask
 	vec3 maskDistance = abs(gl_FragColor.rgb - u_colorMask);
@@ -194,15 +210,45 @@ void main()
 	#endif // DRAW_MODE_colorMask
 	#endif // DRAW_MODE_silhouette
 
-	#else // DRAW_MODE_lineSample
-	gl_FragColor = u_lineColor;
-	gl_FragColor.a *= clamp(
-		// Scale the capScale a little to have an aliased region.
-		(u_capScale + u_aliasAmount -
-			u_capScale * 2.0 * distance(v_texCoord, vec2(0.5, 0.5))
-		) / (u_aliasAmount + 1.0),
-		0.0,
-		1.0
-	);
-	#endif // DRAW_MODE_lineSample
+	#ifdef DRAW_MODE_straightAlpha
+	// Un-premultiply alpha.
+	gl_FragColor.rgb /= gl_FragColor.a + epsilon;
+	#endif
+
+	#else // DRAW_MODE_line
+	// Maaaaagic antialiased-line-with-round-caps shader.
+	// Adapted from Inigo Quilez' 2D distance function cheat sheet
+	// https://www.iquilezles.org/www/articles/distfunctions2d/distfunctions2d.htm
+
+	// On (some?) devices with 16-bit float precision, sufficiently long lines will overflow the float's range.
+	// Avoid this by scaling these problematic values down to fit within (-1, 1) then scaling them back up later.
+	// TODO: Is this a problem on all drivers with 16-bit mediump floats, or just Mali?
+	vec2 pointDiff = abs(u_penPoints.zw - u_penPoints.xy);
+	float FLOAT_SCALING_INVERSE = max(1.0, max(pointDiff.x, pointDiff.y));
+	float FLOAT_SCALING = 1.0 / FLOAT_SCALING_INVERSE;
+
+	// The xy component of u_penPoints is the first point; the zw is the second point.
+	// This is done to minimize the number of gl.uniform calls, which can add up.
+	// vec2 pa = v_texCoord - u_penPoints.xy, ba = u_penPoints.zw - u_penPoints.xy;
+	vec2 pa = (v_texCoord - u_penPoints.xy) * FLOAT_SCALING, ba = (u_penPoints.zw - u_penPoints.xy) * FLOAT_SCALING;
+
+	// Avoid division by zero
+	float baDot = dot(ba, ba);
+	// the dot product of a vector and itself is always positive
+	baDot = max(baDot, epsilon);
+
+	// Magnitude of vector projection of this fragment onto the line (both relative to the line's start point).
+	// This results in a "linear gradient" which goes from 0.0 at the start point to 1.0 at the end point.
+	float projMagnitude = clamp(dot(pa, ba) / baDot, 0.0, 1.0);
+
+	float lineDistance = length(pa - (ba * projMagnitude)) * FLOAT_SCALING_INVERSE;
+
+	// The distance to the line allows us to create lines of any thickness.
+	// Instead of checking whether this fragment's distance < the line thickness,
+	// utilize the distance field to get some antialiasing. Fragments far away from the line are 0,
+	// fragments close to the line are 1, and fragments that are within a 1-pixel border of the line are in between.
+	float cappedLine = clamp((u_lineThickness + 1.0) * 0.5 - lineDistance, 0.0, 1.0);
+
+	gl_FragColor = u_lineColor * cappedLine;
+	#endif // DRAW_MODE_line
 }

src/shaders/sprite.vert

@@ -1,22 +1,63 @@
+precision mediump float;
+
+#ifdef DRAW_MODE_line
+uniform vec2 u_stageSize;
+uniform float u_lineThickness;
+uniform vec4 u_penPoints;
+
+// Add this to divisors to prevent division by 0, which results in NaNs propagating through calculations.
+// Smaller values can cause problems on some mobile devices.
+const float epsilon = 1e-3;
+#endif
+
+#ifndef DRAW_MODE_line
 uniform mat4 u_projectionMatrix;
 uniform mat4 u_modelMatrix;
+attribute vec2 a_texCoord;
+#endif
 
 attribute vec2 a_position;
-attribute vec2 a_texCoord;
 
 varying vec2 v_texCoord;
 
-#ifdef DRAW_MODE_lineSample
-uniform float u_positionScalar;
-#endif
-
 void main() {
-    #ifdef DRAW_MODE_lineSample
-    vec2 position = a_position;
-    position.y = clamp(position.y * u_positionScalar, -0.5, 0.5);
-    gl_Position = u_projectionMatrix * u_modelMatrix * vec4(position, 0, 1);
-    #else
-    gl_Position = u_projectionMatrix * u_modelMatrix * vec4(a_position, 0, 1);
-    #endif
-    v_texCoord = a_texCoord;
+	#ifdef DRAW_MODE_line
+	// Calculate a rotated ("tight") bounding box around the two pen points.
+	// Yes, we're doing this 6 times (once per vertex), but on actual GPU hardware,
+	// it's still faster than doing it in JS combined with the cost of uniformMatrix4fv.
+
+	// Expand line bounds by sqrt(2) / 2 each side-- this ensures that all antialiased pixels
+	// fall within the quad, even at a 45-degree diagonal
+	vec2 position = a_position;
+	float expandedRadius = (u_lineThickness * 0.5) + 1.4142135623730951;
+
+	float lineLength = length(u_penPoints.zw - u_penPoints.xy);
+
+	position.x *= lineLength + (2.0 * expandedRadius);
+	position.y *= 2.0 * expandedRadius;
+
+	// Center around first pen point
+	position -= expandedRadius;
+
+	// Rotate quad to line angle
+	vec2 pointDiff = u_penPoints.zw - u_penPoints.xy;
+	// Ensure line has a nonzero length so it's rendered properly
+	// As long as either component is nonzero, the line length will be nonzero
+	pointDiff.x = abs(pointDiff.x) < epsilon ? epsilon : pointDiff.x;
+	// The `normalized` vector holds rotational values equivalent to sine/cosine
+	// We're applying the standard rotation matrix formula to the position to rotate the quad to the line angle
+	vec2 normalized = pointDiff / max(lineLength, epsilon);
+	position = mat2(normalized.x, normalized.y, -normalized.y, normalized.x) * position;
+	// Translate quad
+	position += u_penPoints.xy;
+
+	// Apply view transform
+	position *= 2.0 / u_stageSize;
+
+	gl_Position = vec4(position, 0, 1);
+	v_texCoord = position * 0.5 * u_stageSize;
+	#else
+	gl_Position = u_projectionMatrix * u_modelMatrix * vec4(a_position, 0, 1);
+	v_texCoord = a_texCoord;
+	#endif
 }