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

FIlters Added.. again!

Browse source 
some filters added to pixi
example 15 added too
This commit is contained in:
Mat Groves 2013-09-30 01:19:21 +01:00
parent 56df185471
commit fc80c0c602
42 changed files with 26689 additions and 12427 deletions
Download patch file Download diff file Expand all files Collapse all files

6
Gruntfile.js
View file

@ -22,6 +22,8 @@ module.exports = function(grunt) {
'<%= dirs.src %>/display/Sprite.js',
'<%= dirs.src %>/display/MovieClip.js',
'<%= dirs.src %>/filters/FilterBlock.js',
'<%= dirs.src %>/filters/ColorMatrixFilter.js',
'<%= dirs.src %>/filters/GreyFilter.js',
'<%= dirs.src %>/text/Text.js',
'<%= dirs.src %>/text/BitmapText.js',
'<%= dirs.src %>/InteractionManager.js',
@ -31,6 +33,7 @@ module.exports = function(grunt) {
'<%= dirs.src %>/utils/Detector.js',
'<%= dirs.src %>/utils/Polyk.js',
'<%= dirs.src %>/renderers/webgl/WebGLShaders.js',
'<%= dirs.src %>/renderers/webgl/PixiShader.js',
'<%= dirs.src %>/renderers/webgl/WebGLGraphics.js',
'<%= dirs.src %>/renderers/webgl/WebGLRenderer.js',
'<%= dirs.src %>/renderers/webgl/WebGLBatch.js',
@ -124,7 +127,8 @@ module.exports = function(grunt) {
'examples/example 11 - RenderTexture',
'examples/example 12 - Spine',
'examples/example 13 - Graphics',
'examples/example 14 - Masking'
'examples/example 14 - Masking',
'examples/example 15 - Filters'
]
},
connect: {

1127
bin/pixi.dev.js
View file

File diff suppressed because it is too large Load diff

10
bin/pixi.js
View file

File diff suppressed because one or more lines are too long

1127
examples/example 1 - Basics/pixi.js
View file

File diff suppressed because it is too large Load diff

1127
examples/example 10 - Text/pixi.js
View file

File diff suppressed because it is too large Load diff

1127
examples/example 11 - RenderTexture/pixi.js
View file

File diff suppressed because it is too large Load diff

1127
examples/example 12 - Spine/pixi.js
View file

File diff suppressed because it is too large Load diff

1127
examples/example 13 - Graphics/pixi.js
View file

File diff suppressed because it is too large Load diff

1127
examples/example 14 - Masking/pixi.js
View file

File diff suppressed because it is too large Load diff

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 136 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 209 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 169 KiB

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 111 KiB

159
examples/example 15 - Filters/index.html Normal file
View file

@ -0,0 +1,159 @@
<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 15 - Filters</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="pixi.js"></script>
</head>
<body>
<script>
var renderer = PIXI.autoDetectRenderer(620, 380);
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF, true);
stage.interactive = true;
var bg = PIXI.Sprite.fromImage("BGrotate.jpg");
bg.anchor.x = 0.5;
bg.anchor.y = 0.5;
bg.position.x = 620/2;
bg.position.y = 380/2;
var colorMatrix = [1,0,0,0,
0,1,0,0,
0,0,1,0,
0,0,0,1];
var filter = new PIXI.ColorMatrixFilter();
var container = new PIXI.DisplayObjectContainer();
container.position.x = 620/2;
container.position.y = 380/2;
var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg");
bgFront.anchor.x = 0.5;
bgFront.anchor.y = 0.5;
container.addChild(bgFront);
var light2 = PIXI.Sprite.fromImage("LightRotate2.png");
light2.anchor.x = 0.5;
light2.anchor.y = 0.5;
container.addChild(light2);
var light1 = PIXI.Sprite.fromImage("LightRotate1.png");
light1.anchor.x = 0.5;
light1.anchor.y = 0.5;
container.addChild(light1);
var panda = PIXI.Sprite.fromImage("panda.png");
panda.anchor.x = 0.5;
panda.anchor.y = 0.5;
container.addChild(panda);
stage.addChild(container);
// create a renderer instance
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);
stage.filters = [filter];
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.position.x = 620
logo.scale.x = logo.scale.y = 0.5;
logo.position.y = 320;
logo.interactive = true;
logo.buttonMode = true;
logo.click = logo.tap = function()
{
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
}
var help = new PIXI.Text("Click to turn filters on / off.", {font:"bold 12pt Arial", fill:"white"});
help.position.y = 350;
help.position.x = 10;
stage.addChild(help);
//stage.filters = [filter];
PIXI.runList(stage);
requestAnimFrame(animate);
function animate() {
bg.rotation += 0.01;
bgFront.rotation -= 0.01;
light1.rotation += 0.02;
light2.rotation += 0.01;
panda.scale.x = 1 + Math.sin(count) * 0.04;
panda.scale.y = 1 + Math.cos(count) * 0.04;
count += 0.1;
colorMatrix[1] = Math.sin(count) * 3;
colorMatrix[2] = Math.cos(count);
colorMatrix[3] = Math.cos(count) * 1.5;
colorMatrix[4] = Math.sin(count/3) * 2;
colorMatrix[5] = Math.sin(count/2);
colorMatrix[6] = Math.sin(count/4);
filter.matrix = colorMatrix;
renderer.render(stage);
requestAnimFrame( animate );
}
</script>
</body>
</html>

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 68 KiB

10649
examples/example 15 - Filters/pixi.js Normal file
View file

File diff suppressed because it is too large Load diff

1127
examples/example 2 - SpriteSheet/pixi.js
View file

File diff suppressed because it is too large Load diff

1127
examples/example 3 - MovieClip/pixi.js
View file

File diff suppressed because it is too large Load diff

1127
examples/example 4 - Balls/pixi.js
View file

File diff suppressed because it is too large Load diff

1127
examples/example 5 - Morph/pixi.js
View file

File diff suppressed because it is too large Load diff

1127
examples/example 6 - Interactivity/pixi.js
View file

File diff suppressed because it is too large Load diff

1127
examples/example 7 - Transparent Background/pixi.js
View file

File diff suppressed because it is too large Load diff

1127
examples/example 8 - Dragging/pixi.js
View file

File diff suppressed because it is too large Load diff

1127
examples/example 9 - Tiling Texture/pixi.js
View file

File diff suppressed because it is too large Load diff

4
src/pixi/InteractionManager.js
View file

@ -2,9 +2,7 @@
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
/**
* The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive
* This manager also supports multitouch.
*

79
src/pixi/display/DisplayObject.js
View file

@ -12,7 +12,6 @@ PIXI.DisplayObject = function()
{
this.last = this;
this.first = this;
/**
* The coordinate of the object relative to the local coordinates of the parent.
*
@ -289,16 +288,57 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'mask', {
},
set: function(value) {
this._mask = value;
if(value)
{
if(this._mask)
{
value.start = this._mask.start;
value.end = this._mask.end;
}
else
{
this.addFilter(value);
value.renderable = false;
}
}
else
{
this.removeFilter(this._mask);
this._mask.renderable = true;
}
this._mask = value;
}
});
/**
* Sets the filters for the displayObject. Currently there's a few limitations.
* 1: At the moment only one filter can be applied at a time..
* 2: They cannot be nested.
* 3: There's no padding yet.
* 4: this is a webGL only feature.
* @property filters
* @type Array
*/
Object.defineProperty(PIXI.DisplayObject.prototype, 'filters', {
get: function() {
return this._filters;
},
set: function(value) {
//if(value == )
if(value)
{
if(this._filters)this.removeFilter(this._filters);
this.addFilter(value)
}
else
{
this.removeFilter();
if(this._filters)this.removeFilter(this._filters);
}
this._filters = value;
}
});
@ -309,17 +349,21 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'mask', {
* @param mask {Graphics} the graphics object to use as a filter
* @private
*/
PIXI.DisplayObject.prototype.addFilter = function(mask)
PIXI.DisplayObject.prototype.addFilter = function(data)
{
if(this.filter)return;
this.filter = true;
//if(this.filter)return;
//this.filter = true;
// insert a filter block..
// TODO Onject pool thease bad boys..
var start = new PIXI.FilterBlock();
var end = new PIXI.FilterBlock();
start.mask = mask;
end.mask = mask;
data.start = start;
data.end = end;
start.data = data;
end.data = data;
start.first = start.last = this;
end.first = end.last = this;
@ -397,8 +441,6 @@ PIXI.DisplayObject.prototype.addFilter = function(mask)
this.__renderGroup.addFilterBlocks(start, end);
}
mask.renderable = false;
}
/*
@ -407,13 +449,14 @@ PIXI.DisplayObject.prototype.addFilter = function(mask)
* @method removeFilter
* @private
*/
PIXI.DisplayObject.prototype.removeFilter = function()
PIXI.DisplayObject.prototype.removeFilter = function(data)
{
if(!this.filter)return;
this.filter = false;
//if(!this.filter)return;
//this.filter = false;
console.log("YUOIO")
// modify the list..
var startBlock = this.first;
var startBlock = data.start;
var nextObject = startBlock._iNext;
var previousObject = startBlock._iPrev;
@ -423,9 +466,8 @@ PIXI.DisplayObject.prototype.removeFilter = function()
this.first = startBlock._iNext;
// remove the end filter
var lastBlock = this.last;
var lastBlock = data.end;
var nextObject = lastBlock._iNext;
var previousObject = lastBlock._iPrev;
@ -444,9 +486,6 @@ PIXI.DisplayObject.prototype.removeFilter = function()
if(!updateLast)break;
}
var mask = startBlock.mask
mask.renderable = true;
// if webGL...
if(this.__renderGroup)
{

14
src/pixi/display/DisplayObjectContainer.js
View file

@ -29,18 +29,6 @@ PIXI.DisplayObjectContainer = function()
PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype );
PIXI.DisplayObjectContainer.prototype.constructor = PIXI.DisplayObjectContainer;
//TODO make visible a getter setter
/*
Object.defineProperty(PIXI.DisplayObjectContainer.prototype, 'visible', {
get: function() {
return this._visible;
},
set: function(value) {
this._visible = value;
}
});*/
/**
* Adds a child to the container.
*
@ -84,7 +72,7 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
var previousObject;
// this could be wrong if there is a filter??
if(this.filter)
if(this._filters)
{
previousObject = this.last._iPrev;
}

1
src/pixi/display/Sprite.js
View file

@ -194,4 +194,3 @@ PIXI.Sprite.fromImage = function(imageId)
var texture = PIXI.Texture.fromImage(imageId);
return new PIXI.Sprite(texture);
}

38
src/pixi/filters/ColorMatrixFilter.js Normal file
View file

@ -0,0 +1,38 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI.ColorMatrixFilter = function()
{
// set the uniforms
this.uniforms = {
matrix: {type: 'mat4', value: [1,0,0,0,
0,1,0,0,
0,0,1,0,
0,0,0,1]},
};
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform float invert;",
"uniform mat4 matrix;",
"uniform sampler2D uSampler;",
"void main(void) {",
"gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;",
"gl_FragColor = gl_FragColor * vColor;",
"}"
];
}
Object.defineProperty(PIXI.ColorMatrixFilter.prototype, 'matrix', {
get: function() {
return this.uniforms.matrix.value;
},
set: function(value) {
this.uniforms.matrix.value = value;
}
});

4
src/pixi/filters/FilterBlock.js
View file

@ -4,10 +4,8 @@
PIXI.FilterBlock = function(mask)
PIXI.FilterBlock = function()
{
this.graphics = mask
this.visible = true;
this.renderable = true;
}

47
src/pixi/filters/GreyFilter.js Normal file
View file

@ -0,0 +1,47 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI.GreyFilter = function()
{
// set the uniforms
this.uniforms = {
grey: {type: 'f', value: 1},
};
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform sampler2D uSampler;",
"uniform float grey;",
"void main(void) {",
"gl_FragColor = texture2D(uSampler, vTextureCoord);",
"gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), grey);",
"gl_FragColor = gl_FragColor * vColor;",
"}"
];
this.primitiveFragmentSrc = [
"precision mediump float;",
"varying vec4 vColor;",
"uniform float grey;",
"void main(void) {",
"gl_FragColor = vColor;",
"gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), grey);",
"gl_FragColor = gl_FragColor * vColor;",
"}"
];
}
Object.defineProperty(PIXI.GreyFilter.prototype, 'grey', {
get: function() {
return this.uniforms.grey.value;
},
set: function(value) {
this.uniforms.grey.value = value;
}
});

36
src/pixi/filters/InvertFilter.js Normal file
View file

@ -0,0 +1,36 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI.InvertFilter = function()
{
// set the uniforms
this.uniforms = {
invert: {type: 'f', value: 0.5},
};
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform float invert;",
"uniform sampler2D uSampler;",
"void main(void) {",
"gl_FragColor = texture2D(uSampler, vTextureCoord);",
"gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, invert);",
//"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;",
"gl_FragColor = gl_FragColor * vColor;",
"}"
];
}
Object.defineProperty(PIXI.InvertFilter.prototype, 'invert', {
get: function() {
return this.uniforms.invert.value;
},
set: function(value) {
this.uniforms.invert.value = value;
}
});

38
src/pixi/filters/SepiaFilter.js Normal file
View file

@ -0,0 +1,38 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI.SepiaFilter = function()
{
// set the uniforms
this.uniforms = {
sepia: {type: 'f', value: 1},
};
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform float sepia;",
"uniform sampler2D uSampler;",
"const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);",
"void main(void) {",
"gl_FragColor = texture2D(uSampler, vTextureCoord);",
"gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);",
"gl_FragColor = gl_FragColor * vColor;",
"}"
];
}
Object.defineProperty(PIXI.SepiaFilter.prototype, 'sepia', {
get: function() {
return this.uniforms.sepia.value;
},
set: function(value) {
this.uniforms.sepia.value = value;
}
});

7
src/pixi/renderers/canvas/CanvasRenderer.js
View file

@ -203,6 +203,8 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
PIXI.CanvasGraphics.renderGraphics(displayObject, context);
}
else if(displayObject instanceof PIXI.FilterBlock)
{
if(PIXI.FilterBlock.data instanceof PIXI.Graphics)
{
if(displayObject.open)
{
@ -227,6 +229,11 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
context.restore();
}
}
else
{
// only masks supported right now!
}
}
// count++
displayObject = displayObject._iNext;

70
src/pixi/renderers/webgl/PixiShader.js Normal file
View file

@ -0,0 +1,70 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI.PixiShader = function()
{
// the webGL program..
this.program;
this.fragmentSrc = [
"precision lowp float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform sampler2D uSampler;",
"void main(void) {",
"gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;",
"}"
];
}
PIXI.PixiShader.prototype.init = function()
{
var program = PIXI.compileProgram(this.vertexSrc || PIXI.shaderVertexSrc, this.fragmentSrc)
var gl = PIXI.gl;
gl.useProgram(program);
// get the default shader bits!
program.vertexPositionAttribute = gl.getAttribLocation(program, "aVertexPosition");
program.colorAttribute = gl.getAttribLocation(program, "aColor");
program.textureCoordAttribute = gl.getAttribLocation(program, "aTextureCoord");
program.projectionVector = gl.getUniformLocation(program, "projectionVector");
program.samplerUniform = gl.getUniformLocation(program, "uSampler");
// add those custom shaders!
for (var key in this.uniforms)
{
// get the uniform locations..
program[key] = gl.getUniformLocation(program, key);
}
this.program = program;
}
PIXI.PixiShader.prototype.syncUniforms = function()
{
var gl = PIXI.gl;
for (var key in this.uniforms)
{
//var
var type = this.uniforms[key].type;
// need to grow this!
if(type == "f")
{
gl.uniform1f(this.program[key], this.uniforms[key].value);
}
else if(type == "mat4")
{
gl.uniformMatrix4fv(this.program[key], false, this.uniforms[key].value);
}
}
}

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

@ -536,8 +536,9 @@ PIXI.WebGLBatch.prototype.render = function(start, end)
//TODO optimize this!
var shaderProgram = PIXI.shaderProgram;
gl.useProgram(shaderProgram);
var shaderProgram = PIXI.currentShader;
//gl.useProgram(shaderProgram);
// update the verts..
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
@ -545,6 +546,8 @@ PIXI.WebGLBatch.prototype.render = function(start, end)
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies)
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
// update the uvs
var isDefault = (shaderProgram == PIXI.shaderProgram)
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
if(this.dirtyUVS)
@ -568,7 +571,6 @@ PIXI.WebGLBatch.prototype.render = function(start, end)
}
gl.vertexAttribPointer(shaderProgram.colorAttribute, 1, gl.FLOAT, false, 0, 0);
// dont need to upload!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);

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

@ -66,7 +66,7 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
// WHY DOES THIS LINE NEED TO BE THERE???
gl.vertexAttribPointer(PIXI.shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
//gl.vertexAttribPointer(PIXI.shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
// its not even used.. but need to be set or it breaks?
// only on pc though..
@ -78,8 +78,10 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 );
PIXI.deactivatePrimitiveShader();
// return to default shader...
PIXI.activateDefaultShader();
// PIXI.activateShader(PIXI.defaultShader);
}
/**

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

@ -62,13 +62,11 @@ PIXI.WebGLRenderGroup.prototype.render = function(projection)
var gl = this.gl;
gl.uniform2f(PIXI.currentShader.projectionVector, projection.x, projection.y);
gl.uniform2f(PIXI.shaderProgram.projectionVector, projection.x, projection.y);
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
// will render all the elements in the group
var renderable;
for (var i=0; i < this.batchs.length; i++)
{
@ -96,41 +94,9 @@ PIXI.WebGLRenderGroup.prototype.render = function(projection)
}
else if(renderable instanceof PIXI.FilterBlock)
{
/*
* for now only masks are supported..
*/
if(renderable.open)
{
gl.enable(gl.STENCIL_TEST);
gl.colorMask(false, false, false, false);
gl.stencilFunc(gl.ALWAYS,1,0xff);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.REPLACE);
PIXI.WebGLGraphics.renderGraphics(renderable.mask, projection);
gl.colorMask(true, true, true, true);
gl.stencilFunc(gl.NOTEQUAL,0,0xff);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP);
}
else
{
gl.disable(gl.STENCIL_TEST);
this.handleFilterBlock(renderable, projection);
}
}
}
}
/**
* Renders the stage to its webgl view
*
* @method handleFilter
* @param filter {FilterBlock}
* @private
*/
PIXI.WebGLRenderGroup.prototype.handleFilter = function(filter, projection)
{
}
@ -147,8 +113,7 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
PIXI.WebGLRenderer.updateTextures();
var gl = this.gl;
gl.uniform2f(PIXI.shaderProgram.projectionVector, projection.x, projection.y);
gl.uniform2f(PIXI.currentShader.projectionVector, projection.x, projection.y);
// to do!
// render part of the scene...
@ -208,7 +173,7 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
while(lastItem.children.length > 0)
{
lastItem = lastItem.children[lastItem.children.length-1];
if(lastItem.renderable)lastRenderable = lastItem;
if(lastItem.renderable)lastRenderable = lastItem.last;
}
if(lastRenderable instanceof PIXI.Sprite)
@ -302,6 +267,8 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
*/
PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection)
{
var sta = PIXI.shaderStack.length;
var worldVisible = renderable.vcount === PIXI.visibleCount
if(renderable instanceof PIXI.TilingSprite)
@ -322,27 +289,58 @@ PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection)
}
else if(renderable instanceof PIXI.FilterBlock)
{
this.handleFilterBlock(renderable, projection);
}
}
PIXI.WebGLRenderGroup.prototype.handleFilterBlock = function(renderable, projection)
{
/*
* for now only masks are supported..
*/
var gl = PIXI.gl;
if(renderable.open)
{
if(renderable.data instanceof Array)
{
var filter = renderable.data[0];
if(!filter.shader)
{
var shader = new PIXI.PixiShader();
shader.fragmentSrc = filter.fragmentSrc;
shader.uniforms = filter.uniforms;
shader.init();
filter.shader = shader
}
PIXI.activateShader(filter.shader);
gl.uniform2f(PIXI.currentShader.projectionVector, projection.x, projection.y);
}
else
{
gl.enable(gl.STENCIL_TEST);
gl.colorMask(false, false, false, false);
gl.stencilFunc(gl.ALWAYS,1,0xff);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.REPLACE);
PIXI.WebGLGraphics.renderGraphics(renderable.data, projection);
PIXI.WebGLGraphics.renderGraphics(renderable.mask, projection);
// we know this is a render texture so enable alpha too..
gl.colorMask(true, true, true, true);
gl.stencilFunc(gl.NOTEQUAL,0,0xff);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP);
}
}
else
{
if(renderable.data instanceof Array)
{
PIXI.popShader();
gl.uniform2f(PIXI.currentShader.projectionVector, projection.x, projection.y);
}
else
{
gl.disable(gl.STENCIL_TEST);
@ -410,7 +408,7 @@ PIXI.WebGLRenderGroup.prototype.addFilterBlocks = function(start, end)
* It keeps going back until it finds a sprite or the stage
*/
var previousRenderable = start;
while(previousRenderable != this.root)
while(previousRenderable != this.root.first)
{
previousRenderable = previousRenderable._iPrev;
if(previousRenderable.renderable && previousRenderable.__renderGroup)break;
@ -424,7 +422,7 @@ PIXI.WebGLRenderGroup.prototype.addFilterBlocks = function(start, end)
* scene graph
*/
var previousRenderable2 = end;
while(previousRenderable2 != this.root)
while(previousRenderable2 != this.root.first)
{
previousRenderable2 = previousRenderable2._iPrev;
if(previousRenderable2.renderable && previousRenderable2.__renderGroup)break;
@ -796,6 +794,7 @@ PIXI.WebGLRenderGroup.prototype.removeObject = function(displayObject)
}
}
/**
* Initializes a tiling sprite
*
@ -866,23 +865,19 @@ PIXI.WebGLRenderGroup.prototype.initTilingSprite = function(sprite)
PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection)
{
var gl = this.gl;
var shaderProgram = PIXI.shaderProgram;
// mat
//var mat4Real = PIXI.mat3.toMat4(strip.worldTransform);
//PIXI.mat4.transpose(mat4Real);
//PIXI.mat4.multiply(projectionMatrix, mat4Real, mat4Real )
var shaderProgram = PIXI.stripShaderProgram;
gl.useProgram(PIXI.stripShaderProgram);
gl.useProgram(shaderProgram);
var m = PIXI.mat3.clone(strip.worldTransform);
PIXI.mat3.transpose(m);
// set the matrix transform for the
gl.uniformMatrix3fv(PIXI.stripShaderProgram.translationMatrix, false, m);
gl.uniform2f(PIXI.stripShaderProgram.projectionVector, projection.x, projection.y);
gl.uniform1f(PIXI.stripShaderProgram.alpha, strip.worldAlpha);
gl.uniformMatrix3fv(shaderProgram.translationMatrix, false, m);
gl.uniform2f(shaderProgram.projectionVector, projection.x, projection.y);
gl.uniform1f(shaderProgram.alpha, strip.worldAlpha);
/*
if(strip.blendMode == PIXI.blendModes.NORMAL)
@ -940,11 +935,10 @@ PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection)
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW);
}
//console.log(gl.TRIANGLE_STRIP);
gl.drawElements(gl.TRIANGLE_STRIP, strip.indices.length, gl.UNSIGNED_SHORT, 0);
gl.useProgram(PIXI.shaderProgram);
gl.useProgram(PIXI.currentProgram);
}
/**
@ -1018,3 +1012,4 @@ PIXI.WebGLRenderGroup.prototype.initStrip = function(strip)
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW);
}

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

@ -57,11 +57,12 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this);
}
PIXI.initPrimitiveShader();
PIXI.initDefaultShader();
PIXI.initPrimitiveShader();
PIXI.initDefaultStripShader();
PIXI.activateDefaultShader();
// PIXI.activateDefaultShader();
var gl = this.gl;
PIXI.WebGLRenderer.gl = gl;
@ -78,7 +79,10 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
this.resize(this.width, this.height);
this.contextLost = false;
PIXI.activateShader(PIXI.defaultShader);
this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl);
}
// constructor

87
src/pixi/renderers/webgl/WebGLShaders.js
View file

@ -1,4 +1,3 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
@ -23,13 +22,11 @@ PIXI.shaderVertexSrc = [
"attribute vec2 aVertexPosition;",
"attribute vec2 aTextureCoord;",
"attribute float aColor;",
//"uniform mat4 uMVMatrix;",
"uniform vec2 projectionVector;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"void main(void) {",
// "gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);",
"gl_Position = vec4( aVertexPosition.x / projectionVector.x -1.0, aVertexPosition.y / -projectionVector.y + 1.0 , 0.0, 1.0);",
"vTextureCoord = aTextureCoord;",
"vColor = aColor;",
@ -69,7 +66,6 @@ PIXI.stripShaderVertexSrc = [
"}"
];
/*
* primitive shader..
*/
@ -96,6 +92,8 @@ PIXI.primitiveShaderVertexSrc = [
"}"
];
PIXI.shaderStack = [];
PIXI.initPrimitiveShader = function()
{
var gl = PIXI.gl;
@ -110,27 +108,26 @@ PIXI.initPrimitiveShader = function()
shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector");
shaderProgram.translationMatrix = gl.getUniformLocation(shaderProgram, "translationMatrix");
//gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
//gl.enableVertexAttribArray(shaderProgram.colorAttribute);
//gl.enableVertexAttribArray(program.textureCoordAttribute);
shaderProgram.alpha = gl.getUniformLocation(shaderProgram, "alpha");
PIXI.primitiveProgram = shaderProgram;
}
PIXI.initDefaultShader = function()
{
var gl = this.gl;
var shaderProgram = PIXI.compileProgram(PIXI.shaderVertexSrc, PIXI.shaderFragmentSrc)
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector");
shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor");
// shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
PIXI.shaderProgram = shaderProgram;
PIXI.defaultShader = new PIXI.PixiShader();
PIXI.defaultShader.init();
PIXI.activateShader(PIXI.defaultShader);
/*
PIXI.shaderStack.push(PIXI.defaultShader);
PIXI.current*/
}
PIXI.initDefaultStripShader = function()
@ -147,9 +144,7 @@ PIXI.initDefaultStripShader = function()
shaderProgram.alpha = gl.getUniformLocation(shaderProgram, "alpha");
shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor");
shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector");
shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
PIXI.stripShaderProgram = shaderProgram;
@ -200,32 +195,62 @@ PIXI.compileProgram = function(vertexSrc, fragmentSrc)
return shaderProgram;
}
PIXI.activateDefaultShader = function()
PIXI.activateShader = function(shader)
{
var gl = PIXI.gl;
var shaderProgram = PIXI.shaderProgram;
PIXI.shaderStack.push(shader);
//console.log(">>>")
var gl = PIXI.gl;
var shaderProgram = shader.program;
// map uniforms..
gl.useProgram(shaderProgram);
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
gl.enableVertexAttribArray(shaderProgram.colorAttribute);
gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
shader.syncUniforms();
PIXI.currentShader = shaderProgram;
}
PIXI.popShader = function()
{
var gl = PIXI.gl;
// activate last program..
var lastProgram = PIXI.shaderStack.pop();
var shaderProgram = PIXI.shaderStack[ PIXI.shaderStack.length-1 ].program;
gl.useProgram(shaderProgram);
PIXI.currentShader = shaderProgram;
}
PIXI.activatePrimitiveShader = function()
{
var gl = PIXI.gl;
gl.disableVertexAttribArray(PIXI.shaderProgram.textureCoordAttribute);
gl.disableVertexAttribArray(PIXI.shaderProgram.colorAttribute);
gl.useProgram(PIXI.primitiveProgram);
gl.enableVertexAttribArray(PIXI.primitiveProgram.vertexPositionAttribute);
gl.enableVertexAttribArray(PIXI.primitiveProgram.colorAttribute);
//gl.disableVertexAttribArray(PIXI.currentShader.vertexPositionAttribute);
//gl.disableVertexAttribArray(PIXI.currentShader.colorAttribute);
gl.disableVertexAttribArray(PIXI.currentShader.textureCoordAttribute);
//gl.enableVertexAttribArray(PIXI.primitiveProgram.vertexPositionAttribute);
//gl.enableVertexAttribArray(PIXI.primitiveProgram.colorAttribute);
}
PIXI.deactivatePrimitiveShader = function()
{
var gl = PIXI.gl;
gl.useProgram(PIXI.currentShader);
gl.enableVertexAttribArray(PIXI.currentShader.textureCoordAttribute);
//gl.enableVertexAttribArray(PIXI.currentShader.vertexPositionAttribute);
//gl.enableVertexAttribArray(PIXI.currentShader.colorAttribute);
}

5
src/pixi/textures/RenderTexture.js
View file

@ -37,7 +37,7 @@ PIXI.RenderTexture = function(width, height)
this.width = width || 100;
this.height = height || 100;
this.identityMatrix = PIXI.mat3.create();
this.indetityMatrix = PIXI.mat3.create();
this.frame = new PIXI.Rectangle(0, 0, this.width, this.height);
@ -170,7 +170,7 @@ PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, position, cle
//TODO -? create a new one??? dont think so!
var originalWorldTransform = displayObject.worldTransform;
displayObject.worldTransform = PIXI.mat3.create();//sthis.identityMatrix;
displayObject.worldTransform = PIXI.mat3.create();//sthis.indetityMatrix;
// modify to flip...
displayObject.worldTransform[4] = -1;
displayObject.worldTransform[5] = this.projection.y * 2;
@ -249,4 +249,3 @@ PIXI.RenderTexture.prototype.renderCanvas = function(displayObject, position, cl
// PIXI.texturesToUpdate.push(this.baseTexture);
}