Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@pixi/filter-tilt-shift

Package Overview
Dependencies
Maintainers
3
Versions
25
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@pixi/filter-tilt-shift - npm Package Compare versions

Comparing version 4.2.0 to 5.0.0

dist/filter-tilt-shift.mjs

59

dist/filter-tilt-shift.js

@@ -1,9 +0,58 @@

/*!
* @pixi/filter-tilt-shift - v4.2.0
* Compiled Fri, 05 Aug 2022 19:53:35 UTC
"use strict";/*!
* @pixi/filter-tilt-shift - v5.0.0
* Compiled Fri, 23 Sep 2022 20:48:56 UTC
*
* @pixi/filter-tilt-shift is licensed under the MIT License.
* http://www.opensource.org/licenses/mit-license
*/
var __filters=function(t,e,r){"use strict";var n=function(t,e){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])})(t,e)};function i(t,e){function r(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)}Object.create;Object.create;var o=function(t){function e(e,n,i,o){void 0===e&&(e=100),void 0===n&&(n=600);var u=t.call(this,"attribute vec2 aVertexPosition;\nattribute vec2 aTextureCoord;\n\nuniform mat3 projectionMatrix;\n\nvarying vec2 vTextureCoord;\n\nvoid main(void)\n{\n gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);\n vTextureCoord = aTextureCoord;\n}","varying vec2 vTextureCoord;\n\nuniform sampler2D uSampler;\nuniform float blur;\nuniform float gradientBlur;\nuniform vec2 start;\nuniform vec2 end;\nuniform vec2 delta;\nuniform vec2 texSize;\n\nfloat random(vec3 scale, float seed)\n{\n return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);\n}\n\nvoid main(void)\n{\n vec4 color = vec4(0.0);\n float total = 0.0;\n\n float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);\n vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));\n float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;\n\n for (float t = -30.0; t <= 30.0; t++)\n {\n float percent = (t + offset - 0.5) / 30.0;\n float weight = 1.0 - abs(percent);\n vec4 sample = texture2D(uSampler, vTextureCoord + delta / texSize * percent * radius);\n sample.rgb *= sample.a;\n color += sample * weight;\n total += weight;\n }\n\n color /= total;\n color.rgb /= color.a + 0.00001;\n\n gl_FragColor = color;\n}\n")||this;return u.uniforms.blur=e,u.uniforms.gradientBlur=n,u.uniforms.start=i||new r.Point(0,window.innerHeight/2),u.uniforms.end=o||new r.Point(600,window.innerHeight/2),u.uniforms.delta=new r.Point(30,30),u.uniforms.texSize=new r.Point(window.innerWidth,window.innerHeight),u.updateDelta(),u}return i(e,t),e.prototype.updateDelta=function(){this.uniforms.delta.x=0,this.uniforms.delta.y=0},Object.defineProperty(e.prototype,"blur",{get:function(){return this.uniforms.blur},set:function(t){this.uniforms.blur=t},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"gradientBlur",{get:function(){return this.uniforms.gradientBlur},set:function(t){this.uniforms.gradientBlur=t},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"start",{get:function(){return this.uniforms.start},set:function(t){this.uniforms.start=t,this.updateDelta()},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"end",{get:function(){return this.uniforms.end},set:function(t){this.uniforms.end=t,this.updateDelta()},enumerable:!1,configurable:!0}),e}(e.Filter),u=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return i(e,t),e.prototype.updateDelta=function(){var t=this.uniforms.end.x-this.uniforms.start.x,e=this.uniforms.end.y-this.uniforms.start.y,r=Math.sqrt(t*t+e*e);this.uniforms.delta.x=t/r,this.uniforms.delta.y=e/r},e}(o),l=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return i(e,t),e.prototype.updateDelta=function(){var t=this.uniforms.end.x-this.uniforms.start.x,e=this.uniforms.end.y-this.uniforms.start.y,r=Math.sqrt(t*t+e*e);this.uniforms.delta.x=-e/r,this.uniforms.delta.y=t/r},e}(o),a=function(t){function e(e,r,n,i){void 0===e&&(e=100),void 0===r&&(r=600);var o=t.call(this)||this;return o.tiltShiftXFilter=new u(e,r,n,i),o.tiltShiftYFilter=new l(e,r,n,i),o}return i(e,t),e.prototype.apply=function(t,e,r,n){var i=t.getFilterTexture();this.tiltShiftXFilter.apply(t,e,i,1),this.tiltShiftYFilter.apply(t,i,r,n),t.returnFilterTexture(i)},Object.defineProperty(e.prototype,"blur",{get:function(){return this.tiltShiftXFilter.blur},set:function(t){this.tiltShiftXFilter.blur=this.tiltShiftYFilter.blur=t},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"gradientBlur",{get:function(){return this.tiltShiftXFilter.gradientBlur},set:function(t){this.tiltShiftXFilter.gradientBlur=this.tiltShiftYFilter.gradientBlur=t},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"start",{get:function(){return this.tiltShiftXFilter.start},set:function(t){this.tiltShiftXFilter.start=this.tiltShiftYFilter.start=t},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"end",{get:function(){return this.tiltShiftXFilter.end},set:function(t){this.tiltShiftXFilter.end=this.tiltShiftYFilter.end=t},enumerable:!1,configurable:!0}),e}(e.Filter);return t.TiltShiftAxisFilter=o,t.TiltShiftFilter=a,t.TiltShiftXFilter=u,t.TiltShiftYFilter=l,Object.defineProperty(t,"__esModule",{value:!0}),t}({},PIXI,PIXI);Object.assign(PIXI.filters,__filters);
*/Object.defineProperty(exports,"__esModule",{value:!0});var n=require("@pixi/core"),h=`attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;
uniform mat3 projectionMatrix;
varying vec2 vTextureCoord;
void main(void)
{
gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
vTextureCoord = aTextureCoord;
}`,d=`varying vec2 vTextureCoord;
uniform sampler2D uSampler;
uniform float blur;
uniform float gradientBlur;
uniform vec2 start;
uniform vec2 end;
uniform vec2 delta;
uniform vec2 texSize;
float random(vec3 scale, float seed)
{
return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);
}
void main(void)
{
vec4 color = vec4(0.0);
float total = 0.0;
float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);
vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));
float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;
for (float t = -30.0; t <= 30.0; t++)
{
float percent = (t + offset - 0.5) / 30.0;
float weight = 1.0 - abs(percent);
vec4 sample = texture2D(uSampler, vTextureCoord + delta / texSize * percent * radius);
sample.rgb *= sample.a;
color += sample * weight;
total += weight;
}
color /= total;
color.rgb /= color.a + 0.00001;
gl_FragColor = color;
}
`;class o extends n.Filter{constructor(t=100,e=600,i,r){super(h,d),this.uniforms.blur=t,this.uniforms.gradientBlur=e,this.uniforms.start=i||new n.Point(0,window.innerHeight/2),this.uniforms.end=r||new n.Point(600,window.innerHeight/2),this.uniforms.delta=new n.Point(30,30),this.uniforms.texSize=new n.Point(window.innerWidth,window.innerHeight),this.updateDelta()}updateDelta(){this.uniforms.delta.x=0,this.uniforms.delta.y=0}get blur(){return this.uniforms.blur}set blur(t){this.uniforms.blur=t}get gradientBlur(){return this.uniforms.gradientBlur}set gradientBlur(t){this.uniforms.gradientBlur=t}get start(){return this.uniforms.start}set start(t){this.uniforms.start=t,this.updateDelta()}get end(){return this.uniforms.end}set end(t){this.uniforms.end=t,this.updateDelta()}}class a extends o{updateDelta(){const t=this.uniforms.end.x-this.uniforms.start.x,e=this.uniforms.end.y-this.uniforms.start.y,i=Math.sqrt(t*t+e*e);this.uniforms.delta.x=t/i,this.uniforms.delta.y=e/i}}class u extends o{updateDelta(){const t=this.uniforms.end.x-this.uniforms.start.x,e=this.uniforms.end.y-this.uniforms.start.y,i=Math.sqrt(t*t+e*e);this.uniforms.delta.x=-e/i,this.uniforms.delta.y=t/i}}class f extends n.Filter{constructor(t=100,e=600,i,r){super(),this.tiltShiftXFilter=new a(t,e,i,r),this.tiltShiftYFilter=new u(t,e,i,r)}apply(t,e,i,r){const l=t.getFilterTexture();this.tiltShiftXFilter.apply(t,e,l,1),this.tiltShiftYFilter.apply(t,l,i,r),t.returnFilterTexture(l)}get blur(){return this.tiltShiftXFilter.blur}set blur(t){this.tiltShiftXFilter.blur=this.tiltShiftYFilter.blur=t}get gradientBlur(){return this.tiltShiftXFilter.gradientBlur}set gradientBlur(t){this.tiltShiftXFilter.gradientBlur=this.tiltShiftYFilter.gradientBlur=t}get start(){return this.tiltShiftXFilter.start}set start(t){this.tiltShiftXFilter.start=this.tiltShiftYFilter.start=t}get end(){return this.tiltShiftXFilter.end}set end(t){this.tiltShiftXFilter.end=this.tiltShiftYFilter.end=t}}exports.TiltShiftAxisFilter=o,exports.TiltShiftFilter=f,exports.TiltShiftXFilter=a,exports.TiltShiftYFilter=u;
//# sourceMappingURL=filter-tilt-shift.js.map

16

index.d.ts

@@ -1,5 +0,5 @@

import type { CLEAR_MODES } from '@pixi/constants';
import type { CLEAR_MODES } from '@pixi/core';
import { Filter } from '@pixi/core';
import { FilterSystem } from '@pixi/core';
import { Point } from '@pixi/math';
import { Point } from '@pixi/core';
import { RenderTexture } from '@pixi/core';

@@ -12,3 +12,2 @@

* @extends PIXI.Filter
* @memberof PIXI.filters
* @private

@@ -27,3 +26,3 @@ */

*
* @memberof PIXI.filters.TiltShiftAxisFilter#
* @memberof TiltShiftAxisFilter#
*/

@@ -35,3 +34,3 @@ get blur(): number;

*
* @memberof PIXI.filters.TiltShiftAxisFilter#
* @memberof TiltShiftAxisFilter#
*/

@@ -44,3 +43,3 @@ get gradientBlur(): number;

* @member {PIXI.Point}
* @memberof PIXI.filters.TiltShiftAxisFilter#
* @memberof TiltShiftAxisFilter#
*/

@@ -53,3 +52,3 @@ get start(): Point;

* @member {PIXI.Point}
* @memberof PIXI.filters.TiltShiftAxisFilter#
* @memberof TiltShiftAxisFilter#
*/

@@ -66,3 +65,2 @@ get end(): Point;

* @extends PIXI.Filter
* @memberof PIXI.filters
* @see {@link https://www.npmjs.com/package/@pixi/filter-tilt-shift|@pixi/filter-tilt-shift}

@@ -113,3 +111,2 @@ * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters}

* @extends PIXI.TiltShiftAxisFilter
* @memberof PIXI.filters
* @private

@@ -129,3 +126,2 @@ */

* @extends PIXI.TiltShiftAxisFilter
* @memberof PIXI.filters
* @private

@@ -132,0 +128,0 @@ */

{
"name": "@pixi/filter-tilt-shift",
"version": "4.2.0",
"main": "dist/filter-tilt-shift.cjs.js",
"bundle": "dist/filter-tilt-shift.js",
"version": "5.0.0",
"main": "./dist/filter-tilt-shift.js",
"description": "PixiJS filter to render a tilt-shift-like camera effect",

@@ -11,11 +10,11 @@ "author": "Mat Groves",

],
"module": "dist/filter-tilt-shift.esm.mjs",
"module": "./dist/filter-tilt-shift.mjs",
"exports": {
".": {
"import": "./dist/filter-tilt-shift.esm.mjs",
"require": "./dist/filter-tilt-shift.cjs.js",
"import": "./dist/filter-tilt-shift.mjs",
"require": "./dist/filter-tilt-shift.js",
"types": "./index.d.ts"
}
},
"types": "index.d.ts",
"types": "./index.d.ts",
"homepage": "http://pixijs.com/",

@@ -37,13 +36,9 @@ "bugs": "https://github.com/pixijs/filters/issues",

"peerDependencies": {
"@pixi/constants": "^6.0.0",
"@pixi/core": "^6.0.0",
"@pixi/math": "^6.0.0"
"@pixi/core": "^7.0.0-X"
},
"devDependencies": {
"@pixi/constants": "^6.0.0",
"@pixi/core": "^6.0.0",
"@pixi/math": "^6.0.0",
"@tools/fragments": "4.1.3"
"@pixi/core": "^7.0.0-X",
"@tools/fragments": "5.0.0"
},
"gitHead": "dc16782d00fffb8c02d30cc32146d9c6a40599cb"
"gitHead": "2bec8c5024e4086e5aada8e471820bddc8ede687"
}

@@ -23,2 +23,2 @@ # TiltShiftFilter

See https://pixijs.github.io/pixi-filters/docs
See https://filters.pixijs.download/main/docs/TiltShiftFilter.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc