@scratch/scratch-render 11.0.0-beta.1

package/src/shaders/sprite.frag

@@ -0,0 +1,249 @@
+precision mediump float;
+
+#ifdef DRAW_MODE_silhouette
+uniform vec4 u_silhouetteColor;
+#else // DRAW_MODE_silhouette
+# ifdef ENABLE_color
+uniform float u_color;
+# endif // ENABLE_color
+# ifdef ENABLE_brightness
+uniform float u_brightness;
+# endif // ENABLE_brightness
+#endif // DRAW_MODE_silhouette
+
+#ifdef DRAW_MODE_colorMask
+uniform vec3 u_colorMask;
+uniform float u_colorMaskTolerance;
+#endif // DRAW_MODE_colorMask
+
+#ifdef ENABLE_fisheye
+uniform float u_fisheye;
+#endif // ENABLE_fisheye
+#ifdef ENABLE_whirl
+uniform float u_whirl;
+#endif // ENABLE_whirl
+#ifdef ENABLE_pixelate
+uniform float u_pixelate;
+uniform vec2 u_skinSize;
+#endif // ENABLE_pixelate
+#ifdef ENABLE_mosaic
+uniform float u_mosaic;
+#endif // ENABLE_mosaic
+#ifdef ENABLE_ghost
+uniform float u_ghost;
+#endif // ENABLE_ghost
+
+#ifdef DRAW_MODE_line
+uniform vec4 u_lineColor;
+uniform float u_lineThickness;
+uniform float u_lineLength;
+#endif // DRAW_MODE_line
+
+#ifdef DRAW_MODE_background
+uniform vec4 u_backgroundColor;
+#endif // DRAW_MODE_background
+
+uniform sampler2D u_skin;
+
+#ifndef DRAW_MODE_background
+varying vec2 v_texCoord;
+#endif
+
+// 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
+
+
+// Convert an RGB color to Hue, Saturation, and Value.
+// All components of input and output are expected to be in the [0,1] range.
+vec3 convertRGB2HSV(vec3 rgb)
+{
+	// Hue calculation has 3 cases, depending on which RGB component is largest, and one of those cases involves a "mod"
+	// operation. In order to avoid that "mod" we split the M==R case in two: one for G<B and one for B>G. The B>G case
+	// will be calculated in the negative and fed through abs() in the hue calculation at the end.
+	// See also: https://en.wikipedia.org/wiki/HSL_and_HSV#Hue_and_chroma
+	const vec4 hueOffsets = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
+
+	// temp1.xy = sort B & G (largest first)
+	// temp1.z = the hue offset we'll use if it turns out that R is the largest component (M==R)
+	// temp1.w = the hue offset we'll use if it turns out that R is not the largest component (M==G or M==B)
+	vec4 temp1 = rgb.b > rgb.g ? vec4(rgb.bg, hueOffsets.wz) : vec4(rgb.gb, hueOffsets.xy);
+
+	// temp2.x = the largest component of RGB ("M" / "Max")
+	// temp2.yw = the smaller components of RGB, ordered for the hue calculation (not necessarily sorted by magnitude!)
+	// temp2.z = the hue offset we'll use in the hue calculation
+	vec4 temp2 = rgb.r > temp1.x ? vec4(rgb.r, temp1.yzx) : vec4(temp1.xyw, rgb.r);
+
+	// m = the smallest component of RGB ("min")
+	float m = min(temp2.y, temp2.w);
+
+	// Chroma = M - m
+	float C = temp2.x - m;
+
+	// Value = M
+	float V = temp2.x;
+
+	return vec3(
+		abs(temp2.z + (temp2.w - temp2.y) / (6.0 * C + epsilon)), // Hue
+		C / (temp2.x + epsilon), // Saturation
+		V); // Value
+}
+
+vec3 convertHue2RGB(float hue)
+{
+	float r = abs(hue * 6.0 - 3.0) - 1.0;
+	float g = 2.0 - abs(hue * 6.0 - 2.0);
+	float b = 2.0 - abs(hue * 6.0 - 4.0);
+	return clamp(vec3(r, g, b), 0.0, 1.0);
+}
+
+vec3 convertHSV2RGB(vec3 hsv)
+{
+	vec3 rgb = convertHue2RGB(hsv.x);
+	float c = hsv.z * hsv.y;
+	return rgb * c + hsv.z - c;
+}
+#endif // !defined(DRAW_MODE_silhouette) && (defined(ENABLE_color))
+
+const vec2 kCenter = vec2(0.5, 0.5);
+
+void main()
+{
+	#if !(defined(DRAW_MODE_line) || defined(DRAW_MODE_background))
+	vec2 texcoord0 = v_texCoord;
+
+	#ifdef ENABLE_mosaic
+	texcoord0 = fract(u_mosaic * texcoord0);
+	#endif // ENABLE_mosaic
+
+	#ifdef ENABLE_pixelate
+	{
+		// TODO: clean up "pixel" edges
+		vec2 pixelTexelSize = u_skinSize / u_pixelate;
+		texcoord0 = (floor(texcoord0 * pixelTexelSize) + kCenter) / pixelTexelSize;
+	}
+	#endif // ENABLE_pixelate
+
+	#ifdef ENABLE_whirl
+	{
+		const float kRadius = 0.5;
+		vec2 offset = texcoord0 - kCenter;
+		float offsetMagnitude = length(offset);
+		float whirlFactor = max(1.0 - (offsetMagnitude / kRadius), 0.0);
+		float whirlActual = u_whirl * whirlFactor * whirlFactor;
+		float sinWhirl = sin(whirlActual);
+		float cosWhirl = cos(whirlActual);
+		mat2 rotationMatrix = mat2(
+			cosWhirl, -sinWhirl,
+			sinWhirl, cosWhirl
+		);
+
+		texcoord0 = rotationMatrix * offset + kCenter;
+	}
+	#endif // ENABLE_whirl
+
+	#ifdef ENABLE_fisheye
+	{
+		vec2 vec = (texcoord0 - kCenter) / kCenter;
+		float vecLength = length(vec);
+		float r = pow(min(vecLength, 1.0), u_fisheye) * max(1.0, vecLength);
+		vec2 unit = vec / vecLength;
+
+		texcoord0 = kCenter + r * unit * kCenter;
+	}
+	#endif // ENABLE_fisheye
+
+	gl_FragColor = texture2D(u_skin, texcoord0);
+
+	#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 ENABLE_color
+	{
+		vec3 hsv = convertRGB2HSV(gl_FragColor.xyz);
+
+		// this code forces grayscale values to be slightly saturated
+		// so that some slight change of hue will be visible
+		const float minLightness = 0.11 / 2.0;
+		const float minSaturation = 0.09;
+		if (hsv.z < minLightness) hsv = vec3(0.0, 1.0, minLightness);
+		else if (hsv.y < minSaturation) hsv = vec3(0.0, minSaturation, hsv.z);
+
+		hsv.x = mod(hsv.x + u_color, 1.0);
+		if (hsv.x < 0.0) hsv.x += 1.0;
+
+		gl_FragColor.rgb = convertHSV2RGB(hsv);
+	}
+	#endif // ENABLE_color
+
+	#ifdef ENABLE_brightness
+	gl_FragColor.rgb = clamp(gl_FragColor.rgb + vec3(u_brightness), vec3(0), vec3(1));
+	#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);
+	vec3 colorMaskTolerance = vec3(u_colorMaskTolerance, u_colorMaskTolerance, u_colorMaskTolerance);
+	if (any(greaterThan(maskDistance, colorMaskTolerance)))
+	{
+		discard;
+	}
+	#endif // DRAW_MODE_colorMask
+	#endif // DRAW_MODE_silhouette
+
+	#ifdef DRAW_MODE_straightAlpha
+	// Un-premultiply alpha.
+	gl_FragColor.rgb /= gl_FragColor.a + epsilon;
+	#endif
+
+	#endif // !(defined(DRAW_MODE_line) || defined(DRAW_MODE_background))
+
+	#ifdef DRAW_MODE_line
+	// Maaaaagic antialiased-line-with-round-caps shader.
+
+	// "along-the-lineness". This increases parallel to the line.
+	// It goes from negative before the start point, to 0.5 through the start to the end, then ramps up again
+	// past the end point.
+	float d = ((v_texCoord.x - clamp(v_texCoord.x, 0.0, u_lineLength)) * 0.5) + 0.5;
+
+	// Distance from (0.5, 0.5) to (d, the perpendicular coordinate). When we're in the middle of the line,
+	// d will be 0.5, so the distance will be 0 at points close to the line and will grow at points further from it.
+	// For the "caps", d will ramp down/up, giving us rounding.
+	// See https://www.youtube.com/watch?v=PMltMdi1Wzg for a rough outline of the technique used to round the lines.
+	float line = distance(vec2(0.5), vec2(d, v_texCoord.y)) * 2.0;
+	// Expand out the line by its thickness.
+	line -= ((u_lineThickness - 1.0) * 0.5);
+	// Because "distance to the center of the line" decreases the closer we get to the line, but we want more opacity
+	// the closer we are to the line, invert it.
+	gl_FragColor = u_lineColor * clamp(1.0 - line, 0.0, 1.0);
+	#endif // DRAW_MODE_line
+
+	#ifdef DRAW_MODE_background
+	gl_FragColor = u_backgroundColor;
+	#endif
+}

package/src/shaders/sprite.vert

@@ -0,0 +1,75 @@
+precision mediump float;
+
+#ifdef DRAW_MODE_line
+uniform vec2 u_stageSize;
+uniform float u_lineThickness;
+uniform float u_lineLength;
+// The X and Y components of u_penPoints hold the first pen point. The Z and W components hold the difference between
+// the second pen point and the first. This is done because calculating the difference in the shader leads to floating-
+// point error when both points have large-ish coordinates.
+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
+
+#if !(defined(DRAW_MODE_line) || defined(DRAW_MODE_background))
+uniform mat4 u_projectionMatrix;
+uniform mat4 u_modelMatrix;
+attribute vec2 a_texCoord;
+#endif
+
+attribute vec2 a_position;
+
+varying vec2 v_texCoord;
+
+void main() {
+	#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;
+
+	// The X coordinate increases along the length of the line. It's 0 at the center of the origin point
+	// and is in pixel-space (so at n pixels along the line, its value is n).
+	v_texCoord.x = mix(0.0, u_lineLength + (expandedRadius * 2.0), a_position.x) - expandedRadius;
+	// The Y coordinate is perpendicular to the line. It's also in pixel-space.
+	v_texCoord.y = ((a_position.y - 0.5) * expandedRadius) + 0.5;
+
+	position.x *= u_lineLength + (2.0 * expandedRadius);
+	position.y *= 2.0 * expandedRadius;
+
+	// 1. Center around first pen point
+	position -= expandedRadius;
+
+	// 2. Rotate quad to line angle
+	vec2 pointDiff = u_penPoints.zw;
+	// Ensure line has a nonzero length so it's rendered properly
+	// As long as either component is nonzero, the line length will be nonzero
+	// If the line is zero-length, give it a bit of horizontal length
+	pointDiff.x = (abs(pointDiff.x) < epsilon && abs(pointDiff.y) < 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
+	// pointDiff can hold large values so we must divide by u_lineLength instead of calling GLSL's normalize function:
+	// https://asawicki.info/news_1596_watch_out_for_reduced_precision_normalizelength_in_opengl_es
+	vec2 normalized = pointDiff / max(u_lineLength, epsilon);
+	position = mat2(normalized.x, normalized.y, -normalized.y, normalized.x) * position;
+
+	// 3. Translate quad
+	position += u_penPoints.xy;
+
+	// 4. Apply view transform
+	position *= 2.0 / u_stageSize;
+	gl_Position = vec4(position, 0, 1);
+	#elif defined(DRAW_MODE_background)
+	gl_Position = vec4(a_position * 2.0, 0, 1);
+	#else
+	gl_Position = u_projectionMatrix * u_modelMatrix * vec4(a_position, 0, 1);
+	v_texCoord = a_texCoord;
+	#endif
+}

package/src/util/canvas-measurement-provider.js

@@ -0,0 +1,41 @@
+class CanvasMeasurementProvider {
+    /**
+     * @param {CanvasRenderingContext2D} ctx - provides a canvas rendering context
+     * with 'font' set to the text style of the text to be wrapped.
+     */
+    constructor (ctx) {
+        this._ctx = ctx;
+        this._cache = {};
+    }
+
+
+    // We don't need to set up or tear down anything here. Should these be removed altogether?
+
+    /**
+     * Called by the TextWrapper before a batch of zero or more calls to measureText().
+     */
+    beginMeasurementSession () {
+        
+    }
+
+    /**
+     * Called by the TextWrapper after a batch of zero or more calls to measureText().
+     */
+    endMeasurementSession () {
+        
+    }
+
+    /**
+     * Measure a whole string as one unit.
+     * @param {string} text - the text to measure.
+     * @returns {number} - the length of the string.
+     */
+    measureText (text) {
+        if (!this._cache[text]) {
+            this._cache[text] = this._ctx.measureText(text).width;
+        }
+        return this._cache[text];
+    }
+}
+
+module.exports = CanvasMeasurementProvider;

package/src/util/color-conversions.js

@@ -0,0 +1,97 @@
+/**
+ * Converts an RGB color value to HSV. Conversion formula
+ * adapted from http://lolengine.net/blog/2013/01/13/fast-rgb-to-hsv.
+ * Assumes r, g, and b are in the range [0, 255] and
+ * returns h, s, and v in the range [0, 1].
+ *
+ * @param   {Array<number>} rgb   The RGB color value
+ * @param   {number}        rgb.r The red color value
+ * @param   {number}        rgb.g The green color value
+ * @param   {number}        rgb.b The blue color value
+ * @param   {Array<number>} dst   The array to store the HSV values in
+ * @return  {Array<number>}       The `dst` array passed in
+ */
+const rgbToHsv = ([r, g, b], dst) => {
+    let K = 0.0;
+
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    let tmp = 0;
+
+    if (g < b) {
+        tmp = g;
+        g = b;
+        b = tmp;
+
+        K = -1;
+    }
+
+    if (r < g) {
+        tmp = r;
+        r = g;
+        g = tmp;
+
+        K = (-2 / 6) - K;
+    }
+
+    const chroma = r - Math.min(g, b);
+    const h = Math.abs(K + ((g - b) / ((6 * chroma) + Number.EPSILON)));
+    const s = chroma / (r + Number.EPSILON);
+    const v = r;
+
+    dst[0] = h;
+    dst[1] = s;
+    dst[2] = v;
+
+    return dst;
+};
+
+/**
+ * Converts an HSV color value to RGB. Conversion formula
+ * adapted from https://gist.github.com/mjackson/5311256.
+ * Assumes h, s, and v are contained in the set [0, 1] and
+ * returns r, g, and b in the set [0, 255].
+ *
+ * @param   {Array<number>}                hsv The HSV color value
+ * @param   {number}                       hsv.h     The hue
+ * @param   {number}                       hsv.s     The saturation
+ * @param   {number}                       hsv.v     The value
+ * @param   {Uint8Array|Uint8ClampedArray} dst The array to store the RGB values in
+ * @return  {Uint8Array|Uint8ClampedArray}     The `dst` array passed in
+ */
+const hsvToRgb = ([h, s, v], dst) => {
+    if (s === 0) {
+        dst[0] = dst[1] = dst[2] = (v * 255) + 0.5;
+        return dst;
+    }
+
+    // keep hue in [0,1) so the `switch(i)` below only needs 6 cases (0-5)
+    h %= 1;
+    const i = (h * 6) | 0;
+    const f = (h * 6) - i;
+    const p = v * (1 - s);
+    const q = v * (1 - (s * f));
+    const t = v * (1 - (s * (1 - f)));
+
+    let r = 0;
+    let g = 0;
+    let b = 0;
+
+    switch (i) {
+    case 0: r = v; g = t; b = p; break;
+    case 1: r = q; g = v; b = p; break;
+    case 2: r = p; g = v; b = t; break;
+    case 3: r = p; g = q; b = v; break;
+    case 4: r = t; g = p; b = v; break;
+    case 5: r = v; g = p; b = q; break;
+    }
+
+    // Add 0.5 in order to round. Setting integer TypedArray elements implicitly floors.
+    dst[0] = (r * 255) + 0.5;
+    dst[1] = (g * 255) + 0.5;
+    dst[2] = (b * 255) + 0.5;
+    return dst;
+};
+
+module.exports = {rgbToHsv, hsvToRgb};

package/src/util/log.js

@@ -0,0 +1,4 @@
+const minilog = require('minilog');
+minilog.enable();
+
+module.exports = minilog('scratch-render');

package/src/util/text-wrapper.js

@@ -0,0 +1,112 @@
+const LineBreaker = require('!ify-loader!linebreak');
+const GraphemeBreaker = require('!ify-loader!grapheme-breaker');
+
+/**
+ * Tell this text wrapper to use a specific measurement provider.
+ * @typedef {object} MeasurementProvider - the new measurement provider.
+ * @property {Function} beginMeasurementSession - this will be called before a batch of measurements are made.
+ *      Optionally, this function may return an object to be provided to the endMeasurementSession function.
+ * @property {Function} measureText - this will be called each time a piece of text must be measured.
+ * @property {Function} endMeasurementSession - this will be called after a batch of measurements is finished.
+ *      It will be passed whatever value beginMeasurementSession returned, if any.
+ */
+
+/**
+ * Utility to wrap text across several lines, respecting Unicode grapheme clusters and, when possible, Unicode line
+ * break opportunities.
+ * Reference material:
+ * - Unicode Standard Annex #14: http://unicode.org/reports/tr14/
+ * - Unicode Standard Annex #29: http://unicode.org/reports/tr29/
+ * - "JavaScript has a Unicode problem" by Mathias Bynens: https://mathiasbynens.be/notes/javascript-unicode
+ */
+class TextWrapper {
+    /**
+     * Construct a text wrapper which will measure text using the specified measurement provider.
+     * @param {MeasurementProvider} measurementProvider - a helper object to provide text measurement services.
+     */
+    constructor (measurementProvider) {
+        this._measurementProvider = measurementProvider;
+        this._cache = {};
+    }
+
+    /**
+     * Wrap the provided text into lines restricted to a maximum width. See Unicode Standard Annex (UAX) #14.
+     * @param {number} maxWidth - the maximum allowed width of a line.
+     * @param {string} text - the text to be wrapped. Will be split on whitespace.
+     * @returns {Array.<string>} an array containing the wrapped lines of text.
+     */
+    wrapText (maxWidth, text) {
+        // Normalize to canonical composition (see Unicode Standard Annex (UAX) #15)
+        text = text.normalize();
+
+        const cacheKey = `${maxWidth}-${text}`;
+        if (this._cache[cacheKey]) {
+            return this._cache[cacheKey];
+        }
+
+        const measurementSession = this._measurementProvider.beginMeasurementSession();
+
+        const breaker = new LineBreaker(text);
+        let lastPosition = 0;
+        let nextBreak;
+        let currentLine = null;
+        const lines = [];
+
+        while ((nextBreak = breaker.nextBreak())) {
+            const word = text.slice(lastPosition, nextBreak.position).replace(/\n+$/, '');
+
+            let proposedLine = (currentLine || '').concat(word);
+            let proposedLineWidth = this._measurementProvider.measureText(proposedLine);
+
+            if (proposedLineWidth > maxWidth) {
+                // The next word won't fit on this line. Will it fit on a line by itself?
+                const wordWidth = this._measurementProvider.measureText(word);
+                if (wordWidth > maxWidth) {
+                    // The next word can't even fit on a line by itself. Consume it one grapheme cluster at a time.
+                    let lastCluster = 0;
+                    let nextCluster;
+                    while (lastCluster !== (nextCluster = GraphemeBreaker.nextBreak(word, lastCluster))) {
+                        const cluster = word.substring(lastCluster, nextCluster);
+                        proposedLine = (currentLine || '').concat(cluster);
+                        proposedLineWidth = this._measurementProvider.measureText(proposedLine);
+                        if ((currentLine === null) || (proposedLineWidth <= maxWidth)) {
+                            // first cluster of a new line or the cluster fits
+                            currentLine = proposedLine;
+                        } else {
+                            // no more can fit
+                            lines.push(currentLine);
+                            currentLine = cluster;
+                        }
+                        lastCluster = nextCluster;
+                    }
+                } else {
+                    // The next word can fit on the next line. Finish the current line and move on.
+                    if (currentLine !== null) lines.push(currentLine);
+                    currentLine = word;
+                }
+            } else {
+                // The next word fits on this line. Just keep going.
+                currentLine = proposedLine;
+            }
+
+            // Did we find a \n or similar?
+            if (nextBreak.required) {
+                if (currentLine !== null) lines.push(currentLine);
+                currentLine = null;
+            }
+
+            lastPosition = nextBreak.position;
+        }
+
+        currentLine = currentLine || '';
+        if (currentLine.length > 0 || lines.length === 0) {
+            lines.push(currentLine);
+        }
+
+        this._cache[cacheKey] = lines;
+        this._measurementProvider.endMeasurementSession(measurementSession);
+        return lines;
+    }
+}
+
+module.exports = TextWrapper;