Implement "slight" hinting by rounding x-heights up to the nearest pixel

demo/client/html/text-demo.html.hbs

@@ -50,6 +50,14 @@
                                         Subpixel AA
                                     </label>
                                 </div>
+                                <div class="form-group">
+                                    <label for="pf-hinting-select">Hinting</label>
+                                    <select id="pf-hinting-select"
+                                     class="form-control custom-select">
+                                        <option value="none">None</option>
+                                        <option value="slight">Slight</option>
+                                    </select>
+                                </div>
                             </form>
                         </div>
                         <div class="pf-arrow-box"></div>

demo/client/src/3d-demo.ts

@@ -18,7 +18,7 @@ import {mat4, vec2} from "gl-matrix";
 import {PathfinderMeshData} from "./meshes";
 import {ShaderMap, ShaderProgramSource} from "./shader-loader";
 import {BUILTIN_FONT_URI, ExpandedMeshData, GlyphStorage, PathfinderGlyph} from "./text";
-import {SimpleTextLayout, TextFrame, TextRun} from "./text";
+import {Hint, SimpleTextLayout, TextFrame, TextRun} from "./text";
 import {PathfinderError, assert, panic, unwrapNull} from "./utils";
 import {PathfinderDemoView, Timings} from "./view";
 import SSAAStrategy from "./ssaa-strategy";
@@ -225,6 +225,8 @@ class ThreeDView extends PathfinderDemoView {
             const textFrame = this.appController.glyphStorage.textFrames[textFrameIndex];
             const textGlyphs = textFrame.allGlyphs;
             const pathCount = textGlyphs.length;
+            
+            const hint = new Hint(this.appController.glyphStorage.font, PIXELS_PER_UNIT, false);
 
             const pathColors = new Uint8Array(4 * (pathCount + 1));
             const pathTransforms = new Float32Array(4 * (pathCount + 1));
@@ -235,7 +237,7 @@ class ThreeDView extends PathfinderDemoView {
                 pathColors.set(TEXT_COLOR, startOffset);
 
                 const textGlyph = textGlyphs[pathIndex];
-                const glyphRect = textGlyph.pixelRect(PIXELS_PER_UNIT);
+                const glyphRect = textGlyph.pixelRect(hint, PIXELS_PER_UNIT);
                 pathTransforms.set([1, 1, glyphRect[0], glyphRect[1]], startOffset);
             }
 

demo/client/src/ecaa-strategy.ts

@@ -305,6 +305,8 @@ export abstract class ECAAStrategy extends AntialiasingStrategy {
         this.bVertexPositionBufferTexture.bind(view.gl, uniforms, 0);
         this.bVertexPathIDBufferTexture.bind(view.gl, uniforms, 1);
         view.pathTransformBufferTextures[0].bind(view.gl, uniforms, 2);
+        if (view.pathHintsBufferTexture !== null)
+            view.pathHintsBufferTexture.bind(view.gl, uniforms, 3);
         view.gl.uniform1f(uniforms.uScaleX, this.supersampleScale[0]);
         view.instancedArraysExt.drawElementsInstancedANGLE(view.gl.TRIANGLES,
                                                            6,
@@ -336,6 +338,8 @@ export abstract class ECAAStrategy extends AntialiasingStrategy {
         this.bVertexPositionBufferTexture.bind(view.gl, uniforms, 0);
         this.bVertexPathIDBufferTexture.bind(view.gl, uniforms, 1);
         view.pathTransformBufferTextures[0].bind(view.gl, uniforms, 2);
+        if (view.pathHintsBufferTexture !== null)
+            view.pathHintsBufferTexture.bind(view.gl, uniforms, 3);
         view.gl.uniform1f(uniforms.uScaleX, this.supersampleScale[0]);
     }
 

demo/client/src/text-demo.ts

@@ -23,7 +23,7 @@ import {createFramebufferDepthTexture, QUAD_ELEMENTS, setTextureParameters} from
 import {UniformMap} from './gl-utils';
 import {PathfinderMeshBuffers, PathfinderMeshData} from './meshes';
 import {PathfinderShaderProgram, ShaderMap, ShaderProgramSource} from './shader-loader';
-import {BUILTIN_FONT_URI, PathfinderGlyph, SimpleTextLayout} from "./text";
+import {BUILTIN_FONT_URI, Hint, PathfinderGlyph, SimpleTextLayout} from "./text";
 import {PathfinderError, assert, expectNotNull, UINT32_SIZE, unwrapNull, panic} from './utils';
 import {MonochromePathfinderView, Timings} from './view';
 import PathfinderBufferTexture from './buffer-texture';
@@ -127,7 +127,12 @@ class TextDemoController extends DemoAppController<TextDemoView> {
 
         this._fontSize = INITIAL_FONT_SIZE;
 
+        this.hintingSelect = unwrapNull(document.getElementById('pf-hinting-select')) as
+            HTMLSelectElement;
+        this.hintingSelect.addEventListener('change', () => this.hintingChanged(), false);
+
         this.fpsLabel = unwrapNull(document.getElementById('pf-fps-label'));
+
         this.editTextModal = unwrapNull(document.getElementById('pf-edit-text-modal'));
         this.editTextArea = unwrapNull(document.getElementById('pf-edit-text-area')) as
             HTMLTextAreaElement;
@@ -144,7 +149,11 @@ class TextDemoController extends DemoAppController<TextDemoView> {
         window.jQuery(this.editTextModal).modal();
     }
 
-    private updateText() {
+    private hintingChanged(): void {
+        this.view.then(view => view.updateHinting());
+    }
+
+    private updateText(): void {
         this.text = this.editTextArea.value;
         this.recreateLayout();
 
@@ -162,7 +171,9 @@ class TextDemoController extends DemoAppController<TextDemoView> {
     }
 
     private recreateLayout() {
-        this.layout = new SimpleTextLayout(this.fileData, this.text, glyph => new GlyphInstance(glyph));
+        this.layout = new SimpleTextLayout(this.fileData,
+                                           this.text,
+                                           glyph => new GlyphInstance(glyph));
         this.layout.glyphStorage.partition().then((meshes: PathfinderMeshData) => {
             this.meshes = meshes;
             this.view.then(view => {
@@ -197,6 +208,14 @@ class TextDemoController extends DemoAppController<TextDemoView> {
         return this._fontSize / this.layout.glyphStorage.font.unitsPerEm;
     }
 
+    get useHinting(): boolean {
+        return this.hintingSelect.selectedIndex !== 0;
+    }
+
+    createHint(): Hint {
+        return new Hint(this.layout.glyphStorage.font, this.pixelsPerUnit, this.useHinting);
+    }
+
     protected get builtinFileURI(): string {
         return BUILTIN_FONT_URI;
     }
@@ -206,6 +225,9 @@ class TextDemoController extends DemoAppController<TextDemoView> {
     }
 
     private fpsLabel: HTMLElement;
+
+    private hintingSelect: HTMLSelectElement;
+
     private editTextModal: HTMLElement;
     private editTextArea: HTMLTextAreaElement;
 
@@ -263,7 +285,8 @@ class TextDemoView extends MonochromePathfinderView {
 
         for (let glyphIndex = 0; glyphIndex < textGlyphs.length; glyphIndex++) {
             const textGlyph = textGlyphs[glyphIndex];
-            const rect = textGlyph.pixelRect(this.appController.pixelsPerUnit);
+            const rect = textGlyph.pixelRect(this.appController.createHint(),
+                                             this.appController.pixelsPerUnit);
             glyphPositions.set([
                 rect[0], rect[3],
                 rect[2], rect[3],
@@ -286,6 +309,8 @@ class TextDemoView extends MonochromePathfinderView {
         const textGlyphs = this.appController.layout.glyphStorage.allGlyphs;
         const pixelsPerUnit = this.appController.pixelsPerUnit;
 
+        const hint = this.appController.createHint();
+
         // Only build glyphs in view.
         const translation = this.camera.translation;
         const canvasRect = glmatrix.vec4.fromValues(-translation[0],
@@ -294,13 +319,14 @@ class TextDemoView extends MonochromePathfinderView {
                                                     -translation[1] + this.canvas.height);
 
         let atlasGlyphs =
-            textGlyphs.filter(glyph => rectsIntersect(glyph.pixelRect(pixelsPerUnit), canvasRect))
+            textGlyphs.filter(glyph => {
-                      .map(textGlyph => new AtlasGlyph(textGlyph.opentypeGlyph));
+                        return rectsIntersect(glyph.pixelRect(hint, pixelsPerUnit), canvasRect);
+                      }).map(textGlyph => new AtlasGlyph(textGlyph.opentypeGlyph));
         atlasGlyphs.sort((a, b) => a.index - b.index);
         atlasGlyphs = _.sortedUniqBy(atlasGlyphs, glyph => glyph.index);
         this.appController.atlasGlyphs = atlasGlyphs;
 
-        this.appController.atlas.layoutGlyphs(atlasGlyphs, pixelsPerUnit);
+        this.appController.atlas.layoutGlyphs(atlasGlyphs, hint, pixelsPerUnit);
 
         const uniqueGlyphs = this.appController.layout.glyphStorage.uniqueGlyphs;
         const uniqueGlyphIndices = uniqueGlyphs.map(glyph => glyph.index);
@@ -308,6 +334,7 @@ class TextDemoView extends MonochromePathfinderView {
 
         // TODO(pcwalton): Regenerate the IBOs to include only the glyphs we care about.
         const transforms = new Float32Array((uniqueGlyphs.length + 1) * 4);
+        const pathHints = new Float32Array((uniqueGlyphs.length + 1) * 4);
 
         for (let glyphIndex = 0; glyphIndex < atlasGlyphs.length; glyphIndex++) {
             const glyph = atlasGlyphs[glyphIndex];
@@ -322,11 +349,18 @@ class TextDemoView extends MonochromePathfinderView {
             transforms[pathID * 4 + 1] = pixelsPerUnit;
             transforms[pathID * 4 + 2] = atlasOrigin[0];
             transforms[pathID * 4 + 3] = atlasOrigin[1];
+
+            pathHints[pathID * 4 + 0] = hint.xHeight;
+            pathHints[pathID * 4 + 1] = hint.hintedXHeight;
         }
 
         const pathTransformBufferTexture = new PathfinderBufferTexture(this.gl, 'uPathTransform');
         pathTransformBufferTexture.upload(this.gl, transforms);
         this.pathTransformBufferTextures = [pathTransformBufferTexture];
+
+        const pathHintsBufferTexture = new PathfinderBufferTexture(this.gl, 'uPathHints');
+        pathHintsBufferTexture.upload(this.gl, pathHints);
+        this.pathHintsBufferTexture = pathHintsBufferTexture;
     }
 
     private createAtlasFramebuffer() {
@@ -346,6 +380,8 @@ class TextDemoView extends MonochromePathfinderView {
         const textGlyphs = this.appController.layout.glyphStorage.allGlyphs;
         const atlasGlyphs = this.appController.atlasGlyphs;
 
+        const hint = this.appController.createHint();
+
         const atlasGlyphIndices = atlasGlyphs.map(atlasGlyph => atlasGlyph.index);
 
         const glyphTexCoords = new Float32Array(textGlyphs.length * 8);
@@ -362,7 +398,7 @@ class TextDemoView extends MonochromePathfinderView {
 
             // Set texture coordinates.
             const atlasGlyph = atlasGlyphs[atlasGlyphIndex];
-            const atlasGlyphRect = atlasGlyph.pixelRect(this.appController.pixelsPerUnit);
+            const atlasGlyphRect = atlasGlyph.pixelRect(hint, this.appController.pixelsPerUnit);
             const atlasGlyphBL = atlasGlyphRect.slice(0, 2) as glmatrix.vec2;
             const atlasGlyphTR = atlasGlyphRect.slice(2, 4) as glmatrix.vec2;
             glmatrix.vec2.div(atlasGlyphBL, atlasGlyphBL, ATLAS_SIZE);
@@ -406,6 +442,11 @@ class TextDemoView extends MonochromePathfinderView {
         this.rebuildAtlasIfNecessary();
     }
 
+    updateHinting(): void {
+        this.setDirty();
+        this.rebuildAtlasIfNecessary();
+    }
+
     private setIdentityTexScaleUniform(uniforms: UniformMap) {
         this.gl.uniform2f(uniforms.uTexScale, 1.0, 1.0);
     }
@@ -531,24 +572,24 @@ class Atlas {
         this._usedSize = glmatrix.vec2.create();
     }
 
-    layoutGlyphs(glyphs: AtlasGlyph[], pixelsPerUnit: number) {
+    layoutGlyphs(glyphs: AtlasGlyph[], hint: Hint, pixelsPerUnit: number) {
         let nextOrigin = glmatrix.vec2.fromValues(1.0, 1.0);
         let shelfBottom = 2.0;
 
         for (const glyph of glyphs) {
             // Place the glyph, and advance the origin.
             glyph.setPixelLowerLeft(nextOrigin, pixelsPerUnit);
-            nextOrigin[0] = glyph.pixelRect(pixelsPerUnit)[2] + 1.0;
+            nextOrigin[0] = glyph.pixelRect(hint, pixelsPerUnit)[2] + 1.0;
 
             // If the glyph overflowed the shelf, make a new one and reposition the glyph.
             if (nextOrigin[0] > ATLAS_SIZE[0]) {
                 nextOrigin = glmatrix.vec2.fromValues(1.0, shelfBottom + 1.0);
                 glyph.setPixelLowerLeft(nextOrigin, pixelsPerUnit);
-                nextOrigin[0] = glyph.pixelRect(pixelsPerUnit)[2] + 1.0;
+                nextOrigin[0] = glyph.pixelRect(hint, pixelsPerUnit)[2] + 1.0;
             }
 
             // Grow the shelf as necessary.
-            shelfBottom = Math.max(shelfBottom, glyph.pixelRect(pixelsPerUnit)[3] + 1.0);
+            shelfBottom = Math.max(shelfBottom, glyph.pixelRect(hint, pixelsPerUnit)[3] + 1.0);
         }
 
         // FIXME(pcwalton): Could be more precise if we don't have a full row.

demo/client/src/text.ts

@@ -301,24 +301,29 @@ export abstract class PathfinderGlyph {
     }
 
     setPixelLowerLeft(pixelLowerLeft: glmatrix.vec2, pixelsPerUnit: number): void {
-        const pixelMetrics = this.pixelMetrics(pixelsPerUnit);
+        const pixelDescent = this.calculatePixelDescent(pixelsPerUnit);
         const pixelOrigin = glmatrix.vec2.fromValues(pixelLowerLeft[0],
-                                                     pixelLowerLeft[1] + pixelMetrics.descent);
+                                                     pixelLowerLeft[1] + pixelDescent);
         this.setPixelOrigin(pixelOrigin, pixelsPerUnit);
     }
 
-    protected pixelMetrics(pixelsPerUnit: number): PixelMetrics {
+    private calculatePixelDescent(pixelsPerUnit: number): number {
+        return Math.ceil(-this.metrics.yMin * pixelsPerUnit);
+    }
+
+    protected pixelMetrics(hint: Hint, pixelsPerUnit: number): PixelMetrics {
         const metrics = this.metrics;
+        const top = hint.hintPosition(glmatrix.vec2.fromValues(0, metrics.yMax))[1];
         return {
             left: Math.floor(metrics.xMin * pixelsPerUnit),
             right: Math.ceil(metrics.xMax * pixelsPerUnit),
-            ascent: Math.ceil(metrics.yMax * pixelsPerUnit),
+            ascent: Math.ceil(top * pixelsPerUnit),
-            descent: Math.ceil(-metrics.yMin * pixelsPerUnit),
+            descent: this.calculatePixelDescent(pixelsPerUnit),
         };
     }
 
-    pixelRect(pixelsPerUnit: number): glmatrix.vec4 {
+    pixelRect(hint: Hint, pixelsPerUnit: number): glmatrix.vec4 {
-        const pixelMetrics = this.pixelMetrics(pixelsPerUnit);
+        const pixelMetrics = this.pixelMetrics(hint, pixelsPerUnit);
         const textGlyphOrigin = glmatrix.vec2.clone(this.origin);
         glmatrix.vec2.scale(textGlyphOrigin, textGlyphOrigin, pixelsPerUnit);
         glmatrix.vec2.round(textGlyphOrigin, textGlyphOrigin);
@@ -338,6 +343,42 @@ export abstract class PathfinderGlyph {
     origin: glmatrix.vec2;
 }
 
+export class Hint {
+    constructor(font: Font, pixelsPerUnit: number, useHinting: boolean) {
+        this.useHinting = useHinting;
+
+        const os2Table = font.tables.os2;
+        this.xHeight = os2Table.sxHeight != null ? os2Table.sxHeight : 0;
+
+        if (!useHinting) {
+            this.hintedXHeight = this.xHeight;
+        } else {
+            this.hintedXHeight = Math.ceil(Math.ceil(this.xHeight * pixelsPerUnit) /
+                                           pixelsPerUnit);
+        }
+    }
+
+    hintPosition(position: glmatrix.vec2): glmatrix.vec2 {
+        if (!this.useHinting)
+            return position;
+
+        if (position[1] < 0.0)
+            return position;
+
+        if (position[1] >= this.hintedXHeight) {
+            return glmatrix.vec2.fromValues(position[0],
+                                            position[1] - this.xHeight + this.hintedXHeight);
+        }
+
+        return glmatrix.vec2.fromValues(position[0],
+                                        position[1] / this.xHeight * this.hintedXHeight);
+    }
+
+    readonly xHeight: number;
+    readonly hintedXHeight: number;
+    private useHinting: boolean;
+}
+
 function copyIndices(destIndices: number[],
                      srcIndices: Uint32Array,
                      firstExpandedIndex: number,

demo/client/src/view.ts

@@ -328,6 +328,8 @@ export abstract class PathfinderDemoView extends PathfinderView {
             this.pathTransformBufferTextures[objectIndex].bind(this.gl,
                                                                directInteriorProgram.uniforms,
                                                                1);
+            if (this.pathHintsBufferTexture != null)
+                this.pathHintsBufferTexture.bind(this.gl, directInteriorProgram.uniforms, 2);
             let indexCount = this.gl.getBufferParameter(this.gl.ELEMENT_ARRAY_BUFFER,
                                                         this.gl.BUFFER_SIZE) / UINT32_SIZE;
             this.gl.drawElements(this.gl.TRIANGLES, indexCount, this.gl.UNSIGNED_INT, 0);
@@ -383,6 +385,8 @@ export abstract class PathfinderDemoView extends PathfinderView {
             this.pathTransformBufferTextures[objectIndex].bind(this.gl,
                                                                directCurveProgram.uniforms,
                                                                1);
+            if (this.pathHintsBufferTexture != null)
+                this.pathHintsBufferTexture.bind(this.gl, directCurveProgram.uniforms, 2);
             indexCount = this.gl.getBufferParameter(this.gl.ELEMENT_ARRAY_BUFFER,
                                                     this.gl.BUFFER_SIZE) / UINT32_SIZE;
             this.gl.drawElements(this.gl.TRIANGLES, indexCount, this.gl.UNSIGNED_INT, 0);
@@ -517,6 +521,7 @@ export abstract class PathfinderDemoView extends PathfinderView {
     meshData: PathfinderMeshData[];
 
     pathTransformBufferTextures: PathfinderBufferTexture[];
+    pathHintsBufferTexture: PathfinderBufferTexture | null;
     protected pathColorsBufferTextures: PathfinderBufferTexture[];
 
     private atlasRenderingTimerQuery: WebGLQuery;

shaders/gles2/common.inc.glsl

@@ -40,6 +40,14 @@ vec2 transformVertexPositionST(vec2 position, vec4 stTransform) {
     return position * stTransform.xy + stTransform.zw;
 }
 
+vec2 hintPosition(vec2 position, vec4 pathHints) {
+    if (position.y <= 0.0)
+        return position;
+    if (position.y >= pathHints.x)
+        return vec2(position.x, position.y - pathHints.x + pathHints.y);
+    return vec2(position.x, position.y / pathHints.x * pathHints.y);
+}
+
 vec2 convertScreenToClipSpace(vec2 position, ivec2 framebufferSize) {
     return position / vec2(framebufferSize) * 2.0 - 1.0;
 }
@@ -57,7 +65,11 @@ bool computeQuadPosition(out vec2 outPosition,
                          inout vec2 rightPosition,
                          vec2 quadPosition,
                          ivec2 framebufferSize,
-                         vec4 transform) {
+                         vec4 transform,
+                         vec4 hints) {
+    leftPosition = hintPosition(leftPosition, hints);
+    rightPosition = hintPosition(rightPosition, hints);
+
     leftPosition = transformVertexPositionST(leftPosition, transform);
     rightPosition = transformVertexPositionST(rightPosition, transform);
 

shaders/gles2/direct-curve.vs.glsl

@@ -8,8 +8,10 @@ uniform mat4 uTransform;
 uniform ivec2 uFramebufferSize;
 uniform ivec2 uPathColorsDimensions;
 uniform ivec2 uPathTransformDimensions;
+uniform ivec2 uPathHintsDimensions;
 uniform sampler2D uPathColors;
 uniform sampler2D uPathTransform;
+uniform sampler2D uPathHints;
 
 attribute vec2 aPosition;
 attribute vec2 aTexCoord;
@@ -24,9 +26,11 @@ varying float vSign;
 void main() {
     int pathID = int(aPathID);
 
+    vec4 pathHints = fetchFloat4Data(uPathHints, pathID, uPathHintsDimensions);
     vec4 pathTransform = fetchFloat4Data(uPathTransform, pathID, uPathTransformDimensions);
 
-    vec2 position = transformVertexPositionST(aPosition, pathTransform);
+    vec2 position = hintPosition(aPosition, pathHints);
+    position = transformVertexPositionST(position, pathTransform);
     position = transformVertexPosition(position, uTransform);
     position = convertScreenToClipSpace(position, uFramebufferSize);
 

shaders/gles2/direct-interior.vs.glsl

@@ -8,8 +8,10 @@ uniform mat4 uTransform;
 uniform ivec2 uFramebufferSize;
 uniform ivec2 uPathColorsDimensions;
 uniform ivec2 uPathTransformDimensions;
+uniform ivec2 uPathHintsDimensions;
 uniform sampler2D uPathColors;
 uniform sampler2D uPathTransform;
+uniform sampler2D uPathHints;
 
 attribute vec2 aPosition;
 attribute float aPathID;
@@ -20,9 +22,11 @@ varying vec2 vPathID;
 void main() {
     int pathID = int(aPathID);
 
+    vec4 pathHints = fetchFloat4Data(uPathHints, pathID, uPathHintsDimensions);
     vec4 pathTransform = fetchFloat4Data(uPathTransform, pathID, uPathTransformDimensions);
 
-    vec2 position = transformVertexPositionST(aPosition, pathTransform);
+    vec2 position = hintPosition(aPosition, pathHints);
+    position = transformVertexPositionST(position, pathTransform);
     position = transformVertexPosition(position, uTransform);
     position = convertScreenToClipSpace(position, uFramebufferSize);
 

shaders/gles2/ecaa-cover.vs.glsl

@@ -9,9 +9,11 @@ uniform float uScaleX;
 uniform ivec2 uBVertexPositionDimensions;
 uniform ivec2 uBVertexPathIDDimensions;
 uniform ivec2 uPathTransformDimensions;
+uniform ivec2 uPathHintsDimensions;
 uniform sampler2D uBVertexPosition;
 uniform sampler2D uBVertexPathID;
 uniform sampler2D uPathTransform;
+uniform sampler2D uPathHints;
 
 attribute vec2 aQuadPosition;
 attribute vec4 aUpperPointIndices;
@@ -41,9 +43,15 @@ void main() {
 
     int pathID = fetchUInt16Data(uBVertexPathID, pointIndices.x, uBVertexPathIDDimensions);
 
+    vec4 hints = fetchFloat4Data(uPathHints, pathID, uPathHintsDimensions);
     vec4 transform = fetchFloat4Data(uPathTransform, pathID, uPathTransformDimensions);
     transform.xz *= uScaleX;
 
+    upperLeftPosition = hintPosition(upperLeftPosition, hints);
+    upperRightPosition = hintPosition(upperRightPosition, hints);
+    lowerLeftPosition = hintPosition(lowerLeftPosition, hints);
+    lowerRightPosition = hintPosition(lowerRightPosition, hints);
+
     upperLeftPosition = transformVertexPositionST(upperLeftPosition, transform);
     upperRightPosition = transformVertexPositionST(upperRightPosition, transform);
     lowerLeftPosition = transformVertexPositionST(lowerLeftPosition, transform);

shaders/gles2/ecaa-curve.vs.glsl

@@ -9,9 +9,11 @@ uniform float uScaleX;
 uniform ivec2 uBVertexPositionDimensions;
 uniform ivec2 uBVertexPathIDDimensions;
 uniform ivec2 uPathTransformDimensions;
+uniform ivec2 uPathHintsDimensions;
 uniform sampler2D uBVertexPosition;
 uniform sampler2D uBVertexPathID;
 uniform sampler2D uPathTransform;
+uniform sampler2D uPathHints;
 uniform bool uLowerPart;
 
 attribute vec2 aQuadPosition;
@@ -38,6 +40,7 @@ void main() {
 
     int pathID = fetchUInt16Data(uBVertexPathID, pointIndices.x, uBVertexPathIDDimensions);
 
+    vec4 hints = fetchFloat4Data(uPathHints, pathID, uPathHintsDimensions);
     vec4 transform = fetchFloat4Data(uPathTransform, pathID, uPathTransformDimensions);
     transform.xz *= uScaleX;
 
@@ -48,7 +51,9 @@ void main() {
                             rightPosition,
                             aQuadPosition,
                             uFramebufferSize,
-                            transform)) {
+                            transform,
+                            hints)) {
+        controlPointPosition = hintPosition(controlPointPosition, hints);
         controlPointPosition = transformVertexPositionST(controlPointPosition, transform);
     }
 

shaders/gles2/ecaa-line.vs.glsl

@@ -10,9 +10,11 @@ uniform ivec2 uFramebufferSize;
 uniform ivec2 uBVertexPositionDimensions;
 uniform ivec2 uBVertexPathIDDimensions;
 uniform ivec2 uPathTransformDimensions;
+uniform ivec2 uPathHintsDimensions;
 uniform sampler2D uBVertexPosition;
 uniform sampler2D uBVertexPathID;
 uniform sampler2D uPathTransform;
+uniform sampler2D uPathHints;
 uniform bool uLowerPart;
 
 attribute vec2 aQuadPosition;
@@ -33,6 +35,7 @@ void main() {
 
     int pathID = fetchUInt16Data(uBVertexPathID, pointIndices.x, uBVertexPathIDDimensions);
 
+    vec4 hints = fetchFloat4Data(uPathHints, pathID, uPathHintsDimensions);
     vec4 transform = fetchFloat4Data(uPathTransform, pathID, uPathTransformDimensions);
     transform.xz *= uScaleX;
 
@@ -43,7 +46,8 @@ void main() {
                         rightPosition,
                         aQuadPosition,
                         uFramebufferSize,
-                        transform);
+                        transform,
+                        hints);
 
     float depth = convertPathIndexToViewportDepthValue(pathID);