mirror of
https://github.com/PaddlePaddle/FastDeploy.git
synced 2025-10-08 10:00:29 +08:00
[Other] Refactor js submodule (#415)
* Refactor js submodule * Remove change-log * Update ocr module * Update ocr-detection module * Update ocr-detection module * Remove change-log
This commit is contained in:
chenqianhe
@@ -0,0 +1,641 @@
|
||||
//
|
||||
// WebGLImageFilter - MIT Licensed
|
||||
// 2013, Dominic Szablewski - phoboslab.org
|
||||
//
|
||||
|
||||
/* eslint-disable */
|
||||
|
||||
var WebGLProgram = function( gl, vertexSource, fragmentSource ) {
|
||||
|
||||
var _collect = function( source, prefix, collection ) {
|
||||
var r = new RegExp('\\b' + prefix + ' \\w+ (\\w+)', 'ig');
|
||||
source.replace(r, function(match, name) {
|
||||
collection[name] = 0;
|
||||
return match;
|
||||
});
|
||||
};
|
||||
|
||||
var _compile = function( gl, source, type ) {
|
||||
var shader = gl.createShader(type);
|
||||
gl.shaderSource(shader, source);
|
||||
gl.compileShader(shader);
|
||||
|
||||
if( !gl.getShaderParameter(shader, gl.COMPILE_STATUS) ) {
|
||||
console.log(gl.getShaderInfoLog(shader));
|
||||
return null;
|
||||
}
|
||||
return shader;
|
||||
};
|
||||
|
||||
|
||||
this.uniform = {};
|
||||
this.attribute = {};
|
||||
|
||||
var _vsh = _compile(gl, vertexSource, gl.VERTEX_SHADER);
|
||||
var _fsh = _compile(gl, fragmentSource, gl.FRAGMENT_SHADER);
|
||||
|
||||
this.id = gl.createProgram();
|
||||
gl.attachShader(this.id, _vsh);
|
||||
gl.attachShader(this.id, _fsh);
|
||||
gl.linkProgram(this.id);
|
||||
|
||||
if( !gl.getProgramParameter(this.id, gl.LINK_STATUS) ) {
|
||||
console.log(gl.getProgramInfoLog(this.id));
|
||||
}
|
||||
|
||||
gl.useProgram(this.id);
|
||||
|
||||
// Collect attributes
|
||||
_collect(vertexSource, 'attribute', this.attribute);
|
||||
for( var a in this.attribute ) {
|
||||
this.attribute[a] = gl.getAttribLocation(this.id, a);
|
||||
}
|
||||
|
||||
// Collect uniforms
|
||||
_collect(vertexSource, 'uniform', this.uniform);
|
||||
_collect(fragmentSource, 'uniform', this.uniform);
|
||||
for( var u in this.uniform ) {
|
||||
this.uniform[u] = gl.getUniformLocation(this.id, u);
|
||||
}
|
||||
};
|
||||
|
||||
var WebGLImageFilter = window.WebGLImageFilter = function (params) {
|
||||
if (!params)
|
||||
params = { };
|
||||
|
||||
var
|
||||
gl = null,
|
||||
_drawCount = 0,
|
||||
_sourceTexture = null,
|
||||
_lastInChain = false,
|
||||
_currentFramebufferIndex = -1,
|
||||
_tempFramebuffers = [null, null],
|
||||
_filterChain = [],
|
||||
_width = -1,
|
||||
_height = -1,
|
||||
_vertexBuffer = null,
|
||||
_currentProgram = null,
|
||||
_canvas = params.canvas || document.createElement('canvas');
|
||||
|
||||
// key is the shader program source, value is the compiled program
|
||||
var _shaderProgramCache = { };
|
||||
|
||||
var gl = _canvas.getContext("webgl") || _canvas.getContext("experimental-webgl");
|
||||
if( !gl ) {
|
||||
throw "Couldn't get WebGL context";
|
||||
}
|
||||
|
||||
this.addFilter = function( name ) {
|
||||
var args = Array.prototype.slice.call(arguments, 1);
|
||||
var filter = _filter[name];
|
||||
|
||||
_filterChain.push({func:filter, args:args});
|
||||
};
|
||||
|
||||
this.reset = function() {
|
||||
_filterChain = [];
|
||||
};
|
||||
|
||||
var applied = false;
|
||||
this.dispose = function () {
|
||||
gl.deleteTexture(_sourceTexture);
|
||||
_sourceTexture = null;
|
||||
applied = false;
|
||||
};
|
||||
|
||||
this.apply = function( image ) {
|
||||
_resize( image.width, image.height );
|
||||
_drawCount = 0;
|
||||
|
||||
// Create the texture for the input image if we haven't yet
|
||||
if (!_sourceTexture)
|
||||
_sourceTexture = gl.createTexture();
|
||||
|
||||
gl.bindTexture(gl.TEXTURE_2D, _sourceTexture);
|
||||
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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
|
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
|
||||
if (!applied) {
|
||||
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
|
||||
applied = true;
|
||||
} else {
|
||||
gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, image);
|
||||
}
|
||||
|
||||
// No filters? Just draw
|
||||
if( _filterChain.length == 0 ) {
|
||||
var program = _compileShader(SHADER.FRAGMENT_IDENTITY);
|
||||
_draw();
|
||||
return _canvas;
|
||||
}
|
||||
|
||||
for( var i = 0; i < _filterChain.length; i++ ) {
|
||||
_lastInChain = (i == _filterChain.length-1);
|
||||
var f = _filterChain[i];
|
||||
|
||||
f.func.apply(this, f.args || []);
|
||||
}
|
||||
|
||||
return _canvas;
|
||||
};
|
||||
|
||||
var _resize = function( width, height ) {
|
||||
// Same width/height? Nothing to do here
|
||||
if( width == _width && height == _height ) { return; }
|
||||
|
||||
|
||||
_canvas.width = _width = width;
|
||||
_canvas.height = _height = height;
|
||||
|
||||
// Create the context if we don't have it yet
|
||||
if( !_vertexBuffer ) {
|
||||
// Create the vertex buffer for the two triangles [x, y, u, v] * 6
|
||||
var vertices = new Float32Array([
|
||||
-1, -1, 0, 1, 1, -1, 1, 1, -1, 1, 0, 0,
|
||||
-1, 1, 0, 0, 1, -1, 1, 1, 1, 1, 1, 0
|
||||
]);
|
||||
_vertexBuffer = gl.createBuffer(),
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, _vertexBuffer);
|
||||
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
|
||||
|
||||
// Note sure if this is a good idea; at least it makes texture loading
|
||||
// in Ejecta instant.
|
||||
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
||||
}
|
||||
|
||||
gl.viewport(0, 0, _width, _height);
|
||||
|
||||
// Delete old temp framebuffers
|
||||
_tempFramebuffers = [null, null];
|
||||
};
|
||||
|
||||
var _getTempFramebuffer = function( index ) {
|
||||
_tempFramebuffers[index] =
|
||||
_tempFramebuffers[index] ||
|
||||
_createFramebufferTexture( _width, _height );
|
||||
|
||||
return _tempFramebuffers[index];
|
||||
};
|
||||
|
||||
var _createFramebufferTexture = function( width, height ) {
|
||||
var fbo = gl.createFramebuffer();
|
||||
gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
|
||||
|
||||
var renderbuffer = gl.createRenderbuffer();
|
||||
gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuffer);
|
||||
|
||||
var texture = gl.createTexture();
|
||||
gl.bindTexture(gl.TEXTURE_2D, texture);
|
||||
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
|
||||
|
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.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.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
|
||||
|
||||
gl.bindTexture(gl.TEXTURE_2D, null);
|
||||
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
||||
|
||||
return {fbo: fbo, texture: texture};
|
||||
};
|
||||
|
||||
var _draw = function( flags ) {
|
||||
var source = null,
|
||||
target = null,
|
||||
flipY = false;
|
||||
|
||||
// Set up the source
|
||||
if( _drawCount == 0 ) {
|
||||
// First draw call - use the source texture
|
||||
source = _sourceTexture;
|
||||
}
|
||||
else {
|
||||
// All following draw calls use the temp buffer last drawn to
|
||||
source = _getTempFramebuffer(_currentFramebufferIndex).texture;
|
||||
}
|
||||
_drawCount++;
|
||||
|
||||
|
||||
// Set up the target
|
||||
if( _lastInChain && !(flags & DRAW.INTERMEDIATE) ) {
|
||||
// Last filter in our chain - draw directly to the WebGL Canvas. We may
|
||||
// also have to flip the image vertically now
|
||||
target = null;
|
||||
flipY = _drawCount % 2 == 0;
|
||||
}
|
||||
else {
|
||||
// Intermediate draw call - get a temp buffer to draw to
|
||||
_currentFramebufferIndex = (_currentFramebufferIndex+1) % 2;
|
||||
target = _getTempFramebuffer(_currentFramebufferIndex).fbo;
|
||||
}
|
||||
|
||||
// Bind the source and target and draw the two triangles
|
||||
gl.bindTexture(gl.TEXTURE_2D, source);
|
||||
gl.bindFramebuffer(gl.FRAMEBUFFER, target);
|
||||
|
||||
gl.uniform1f(_currentProgram.uniform.flipY, (flipY ? -1 : 1) );
|
||||
gl.drawArrays(gl.TRIANGLES, 0, 6);
|
||||
};
|
||||
|
||||
var _compileShader = function( fragmentSource ) {
|
||||
if (_shaderProgramCache[fragmentSource]) {
|
||||
_currentProgram = _shaderProgramCache[fragmentSource];
|
||||
gl.useProgram(_currentProgram.id);
|
||||
return _currentProgram;
|
||||
}
|
||||
|
||||
// Compile shaders
|
||||
_currentProgram = new WebGLProgram( gl, SHADER.VERTEX_IDENTITY, fragmentSource );
|
||||
|
||||
var floatSize = Float32Array.BYTES_PER_ELEMENT;
|
||||
var vertSize = 4 * floatSize;
|
||||
gl.enableVertexAttribArray(_currentProgram.attribute.pos);
|
||||
gl.vertexAttribPointer(_currentProgram.attribute.pos, 2, gl.FLOAT, false, vertSize , 0 * floatSize);
|
||||
gl.enableVertexAttribArray(_currentProgram.attribute.uv);
|
||||
gl.vertexAttribPointer(_currentProgram.attribute.uv, 2, gl.FLOAT, false, vertSize, 2 * floatSize);
|
||||
|
||||
_shaderProgramCache[fragmentSource] = _currentProgram;
|
||||
return _currentProgram;
|
||||
};
|
||||
|
||||
|
||||
var DRAW = { INTERMEDIATE: 1 };
|
||||
|
||||
var SHADER = {};
|
||||
SHADER.VERTEX_IDENTITY = [
|
||||
'precision highp float;',
|
||||
'attribute vec2 pos;',
|
||||
'attribute vec2 uv;',
|
||||
'varying vec2 vUv;',
|
||||
'uniform float flipY;',
|
||||
|
||||
'void main(void) {',
|
||||
'vUv = uv;',
|
||||
'gl_Position = vec4(pos.x, pos.y*flipY, 0.0, 1.);',
|
||||
'}'
|
||||
].join('\n');
|
||||
|
||||
SHADER.FRAGMENT_IDENTITY = [
|
||||
'precision highp float;',
|
||||
'varying vec2 vUv;',
|
||||
'uniform sampler2D texture;',
|
||||
|
||||
'void main(void) {',
|
||||
'gl_FragColor = texture2D(texture, vUv);',
|
||||
'}',
|
||||
].join('\n');
|
||||
|
||||
|
||||
var _filter = {};
|
||||
|
||||
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Color Matrix Filter
|
||||
|
||||
_filter.colorMatrix = function( matrix ) {
|
||||
// Create a Float32 Array and normalize the offset component to 0-1
|
||||
var m = new Float32Array(matrix);
|
||||
m[4] /= 255;
|
||||
m[9] /= 255;
|
||||
m[14] /= 255;
|
||||
m[19] /= 255;
|
||||
|
||||
// Can we ignore the alpha value? Makes things a bit faster.
|
||||
var shader = (1==m[18]&&0==m[3]&&0==m[8]&&0==m[13]&&0==m[15]&&0==m[16]&&0==m[17]&&0==m[19])
|
||||
? _filter.colorMatrix.SHADER.WITHOUT_ALPHA
|
||||
: _filter.colorMatrix.SHADER.WITH_ALPHA;
|
||||
|
||||
var program = _compileShader(shader);
|
||||
gl.uniform1fv(program.uniform.m, m);
|
||||
_draw();
|
||||
};
|
||||
|
||||
_filter.colorMatrix.SHADER = {};
|
||||
_filter.colorMatrix.SHADER.WITH_ALPHA = [
|
||||
'precision highp float;',
|
||||
'varying vec2 vUv;',
|
||||
'uniform sampler2D texture;',
|
||||
'uniform float m[20];',
|
||||
|
||||
'void main(void) {',
|
||||
'vec4 c = texture2D(texture, vUv);',
|
||||
'gl_FragColor.r = m[0] * c.r + m[1] * c.g + m[2] * c.b + m[3] * c.a + m[4];',
|
||||
'gl_FragColor.g = m[5] * c.r + m[6] * c.g + m[7] * c.b + m[8] * c.a + m[9];',
|
||||
'gl_FragColor.b = m[10] * c.r + m[11] * c.g + m[12] * c.b + m[13] * c.a + m[14];',
|
||||
'gl_FragColor.a = m[15] * c.r + m[16] * c.g + m[17] * c.b + m[18] * c.a + m[19];',
|
||||
'}',
|
||||
].join('\n');
|
||||
_filter.colorMatrix.SHADER.WITHOUT_ALPHA = [
|
||||
'precision highp float;',
|
||||
'varying vec2 vUv;',
|
||||
'uniform sampler2D texture;',
|
||||
'uniform float m[20];',
|
||||
|
||||
'void main(void) {',
|
||||
'vec4 c = texture2D(texture, vUv);',
|
||||
'gl_FragColor.r = m[0] * c.r + m[1] * c.g + m[2] * c.b + m[4];',
|
||||
'gl_FragColor.g = m[5] * c.r + m[6] * c.g + m[7] * c.b + m[9];',
|
||||
'gl_FragColor.b = m[10] * c.r + m[11] * c.g + m[12] * c.b + m[14];',
|
||||
'gl_FragColor.a = c.a;',
|
||||
'}',
|
||||
].join('\n');
|
||||
|
||||
_filter.brightness = function( brightness ) {
|
||||
var b = (brightness || 0) + 1;
|
||||
_filter.colorMatrix([
|
||||
b, 0, 0, 0, 0,
|
||||
0, b, 0, 0, 0,
|
||||
0, 0, b, 0, 0,
|
||||
0, 0, 0, 1, 0
|
||||
]);
|
||||
};
|
||||
|
||||
_filter.saturation = function( amount ) {
|
||||
var x = (amount || 0) * 2/3 + 1;
|
||||
var y = ((x-1) *-0.5);
|
||||
_filter.colorMatrix([
|
||||
x, y, y, 0, 0,
|
||||
y, x, y, 0, 0,
|
||||
y, y, x, 0, 0,
|
||||
0, 0, 0, 1, 0
|
||||
]);
|
||||
};
|
||||
|
||||
_filter.desaturate = function() {
|
||||
_filter.saturation(-1);
|
||||
};
|
||||
|
||||
_filter.contrast = function( amount ) {
|
||||
var v = (amount || 0) + 1;
|
||||
var o = -128 * (v-1);
|
||||
|
||||
_filter.colorMatrix([
|
||||
v, 0, 0, 0, o,
|
||||
0, v, 0, 0, o,
|
||||
0, 0, v, 0, o,
|
||||
0, 0, 0, 1, 0
|
||||
]);
|
||||
};
|
||||
|
||||
_filter.negative = function() {
|
||||
_filter.contrast(-2);
|
||||
};
|
||||
|
||||
_filter.hue = function( rotation ) {
|
||||
rotation = (rotation || 0)/180 * Math.PI;
|
||||
var cos = Math.cos(rotation),
|
||||
sin = Math.sin(rotation),
|
||||
lumR = 0.213,
|
||||
lumG = 0.715,
|
||||
lumB = 0.072;
|
||||
|
||||
_filter.colorMatrix([
|
||||
lumR+cos*(1-lumR)+sin*(-lumR),lumG+cos*(-lumG)+sin*(-lumG),lumB+cos*(-lumB)+sin*(1-lumB),0,0,
|
||||
lumR+cos*(-lumR)+sin*(0.143),lumG+cos*(1-lumG)+sin*(0.140),lumB+cos*(-lumB)+sin*(-0.283),0,0,
|
||||
lumR+cos*(-lumR)+sin*(-(1-lumR)),lumG+cos*(-lumG)+sin*(lumG),lumB+cos*(1-lumB)+sin*(lumB),0,0,
|
||||
0, 0, 0, 1, 0
|
||||
]);
|
||||
};
|
||||
|
||||
_filter.desaturateLuminance = function() {
|
||||
_filter.colorMatrix([
|
||||
0.2764723, 0.9297080, 0.0938197, 0, -37.1,
|
||||
0.2764723, 0.9297080, 0.0938197, 0, -37.1,
|
||||
0.2764723, 0.9297080, 0.0938197, 0, -37.1,
|
||||
0, 0, 0, 1, 0
|
||||
]);
|
||||
};
|
||||
|
||||
_filter.sepia = function() {
|
||||
_filter.colorMatrix([
|
||||
0.393, 0.7689999, 0.18899999, 0, 0,
|
||||
0.349, 0.6859999, 0.16799999, 0, 0,
|
||||
0.272, 0.5339999, 0.13099999, 0, 0,
|
||||
0,0,0,1,0
|
||||
]);
|
||||
};
|
||||
|
||||
_filter.brownie = function() {
|
||||
_filter.colorMatrix([
|
||||
0.5997023498159715,0.34553243048391263,-0.2708298674538042,0,47.43192855600873,
|
||||
-0.037703249837783157,0.8609577587992641,0.15059552388459913,0,-36.96841498319127,
|
||||
0.24113635128153335,-0.07441037908422492,0.44972182064877153,0,-7.562075277591283,
|
||||
0,0,0,1,0
|
||||
]);
|
||||
};
|
||||
|
||||
_filter.vintagePinhole = function() {
|
||||
_filter.colorMatrix([
|
||||
0.6279345635605994,0.3202183420819367,-0.03965408211312453,0,9.651285835294123,
|
||||
0.02578397704808868,0.6441188644374771,0.03259127616149294,0,7.462829176470591,
|
||||
0.0466055556782719,-0.0851232987247891,0.5241648018700465,0,5.159190588235296,
|
||||
0,0,0,1,0
|
||||
]);
|
||||
};
|
||||
|
||||
_filter.kodachrome = function() {
|
||||
_filter.colorMatrix([
|
||||
1.1285582396593525,-0.3967382283601348,-0.03992559172921793,0,63.72958762196502,
|
||||
-0.16404339962244616,1.0835251566291304,-0.05498805115633132,0,24.732407896706203,
|
||||
-0.16786010706155763,-0.5603416277695248,1.6014850761964943,0,35.62982807460946,
|
||||
0,0,0,1,0
|
||||
]);
|
||||
};
|
||||
|
||||
_filter.technicolor = function() {
|
||||
_filter.colorMatrix([
|
||||
1.9125277891456083,-0.8545344976951645,-0.09155508482755585,0,11.793603434377337,
|
||||
-0.3087833385928097,1.7658908555458428,-0.10601743074722245,0,-70.35205161461398,
|
||||
-0.231103377548616,-0.7501899197440212,1.847597816108189,0,30.950940869491138,
|
||||
0,0,0,1,0
|
||||
]);
|
||||
};
|
||||
|
||||
_filter.polaroid = function() {
|
||||
_filter.colorMatrix([
|
||||
1.438,-0.062,-0.062,0,0,
|
||||
-0.122,1.378,-0.122,0,0,
|
||||
-0.016,-0.016,1.483,0,0,
|
||||
0,0,0,1,0
|
||||
]);
|
||||
};
|
||||
|
||||
_filter.shiftToBGR = function() {
|
||||
_filter.colorMatrix([
|
||||
0,0,1,0,0,
|
||||
0,1,0,0,0,
|
||||
1,0,0,0,0,
|
||||
0,0,0,1,0
|
||||
]);
|
||||
};
|
||||
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Convolution Filter
|
||||
|
||||
_filter.convolution = function( matrix ) {
|
||||
var m = new Float32Array(matrix);
|
||||
var pixelSizeX = 1 / _width;
|
||||
var pixelSizeY = 1 / _height;
|
||||
|
||||
var program = _compileShader(_filter.convolution.SHADER);
|
||||
gl.uniform1fv(program.uniform.m, m);
|
||||
gl.uniform2f(program.uniform.px, pixelSizeX, pixelSizeY);
|
||||
_draw();
|
||||
};
|
||||
|
||||
_filter.convolution.SHADER = [
|
||||
'precision highp float;',
|
||||
'varying vec2 vUv;',
|
||||
'uniform sampler2D texture;',
|
||||
'uniform vec2 px;',
|
||||
'uniform float m[9];',
|
||||
|
||||
'void main(void) {',
|
||||
'vec4 c11 = texture2D(texture, vUv - px);', // top left
|
||||
'vec4 c12 = texture2D(texture, vec2(vUv.x, vUv.y - px.y));', // top center
|
||||
'vec4 c13 = texture2D(texture, vec2(vUv.x + px.x, vUv.y - px.y));', // top right
|
||||
|
||||
'vec4 c21 = texture2D(texture, vec2(vUv.x - px.x, vUv.y) );', // mid left
|
||||
'vec4 c22 = texture2D(texture, vUv);', // mid center
|
||||
'vec4 c23 = texture2D(texture, vec2(vUv.x + px.x, vUv.y) );', // mid right
|
||||
|
||||
'vec4 c31 = texture2D(texture, vec2(vUv.x - px.x, vUv.y + px.y) );', // bottom left
|
||||
'vec4 c32 = texture2D(texture, vec2(vUv.x, vUv.y + px.y) );', // bottom center
|
||||
'vec4 c33 = texture2D(texture, vUv + px );', // bottom right
|
||||
|
||||
'gl_FragColor = ',
|
||||
'c11 * m[0] + c12 * m[1] + c22 * m[2] +',
|
||||
'c21 * m[3] + c22 * m[4] + c23 * m[5] +',
|
||||
'c31 * m[6] + c32 * m[7] + c33 * m[8];',
|
||||
'gl_FragColor.a = c22.a;',
|
||||
'}',
|
||||
].join('\n');
|
||||
|
||||
|
||||
_filter.detectEdges = function() {
|
||||
_filter.convolution.call(this, [
|
||||
0, 1, 0,
|
||||
1, -4, 1,
|
||||
0, 1, 0
|
||||
]);
|
||||
};
|
||||
|
||||
_filter.sobelX = function() {
|
||||
_filter.convolution.call(this, [
|
||||
-1, 0, 1,
|
||||
-2, 0, 2,
|
||||
-1, 0, 1
|
||||
]);
|
||||
};
|
||||
|
||||
_filter.sobelY = function() {
|
||||
_filter.convolution.call(this, [
|
||||
-1, -2, -1,
|
||||
0, 0, 0,
|
||||
1, 2, 1
|
||||
]);
|
||||
};
|
||||
|
||||
_filter.sharpen = function( amount ) {
|
||||
var a = amount || 1;
|
||||
_filter.convolution.call(this, [
|
||||
0, -1*a, 0,
|
||||
-1*a, 1 + 4*a, -1*a,
|
||||
0, -1*a, 0
|
||||
]);
|
||||
};
|
||||
|
||||
_filter.emboss = function( size ) {
|
||||
var s = size || 1;
|
||||
_filter.convolution.call(this, [
|
||||
-2*s, -1*s, 0,
|
||||
-1*s, 1, 1*s,
|
||||
0, 1*s, 2*s
|
||||
]);
|
||||
};
|
||||
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Blur Filter
|
||||
|
||||
_filter.blur = function( size ) {
|
||||
var blurSizeX = (size/7) / _width;
|
||||
var blurSizeY = (size/7) / _height;
|
||||
|
||||
var program = _compileShader(_filter.blur.SHADER);
|
||||
|
||||
// Vertical
|
||||
gl.uniform2f(program.uniform.px, 0, blurSizeY);
|
||||
_draw(DRAW.INTERMEDIATE);
|
||||
|
||||
// Horizontal
|
||||
gl.uniform2f(program.uniform.px, blurSizeX, 0);
|
||||
_draw();
|
||||
};
|
||||
|
||||
_filter.blur.SHADER = [
|
||||
'precision highp float;',
|
||||
'varying vec2 vUv;',
|
||||
'uniform sampler2D texture;',
|
||||
'uniform vec2 px;',
|
||||
|
||||
'void main(void) {',
|
||||
'gl_FragColor = vec4(0.0);',
|
||||
'gl_FragColor += texture2D(texture, vUv + vec2(-7.0*px.x, -7.0*px.y))*0.0044299121055113265;',
|
||||
'gl_FragColor += texture2D(texture, vUv + vec2(-6.0*px.x, -6.0*px.y))*0.00895781211794;',
|
||||
'gl_FragColor += texture2D(texture, vUv + vec2(-5.0*px.x, -5.0*px.y))*0.0215963866053;',
|
||||
'gl_FragColor += texture2D(texture, vUv + vec2(-4.0*px.x, -4.0*px.y))*0.0443683338718;',
|
||||
'gl_FragColor += texture2D(texture, vUv + vec2(-3.0*px.x, -3.0*px.y))*0.0776744219933;',
|
||||
'gl_FragColor += texture2D(texture, vUv + vec2(-2.0*px.x, -2.0*px.y))*0.115876621105;',
|
||||
'gl_FragColor += texture2D(texture, vUv + vec2(-1.0*px.x, -1.0*px.y))*0.147308056121;',
|
||||
'gl_FragColor += texture2D(texture, vUv )*0.159576912161;',
|
||||
'gl_FragColor += texture2D(texture, vUv + vec2( 1.0*px.x, 1.0*px.y))*0.147308056121;',
|
||||
'gl_FragColor += texture2D(texture, vUv + vec2( 2.0*px.x, 2.0*px.y))*0.115876621105;',
|
||||
'gl_FragColor += texture2D(texture, vUv + vec2( 3.0*px.x, 3.0*px.y))*0.0776744219933;',
|
||||
'gl_FragColor += texture2D(texture, vUv + vec2( 4.0*px.x, 4.0*px.y))*0.0443683338718;',
|
||||
'gl_FragColor += texture2D(texture, vUv + vec2( 5.0*px.x, 5.0*px.y))*0.0215963866053;',
|
||||
'gl_FragColor += texture2D(texture, vUv + vec2( 6.0*px.x, 6.0*px.y))*0.00895781211794;',
|
||||
'gl_FragColor += texture2D(texture, vUv + vec2( 7.0*px.x, 7.0*px.y))*0.0044299121055113265;',
|
||||
'}',
|
||||
].join('\n');
|
||||
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Pixelate Filter
|
||||
|
||||
_filter.pixelate = function( size ) {
|
||||
var blurSizeX = (size) / _width;
|
||||
var blurSizeY = (size) / _height;
|
||||
|
||||
var program = _compileShader(_filter.pixelate.SHADER);
|
||||
|
||||
// Horizontal
|
||||
gl.uniform2f(program.uniform.size, blurSizeX, blurSizeY);
|
||||
_draw();
|
||||
};
|
||||
|
||||
_filter.pixelate.SHADER = [
|
||||
'precision highp float;',
|
||||
'varying vec2 vUv;',
|
||||
'uniform vec2 size;',
|
||||
'uniform sampler2D texture;',
|
||||
|
||||
'vec2 pixelate(vec2 coord, vec2 size) {',
|
||||
'return floor( coord / size ) * size;',
|
||||
'}',
|
||||
|
||||
'void main(void) {',
|
||||
'gl_FragColor = vec4(0.0);',
|
||||
'vec2 coord = pixelate(vUv, size);',
|
||||
'gl_FragColor += texture2D(texture, coord);',
|
||||
'}',
|
||||
].join('\n');
|
||||
};
|
||||
|
||||
export default WebGLImageFilter;
|
||||
|
||||
Reference in New Issue
Block a user