fragment-tools 0.1.0

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

@@ -0,0 +1,148 @@
+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();
+        }
+    }
+}
+
+export default Renderer;

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

@@ -0,0 +1,114 @@
+import { isPowerOf2 } from "./utils";
+
+const emptyPixel = new Uint8Array([0, 0, 0, 0]);
+
+let TEXTURE_ID = 0;
+
+class Texture {
+	constructor(gl, {
+		image,
+		name = '',
+		target = gl.TEXTURE_2D,
+		type = gl.UNSIGNED_BYTE,
+		wrapS = gl.CLAMP_TO_EDGE,
+		wrapT = gl.CLAMP_TO_EDGE,
+		generateMipmaps = true,
+		format = gl.RGBA,
+		internalFormat = format,
+		minFilter = generateMipmaps ? gl.NEAREST_MIPMAP_LINEAR : gl.LINEAR,
+		magFilter = gl.LINEAR,
+		// premultiplyAlpha = false,
+		// unpackAlignment = 4,
+		flipY = target === gl.TEXTURE_2D ? true : false,
+		// width = image ? image.width : null,
+		// height = image ? image.height : null
+	} = {}) {
+		this.gl = gl;
+		this.image = image;
+		this.name = name;
+		this.target = target;
+		this.type = type;
+		this.wrapS = wrapS;
+		this.wrapT = wrapT;
+		this.generateMipmaps = generateMipmaps;
+		this.format = format;
+		this.internalFormat = internalFormat;
+		this.minFilter = minFilter;
+		this.magFilter = magFilter;
+		this.flipY = flipY;
+		this.needsUpdate = true;
+
+		this.glTexture = this.gl.createTexture();
+		this.id = TEXTURE_ID++;
+	}
+
+    bind() {
+        if (this.gl.state.textureUnits[this.gl.state.activeTextureUnit] === this.id) return;
+
+        this.gl.bindTexture(this.target, this.glTexture);
+        this.gl.state.textureUnits[this.gl.state.activeTextureUnit] = this.id;
+    }
+
+    update(textureUnit = 0) {
+        if (this.needsUpdate || this.gl.state.textureUnits[textureUnit] !== this.id) {
+            if (this.gl.state.activeTextureUnit !== textureUnit) {
+                this.gl.state.activeTextureUnit = textureUnit;
+                this.gl.activeTexture(this.gl.TEXTURE0 + textureUnit);
+            }
+
+            this.bind();
+        }
+
+        if (!this.needsUpdate) return;
+        
+        this.needsUpdate = false;
+
+        if (this.flipY !== this.gl.state.flipY) {
+            this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL, this.flipY);
+            this.gl.state.flipY = this.flipY;
+        }
+
+        if (this.image && this.generateMipmaps) {
+            if (!isPowerOf2(this.image.width) || !isPowerOf2(this.image.height)) {
+                this.generateMipmaps = false;
+
+                this.wrapS = this.wrapT = this.gl.CLAMP_TO_EDGE;
+                this.minFilter = this.gl.LINEAR;
+            }
+        }
+
+        this.gl.texParameteri(this.target, this.gl.TEXTURE_WRAP_S, this.wrapS);
+        this.gl.texParameteri(this.target, this.gl.TEXTURE_WRAP_T, this.wrapT);
+        this.gl.texParameteri(this.target, this.gl.TEXTURE_MIN_FILTER, this.minFilter);
+        this.gl.texParameteri(this.target, this.gl.TEXTURE_MAG_FILTER, this.magFilter);
+
+        if (this.image) {
+            this.gl.texImage2D(this.target, 0, this.internalFormat, this.format, this.type, this.image);
+            
+            if (this.generateMipmaps) {
+                this.gl.generateMipmap(this.target);
+            }
+        } else {
+            this.gl.texImage2D(
+                this.target,
+                0,
+                this.gl.RGBA,
+                1,
+                1,
+                0,
+                this.gl.RGBA,
+                this.gl.UNSIGNED_BYTE,
+                emptyPixel
+            );
+        }
+    }
+
+    destroy() {
+        this.gl.deleteTexture(this.glTexture);
+        this.glTexture = null;
+        this.gl = null;
+		this.image = null;
+    }
+}
+
+export default Texture;

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

@@ -0,0 +1,109 @@
+import Geometry from "./Geometry.js";
+import Texture from "./Texture.js";
+import Program, { defaultFragment, defaultVertex } from "./Program.js";
+import Renderer from "./Renderer.js";
+
+export { Geometry, Texture, Program, Renderer };
+
+export function fragment({
+	canvas = document.createElement('canvas'),
+	shader = defaultFragment,
+	uniforms = {},
+}) {
+	let _fragmentShader = shader;
+	let _vertexShader = defaultVertex;
+	let _uniforms = uniforms;
+
+	let renderer = new Renderer({
+		canvas,
+	});
+
+	let geometry = new Geometry(renderer.gl);
+	let program = new Program(renderer.gl, {
+		fragment: shader,
+		uniforms,
+	});
+
+	function render() {
+		renderer.render({ geometry, program });
+	}
+
+	let w, h, pr;
+
+	function resize({ width = w, height = h, pixelRatio = pr }) {
+		renderer.setPixelRatio(pixelRatio);
+		renderer.setSize({ width, height });
+
+		w = width;
+		h = height;
+		pr = pixelRatio;
+	}
+
+	function destroy() {
+		geometry.destroy();
+		renderer.destroy();
+		uniforms = null;
+	}
+
+	const frag = {
+		gl: renderer.gl,
+		program,
+
+		texture: (params = {}) => new Texture(gl, params),
+
+		resize,
+		render,
+		destroy,
+	};
+
+	Object.defineProperty(frag, 'shader', {
+		enumerable: true,
+    	configurable: true,
+		get: () => {
+			return _fragmentShader;
+		},
+		set: (v) => {
+			_fragmentShader = v;
+			program.fragmentShader = _fragmentShader;
+		}
+	});
+
+	Object.defineProperty(frag, 'fragmentShader', {
+		enumerable: true,
+    	configurable: true,
+		get: () => {
+			return _fragmentShader;
+		},
+		set: (v) => {
+			_fragmentShader = v;
+			program.fragmentShader = _fragmentShader;
+		}
+	});
+
+	Object.defineProperty(frag, 'vertexShader', {
+		enumerable: true,
+    	configurable: true,
+		get: () => {
+			return _vertexShader;
+		},
+		set: (v) => {
+			_vertexShader = v;
+			program.vertexShader = _vertexShader;
+		}
+	});
+
+	Object.defineProperty(frag, 'uniforms', {
+		enumerable: true,
+    	configurable: true,
+		get: () => {
+			return _uniforms;
+		},
+		set: (v) => {
+			_uniforms = v;
+			program.uniforms = _uniforms;
+			program.needsUpdate = true;
+		}
+	});
+
+	return frag;
+}

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

@@ -0,0 +1,5 @@
+
+
+export function isPowerOf2(value) {
+    return (value & (value - 1)) === 0;
+}

package/src/client/app/lib/helpers/frameDebounce.js

@@ -0,0 +1,40 @@
+/**
+ * Run a function maximum once per frame
+ * @param {Function} fn 
+ * @param {Number} timeout 
+ * @returns {Function} debounced function
+ */
+export default function frameDebounce(fn, timeout = 100){
+    let lastTime = performance.now();
+    let needCall = false;
+    let _raf;
+    let a;
+
+    function loop() {
+        const now = performance.now();
+
+        if (needCall) {
+            needCall = false;
+            lastTime = now;
+            
+            fn.apply(this, a);
+            lastTime = now;
+        }
+
+        if (now - lastTime > timeout && _raf > -1) {
+            cancelAnimationFrame(_raf);
+            _raf = null;
+        } else {
+            _raf = requestAnimationFrame(loop);
+        }
+    }
+
+    return (...args) => {
+        needCall = true;
+        a = args;
+
+        if (!_raf) {
+            loop();
+        }
+    };
+}

package/src/client/app/lib/loader/index.js

@@ -0,0 +1,20 @@
+import { loadImage } from "./loadImage";
+
+function getFileExtension(path) {
+    return path.match(/[^\\/]\.([^.\\/]+)$/);
+}
+
+function getLoader(extension) {
+    if (["jpeg", "jpg", "gif", "png", "webp"].includes(extension)) {
+        return loadImage;
+    }
+
+    return () => {};
+}
+
+export function load(url, options = { id: url }) {
+    const extension = getFileExtension(url);
+    const loader = options.loader || getLoader(extension);
+
+    return loader(url, options);
+};

package/src/client/app/lib/loader/loadImage.js

@@ -0,0 +1,19 @@
+export function loadImage(url, { id = url, img = new Image() } = {}) {
+    return new Promise((resolve, reject) => {
+        function onLoad() {
+            img.removeEventListener('load', onLoad);
+            resolve(img);
+        }
+
+        function onError(error) {
+            img.removeEventListener('load', onLoad);
+            img.removeEventListener('error', onError);
+            reject(error);
+        }
+
+        img.addEventListener('load', onLoad);
+        img.addEventListener('error', onError);
+
+        img.src = url;
+    });
+};

package/src/client/app/lib/loader/loadScript.js

@@ -0,0 +1,14 @@
+export function loadScript(src) {
+	return new Promise((resolve, reject) => {
+		const script = document.createElement('script');
+		script.onerror = (err) => {
+			reject(err);
+		};
+		script.onload = () => {
+			resolve();
+		}
+
+		script.src = src;
+		document.body.appendChild(script);
+	});
+}

package/src/client/app/lib/paper-sizes.js

@@ -0,0 +1,104 @@
+// https://github.com/mattdesl/canvas-sketch/blob/24f6bb2bbdfdfd72a698a0b8a0962ad843fb7688/lib/paper-sizes.js
+const defaultUnits = 'mm';
+
+const data = [
+	// Common Paper Sizes
+	// (Mostly North-American based)
+	[ 'postcard', 101.6, 152.4 ],
+	[ 'poster-small', 280, 430 ],
+	[ 'poster', 460, 610 ],
+	[ 'poster-large', 610, 910 ],
+	[ 'business-card', 50.8, 88.9 ],
+
+	// Photographic Print Paper Sizes
+	[ '2r', 64, 89 ],
+	[ '3r', 89, 127 ],
+	[ '4r', 102, 152 ],
+	[ '5r', 127, 178 ], // 5″x7″
+	[ '6r', 152, 203 ], // 6″x8″
+	[ '8r', 203, 254 ], // 8″x10″
+	[ '10r', 254, 305 ], // 10″x12″
+	[ '11r', 279, 356 ], // 11″x14″
+	[ '12r', 305, 381 ],
+
+	// Standard Paper Sizes
+	[ 'a0', 841, 1189 ],
+	[ 'a1', 594, 841 ],
+	[ 'a2', 420, 594 ],
+	[ 'a3', 297, 420 ],
+	[ 'a4', 210, 297 ],
+	[ 'a5', 148, 210 ],
+	[ 'a6', 105, 148 ],
+	[ 'a7', 74, 105 ],
+	[ 'a8', 52, 74 ],
+	[ 'a9', 37, 52 ],
+	[ 'a10', 26, 37 ],
+	[ '2a0', 1189, 1682 ],
+	[ '4a0', 1682, 2378 ],
+	[ 'b0', 1000, 1414 ],
+	[ 'b1', 707, 1000 ],
+	[ 'b1+', 720, 1020 ],
+	[ 'b2', 500, 707 ],
+	[ 'b2+', 520, 720 ],
+	[ 'b3', 353, 500 ],
+	[ 'b4', 250, 353 ],
+	[ 'b5', 176, 250 ],
+	[ 'b6', 125, 176 ],
+	[ 'b7', 88, 125 ],
+	[ 'b8', 62, 88 ],
+	[ 'b9', 44, 62 ],
+	[ 'b10', 31, 44 ],
+	[ 'b11', 22, 32 ],
+	[ 'b12', 16, 22 ],
+	[ 'c0', 917, 1297 ],
+	[ 'c1', 648, 917 ],
+	[ 'c2', 458, 648 ],
+	[ 'c3', 324, 458 ],
+	[ 'c4', 229, 324 ],
+	[ 'c5', 162, 229 ],
+	[ 'c6', 114, 162 ],
+	[ 'c7', 81, 114 ],
+	[ 'c8', 57, 81 ],
+	[ 'c9', 40, 57 ],
+	[ 'c10', 28, 40 ],
+	[ 'c11', 22, 32 ],
+	[ 'c12', 16, 22 ],
+
+	// Use inches for North American sizes,
+	// as it produces less float precision errors
+	[ 'half-letter', 5.5, 8.5, 'in' ],
+	[ 'letter', 8.5, 11, 'in' ],
+	[ 'legal', 8.5, 14, 'in' ],
+	[ 'junior-legal', 5, 8, 'in' ],
+	[ 'ledger', 11, 17, 'in' ],
+	[ 'tabloid', 11, 17, 'in' ],
+	[ 'ansi-a', 8.5, 11.0, 'in' ],
+	[ 'ansi-b', 11.0, 17.0, 'in' ],
+	[ 'ansi-c', 17.0, 22.0, 'in' ],
+	[ 'ansi-d', 22.0, 34.0, 'in' ],
+	[ 'ansi-e', 34.0, 44.0, 'in' ],
+	[ 'arch-a', 9, 12, 'in' ],
+	[ 'arch-b', 12, 18, 'in' ],
+	[ 'arch-c', 18, 24, 'in' ],
+	[ 'arch-d', 24, 36, 'in' ],
+	[ 'arch-e', 36, 48, 'in' ],
+	[ 'arch-e1', 30, 42, 'in' ],
+	[ 'arch-e2', 26, 38, 'in' ],
+	[ 'arch-e3', 27, 39, 'in' ]
+];
+
+let dictionary = data.reduce((dict, preset) => {
+	const item = {
+		units: preset[3] || defaultUnits,
+		dimensions: [ preset[1], preset[2] ]
+	};
+
+	dict[preset[0]] = item;
+	dict[preset[0].replace(/-/g, ' ')] = item;
+
+	return dict;
+}, {});
+
+export default dictionary;
+
+export const presets = Object.keys(dictionary);

package/src/client/app/lib/presets.js

@@ -0,0 +1,12 @@
+import paperSizes from "./paper-sizes.js";
+import convertLength from "convert-length";
+
+export default Object.keys(paperSizes);
+
+export function getDimensionsForPreset(preset, { pixelsPerInch }) {
+	const { dimensions, units } = paperSizes[preset];
+
+	return dimensions.map(n => {
+		return convertLength(n, units, "px", { pixelsPerInch });
+	});
+}