jeena/pixi.js
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Added 2 filters fix filter bug

Browse source 
Fixed filter bug where filters not wotkring on transparent renderer
Added CrossHatchFilter
Added RGBSplitFilter
Updated Example 15
This commit is contained in:
Mat Groves 2013-11-05 19:51:39 +00:00
parent fdf7dcaf61
commit 4204ada63e
12 changed files with 747 additions and 491 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Gruntfile.js
View file

@ -71,6 +71,8 @@ module.exports = function(grunt) {
'<%= dirs.src %>/filters/TwistFilter.js',
'<%= dirs.src %>/filters/ColorStepFilter.js',
'<%= dirs.src %>/filters/DotScreenFilter.js',
'<%= dirs.src %>/filters/CrossHatchFilter.js',
'<%= dirs.src %>/filters/RGBSplitFilter.js',
'<%= dirs.src %>/Outro.js'
], banner = [

205
bin/pixi.dev.js
View file

@ -2200,7 +2200,8 @@ PIXI.Text.prototype.determineFontHeight = function(fontStyle)
};
/**
* A Text Object will apply wordwrap
* Applies newlines to a string to have it optimally fit into the horizontal
* bounds set by the Text object's wordWrapWidth property.
*
* @method wordWrap
* @param text {String}
@ -2208,48 +2209,37 @@ PIXI.Text.prototype.determineFontHeight = function(fontStyle)
*/
PIXI.Text.prototype.wordWrap = function(text)
{
// search good wrap position
var searchWrapPos = function(ctx, text, start, end, wrapWidth)
{
var p = Math.floor((end-start) / 2) + start;
if(p == start) {
return 1;
}
if(ctx.measureText(text.substring(0,p)).width <= wrapWidth)
{
if(ctx.measureText(text.substring(0,p+1)).width > wrapWidth)
{
return p;
}
else
{
return arguments.callee(ctx, text, p, end, wrapWidth);
}
}
else
{
return arguments.callee(ctx, text, start, p, wrapWidth);
}
};
var lineWrap = function(ctx, text, wrapWidth)
{
if(ctx.measureText(text).width <= wrapWidth || text.length < 1)
{
return text;
}
var pos = searchWrapPos(ctx, text, 0, text.length, wrapWidth);
return text.substring(0, pos) + "\n" + arguments.callee(ctx, text.substring(pos), wrapWidth);
};
// Greedy wrapping algorithm that will wrap words as the line grows longer
// than its horizontal bounds.
var result = "";
var lines = text.split("\n");
for (var i = 0; i < lines.length; i++)
{
result += lineWrap(this.context, lines[i], this.style.wordWrapWidth) + "\n";
var spaceLeft = this.style.wordWrapWidth;
var words = lines[i].split(" ");
for (var j = 0; j < words.length; j++)
{
var wordWidth = this.context.measureText(words[j]).width;
var wordWidthWithSpace = wordWidth + this.context.measureText(" ").width;
if(wordWidthWithSpace > spaceLeft)
{
// Skip printing the newline if it's the first word of the line that is
// greater than the word wrap width.
if(j > 0)
{
result += "\n";
}
result += words[j] + " ";
spaceLeft = this.style.wordWrapWidth - wordWidth;
}
else
{
spaceLeft -= wordWidthWithSpace;
result += words[j] + " ";
}
}
result += "\n";
}
return result;
};
@ -4674,8 +4664,8 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
//PIXI.pushShader(PIXI.defaultShader);
this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl);
this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl, this.transparent);
// this.stageRenderGroup. = this.transparent
}
// constructor
@ -5534,16 +5524,18 @@ PIXI.WebGLBatch.prototype.render = function(start, end)
* @contructor
* @param gl {WebGLContext} An instance of the webGL context
*/
PIXI.WebGLRenderGroup = function(gl)
PIXI.WebGLRenderGroup = function(gl, transparent)
{
this.gl = gl;
this.root;
this.backgroundColor;
this.transparent = transparent == undefined ? true : transparent;
this.batchs = [];
this.toRemove = [];
this.filterManager = new PIXI.WebGLFilterManager();
console.log(this.transparent)
this.filterManager = new PIXI.WebGLFilterManager(this.transparent);
}
// constructor
@ -6552,8 +6544,10 @@ PIXI.WebGLRenderGroup.prototype.initStrip = function(strip)
*/
PIXI.WebGLFilterManager = function()
PIXI.WebGLFilterManager = function(transparent)
{
this.transparent = transparent;
this.filterStack = [];
this.texturePool = [];
@ -6744,7 +6738,7 @@ PIXI.WebGLFilterManager.prototype.popFilter = function()
// time to render the filters texture to the previous scene
if(this.filterStack.length === 0)
{
gl.colorMask(true, true, true, this.buffer);
gl.colorMask(true, true, true, this.transparent);
}
else
{
@ -12156,6 +12150,127 @@ Object.defineProperty(PIXI.DotScreenFilter.prototype, 'angle', {
this.uniforms.angle.value = value;
}
});
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI.CrossHatchFilter = function()
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
this.uniforms = {
blur: {type: 'f', value: 1/512},
};
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform float blur;",
"uniform sampler2D uSampler;",
"void main(void) {",
" float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);",
" ",
" gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);",
" ",
" if (lum < 1.00) {",
" if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {",
" gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);",
" }",
" }",
" ",
" if (lum < 0.75) {",
" if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {",
" gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);",
" }",
" }",
" ",
" if (lum < 0.50) {",
" if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {",
" gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);",
" }",
" }",
" ",
" if (lum < 0.3) {",
" if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {",
" gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);",
" }",
" }",
"}"
];
}
PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter;
Object.defineProperty(PIXI.CrossHatchFilter.prototype, 'blur', {
get: function() {
return this.uniforms.blur.value / (1/7000);
},
set: function(value) {
//this.padding = value;
this.uniforms.blur.value = (1/7000) * value;
}
});
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI.RGBSplitFilter = function()
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
this.uniforms = {
red: {type: 'f2', value: {x:20, y:20}},
green: {type: 'f2', value: {x:-20, y:20}},
blue: {type: 'f2', value: {x:20, y:-20}},
dimensions: {type: 'f4', value:[0,0,0,0]}
};
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform vec2 red;",
"uniform vec2 green;",
"uniform vec2 blue;",
"uniform vec4 dimensions;",
"uniform sampler2D uSampler;",
"void main(void) {",
"gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;",
"gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;",
"gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;",
"gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;",
"}"
];
}
PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter;
Object.defineProperty(PIXI.RGBSplitFilter.prototype, 'angle', {
get: function() {
return this.uniforms.blur.value / (1/7000);
},
set: function(value) {
//this.padding = value;
this.uniforms.blur.value = (1/7000) * value;
}
});
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/

4
bin/pixi.dev.js.map
View file

File diff suppressed because one or more lines are too long

8
bin/pixi.js
View file

File diff suppressed because one or more lines are too long

96
examples/example 13 - Graphics/indexLineTest.html
View file

@ -22,6 +22,8 @@
stage.setInteractive(true);
var sprite= PIXI.Sprite.fromImage("spinObj_02.png");
//stage.addChild(sprite);
// create a renderer instance
// the 5the parameter is the anti aliasing
var renderer = PIXI.autoDetectRenderer(620, 380, null, false, true);
@ -35,31 +37,99 @@
document.body.appendChild(renderer.view);
var graphics = new PIXI.Graphics();
/*
// set a fill and line style
graphics.beginFill(0xFF3300);
graphics.lineStyle(10, 0xffd900, 1);
var container = new PIXI.DisplayObjectContainer();
var mask_me = new PIXI.DisplayObjectContainer();
var mask = new PIXI.Graphics();
// draw a shape
graphics.moveTo(50,50);
graphics.lineTo(250, 50);
graphics.lineTo(100, 100);
graphics.lineTo(250, 220);
graphics.lineTo(50, 220);
graphics.lineTo(50, 50);
graphics.endFill();
container.addChild(mask_me);
container.addChild(mask);
// set a fill and line style again
graphics.lineStyle(10, 0xFF0000, 0.8);
graphics.beginFill(0xFF700B, 1);
mask_me.mask = mask;
// draw a second shape
graphics.moveTo(210,300);
graphics.lineTo(450,320);
graphics.lineTo(570,350);
graphics.lineTo(580,20);
graphics.lineTo(330,120);
graphics.lineTo(410,200);
graphics.lineTo(210,300);
graphics.endFill();
stage.addChild(container);
renderer.render(stage);
// draw a rectangel
graphics.lineStyle(2, 0x0000FF, 1);
graphics.drawRect(50, 250, 100, 100);
mask.beginFill();
mask.drawRect(0, 0, 100, 100);
mask.endFill();
// draw a circle
graphics.lineStyle(0);
graphics.beginFill(0xFFFF0B, 0.5);
graphics.drawCircle(470, 200,100);
//renderer.render(stage);
graphics.lineStyle(20, 0x33FF00);
graphics.moveTo(30,30);
graphics.lineTo(600, 300);
*/
var g = new PIXI.Graphics();
g.lineStyle(10, 0x000000, 1);
g.beginFill(0xff0000);
g.moveTo(0,0);
g.drawRect(0, 0, 100, 100);
g.pivot.x = 50;
g.pivot.y = 50;
// g.lineTo(00, 200);
// g.lineTo(300, 300);
g.position.x = 100;
g.position.y = 100;
stage.addChild(g);
// lets create moving shape
var thing = new PIXI.Graphics();
stage.addChild(thing);
thing.position.x = 620/2;
thing.position.y = 380/2;
var count = 0;
stage.click = stage.tap = function()
{
// graphics.lineStyle(Math.random() * 30, Math.random() * 0xFFFFFF, 1);
// graphics.moveTo(Math.random() * 620,Math.random() * 380);
// graphics.lineTo(Math.random() * 620,Math.random() * 380);
}
requestAnimFrame(animate);
function animate() {
thing.clear();
g.rotation += 0.1
count += 0.1;
/*
thing.clear();
thing.lineStyle(30, 0xff0000, 1);
thing.beginFill(0xffFF00, 0.5);
thing.moveTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count)* 20);
thing.lineTo(120 + Math.cos(count) * 20, -100 + Math.sin(count)* 20);
thing.lineTo(120 + Math.sin(count) * 20, 100 + Math.cos(count)* 20);
thing.lineTo(-120 + Math.cos(count)* 20, 100 + Math.sin(count)* 20);
thing.lineTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count)* 20);
*/
thing.rotation = count * 0.1;
renderer.render(stage);
requestAnimFrame( animate );
}

62
examples/example 15 - Filters/indexAll.html
View file

@ -24,7 +24,7 @@
renderer.view.style.height = window.innerHeight + "px";
renderer.view.style.display = "block";
var filtersSwitchs = [false, false, false, false, false, false, false, false];
var filtersSwitchs = [true, false, false, false, false, false, false, false, false, false, false];
// add render view to DOM
document.body.appendChild(renderer.view);
@ -35,10 +35,20 @@
//width : 350
});
////
var displacementTexture = PIXI.Texture.fromImage("displacement_map.jpg");
var displacementFilter = new PIXI.DisplacementFilter(displacementTexture);
var displacementFolder = gui.addFolder('Displacement');
displacementFolder.add(filtersSwitchs, '0').name("apply");
displacementFolder.add(displacementFilter.scale, 'x', 1, 200).name("scaleX");
displacementFolder.add(displacementFilter.scale, 'y', 1, 200).name("scaleY");
var blurFilter = new PIXI.BlurFilter();
var blurFolder = gui.addFolder('Blur');
blurFolder.add(filtersSwitchs, '0').name("apply");
blurFolder.add(filtersSwitchs, '1').name("apply");
blurFolder.add(blurFilter, 'blurX', 0, 32).name("blurX");
blurFolder.add(blurFilter, 'blurY', 0, 32).name("blurY");
@ -47,7 +57,7 @@
var pixelateFilter = new PIXI.PixelateFilter();
var pixelateFolder = gui.addFolder('Pixelate');
pixelateFolder.add(filtersSwitchs, '1').name("apply");
pixelateFolder.add(filtersSwitchs, '2').name("apply");
pixelateFolder.add(pixelateFilter.size, 'x', 1, 32).name("PixelSizeX");
pixelateFolder.add(pixelateFilter.size, 'y', 1, 32).name("PixelSizeY");
@ -56,7 +66,7 @@
var invertFilter = new PIXI.InvertFilter();
var invertFolder = gui.addFolder('Invert');
invertFolder.add(filtersSwitchs, '2').name("apply");
invertFolder.add(filtersSwitchs, '3').name("apply");
invertFolder.add(invertFilter, 'invert', 0, 1).name("Invert");
////
@ -64,7 +74,7 @@
var greyFilter = new PIXI.GreyFilter();
var greyFolder = gui.addFolder('Grey');
greyFolder.add(filtersSwitchs, '3').name("apply");
greyFolder.add(filtersSwitchs, '4').name("apply");
greyFolder.add(greyFilter, 'grey', 0, 1).name("Grey");
////
@ -72,7 +82,7 @@
var sepiaFilter = new PIXI.SepiaFilter();
var sepiaFolder = gui.addFolder('Sepia');
sepiaFolder.add(filtersSwitchs, '4').name("apply");
sepiaFolder.add(filtersSwitchs, '5').name("apply");
sepiaFolder.add(sepiaFilter, 'sepia', 0, 1).name("Sepia");
////
@ -80,7 +90,7 @@
var twistFilter = new PIXI.TwistFilter();
var twistFolder = gui.addFolder('Twist');
twistFolder.add(filtersSwitchs, '5').name("apply");
twistFolder.add(filtersSwitchs, '6').name("apply");
twistFolder.add(twistFilter, 'angle', 0, 10).name("Angle");
twistFolder.add(twistFilter, 'radius', 0, 1).name("Radius");
@ -92,7 +102,7 @@
var dotScreenFilter = new PIXI.DotScreenFilter();
var dotScreenFolder = gui.addFolder('DotScreen');
dotScreenFolder.add(filtersSwitchs, '6').name("apply");
dotScreenFolder.add(filtersSwitchs, '7').name("apply");
dotScreenFolder.add(dotScreenFilter, 'angle', 0, 10);
dotScreenFolder.add(dotScreenFilter, 'scale', 0, 1);
@ -101,12 +111,28 @@
var colorStepFilter = new PIXI.ColorStepFilter();
var colorStepFolder = gui.addFolder('ColorStep');
colorStepFolder.add(filtersSwitchs, '7').name("apply");
colorStepFolder.add(filtersSwitchs, '8').name("apply");
colorStepFolder.add(colorStepFilter, 'step', 1, 100);
colorStepFolder.add(colorStepFilter, 'step', 1, 100);
var filterCollection = [blurFilter, pixelateFilter, invertFilter, greyFilter, sepiaFilter, twistFilter, dotScreenFilter, colorStepFilter];
////
var crossHatchFilter = new PIXI.CrossHatchFilter();
var crossHatchFolder = gui.addFolder('CrossHatch');
crossHatchFolder.add(filtersSwitchs, '9').name("apply");
// var filterCollection = [blurFilter, pixelateFilter, invertFilter, greyFilter, sepiaFilter, twistFilter, dotScreenFilter, //colorStepFilter, crossHatchFilter];
var rgbSplitterFilter = new PIXI.RGBSplitFilter();
var rgbSplitFolder = gui.addFolder('RGB Splitter');
rgbSplitFolder.add(filtersSwitchs, '10').name("apply");
var filterCollection = [displacementFilter, blurFilter, pixelateFilter, invertFilter, greyFilter, sepiaFilter, twistFilter, dotScreenFilter, colorStepFilter, crossHatchFilter, rgbSplitterFilter];
// create an new instance of a pixi stage
@ -159,11 +185,9 @@
pondContainer.addChild(overlay);
var displacementTexture = PIXI.Texture.fromImage("displacement_map.jpg");
var displacementFilter = new PIXI.DisplacementFilter(displacementTexture);
pondContainer.filters = [displacementFilter];
//pondContainer.filters = [displacementFilter];
@ -216,7 +240,7 @@
if(filtersSwitchs[i])filtersToApply.push(filterCollection[i]);
};
stage.filters = filtersToApply.length > 0 ? filtersToApply : null;
pondContainer.filters = filtersToApply.length > 0 ? filtersToApply : null;
for (var i = 0; i < fishs.length; i++)
{
@ -250,5 +274,13 @@
</script>
<div style="position:absolute; bottom:0px; left:6px">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.goodboydigital.com%2Fpixijs%2Fexamples%2F15%2FindexAll.html&amp;width=100&amp;height=21&amp;colorscheme=light&amp;layout=button_count&amp;action=like&amp;show_faces=true&amp;send=false&amp;appId=544967255569759" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="goodboydigital">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
</body>
</html>

724
pixi.sublime-workspace
View file

@ -3,18 +3,74 @@
{
"selected_items":
[
[
"for",
"for for (…) {…}"
],
[
"filters",
"filtersSwitchs"
],
[
"fil",
"filter"
"filtersSwitchs"
],
[
"di",
"displacementMap"
],
[
"fis",
"fishId"
],
[
"po",
"pondContainer"
],
[
"an",
"anchor"
],
[
"fish",
"fishs"
],
[
"displ",
"displacementTexture"
],
[
"pix",
"pixelSize"
],
[
"pi",
"pixelSize"
],
[
"bg",
"bgFront"
],
[
"P",
"PixiShader"
],
[
"de",
"defaultShader"
],
[
"primi",
"primitiveShader"
],
[
"unif",
"uniforms"
],
[
"pro",
"prototype"
],
[
"for",
"for for (…) {…}"
],
[
"blu",
"blurX"
@ -60,82 +116,10 @@
"buffers":
[
{
"file": "examples/example 16 - Displacement/index.html",
"file": "examples/example 15 - Filters/indexAll.html",
"settings":
{
"buffer_size": 4917,
"line_ending": "Unix"
}
},
{
"file": "src/pixi/filters/GreyFilter.js",
"settings":
{
"buffer_size": 986,
"line_ending": "Unix"
}
},
{
"file": "src/pixi/filters/DisplacementFilter.js",
"settings":
{
"buffer_size": 1856,
"line_ending": "Unix"
}
},
{
"file": "src/pixi/renderers/webgl/WebGLRenderGroup.js",
"settings":
{
"buffer_size": 25077,
"line_ending": "Unix"
}
},
{
"file": "src/pixi/textures/RenderTexture.js",
"settings":
{
"buffer_size": 6698,
"line_ending": "Unix"
}
},
{
"file": "examples/example 15 - Filters/indexBlur.html",
"settings":
{
"buffer_size": 2162,
"line_ending": "Unix"
}
},
{
"file": "src/pixi/filters/PixelateFilter.js",
"settings":
{
"buffer_size": 1597,
"line_ending": "Unix"
}
},
{
"file": "src/pixi/renderers/webgl/WebGLFilterManager.js",
"settings":
{
"buffer_size": 12129,
"line_ending": "Unix"
}
},
{
"file": "src/pixi/filters/InvertFilter.js",
"settings":
{
"buffer_size": 1038,
"line_ending": "Unix"
}
},
{
"file": "src/pixi/filters/AbstractFilter.js",
"settings":
{
"buffer_size": 1168,
"buffer_size": 8200,
"line_ending": "Unix"
}
}
@ -143,11 +127,11 @@
"build_system": "",
"command_palette":
{
"height": 0.0,
"height": 392.0,
"selected_items":
[
],
"width": 0.0
"width": 467.0
},
"console":
{
@ -164,34 +148,68 @@
},
"file_history":
[
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/utils/Detector.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/examples/example 15 - Filters/indexAll.html",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/text/Text.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/renderers/webgl/WebGLRenderer.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/examples/example 13 - Graphics/indexLineTest.html",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/renderers/canvas/CanvasRenderer.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/renderers/webgl/WebGLShaders.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/renderers/webgl/PrimitiveShader.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/renderers/webgl/PixiShader.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/test/unit/renderers/CanvasRenderer.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/renderers/canvas/CanvasGraphics.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/CrossHatchFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/Gruntfile.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/SmartBlurFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/SepiaFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/ColorMatrixFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/BlurYFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/RGBSplitFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/renderers/webgl/WebGLRenderGroup.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/RBGSplitFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/renderers/webgl/WebGLGraphics.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/display/Stage.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/examples/example 13 - Graphics/index.html",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/examples/example 10 - Text/index.html",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/examples/example 9 - Tiling Texture/index.html",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/BlurFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/BlurXFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/display/DisplayObjectContainer.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/test/unit/DisplayObjectContainer.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/InvertFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/GreyFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/BlurYFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/TwistFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/DotScreenFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/ColorStepFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/examples/example 14 - Masking/index double mask.html",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/examples/example 14 - Masking/index nested masks.html",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/examples/example 14 - Masking/index.html",
"/Users/matgroves/Library/Application Support/Sublime Text 2/Packages/User/Preferences.sublime-settings",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/renderers/webgl/WebGLFilterManager.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/examples/example 16 - Displacement/index.html",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/BlurFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/renderers/webgl/WebGLRenderGroup.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/display/DisplayObject.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/PixelateFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/AbstractFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/examples/example 15 - Filters/indexDisplacement.html",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/DisplacementFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/GreyFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/InvertFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/ColorMatrixFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/SepiaFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/InteractionManager.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/utils/EventTarget.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/display/DisplayObject.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/textures/BaseTexture.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/test/unit/Sprite.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/extras/TilingSprite.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/examples/example 15 - Filters/indexBlur.html",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/SmartBlurFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/display/DisplayObjectContainer.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/test/unit/DisplayObjectContainer.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/renderers/webgl/StripShader.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/renderers/webgl/WebGLBatch.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/textures/RenderTexture.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/renderers/webgl/PixiStripShader.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/bin/pixi.dev.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/extras/CustomRenderable.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/test/unit/DisplayObject.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/SmartBlur.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/renderers/webgl/filters/FilterManager.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/textures/RenderTexture.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/renderers/webgl/PixiShader.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/examples/example 13 - Graphics/index.html",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/primitives/Graphics.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/renderers/webgl/WebGLGraphics.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/examples/example 11 - RenderTexture/index.html",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/examples/example 14 - Masking/index.html",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/renderers/webgl/WebGLShaders.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/renderers/webgl/WebGLRenderer.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/test/unit/renderers/WebGLShaders.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/core/Matrix.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/docs/classes/RenderTexture.html",
@ -214,6 +232,42 @@
"case_sensitive": false,
"find_history":
[
"displ",
"wordWrap",
"console.log",
"count",
"getAttribLocation",
"setT",
"clear",
"filterManager",
"center",
"angle",
"filter",
"renderSt",
"width",
"mapDimensions",
"flo",
"consol",
" \n",
"pad",
"shaderProgram",
"renderTilingSprite",
"sta",
"PIXI.currentShader",
"primitiveProgram",
"shaderProgram",
"setun",
"2f",
"projectionVector",
"vertexPositionAttribute",
"render",
"textureCoordAttribute",
"pop",
"Filter",
"pus",
"push",
"pushShader",
"colorAttribute",
"consol",
"BlurXFilter",
"filter",
@ -306,23 +360,23 @@
"groups":
[
{
"selected": 3,
"selected": 0,
"sheets":
[
{
"buffer": 0,
"file": "examples/example 16 - Displacement/index.html",
"file": "examples/example 15 - Filters/indexAll.html",
"settings":
{
"buffer_size": 4917,
"buffer_size": 8200,
"regions":
{
},
"selection":
[
[
3159,
3159
365,
365
]
],
"settings":
@ -331,272 +385,10 @@
"translate_tabs_to_spaces": false
},
"translation.x": 0.0,
"translation.y": 1599.0,
"zoom_level": 1.0
},
"type": "text"
},
{
"buffer": 1,
"file": "src/pixi/filters/GreyFilter.js",
"settings":
{
"buffer_size": 986,
"regions":
{
},
"selection":
[
[
662,
662
],
[
738,
738
],
[
778,
778
]
],
"settings":
{
"syntax": "Packages/JavaScript/JavaScript.tmLanguage"
},
"translation.x": 0.0,
"translation.y": 0.0,
"zoom_level": 1.0
},
"type": "text"
},
{
"buffer": 2,
"file": "src/pixi/filters/DisplacementFilter.js",
"settings":
{
"buffer_size": 1856,
"regions":
{
},
"selection":
[
[
1271,
1271
],
[
1355,
1355
],
[
1403,
1403
]
],
"settings":
{
"syntax": "Packages/JavaScript/JavaScript.tmLanguage"
},
"translation.x": 0.0,
"translation.y": 159.0,
"zoom_level": 1.0
},
"type": "text"
},
{
"buffer": 3,
"file": "src/pixi/renderers/webgl/WebGLRenderGroup.js",
"settings":
{
"buffer_size": 25077,
"regions":
{
},
"selection":
[
[
4449,
4449
]
],
"settings":
{
"syntax": "Packages/JavaScript/JavaScript.tmLanguage",
"translate_tabs_to_spaces": false
},
"translation.x": 0.0,
"translation.y": 3015.0,
"zoom_level": 1.0
},
"type": "text"
},
{
"buffer": 4,
"file": "src/pixi/textures/RenderTexture.js",
"settings":
{
"buffer_size": 6698,
"regions":
{
},
"selection":
[
[
5441,
5455
]
],
"settings":
{
"syntax": "Packages/JavaScript/JavaScript.tmLanguage",
"translate_tabs_to_spaces": false
},
"translation.x": 0.0,
"translation.y": 2750.0,
"zoom_level": 1.0
},
"type": "text"
},
{
"buffer": 5,
"file": "examples/example 15 - Filters/indexBlur.html",
"settings":
{
"buffer_size": 2162,
"regions":
{
},
"selection":
[
[
1657,
1657
]
],
"settings":
{
"syntax": "Packages/HTML/HTML.tmLanguage",
"translate_tabs_to_spaces": false
},
"translation.x": 0.0,
"translation.y": 702.0,
"zoom_level": 1.0
},
"type": "text"
},
{
"buffer": 6,
"file": "src/pixi/filters/PixelateFilter.js",
"settings":
{
"buffer_size": 1597,
"regions":
{
},
"selection":
[
[
664,
664
]
],
"settings":
{
"syntax": "Packages/JavaScript/JavaScript.tmLanguage"
},
"translation.x": 0.0,
"translation.y": 74.0,
"zoom_level": 1.0
},
"type": "text"
},
{
"buffer": 7,
"file": "src/pixi/renderers/webgl/WebGLFilterManager.js",
"settings":
{
"buffer_size": 12129,
"regions":
{
},
"selection":
[
[
3743,
3743
]
],
"settings":
{
"syntax": "Packages/JavaScript/JavaScript.tmLanguage",
"translate_tabs_to_spaces": false
},
"translation.x": 0.0,
"translation.y": 2171.0,
"zoom_level": 1.0
},
"type": "text"
},
{
"buffer": 8,
"file": "src/pixi/filters/InvertFilter.js",
"settings":
{
"buffer_size": 1038,
"regions":
{
},
"selection":
[
[
703,
703
],
[
781,
781
],
[
823,
823
]
],
"settings":
{
"syntax": "Packages/JavaScript/JavaScript.tmLanguage"
},
"translation.x": 0.0,
"translation.y": 0.0,
"zoom_level": 1.0
},
"type": "text"
},
{
"buffer": 9,
"file": "src/pixi/filters/AbstractFilter.js",
"settings":
{
"buffer_size": 1168,
"regions":
{
},
"selection":
[
[
980,
982
]
],
"settings":
{
"syntax": "Packages/JavaScript/JavaScript.tmLanguage"
},
"translation.x": 0.0,
"translation.y": 74.0,
"zoom_level": 1.0
},
"type": "text"
}
]
}
@ -642,10 +434,170 @@
"height": 0.0,
"selected_items":
[
[
"indexall",
"examples/example 15 - Filters/indexAll.html"
],
[
"dete",
"src/pixi/utils/Detector.js"
],
[
"webglren",
"src/pixi/renderers/webgl/WebGLRenderGroup.js"
],
[
"rgb",
"src/pixi/filters/RGBSplitFilter.js"
],
[
"grun",
"Gruntfile.js"
],
[
"crossha",
"src/pixi/filters/CrossHatchFilter.js"
],
[
"text",
"src/pixi/text/Text.js"
],
[
"webglgr",
"src/pixi/renderers/webgl/WebGLGraphics.js"
],
[
"canvas",
"src/pixi/renderers/canvas/CanvasGraphics.js"
],
[
"pixisha",
"src/pixi/renderers/webgl/PixiShader.js"
],
[
"sta",
"src/pixi/display/Stage.js"
],
[
"ind",
"examples/example 13 - Graphics/index.html"
],
[
"webglgrap",
"src/pixi/renderers/webgl/WebGLGraphics.js"
],
[
"indexlinete",
"examples/example 13 - Graphics/indexLineTest.html"
],
[
"detec",
"src/pixi/utils/Detector.js"
],
[
"index",
"examples/example 10 - Text/index.html"
],
[
"index.html",
"examples/example 9 - Tiling Texture/index.html"
],
[
"tex",
"src/pixi/text/Text.js"
],
[
"indexnest",
"examples/example 14 - Masking/index nested masks.html"
],
[
"indexdouble",
"examples/example 14 - Masking/index double mask.html"
],
[
"filterma",
"src/pixi/renderers/webgl/WebGLFilterManager.js"
],
[
"bl",
"src/pixi/filters/BlurXFilter.js"
],
[
"blurfi",
"src/pixi/filters/BlurFilter.js"
],
[
"indexa",
"examples/example 15 - Filters/indexAll.html"
],
[
"interac",
"src/pixi/InteractionManager.js"
],
[
"even",
"src/pixi/utils/EventTarget.js"
],
[
"sprite",
"test/unit/Sprite.js"
],
[
"base",
"src/pixi/textures/BaseTexture.js"
],
[
"webglr",
"src/pixi/renderers/webgl/WebGLRenderGroup.js"
],
[
"displa",
"src/pixi/filters/DisplacementFilter.js"
],
[
"tilings",
"src/pixi/extras/TilingSprite.js"
],
[
"indexbl",
"examples/example 15 - Filters/indexBlur.html"
],
[
"indexdis",
"examples/example 15 - Filters/indexDisplacement.html"
],
[
"displayobjectcon",
"src/pixi/display/DisplayObjectContainer.js"
],
[
"inde",
"examples/example 9 - Tiling Texture/index.html"
],
[
"grunt",
"Gruntfile.js"
],
[
"rendert",
"src/pixi/textures/RenderTexture.js"
],
[
"custom",
"src/pixi/extras/CustomRenderable.js"
],
[
"webgls",
"src/pixi/renderers/webgl/WebGLShaders.js"
],
[
"webglsh",
"src/pixi/renderers/webgl/WebGLShaders.js"
],
[
"pixish",
"src/pixi/renderers/webgl/PixiShader.js"
],
[
"displayobjectco",
"src/pixi/display/DisplayObjectContainer.js"
@ -674,46 +626,14 @@
"greyfil",
"src/pixi/filters/GreyFilter.js"
],
[
"grun",
"Gruntfile.js"
],
[
"webgle",
"src/pixi/renderers/webgl/WebGLRenderGroup.js"
],
[
"displa",
"src/pixi/display/DisplayObject.js"
],
[
"index",
"examples/example 16 - Displacement/index.html"
],
[
"ind",
"examples/example 13 - Graphics/index.html"
],
[
"grunt",
"Gruntfile.js"
],
[
"webglgr",
"src/pixi/renderers/webgl/WebGLGraphics.js"
],
[
"webglsh",
"src/pixi/renderers/webgl/WebGLShaders.js"
],
[
"webglsha",
"test/unit/renderers/WebGLShaders.js"
],
[
"webglren",
"src/pixi/renderers/webgl/WebGLRenderer.js"
],
[
"webgl",
"src/pixi/renderers/webgl/WebGLShaders.js"
@ -726,18 +646,10 @@
"index.",
"examples/example 13 - Graphics/index.html"
],
[
"inde",
"examples/example 14 - Masking/index.html"
],
[
"rendertexture",
"src/pixi/textures/RenderTexture.js"
],
[
"rendert",
"docs/classes/RenderTexture.html"
],
[
"matrix",
"src/pixi/core/Matrix.js"

69
src/pixi/filters/CrossHatchFilter.js Normal file
View file

@ -0,0 +1,69 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI.CrossHatchFilter = function()
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
this.uniforms = {
blur: {type: 'f', value: 1/512},
};
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform float blur;",
"uniform sampler2D uSampler;",
"void main(void) {",
" float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);",
" ",
" gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);",
" ",
" if (lum < 1.00) {",
" if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {",
" gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);",
" }",
" }",
" ",
" if (lum < 0.75) {",
" if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {",
" gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);",
" }",
" }",
" ",
" if (lum < 0.50) {",
" if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {",
" gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);",
" }",
" }",
" ",
" if (lum < 0.3) {",
" if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {",
" gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);",
" }",
" }",
"}"
];
}
PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter;
Object.defineProperty(PIXI.CrossHatchFilter.prototype, 'blur', {
get: function() {
return this.uniforms.blur.value / (1/7000);
},
set: function(value) {
//this.padding = value;
this.uniforms.blur.value = (1/7000) * value;
}
});

50
src/pixi/filters/RGBSplitFilter.js Normal file
View file

@ -0,0 +1,50 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI.RGBSplitFilter = function()
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
this.uniforms = {
red: {type: 'f2', value: {x:20, y:20}},
green: {type: 'f2', value: {x:-20, y:20}},
blue: {type: 'f2', value: {x:20, y:-20}},
dimensions: {type: 'f4', value:[0,0,0,0]}
};
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform vec2 red;",
"uniform vec2 green;",
"uniform vec2 blue;",
"uniform vec4 dimensions;",
"uniform sampler2D uSampler;",
"void main(void) {",
"gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;",
"gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;",
"gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;",
"gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;",
"}"
];
}
PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter;
Object.defineProperty(PIXI.RGBSplitFilter.prototype, 'angle', {
get: function() {
return this.uniforms.blur.value / (1/7000);
},
set: function(value) {
//this.padding = value;
this.uniforms.blur.value = (1/7000) * value;
}
});

6
src/pixi/renderers/webgl/WebGLFilterManager.js
View file

@ -3,8 +3,10 @@
*/
PIXI.WebGLFilterManager = function()
PIXI.WebGLFilterManager = function(transparent)
{
this.transparent = transparent;
this.filterStack = [];
this.texturePool = [];
@ -195,7 +197,7 @@ PIXI.WebGLFilterManager.prototype.popFilter = function()
// time to render the filters texture to the previous scene
if(this.filterStack.length === 0)
{
gl.colorMask(true, true, true, this.buffer);
gl.colorMask(true, true, true, this.transparent);
}
else
{

8
src/pixi/renderers/webgl/WebGLRenderGroup.js
View file

@ -15,16 +15,18 @@
* @contructor
* @param gl {WebGLContext} An instance of the webGL context
*/
PIXI.WebGLRenderGroup = function(gl)
PIXI.WebGLRenderGroup = function(gl, transparent)
{
this.gl = gl;
this.root;
this.backgroundColor;
this.transparent = transparent == undefined ? true : transparent;
this.batchs = [];
this.toRemove = [];
this.filterManager = new PIXI.WebGLFilterManager();
console.log(this.transparent)
this.filterManager = new PIXI.WebGLFilterManager(this.transparent);
}
// constructor

4
src/pixi/renderers/webgl/WebGLRenderer.js
View file

@ -94,8 +94,8 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
//PIXI.pushShader(PIXI.defaultShader);
this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl);
this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl, this.transparent);
// this.stageRenderGroup. = this.transparent
}
// constructor