Added Selective Stretch

src/Layer.js

@@ -822,6 +822,7 @@ class Layer {
 			if (this.layout.type == "image") {
 				this.layout.width = raster.width;
 				this.layout.height = raster.height;
+				console.assert(this.shader.samplers.length > 0, "Shaders should have an assigned sampler before setting the layer as ready");
 				this.layout.emit('updateSize');
 			}
 			tile.size += size;

src/LayerDstretch.js

@@ -1,101 +1,58 @@
 import {Layer} from './Layer.js';
 import {LayerImage} from './LayerImage.js'
-import {ShaderDstretch} from './ShaderDstretch.js';
-import { Raster } from './Raster.js';
+import { ShaderFilterDstretch } from './ShaderFilterDstretch.js';
+import { ShaderFilterSelectiveStretch } from './ShaderFilterSelectiveStretch.js';
 
 class LayerDstretch extends LayerImage {
     constructor(options) {
 		super(options);
 
-		if(!this.url)
-			throw "Url option is required";
-
-		this.shaders['dstretch'] = new ShaderDstretch();
-		this.setShader('dstretch');
-		this.eulerRotation = [0,0,0];
-
-		this.worldRotation = 0; //if the canvas or ethe layer rotate, light direction neeeds to be rotated too.
-		if(this.url)
-			this.loadJson();
-		this.addControl('light', [0, 0]);
-	}
-
-	setLight(value, dt) {
-		this.setControl('light', value, dt);
-
-		this.eulerRotation[0] = Math.PI * this.getControl('light').current.value[0];//this.controls['light'].current[0];
-		this.eulerRotation[1] = Math.PI * this.getControl('light').current.value[1];//this.controls['light'].current[1];
-
-		this.shader.updateRotationMatrix(this.eulerRotation);
-		this.emit('update');
+		this.stretchType = options.stretchType;
+		this.filter = undefined
+
+		let FilterType;
+
+		if (this.stretchType === 'standard')
+			FilterType = ShaderFilterDstretch;
+		else
+			FilterType = ShaderFilterSelectiveStretch;
+
+		switch (options.sourceType) {
+			case 'url':
+				if (!options.url)
+					console.error("DStretch set to use an URL, but said URL wasn't specified.");
+					this.filter = new FilterType(options.url);
+				break;
+			case 'layer':
+				this.filter = new FilterType(this);
+				break;
+			case 'array':
+				this.filter = new FilterType(options.samples);
+				break;
+			default:
+				console.error("DStretch source ", sourceType, " not supported.");
+				break;
+		}
+		this.addShaderFilter(this.filter);
+		if (this.stretchType == 'selective')
+			this.addControl('light', [0, 0]);
 	}
-
-	loadJson() {
-		(async () => {
-			let json
-			try {
-				let dstretchUrl = this.url.substring(0, this.url.lastIndexOf(".")) + ".dstretch";
-				let response = await fetch(dstretchUrl);
-				console.log(response.ok);
-				json = await response.json();
-			}
-			catch (error) {
-				json = {
-					transformation: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
-					samples: []
-				};
-				this.rasters[0].loadTexture = this.loadAndSampleTexture.bind(this);
-			}
-
-			this.layout.setUrls([this.url]);
-			this.shader.init(json);
-		})();
-	} 
 
 	draw(transform, viewport) {
-		this.shader.setMinMax();
 		return super.draw(transform, viewport);
 	}
 
-	loadAndSampleTexture(gl, img) {
-		this.rasters[0].width = img.width;
-		this.rasters[0].height = img.height;
-		let tex = gl.createTexture();
-		gl.bindTexture(gl.TEXTURE_2D, tex);
-		gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-		gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); //_MIPMAP_LINEAR);
-		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-		gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
-
-		// Sample the texture
-		// Temporarily print the texture on a canvas
-		let canvas = document.createElement("canvas");
-		let context = canvas.getContext("2d");
-
-		canvas.setAttribute("width", img.width);
-		canvas.setAttribute("height", img.height);
-		context.drawImage(img, 0, 0, img.width, img.height);
-
-		// Get the data and sample the texture
-		let imageData = context.getImageData(0, 0, img.width, img.height).data;
-		let samples = [];
-		let rowSkip = Math.floor(img.height / 32);
-		let colSkip = Math.floor(img.width / 32);
-
-		console.log(rowSkip, colSkip);
+	setLight(value, dt) {
+		if (this.stretchType != 'selective')
+			return;
 
-		for (let i=0; i<imageData.length; i+=4) {
-			let row = Math.floor((i / 4) / img.width);
-			let col = Math.floor(i / 4) % img.width;
+		this.setControl('light', value, dt);
 
-			if (row % rowSkip == 0 && col % colSkip == 0)
-				samples.push([imageData[i], imageData[i+1], imageData[i+2]]);
-		}
+		this.filter.controls[0] = Math.PI * 1.2 * this.getControl('light').current.value[0];//this.controls['light'].current[0];
+		this.filter.controls[1] = Math.abs(this.getControl('light').current.value[1]);
 
-		this.shader.samples = samples;
-		this.shader.setMinMax();
-		return tex;
+		this.filter.setMinMax();
+		this.emit('update');
 	}
 }