fragment-tools 0.1.13 → 0.1.15

package/src/client/app/lib/canvas-recorder/utils.js

@@ -1,22 +1,38 @@
-const supportedEncodings = [
-    'image/png',
-    'image/jpeg',
-    'image/webp'
-];
+import { changeDpiDataUrl } from 'changedpi';
 
-export function exportCanvas (canvas, { encoding = 'image/png', encodingQuality = 0.92 } = {}) {
-    if (!supportedEncodings.includes(encoding)) throw new Error(`Invalid canvas encoding ${encoding}`);
+const supportedEncodings = ['image/png', 'image/jpeg', 'image/webp'];
 
-    let extension = (encoding.split('/')[1] || '').replace(/jpeg/i, 'jpg');
-    if (extension) {
-        extension = `.${extension}`.toLowerCase();
-    }
+/**
+ * Create a Data URL from a canvas
+ * @param {HTMLCanvasElement} canvas
+ * @param {object} [options]
+ * @param {string} [encoding="image/png"]
+ * @param {number} [encodingQuality=0.92]
+ * @param {number} [pixelsPerInch=72]
+ * @returns {object} result
+ * @returns {string} result.dataURL
+ * @returns {string} result.extension
+ */
+export function exportCanvas(
+	canvas,
+	{ encoding = 'image/png', encodingQuality = 0.92, pixelsPerInch = 72 } = {},
+) {
+	if (!supportedEncodings.includes(encoding))
+		throw new Error(`Invalid canvas encoding ${encoding}`);
 
-    let dataURL = canvas.toDataURL(encoding, encodingQuality); 
+	let extension = (encoding.split('/')[1] || '').replace(/jpeg/i, 'jpg');
+	if (extension) {
+		extension = `.${extension}`.toLowerCase();
+	}
 
-    return {
-        extension,
-        type: encoding,
-        dataURL
-    };
+	let dataURL = canvas.toDataURL(encoding, encodingQuality);
+
+	if (encoding !== 'image/webp' && pixelsPerInch !== 72) {
+		dataURL = changeDpiDataUrl(dataURL, pixelsPerInch);
+	}
+
+	return {
+		extension,
+		dataURL,
+	};
 }

package/src/client/app/lib/gl/Geometry.js

@@ -1,10 +1,13 @@
 class Geometry {
-	constructor(gl, {
-		attributes = {
-            position: { data: [-1, -1, 3, -1, -1, 3] },
-            uv: { data: [0, 0, 2, 0, 0, 2] }
-        }
-	} = {}) {
+	constructor(
+		gl,
+		{
+			attributes = {
+				position: { data: [-1, -1, 3, -1, -1, 3] },
+				uv: { data: [0, 0, 2, 0, 0, 2] },
+			},
+		} = {},
+	) {
 		this.gl = gl;
 		this.attributes = attributes;
 		this.buffers = Object.keys(attributes).reduce((all, name) => {
@@ -14,7 +17,7 @@ class Geometry {
 			gl.bufferData(
 				gl.ARRAY_BUFFER,
 				new Float32Array(attributes[name].data),
-				gl.STATIC_DRAW
+				gl.STATIC_DRAW,
 			);
 
 			all[name] = buffer;
@@ -24,7 +27,7 @@ class Geometry {
 	}
 
 	destroy() {
-		Object.keys(this.buffers).forEach(name => {
+		Object.keys(this.buffers).forEach((name) => {
 			let buffer = this.buffers[name];
 			this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
 			this.gl.bufferData(this.gl.ARRAY_BUFFER, 1, this.gl.STATIC_DRAW);

package/src/client/app/lib/gl/Program.js

@@ -1,20 +1,22 @@
 function createShader(gl, type, source) {
-    let shader = gl.createShader(type);
-    gl.shaderSource(shader, source);
-    gl.compileShader(shader);
-    let success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
-    
-    if (success) {
-        return shader;
-    }
+	let shader = gl.createShader(type);
+	gl.shaderSource(shader, source);
+	gl.compileShader(shader);
+	let success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+
+	if (success) {
+		return shader;
+	}
 
-	console.warn(`fragment-gl.Program: Shader Info Log: ${gl.getShaderInfoLog(shader)}`);
-    gl.deleteShader(shader);
+	console.warn(
+		`fragment-gl.Program: Shader Info Log: ${gl.getShaderInfoLog(shader)}`,
+	);
+	gl.deleteShader(shader);
 }
 
 let P_ID = 0;
 
-let defaultVertex = /* glsl */`
+let defaultVertex = /* glsl */ `
     attribute vec4 position;
     attribute vec2 uv;
 
@@ -26,7 +28,7 @@ let defaultVertex = /* glsl */`
     }
 `;
 
-let defaultFragment = /* glsl */`
+let defaultFragment = /* glsl */ `
     precision highp float;
 
     varying vec2 vUv;
@@ -37,15 +39,21 @@ let defaultFragment = /* glsl */`
 `;
 
 class Program {
-
-	constructor(gl, { vertex = defaultVertex, fragment = defaultFragment, uniforms = {} } = {}) {
+	constructor(
+		gl,
+		{
+			vertex = defaultVertex,
+			fragment = defaultFragment,
+			uniforms = {},
+		} = {},
+	) {
 		this.gl = gl;
 
 		this.vertexShader = vertex;
 		this.fragmentShader = fragment;
 		this.uniforms = uniforms;
 		this.needsUpdate = true;
-		
+
 		this._program = gl.createProgram();
 		this.id = P_ID++;
 
@@ -64,7 +72,11 @@ class Program {
 
 	set fragmentShader(text) {
 		this.fragment = text;
-		this._fragmentShader = createShader(this.gl, this.gl.FRAGMENT_SHADER, text);
+		this._fragmentShader = createShader(
+			this.gl,
+			this.gl.FRAGMENT_SHADER,
+			text,
+		);
 		this.needsUpdate = true;
 	}
 
@@ -91,12 +103,16 @@ class Program {
 			${fragmentLog}
 			`);
 		} else if (programLog !== '') {
-			console.warn(`fragment-gl.Program: Program Info Log: ${programLog}`);
+			console.warn(
+				`fragment-gl.Program: Program Info Log: ${programLog}`,
+			);
 		}
 
 		let success = gl.getProgramParameter(_program, gl.LINK_STATUS);
 		if (!success) {
-			console.warn(`fragment-gl.Program: Program Info Log: ${gl.getProgramInfoLog(_program)}`);
+			console.warn(
+				`fragment-gl.Program: Program Info Log: ${gl.getProgramInfoLog(_program)}`,
+			);
 			gl.deleteProgram(_program);
 		}
 
@@ -106,7 +122,10 @@ class Program {
 			return all;
 		}, {});
 
-		let attributesCount = gl.getProgramParameter(_program, gl.ACTIVE_ATTRIBUTES);
+		let attributesCount = gl.getProgramParameter(
+			_program,
+			gl.ACTIVE_ATTRIBUTES,
+		);
 		let attributesLocations = {};
 
 		for (let aIndex = 0; aIndex < attributesCount; aIndex++) {

package/src/client/app/lib/gl/Renderer.js

@@ -1,160 +1,167 @@
 class Renderer {
-  constructor({
-    canvas = document.createElement("canvas"),
-    antialias = false,
-    alpha = true,
-    depth = false,
-    stencil = false,
-    premultipliedAlpha = false,
-    pixelRatio = window.devicePixelRatio,
-    webgl = 2,
-  }) {
-    let gl;
-    let attributes = {
-      depth,
-      stencil,
-      antialias,
-      alpha,
-      premultipliedAlpha,
-      preserveDrawingBuffer: true,
-    };
-
-    this.canvas = canvas;
-
-    if (webgl === 2) gl = canvas.getContext("webgl2", attributes);
-    if (!gl) {
-      gl =
-        canvas.getContext("webgl", attributes) ||
-        canvas.getContext("experimental-webgl", attributes);
-    }
-
-    this.gl = gl;
-
-    this.state = {
-      activeTextureUnit: 0,
-      textureUnits: [],
-      flipY: false,
-      viewport: { width: 0, height: 0 },
-      pixelRatio,
-      width: 0,
-      height: 0,
-    };
-    this.gl.state = this.state;
-  }
-
-  render({
-    geometry,
-    program,
-    primitiveType = this.gl.TRIANGLES,
-    offset = 0,
-    count = 3,
-  }) {
-    if (program.needsUpdate) {
-      program.compile();
-    }
-
-    this.gl.clear(this.gl.COLOR_BUFFER_BIT);
-
-    this.gl.useProgram(program._program);
-
-    for (let attributeName in program.attributesLocations) {
-      let location = program.attributesLocations[attributeName];
-      let buffer = geometry.buffers[attributeName];
-
-      this.gl.enableVertexAttribArray(location);
-      this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
-
-      const size = 2; // 2 components per iteration
-      const type = this.gl.FLOAT; // the data is 32bit floats
-      const normalize = false; // don't normalize the data
-      const stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position
-      const bufferOffset = 0; // start at the beginning of the buffer
-      this.gl.vertexAttribPointer(
-        location,
-        size,
-        type,
-        normalize,
-        stride,
-        bufferOffset
-      );
-    }
-
-    let textureUnit = -1;
-
-    for (let uniformName in program.uniforms) {
-      let location = program.uniformsLocations[uniformName];
-      if (location) {
-        let uniform = program.uniforms[uniformName];
-
-        if (uniform.type === "float") {
-          this.gl.uniform1f(location, uniform.value);
-        } else if (uniform.type === "vec2") {
-          this.gl.uniform2f(location, uniform.value[0], uniform.value[1]);
-        } else if (uniform.type === "vec3") {
-          this.gl.uniform3f(
-            location,
-            uniform.value[0],
-            uniform.value[1],
-            uniform.value[2]
-          );
-        } else if (uniform.type === "vec4") {
-          this.gl.uniform4f(
-            location,
-            uniform.value[0],
-            uniform.value[1],
-            uniform.value[2],
-            uniform.value[3]
-          );
-        } else if (uniform.type === "sampler2D") {
-          if (uniform.value) {
-            textureUnit = textureUnit + 1;
-            uniform.value.update(textureUnit);
-
-            this.gl.uniform1i(location, textureUnit);
-          }
-        }
-      }
-    }
-
-    this.gl.drawArrays(primitiveType, offset, count);
-  }
-
-  setPixelRatio(pixelRatio = this.state.pixelRatio) {
-    if (this.state.pixelRatio !== pixelRatio) {
-      this.state.pixelRatio = pixelRatio;
-      this.setSize();
-    }
-  }
-
-  setSize({ width = this.state.width, height = this.state.height } = {}) {
-    this.state.width = width;
-    this.state.height = height;
-
-    this.canvas.width = this.state.width * this.state.pixelRatio;
-    this.canvas.height = this.state.height * this.state.pixelRatio;
-
-    this.setViewport();
-  }
-
-  setViewport({ width = this.state.width, height = this.state.height } = {}) {
-    let w = Math.floor(width * this.state.pixelRatio);
-    let h = Math.floor(height * this.state.pixelRatio);
-
-    if (this.state.viewport.width !== w || this.state.viewport.height !== h) {
-      this.gl.viewport(0, 0, w, h);
-
-      this.state.viewport.width = w;
-      this.state.viewport.height = h;
-    }
-  }
-
-  destroy() {
-    let extension = this.gl.getExtension("WEBGL_lose_context");
-
-    if (extension) {
-      extension.loseContext();
-    }
-  }
+	constructor({
+		canvas = document.createElement('canvas'),
+		antialias = false,
+		alpha = true,
+		depth = false,
+		stencil = false,
+		premultipliedAlpha = false,
+		pixelRatio = window.devicePixelRatio,
+		webgl = 2,
+	}) {
+		let gl;
+		let attributes = {
+			depth,
+			stencil,
+			antialias,
+			alpha,
+			premultipliedAlpha,
+			preserveDrawingBuffer: true,
+		};
+
+		this.canvas = canvas;
+
+		if (webgl === 2) gl = canvas.getContext('webgl2', attributes);
+		if (!gl) {
+			gl =
+				canvas.getContext('webgl', attributes) ||
+				canvas.getContext('experimental-webgl', attributes);
+		}
+
+		this.gl = gl;
+
+		this.state = {
+			activeTextureUnit: 0,
+			textureUnits: [],
+			flipY: false,
+			viewport: { width: 0, height: 0 },
+			pixelRatio,
+			width: 0,
+			height: 0,
+		};
+		this.gl.state = this.state;
+	}
+
+	render({
+		geometry,
+		program,
+		primitiveType = this.gl.TRIANGLES,
+		offset = 0,
+		count = 3,
+	}) {
+		if (program.needsUpdate) {
+			program.compile();
+		}
+
+		this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+
+		this.gl.useProgram(program._program);
+
+		for (let attributeName in program.attributesLocations) {
+			let location = program.attributesLocations[attributeName];
+			let buffer = geometry.buffers[attributeName];
+
+			this.gl.enableVertexAttribArray(location);
+			this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
+
+			const size = 2; // 2 components per iteration
+			const type = this.gl.FLOAT; // the data is 32bit floats
+			const normalize = false; // don't normalize the data
+			const stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position
+			const bufferOffset = 0; // start at the beginning of the buffer
+			this.gl.vertexAttribPointer(
+				location,
+				size,
+				type,
+				normalize,
+				stride,
+				bufferOffset,
+			);
+		}
+
+		let textureUnit = -1;
+
+		for (let uniformName in program.uniforms) {
+			let location = program.uniformsLocations[uniformName];
+			if (location) {
+				let uniform = program.uniforms[uniformName];
+
+				if (uniform.type === 'float') {
+					this.gl.uniform1f(location, uniform.value);
+				} else if (uniform.type === 'vec2') {
+					this.gl.uniform2f(
+						location,
+						uniform.value[0],
+						uniform.value[1],
+					);
+				} else if (uniform.type === 'vec3') {
+					this.gl.uniform3f(
+						location,
+						uniform.value[0],
+						uniform.value[1],
+						uniform.value[2],
+					);
+				} else if (uniform.type === 'vec4') {
+					this.gl.uniform4f(
+						location,
+						uniform.value[0],
+						uniform.value[1],
+						uniform.value[2],
+						uniform.value[3],
+					);
+				} else if (uniform.type === 'sampler2D') {
+					if (uniform.value) {
+						textureUnit = textureUnit + 1;
+						uniform.value.update(textureUnit);
+
+						this.gl.uniform1i(location, textureUnit);
+					}
+				}
+			}
+		}
+
+		this.gl.drawArrays(primitiveType, offset, count);
+	}
+
+	setPixelRatio(pixelRatio = this.state.pixelRatio) {
+		if (this.state.pixelRatio !== pixelRatio) {
+			this.state.pixelRatio = pixelRatio;
+			this.setSize();
+		}
+	}
+
+	setSize({ width = this.state.width, height = this.state.height } = {}) {
+		this.state.width = width;
+		this.state.height = height;
+
+		this.canvas.width = this.state.width * this.state.pixelRatio;
+		this.canvas.height = this.state.height * this.state.pixelRatio;
+
+		this.setViewport();
+	}
+
+	setViewport({ width = this.state.width, height = this.state.height } = {}) {
+		let w = Math.floor(width * this.state.pixelRatio);
+		let h = Math.floor(height * this.state.pixelRatio);
+
+		if (
+			this.state.viewport.width !== w ||
+			this.state.viewport.height !== h
+		) {
+			this.gl.viewport(0, 0, w, h);
+
+			this.state.viewport.width = w;
+			this.state.viewport.height = h;
+		}
+	}
+
+	destroy() {
+		let extension = this.gl.getExtension('WEBGL_lose_context');
+
+		if (extension) {
+			extension.loseContext();
+		}
+	}
 }
 
 export default Renderer;