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

Tweaks to Filters runing in render Texture

Browse source 
Added Blur Example
This commit is contained in:
Mat Groves 2013-10-30 23:40:40 +00:00
parent 10379289bb
commit 429851493c
19 changed files with 1895 additions and 218 deletions
Download patch file Download diff file Expand all files Collapse all files

1323
bin/pixi.dev.js
View file

File diff suppressed because it is too large Load diff

63
bin/pixi.dev.js.map Normal file
View file

File diff suppressed because one or more lines are too long

10
bin/pixi.js
View file

File diff suppressed because one or more lines are too long

BIN
examples/example 15 - Filters/depth_blur_BG.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.7 KiB

BIN
examples/example 15 - Filters/depth_blur_dudes.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 94 KiB

BIN
examples/example 15 - Filters/depth_blur_moby.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 172 KiB

BIN
examples/example 15 - Filters/displacement_BG.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
examples/example 15 - Filters/displacement_fish1.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
examples/example 15 - Filters/displacement_fish2.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.3 KiB

BIN
examples/example 15 - Filters/displacement_fish3.jpg Normal file
View file

Binary file not shown.

BIN
examples/example 15 - Filters/displacement_fish4.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
examples/example 15 - Filters/displacement_overlay.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 29 KiB

111
examples/example 15 - Filters/indexBlur.html Normal file
View file

@ -0,0 +1,111 @@
<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 15 - Filters</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="../../bin/pixi.dev.js"></script>
<script src="pixi.js"></script>
</head>
<body>
<script>
var renderer = PIXI.autoDetectRenderer(630, 410);
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF, true);
stage.interactive = true;
var bg = PIXI.Sprite.fromImage("depth_blur_BG.jpg");
stage.addChild(bg);
var littleDudes = PIXI.Sprite.fromImage("depth_blur_dudes.jpg");
littleDudes.position.y = 100;
stage.addChild(littleDudes);
var littleRobot = PIXI.Sprite.fromImage("depth_blur_moby.jpg");
littleRobot.position.x = 120;
stage.addChild(littleRobot);
var blurFilter1 = new PIXI.BlurFilter();
var blurFilter2 = new PIXI.BlurFilter();
littleDudes.filters = [blurFilter1];
littleRobot.filters = [blurFilter2];
renderer.view.style.position = "absolute"
renderer.view.style.width = window.innerWidth + "px";
renderer.view.style.height = window.innerHeight + "px";
renderer.view.style.display = "block";
// add render view to DOM
document.body.appendChild(renderer.view);
var count = 0;
var switchy = false;
stage.click = stage.tap = function()
{
switchy = !switchy
if(!switchy)
{
//stage.filters = [filter];
}
else
{
// stage.filters = null;
}
}
/*
* Add a pixi Logo!
*/
var logo = PIXI.Sprite.fromImage("../../logo_small.png")
stage.addChild(logo);
logo.anchor.x = 1;
logo.anchor.y = 1;
logo.position.x = 630
logo.scale.x = logo.scale.y = 0.5;
logo.position.y = 400;
logo.interactive = true;
logo.buttonMode = true;
logo.click = logo.tap = function()
{
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
}
requestAnimFrame(animate);
function animate() {
count += 0.01;
var blurAmount = Math.cos(count) ;
var blurAmount2 = Math.sin(count) ;
blurFilter1.blur = 1/300 * (blurAmount);
blurFilter2.blur = 1/300 * (blurAmount2);
renderer.render(stage);
requestAnimFrame( animate );
}
</script>
</body>
</html>

28
examples/example 16 - Displacement/index.html
View file

@ -38,7 +38,6 @@
var blur = new PIXI.BlurFilter(); var blur = new PIXI.BlurFilter();
// create an new instance of a pixi stage // create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF, true); var stage = new PIXI.Stage(0xFFFFFF, true);
@ -69,7 +68,7 @@
var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg"); var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg");
bgFront.anchor.x = 0.5; bgFront.anchor.x = 0.5;
bgFront.anchor.y = 0.5; bgFront.anchor.y = 0.5;
bgFront.filters = [blur]//, blurY]; //bgFront.filters = [blur]//, blurY];
stage.addChild(bgFront); stage.addChild(bgFront);
bgFront.position.x = 800/2; bgFront.position.x = 800/2;
bgFront.position.y = 600/2; bgFront.position.y = 600/2;
@ -107,7 +106,7 @@
//container.filters = [smart]//f, f2]; //container.filters = [smart]//f, f2];
//panda.filters = [f2]; //panda.filters = [f2];
// container.filters = [filter]
var count = 0; var count = 0;
var switchy = false; var switchy = false;
@ -117,13 +116,13 @@
if(!switchy) if(!switchy)
{ {
// panda.filters = [filter];// container.filters = [f];//
container.filters = [f,blurX, blurY]; // container.filters = [filter]//,blurX, blurY];
} }
else else
{ {
//panda.filters = null//.. [filter]; container.filters = null//.. [filter];
container.filters = null; // container.filters = null;
} }
PIXI.runList(stage); PIXI.runList(stage);
@ -154,20 +153,19 @@
stage.addChild(help); stage.addChild(help);
//stage.filters = [filter]; //stage.filters = [filter];
//stage.addChild(new PIXI.Sprite(mapTexture)) stage.addChild(new PIXI.Sprite(mapTexture))
PIXI.runList(stage); PIXI.runList(stage);
requestAnimFrame(animate); requestAnimFrame(animate);
var position = new PIXI.Point(800/2 + 200, 600/2 ); var position = new PIXI.Point(800/2 , 600/2 );
function animate() { function animate() {
/// mapTexture.render(container, position); mapTexture.render(container, position, true);
// console.log(PIXI.frameBufferPool.length);
filter.scale.x = Math.sin(count) * 100; filter.scale.x = Math.sin(count) * 100;
filter.scale.y = Math.cos(count) * 100; filter.scale.y = Math.cos(count) * 100;
bg.rotation += 0.01; bg.rotation += 0.01;
@ -181,11 +179,11 @@
count += 0.1; count += 0.1;
blurX.blur = 1/256; // blurX.blur = Math.sin(count) * 1/128;
blurY.blur = 1/256; // blurY.blur = Math.cos(count) * 1/128;
// filter.matrix = colorMatrix; // filter.matrix = colorMatrix;
f.grey = Math.sin(count)
renderer.render(stage); renderer.render(stage);
// f.renderTex(); // f.renderTex();

8
pixi.sublime-project Normal file
View file

@ -0,0 +1,8 @@
{
"folders":
[
{
"path": "/Users/matgroves/Dropbox/Development/html/workspace/pixi.js"
}
]
}

535
pixi.sublime-workspace Normal file
View file

@ -0,0 +1,535 @@
{
"auto_complete":
{
"selected_items":
[
[
"pro",
"prototype"
],
[
"for",
"for for (…) {…}"
],
[
"fil",
"filters"
],
[
"blu",
"blurX"
],
[
"Blu",
"BlurXFilter"
],
[
"appl",
"applyFilterPass"
],
[
"ou",
"outputTexture"
],
[
"filte",
"filterBlock"
],
[
"We",
"WebGLGraphics"
],
[
"max",
"maxY"
],
[
"min",
"minY"
],
[
"re",
"rectangle"
],
[
"rend",
"renderable"
]
]
},
"buffers":
[
{
"file": "examples/example 16 - Displacement/index.html",
"settings":
{
"buffer_size": 4901,
"line_ending": "Unix"
}
},
{
"file": "src/pixi/filters/GreyFilter.js",
"settings":
{
"buffer_size": 852,
"line_ending": "Unix"
}
},
{
"file": "src/pixi/filters/DisplacementFilter.js",
"settings":
{
"buffer_size": 1698,
"line_ending": "Unix"
}
},
{
"file": "src/pixi/renderers/webgl/WebGLRenderGroup.js",
"settings":
{
"buffer_size": 25104,
"line_ending": "Unix"
}
},
{
"file": "src/pixi/renderers/webgl/WebGLFilterManager.js",
"settings":
{
"buffer_size": 11987,
"line_ending": "Unix"
}
}
],
"build_system": "",
"command_palette":
{
"height": 0.0,
"selected_items":
[
],
"width": 0.0
},
"console":
{
"height": 139.0
},
"distraction_free":
{
"menu_visible": true,
"show_minimap": false,
"show_open_files": false,
"show_tabs": false,
"side_bar_visible": false,
"status_bar_visible": false
},
"file_history":
[
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/renderers/webgl/WebGLFilterManager.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/filters/BlurXFilter.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/BlurYFilter.js",
"/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/filters/SmartBlurFilter.js",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/Gruntfile.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/ColorMatrixFilter.js",
"/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/SepiaFilter.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",
"/Users/matgroves/Dropbox/Development/html/workspace/pixi.js/src/pixi/core/Ellipse.js"
],
"find":
{
"height": 35.0
},
"find_in_files":
{
"height": 0.0,
"where_history":
[
""
]
},
"find_state":
{
"case_sensitive": false,
"find_history":
[
"console",
"pand",
"colorMatrix",
"FilterTexture",
"minY",
"minX",
"uvBuffer",
" \n",
"console",
"data",
"console",
"applyFilterPass",
" \n",
"filterA",
" \n",
"filters",
"render",
"filter",
"Filter",
"filter",
"Filter",
"filter",
" //",
" \n",
"\n ",
" \n",
"pass",
"RTScene",
"vTexCoord",
"blurSize",
"FilterManager",
"i",
"dirty",
"console",
" ",
"PIXI.projection",
"\n ",
"h1",
"h0",
"w1",
"w0",
"TODO",
"radius",
"Things",
"radius",
" ",
"t",
"cle",
"this",
"PIXI",
");\n",
"\n",
" \n",
" \n",
"console",
" \n",
"this",
"this.renderSpecial(renderable, projection);\nthis.renderSpecial(renderable, projection);\nrenderSpecial",
"this.renderSpecial(renderable, projection);",
"off",
"atlas",
"spineboy.atlas",
"spineboy.atla",
"spineboy.png",
"floor",
"groun"
],
"highlight": true,
"in_selection": false,
"preserve_case": false,
"regex": false,
"replace_history":
[
],
"reverse": false,
"show_context": true,
"use_buffer2": true,
"whole_word": false,
"wrap": true
},
"groups":
[
{
"selected": 0,
"sheets":
[
{
"buffer": 0,
"file": "examples/example 16 - Displacement/index.html",
"settings":
{
"buffer_size": 4901,
"regions":
{
},
"selection":
[
[
2608,
2608
]
],
"settings":
{
"syntax": "Packages/HTML/HTML.tmLanguage",
"translate_tabs_to_spaces": false
},
"translation.x": 0.0,
"translation.y": 0.0,
"zoom_level": 1.0
},
"type": "text"
},
{
"buffer": 1,
"file": "src/pixi/filters/GreyFilter.js",
"settings":
{
"buffer_size": 852,
"regions":
{
},
"selection":
[
[
0,
0
]
],
"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": 1698,
"regions":
{
},
"selection":
[
[
818,
818
]
],
"settings":
{
"syntax": "Packages/JavaScript/JavaScript.tmLanguage"
},
"translation.x": 0.0,
"translation.y": 0.0,
"zoom_level": 1.0
},
"type": "text"
},
{
"buffer": 3,
"file": "src/pixi/renderers/webgl/WebGLRenderGroup.js",
"settings":
{
"buffer_size": 25104,
"regions":
{
},
"selection":
[
[
3418,
3418
]
],
"settings":
{
"syntax": "Packages/JavaScript/JavaScript.tmLanguage",
"translate_tabs_to_spaces": false
},
"translation.x": 4.0,
"translation.y": 1680.0,
"zoom_level": 1.0
},
"type": "text"
},
{
"buffer": 4,
"file": "src/pixi/renderers/webgl/WebGLFilterManager.js",
"settings":
{
"buffer_size": 11987,
"regions":
{
},
"selection":
[
[
664,
664
]
],
"settings":
{
"syntax": "Packages/JavaScript/JavaScript.tmLanguage",
"translate_tabs_to_spaces": false
},
"translation.x": 0.0,
"translation.y": 371.0,
"zoom_level": 1.0
},
"type": "text"
}
]
}
],
"incremental_find":
{
"height": 0.0
},
"input":
{
"height": 33.0
},
"layout":
{
"cells":
[
[
0,
0,
1,
1
]
],
"cols":
[
0.0,
1.0
],
"rows":
[
0.0,
1.0
]
},
"menu_visible": true,
"replace":
{
"height": 0.0
},
"save_all_on_build": true,
"select_file":
{
"height": 0.0,
"selected_items":
[
[
"webglrend",
"src/pixi/renderers/webgl/WebGLRenderGroup.js"
],
[
"greyfil",
"src/pixi/filters/GreyFilter.js"
],
[
"displ",
"src/pixi/display/DisplayObject.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"
],
[
"grap",
"src/pixi/primitives/Graphics.js"
],
[
"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"
]
],
"width": 0.0
},
"select_project":
{
"height": 0.0,
"selected_items":
[
],
"width": 0.0
},
"show_minimap": true,
"show_open_files": false,
"show_tabs": true,
"side_bar_visible": true,
"side_bar_width": 229.0,
"status_bar_visible": true
}

7
src/pixi/filters/DisplacementFilter.js
View file

@ -27,8 +27,11 @@ PIXI.DisplacementFilter = function(texture)
"const vec2 textureDimensions = vec2(800.0, 600.0);", "const vec2 textureDimensions = vec2(800.0, 600.0);",
"void main(void) {", "void main(void) {",
"vec2 mapCords = vTextureCoord.xy;",
"vec2 matSample = texture2D(displacementMap, vTextureCoord * (textureDimensions/mapDimensions)).xy;", // "mapCords -= ;",
// "mapCords.y *= -1.0;",
// "mapCords.y += 1.0;",
"vec2 matSample = texture2D(displacementMap, mapCords).xy;",
"matSample -= 0.5;", "matSample -= 0.5;",
"matSample *= scale;", "matSample *= scale;",
"matSample /= textureDimensions;", "matSample /= textureDimensions;",

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

@ -73,6 +73,8 @@ PIXI.WebGLFilterManager.prototype.pushFilter = function(filterBlock)
//filter.texture = texture; //filter.texture = texture;
filterBlock._glFilterTexture = texture; filterBlock._glFilterTexture = texture;
//console.log("PUSH")
} }
@ -172,7 +174,7 @@ PIXI.WebGLFilterManager.prototype.popFilter = function()
// time to render the filters texture to the previous scene // time to render the filters texture to the previous scene
if(this.filterStack.length === 0) if(this.filterStack.length === 0)
{ {
gl.colorMask(true, true, true, false); gl.colorMask(true, true, true, this.buffer);
} }
else else
{ {

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

@ -99,9 +99,15 @@ PIXI.WebGLRenderGroup.prototype.render = function(projection, buffer)
PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, projection, buffer) PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, projection, buffer)
{ {
PIXI.WebGLRenderer.updateTextures(); PIXI.WebGLRenderer.updateTextures();
var gl = this.gl; var gl = this.gl;
gl.uniform2f(PIXI.currentShader.projectionVector, projection.x, projection.y); gl.uniform2f(PIXI.currentShader.projectionVector, projection.x, projection.y);
this.filterManager.begin(projection, buffer);
//console.log(buffer)
//gl.uniform2f(PIXI.currentShader.projectionVector, projection.x, projection.y);
// to do! // to do!
// render part of the scene... // render part of the scene...
@ -121,11 +127,13 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
var nextRenderable = displayObject.first; var nextRenderable = displayObject.first;
while(nextRenderable._iNext) while(nextRenderable._iNext)
{ {
nextRenderable = nextRenderable._iNext;
if(nextRenderable.renderable && nextRenderable.__renderGroup)break; if(nextRenderable.renderable && nextRenderable.__renderGroup)break;
nextRenderable = nextRenderable._iNext;
} }
var startBatch = nextRenderable.batch; var startBatch = nextRenderable.batch;
//console.log(nextRenderable);
//console.log(renderable)
if(nextRenderable instanceof PIXI.Sprite) if(nextRenderable instanceof PIXI.Sprite)
{ {
startBatch = nextRenderable.batch; startBatch = nextRenderable.batch;
@ -155,13 +163,11 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
} }
// Get the LAST renderable object // Get the LAST renderable object
var lastRenderable = displayObject; var lastRenderable = displayObject.last;
var endBatch; while(lastRenderable._iPrev)
var lastItem = displayObject;
while(lastItem.children.length > 0)
{ {
lastItem = lastItem.children[lastItem.children.length-1]; if(lastRenderable.renderable && lastRenderable.__renderGroup)break;
if(lastItem.renderable)lastRenderable = lastItem.last; lastRenderable = lastRenderable._iNext;
} }
if(lastRenderable instanceof PIXI.Sprite) if(lastRenderable instanceof PIXI.Sprite)
@ -190,6 +196,7 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
endBatch = lastRenderable; endBatch = lastRenderable;
} }
console.log(endBatch);
// TODO - need to fold this up a bit! // TODO - need to fold this up a bit!
if(startBatch == endBatch) if(startBatch == endBatch)
@ -259,6 +266,7 @@ PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection)
var worldVisible = renderable.vcount === PIXI.visibleCount var worldVisible = renderable.vcount === PIXI.visibleCount
if(renderable instanceof PIXI.TilingSprite) if(renderable instanceof PIXI.TilingSprite)
{ {
if(worldVisible)this.renderTilingSprite(renderable, projection); if(worldVisible)this.renderTilingSprite(renderable, projection);