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: {

1765
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

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

File diff suppressed because it is too large Load diff

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

File diff suppressed because it is too large Load diff

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

File diff suppressed because it is too large Load diff

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

File diff suppressed because it is too large Load diff

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

File diff suppressed because it is too large Load diff

1765
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

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

File diff suppressed because it is too large Load diff

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

File diff suppressed because it is too large Load diff

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

File diff suppressed because it is too large Load diff

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

File diff suppressed because it is too large Load diff

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

File diff suppressed because it is too large Load diff

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

File diff suppressed because it is too large Load diff

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

File diff suppressed because it is too large Load diff

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

File diff suppressed because it is too large Load diff

188
src/pixi/InteractionManager.js
View file

@ -1,10 +1,8 @@
/**
* @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.
*
@ -39,7 +37,7 @@ PIXI.InteractionManager = function(stage)
this.touchs = {};
// helpers
this.tempPoint = new PIXI.Point();
//this.tempMatrix = mat3.create();
@ -61,8 +59,8 @@ PIXI.InteractionManager = function(stage)
this.onTouchStart = this.onTouchStart.bind(this);
this.onTouchEnd = this.onTouchEnd.bind(this);
this.onTouchMove = this.onTouchMove.bind(this);
this.last = 0;
}
@ -81,12 +79,12 @@ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObj
{
var children = displayObject.children;
var length = children.length;
/// make an interaction tree... {item.__interactiveParent}
for (var i = length-1; i >= 0; i--)
{
var child = children[i];
// if(child.visible) {
// push all interactive bits
if(child.interactive)
@ -146,7 +144,7 @@ PIXI.InteractionManager.prototype.setTarget = function(target)
PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement)
{
//remove previouse listeners
if( this.interactionDOMElement !== null )
if( this.interactionDOMElement !== null )
{
this.interactionDOMElement.style['-ms-content-zooming'] = '';
this.interactionDOMElement.style['-ms-touch-action'] = '';
@ -162,12 +160,12 @@ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement)
}
if (window.navigator.msPointerEnabled)
if (window.navigator.msPointerEnabled)
{
// time to remove some of that zoom in ja..
domElement.style['-ms-content-zooming'] = 'none';
domElement.style['-ms-touch-action'] = 'none';
// DO some window specific touch!
}
@ -193,7 +191,7 @@ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement)
PIXI.InteractionManager.prototype.update = function()
{
if(!this.target)return;
// frequency of 30fps??
var now = Date.now();
var diff = now - this.last;
@ -201,44 +199,44 @@ PIXI.InteractionManager.prototype.update = function()
if(diff < 1)return;
this.last = now;
//
// ok.. so mouse events??
// yes for now :)
// OPTIMSE - how often to check??
if(this.dirty)
{
this.dirty = false;
var len = this.interactiveItems.length;
for (var i=0; i < len; i++) {
this.interactiveItems[i].interactiveChildren = false;
}
this.interactiveItems = [];
if(this.stage.interactive)this.interactiveItems.push(this.stage);
// go through and collect all the objects that are interactive..
this.collectInteractiveSprite(this.stage, this.stage);
}
// loop through interactive objects!
var length = this.interactiveItems.length;
this.interactionDOMElement.style.cursor = "default";
this.interactionDOMElement.style.cursor = "default";
for (var i = 0; i < length; i++)
{
var item = this.interactiveItems[i];
//if(!item.visible)continue;
// OPTIMISATION - only calculate every time if the mousemove function exists..
// OK so.. does the object have any other interactive functions?
// hit-test the clip!
if(item.mouseover || item.mouseout || item.buttonMode)
{
// ok so there are some functions so lets hit test it..
@ -248,13 +246,13 @@ PIXI.InteractionManager.prototype.update = function()
// loks like there was a hit!
if(item.__hit)
{
if(item.buttonMode) this.interactionDOMElement.style.cursor = "pointer";
if(item.buttonMode) this.interactionDOMElement.style.cursor = "pointer";
if(!item.__isOver)
{
if(item.mouseover)item.mouseover(this.mouse);
item.__isOver = true;
item.__isOver = true;
}
}
else
@ -263,11 +261,11 @@ PIXI.InteractionManager.prototype.update = function()
{
// roll out!
if(item.mouseout)item.mouseout(this.mouse);
item.__isOver = false;
item.__isOver = false;
}
}
}
// --->
}
}
@ -284,18 +282,18 @@ PIXI.InteractionManager.prototype.onMouseMove = function(event)
this.mouse.originalEvent = event || window.event; //IE uses window.event
// TODO optimize by not check EVERY TIME! maybe half as often? //
var rect = this.interactionDOMElement.getBoundingClientRect();
this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width);
this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height);
var length = this.interactiveItems.length;
var global = this.mouse.global;
for (var i = 0; i < length; i++)
{
var item = this.interactiveItems[i];
if(item.mousemove)
{
//call the function!
@ -314,34 +312,34 @@ PIXI.InteractionManager.prototype.onMouseMove = function(event)
PIXI.InteractionManager.prototype.onMouseDown = function(event)
{
this.mouse.originalEvent = event || window.event; //IE uses window.event
// loop through inteaction tree...
// hit test each item! ->
// hit test each item! ->
// get interactive items under point??
//stage.__i
var length = this.interactiveItems.length;
var global = this.mouse.global;
var index = 0;
var parent = this.stage;
// while
// hit test
// while
// hit test
for (var i = 0; i < length; i++)
{
var item = this.interactiveItems[i];
if(item.mousedown || item.click)
{
item.__mouseIsDown = true;
item.__hit = this.hitTest(item, this.mouse);
if(item.__hit)
{
//call the function!
if(item.mousedown)item.mousedown(this.mouse);
item.__isDown = true;
// just the one!
if(!item.interactiveChildren)break;
}
@ -353,18 +351,18 @@ PIXI.InteractionManager.prototype.onMouseDown = function(event)
PIXI.InteractionManager.prototype.onMouseOut = function(event)
{
var length = this.interactiveItems.length;
this.interactionDOMElement.style.cursor = "default";
this.interactionDOMElement.style.cursor = "default";
for (var i = 0; i < length; i++)
{
var item = this.interactiveItems[i];
if(item.__isOver)
{
this.mouse.target = item;
if(item.mouseout)item.mouseout(this.mouse);
item.__isOver = false;
item.__isOver = false;
}
}
}
@ -379,21 +377,21 @@ PIXI.InteractionManager.prototype.onMouseOut = function(event)
PIXI.InteractionManager.prototype.onMouseUp = function(event)
{
this.mouse.originalEvent = event || window.event; //IE uses window.event
var global = this.mouse.global;
var length = this.interactiveItems.length;
var up = false;
for (var i = 0; i < length; i++)
{
var item = this.interactiveItems[i];
if(item.mouseup || item.mouseupoutside || item.click)
{
item.__hit = this.hitTest(item, this.mouse);
if(item.__hit && !up)
{
//call the function!
@ -405,7 +403,7 @@ PIXI.InteractionManager.prototype.onMouseUp = function(event)
{
if(item.click)item.click(this.mouse);
}
if(!item.interactiveChildren)up = true;
}
else
@ -415,8 +413,8 @@ PIXI.InteractionManager.prototype.onMouseUp = function(event)
if(item.mouseupoutside)item.mouseupoutside(this.mouse);
}
}
item.__isDown = false;
item.__isDown = false;
}
}
}
@ -432,7 +430,7 @@ PIXI.InteractionManager.prototype.onMouseUp = function(event)
PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
{
var global = interactionData.global;
if(item.vcount !== PIXI.visibleCount)return false;
var isSprite = (item instanceof PIXI.Sprite),
@ -444,7 +442,7 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id;
interactionData.target = item;
//a sprite or display object with a hit area defined
if(item.hitArea && item.hitArea.contains) {
if(item.hitArea.contains(x, y)) {
@ -453,7 +451,7 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
return true;
}
return false;
}
// a sprite with no hitarea defined
@ -463,11 +461,11 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
height = item.texture.frame.height,
x1 = -width * item.anchor.x,
y1;
if(x > x1 && x < x1 + width)
{
y1 = -height * item.anchor.y;
if(y > y1 && y < y1 + height)
{
// set the target property if a hit is true!
@ -478,7 +476,7 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
}
var length = item.children.length;
for (var i = 0; i < length; i++)
{
var tempItem = item.children[i];
@ -491,7 +489,7 @@ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
}
}
return false;
return false;
}
/**
@ -505,18 +503,18 @@ PIXI.InteractionManager.prototype.onTouchMove = function(event)
{
var rect = this.interactionDOMElement.getBoundingClientRect();
var changedTouches = event.changedTouches;
for (var i=0; i < changedTouches.length; i++)
for (var i=0; i < changedTouches.length; i++)
{
var touchEvent = changedTouches[i];
var touchData = this.touchs[touchEvent.identifier];
touchData.originalEvent = event || window.event;
// update the touch position
touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width);
touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height);
}
var length = this.interactiveItems.length;
for (var i = 0; i < length; i++)
{
@ -535,38 +533,38 @@ PIXI.InteractionManager.prototype.onTouchMove = function(event)
PIXI.InteractionManager.prototype.onTouchStart = function(event)
{
var rect = this.interactionDOMElement.getBoundingClientRect();
var changedTouches = event.changedTouches;
for (var i=0; i < changedTouches.length; i++)
for (var i=0; i < changedTouches.length; i++)
{
var touchEvent = changedTouches[i];
var touchData = this.pool.pop();
if(!touchData)touchData = new PIXI.InteractionData();
touchData.originalEvent = event || window.event;
this.touchs[touchEvent.identifier] = touchData;
touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width);
touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height);
var length = this.interactiveItems.length;
for (var j = 0; j < length; j++)
{
var item = this.interactiveItems[j];
if(item.touchstart || item.tap)
{
item.__hit = this.hitTest(item, touchData);
if(item.__hit)
{
//call the function!
if(item.touchstart)item.touchstart(touchData);
item.__isDown = true;
item.__touchData = touchData;
if(!item.interactiveChildren)break;
}
}
@ -586,28 +584,28 @@ PIXI.InteractionManager.prototype.onTouchEnd = function(event)
//this.mouse.originalEvent = event || window.event; //IE uses window.event
var rect = this.interactionDOMElement.getBoundingClientRect();
var changedTouches = event.changedTouches;
for (var i=0; i < changedTouches.length; i++)
for (var i=0; i < changedTouches.length; i++)
{
var touchEvent = changedTouches[i];
var touchData = this.touchs[touchEvent.identifier];
var up = false;
touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width);
touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height);
var length = this.interactiveItems.length;
for (var j = 0; j < length; j++)
{
var item = this.interactiveItems[j];
var itemTouchData = item.__touchData; // <-- Here!
item.__hit = this.hitTest(item, touchData);
if(itemTouchData == touchData)
{
// so this one WAS down...
touchData.originalEvent = event || window.event;
// hitTest??
if(item.touchend || item.tap)
{
if(item.__hit && !up)
@ -617,7 +615,7 @@ PIXI.InteractionManager.prototype.onTouchEnd = function(event)
{
if(item.tap)item.tap(touchData);
}
if(!item.interactiveChildren)up = true;
}
else
@ -627,16 +625,16 @@ PIXI.InteractionManager.prototype.onTouchEnd = function(event)
if(item.touchendoutside)item.touchendoutside(touchData);
}
}
item.__isDown = false;
}
item.__touchData = null;
}
else
{
}
}
// remove the touch..
@ -656,11 +654,11 @@ PIXI.InteractionData = function()
/**
* This point stores the global coords of where the touch/mouse event happened
*
* @property global
* @property global
* @type Point
*/
this.global = new PIXI.Point();
// this is here for legacy... but will remove
this.local = new PIXI.Point();
@ -692,7 +690,7 @@ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject)
{
var worldTransform = displayObject.worldTransform;
var global = this.global;
// do a cheeky transform to get the mouse coords;
var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2],
a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5],

177
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.
*
@ -50,7 +49,7 @@ PIXI.DisplayObject = function()
*
* @property alpha
* @type Number
*/
*/
this.alpha = 1;
/**
@ -58,7 +57,7 @@ PIXI.DisplayObject = function()
*
* @property visible
* @type Boolean
*/
*/
this.visible = true;
/**
@ -67,7 +66,7 @@ PIXI.DisplayObject = function()
*
* @property hitArea
* @type Rectangle|Circle|Ellipse|Polygon
*/
*/
this.hitArea = null;
/**
@ -92,7 +91,7 @@ PIXI.DisplayObject = function()
* @property parent
* @type DisplayObjectContainer
* @readOnly
*/
*/
this.parent = null;
/**
@ -101,7 +100,7 @@ PIXI.DisplayObject = function()
* @property stage
* @type Stage
* @readOnly
*/
*/
this.stage = null;
/**
@ -268,7 +267,7 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'interactive', {
},
set: function(value) {
this._interactive = value;
// TODO more to be done here..
// need to sort out a re-crawl!
if(this.stage)this.stage.dirty = true;
@ -288,17 +287,58 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'mask', {
return this._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,54 +349,58 @@ 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;
start.open = true;
/*
* insert start
*/
var childFirst = start
var childLast = start
var nextObject;
var previousObject;
previousObject = this.first._iPrev;
if(previousObject)
{
nextObject = previousObject._iNext;
childFirst._iPrev = previousObject;
previousObject._iNext = childFirst;
previousObject._iNext = childFirst;
}
else
{
nextObject = this;
}
}
if(nextObject)
{
nextObject._iPrev = childLast;
childLast._iNext = nextObject;
}
// now insert the end filter block..
/*
* insert end filter
*/
@ -364,21 +408,21 @@ PIXI.DisplayObject.prototype.addFilter = function(mask)
var childLast = end
var nextObject = null;
var previousObject = null;
previousObject = this.last;
nextObject = previousObject._iNext;
if(nextObject)
{
nextObject._iPrev = childLast;
childLast._iNext = nextObject;
}
childFirst._iPrev = previousObject;
previousObject._iNext = childFirst;
previousObject._iNext = childFirst;
var updateLast = this;
var prevLast = this.last;
while(updateLast)
{
@ -388,17 +432,15 @@ PIXI.DisplayObject.prototype.addFilter = function(mask)
}
updateLast = updateLast.parent;
}
this.first = start;
// if webGL...
if(this.__renderGroup)
{
this.__renderGroup.addFilterBlocks(start, end);
}
mask.renderable = false;
}
/*
@ -407,34 +449,34 @@ 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;
if(nextObject)nextObject._iPrev = previousObject;
if(previousObject)previousObject._iNext = nextObject;
if(previousObject)previousObject._iNext = nextObject;
this.first = startBlock._iNext;
// remove the end filter
var lastBlock = this.last;
var lastBlock = data.end;
var nextObject = lastBlock._iNext;
var previousObject = lastBlock._iPrev;
if(nextObject)nextObject._iPrev = previousObject;
previousObject._iNext = nextObject;
previousObject._iNext = nextObject;
// this is always true too!
var tempLast = lastBlock._iPrev;
var tempLast = lastBlock._iPrev;
// need to make sure the parents last is updated too
var updateLast = this;
while(updateLast.last == lastBlock)
@ -443,10 +485,7 @@ PIXI.DisplayObject.prototype.removeFilter = function()
updateLast = updateLast.parent;
if(!updateLast)break;
}
var mask = startBlock.mask
mask.renderable = true;
// if webGL...
if(this.__renderGroup)
{
@ -468,8 +507,8 @@ PIXI.DisplayObject.prototype.updateTransform = function()
this.rotationCache = this.rotation;
this._sr = Math.sin(this.rotation);
this._cr = Math.cos(this.rotation);
}
}
var localTransform = this.localTransform;
var parentTransform = this.parent.worldTransform;
var worldTransform = this.worldTransform;
@ -478,12 +517,12 @@ PIXI.DisplayObject.prototype.updateTransform = function()
localTransform[1] = -this._sr * this.scale.y
localTransform[3] = this._sr * this.scale.x;
localTransform[4] = this._cr * this.scale.y;
// TODO --> do we even need a local matrix???
var px = this.pivot.x;
var py = this.pivot.y;
// Cache the matrix values (makes for huge speed increases!)
var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1],
a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3],
@ -493,7 +532,7 @@ PIXI.DisplayObject.prototype.updateTransform = function()
localTransform[2] = a02
localTransform[5] = a12
worldTransform[0] = b00 * a00 + b01 * a10;
worldTransform[1] = b00 * a01 + b01 * a11;
worldTransform[2] = b00 * a02 + b01 * a12 + b02;
@ -505,7 +544,7 @@ PIXI.DisplayObject.prototype.updateTransform = function()
// because we are using affine transformation, we can optimise the matrix concatenation process.. wooo!
// mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform);
this.worldAlpha = this.alpha * this.parent.worldAlpha;
this.vcount = PIXI.visibleCount;
}

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

@ -7,21 +7,21 @@
* A DisplayObjectContainer represents a collection of display objects.
* It is the base class of all display objects that act as a container for other objects.
*
* @class DisplayObjectContainer
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
*/
PIXI.DisplayObjectContainer = function()
{
PIXI.DisplayObject.call( this );
/**
* [read-only] The of children of this container.
*
* @property children
* @type Array<DisplayObject>
* @readOnly
*/
*/
this.children = [];
}
@ -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.
*
@ -51,18 +39,18 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
{
if(child.parent != undefined)
{
//// COULD BE THIS???
child.parent.removeChild(child);
// return;
}
child.parent = this;
this.children.push(child);
this.children.push(child);
// update the stage refference..
if(this.stage)
{
var tmpChild = child;
@ -71,20 +59,20 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
if(tmpChild.interactive)this.stage.dirty = true;
tmpChild.stage = this.stage;
tmpChild = tmpChild._iNext;
}
}
while(tmpChild)
}
// LINKED LIST //
// modify the list..
var childFirst = child.first
var childLast = child.last;
var nextObject;
var previousObject;
// this could be wrong if there is a filter??
if(this.filter)
if(this._filters)
{
previousObject = this.last._iPrev;
}
@ -94,12 +82,12 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
}
nextObject = previousObject._iNext;
// always true in this case
// need to make sure the parents last is updated too
var updateLast = this;
var prevLast = previousObject;
while(updateLast)
{
if(updateLast.last == prevLast)
@ -108,15 +96,15 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
}
updateLast = updateLast.parent;
}
if(nextObject)
{
nextObject._iPrev = childLast;
childLast._iNext = nextObject;
}
childFirst._iPrev = previousObject;
previousObject._iNext = childFirst;
previousObject._iNext = childFirst;
// need to remove any render groups..
if(this.__renderGroup)
@ -126,7 +114,7 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
// add them to the new render group..
this.__renderGroup.addDisplayObjectAndChildren(child);
}
}
/**
@ -145,7 +133,7 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
child.parent.removeChild(child);
}
child.parent = this;
if(this.stage)
{
var tmpChild = child;
@ -157,13 +145,13 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
}
while(tmpChild)
}
// modify the list..
var childFirst = child.first;
var childLast = child.last;
var nextObject;
var previousObject;
if(index == this.children.length)
{
previousObject = this.last;
@ -186,18 +174,18 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
{
previousObject = this.children[index-1].last;
}
nextObject = previousObject._iNext;
// always true in this case
if(nextObject)
{
nextObject._iPrev = childLast;
childLast._iNext = nextObject;
}
childFirst._iPrev = previousObject;
previousObject._iNext = childFirst;
previousObject._iNext = childFirst;
this.children.splice(index, 0, child);
// need to remove any render groups..
@ -208,7 +196,7 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
// add them to the new render group..
this.__renderGroup.addDisplayObjectAndChildren(child);
}
}
else
{
@ -227,21 +215,21 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2)
{
/*
* this funtion needs to be recoded..
* this funtion needs to be recoded..
* can be done a lot faster..
*/
return;
// need to fix this function :/
/*
// TODO I already know this??
var index = this.children.indexOf( child );
var index2 = this.children.indexOf( child2 );
if ( index !== -1 && index2 !== -1 )
if ( index !== -1 && index2 !== -1 )
{
// cool
/*
if(this.stage)
{
@ -249,15 +237,15 @@ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2)
// TODO sure there is a nicer way to achieve this!
this.stage.__removeChild(child);
this.stage.__removeChild(child2);
this.stage.__addChild(child);
this.stage.__addChild(child2);
}
// swap the positions..
this.children[index] = child2;
this.children[index2] = child;
}
else
{
@ -292,22 +280,22 @@ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index)
PIXI.DisplayObjectContainer.prototype.removeChild = function(child)
{
var index = this.children.indexOf( child );
if ( index !== -1 )
if ( index !== -1 )
{
// unlink //
// modify the list..
var childFirst = child.first;
var childLast = child.last;
var nextObject = childLast._iNext;
var previousObject = childFirst._iPrev;
if(nextObject)nextObject._iPrev = previousObject;
previousObject._iNext = nextObject;
previousObject._iNext = nextObject;
if(this.last == childLast)
{
var tempLast = childFirst._iPrev;
var tempLast = childFirst._iPrev;
// need to make sure the parents last is updated too
var updateLast = this;
while(updateLast.last == childLast.last)
@ -317,10 +305,10 @@ PIXI.DisplayObjectContainer.prototype.removeChild = function(child)
if(!updateLast)break;
}
}
childLast._iNext = null;
childFirst._iPrev = null;
// update the stage reference..
if(this.stage)
{
@ -330,16 +318,16 @@ PIXI.DisplayObjectContainer.prototype.removeChild = function(child)
if(tmpChild.interactive)this.stage.dirty = true;
tmpChild.stage = null;
tmpChild = tmpChild._iNext;
}
}
while(tmpChild)
}
// webGL trim
if(child.__renderGroup)
{
child.__renderGroup.removeDisplayObjectAndChildren(child);
}
child.parent = undefined;
this.children.splice( index, 1 );
}
@ -358,11 +346,11 @@ PIXI.DisplayObjectContainer.prototype.removeChild = function(child)
PIXI.DisplayObjectContainer.prototype.updateTransform = function()
{
if(!this.visible)return;
PIXI.DisplayObject.prototype.updateTransform.call( this );
for(var i=0,j=this.children.length; i<j; i++)
{
this.children[i].updateTransform();
this.children[i].updateTransform();
}
}
}

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

@ -22,7 +22,7 @@ PIXI.Sprite = function(texture)
/**
* The anchor sets the origin point of the texture.
* The default is 0,0 this means the textures origin is the top left
* The default is 0,0 this means the textures origin is the top left
* Setting than anchor to 0.5,0.5 means the textures origin is centered
* Setting the anchor to 1,1 would mean the textures origin points will be the bottom right
*
@ -126,9 +126,9 @@ PIXI.Sprite.prototype.setTexture = function(texture)
// stop current texture;
if(this.texture.baseTexture != texture.baseTexture)
{
this.textureChange = true;
this.textureChange = true;
this.texture = texture;
if(this.__renderGroup)
{
this.__renderGroup.updateTexture(this);
@ -138,7 +138,7 @@ PIXI.Sprite.prototype.setTexture = function(texture)
{
this.texture = texture;
}
this.updateFrame = true;
}
@ -152,18 +152,18 @@ PIXI.Sprite.prototype.setTexture = function(texture)
PIXI.Sprite.prototype.onTextureUpdate = function(event)
{
//this.texture.removeEventListener( 'update', this.onTextureUpdateBind );
// so if _width is 0 then width was not set..
if(this._width)this.scale.x = this._width / this.texture.frame.width;
if(this._height)this.scale.y = this._height / this.texture.frame.height;
this.updateFrame = true;
}
// some helper functions..
/**
*
*
* Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId
* The frame ids are created when a Texture packer file has been loaded
*
@ -180,7 +180,7 @@ PIXI.Sprite.fromFrame = function(frameId)
}
/**
*
*
* Helper function that creates a sprite that will contain a texture based on an image url
* If the image is not in the texture cache it will be loaded
*
@ -194,4 +194,3 @@ PIXI.Sprite.fromImage = function(imageId)
var texture = PIXI.Texture.fromImage(imageId);
return new PIXI.Sprite(texture);
}

12
src/pixi/display/Stage.js
View file

@ -87,22 +87,22 @@ PIXI.Stage.prototype.setInteractionDelegate = function(domElement)
*/
PIXI.Stage.prototype.updateTransform = function()
{
this.worldAlpha = 1;
this.worldAlpha = 1;
this.vcount = PIXI.visibleCount;
for(var i=0,j=this.children.length; i<j; i++)
{
this.children[i].updateTransform();
this.children[i].updateTransform();
}
if(this.dirty)
{
this.dirty = false;
// update interactive!
this.interactionManager.dirty = true;
}
if(this.interactive)this.interactionManager.update();
}

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;
}
});

6
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;
}
});

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

@ -54,9 +54,9 @@ PIXI.CanvasRenderer = function(width, height, view, transparent)
this.refresh = true;
// hack to enable some hardware acceleration!
//this.view.style["transform"] = "translatez(0)";
this.view.width = this.width;
this.view.height = this.height;
this.view.height = this.height;
this.count = 0;
}
@ -71,25 +71,25 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer;
*/
PIXI.CanvasRenderer.prototype.render = function(stage)
{
//stage.__childrenAdded = [];
//stage.__childrenRemoved = [];
// update textures if need be
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
PIXI.visibleCount++;
stage.updateTransform();
// update the background color
if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString;
this.context.setTransform(1,0,0,1,0,0);
this.context.setTransform(1,0,0,1,0,0);
this.context.clearRect(0, 0, this.width, this.height)
this.renderDisplayObject(stage);
//as
// run interaction!
if(stage.interactive)
{
@ -100,14 +100,14 @@ PIXI.CanvasRenderer.prototype.render = function(stage)
stage.interactionManager.setTarget(this);
}
}
// remove frame updates..
if(PIXI.Texture.frameUpdates.length > 0)
{
PIXI.Texture.frameUpdates = [];
}
}
/**
@ -121,7 +121,7 @@ PIXI.CanvasRenderer.prototype.resize = function(width, height)
{
this.width = width;
this.height = height;
this.view.width = width;
this.view.height = height;
}
@ -138,50 +138,50 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
// no loger recurrsive!
var transform;
var context = this.context;
context.globalCompositeOperation = 'source-over';
// one the display object hits this. we can break the loop
// one the display object hits this. we can break the loop
var testObject = displayObject.last._iNext;
displayObject = displayObject.first;
do
do
{
transform = displayObject.worldTransform;
if(!displayObject.visible)
{
displayObject = displayObject.last._iNext;
continue;
}
if(!displayObject.renderable)
{
displayObject = displayObject._iNext;
continue;
}
if(displayObject instanceof PIXI.Sprite)
{
var frame = displayObject.texture.frame;
if(frame && frame.width && frame.height)
{
context.globalAlpha = displayObject.worldAlpha;
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]);
context.drawImage(displayObject.texture.baseTexture.source,
context.drawImage(displayObject.texture.baseTexture.source,
frame.x,
frame.y,
frame.width,
frame.height,
(displayObject.anchor.x) * -frame.width,
(displayObject.anchor.x) * -frame.width,
(displayObject.anchor.y) * -frame.height,
frame.width,
frame.height);
}
}
}
else if(displayObject instanceof PIXI.Strip)
{
@ -204,37 +204,44 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
}
else if(displayObject instanceof PIXI.FilterBlock)
{
if(displayObject.open)
if(PIXI.FilterBlock.data instanceof PIXI.Graphics)
{
context.save();
var cacheAlpha = displayObject.mask.alpha;
var maskTransform = displayObject.mask.worldTransform;
context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5])
displayObject.mask.worldAlpha = 0.5;
context.worldAlpha = 0;
PIXI.CanvasGraphics.renderGraphicsMask(displayObject.mask, context);
context.clip();
displayObject.mask.worldAlpha = cacheAlpha;
if(displayObject.open)
{
context.save();
var cacheAlpha = displayObject.mask.alpha;
var maskTransform = displayObject.mask.worldTransform;
context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5])
displayObject.mask.worldAlpha = 0.5;
context.worldAlpha = 0;
PIXI.CanvasGraphics.renderGraphicsMask(displayObject.mask, context);
context.clip();
displayObject.mask.worldAlpha = cacheAlpha;
}
else
{
context.restore();
}
}
else
{
context.restore();
// only masks supported right now!
}
}
// count++
displayObject = displayObject._iNext;
}
while(displayObject != testObject)
}
/**
@ -249,26 +256,26 @@ PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip)
var context = this.context;
var verticies = strip.verticies;
var uvs = strip.uvs;
var length = verticies.length/2;
this.count++;
context.beginPath();
for (var i=1; i < length-2; i++)
for (var i=1; i < length-2; i++)
{
// draw some triangles!
var index = i*2;
var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4];
var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5];
context.moveTo(x0, y0);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
};
};
context.fillStyle = "#FF0000";
context.fill();
context.closePath();
@ -284,26 +291,26 @@ PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip)
PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
{
var context = this.context;
context.globalAlpha = sprite.worldAlpha;
if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat");
context.beginPath();
var tilePosition = sprite.tilePosition;
var tileScale = sprite.tileScale;
// offset
context.scale(tileScale.x,tileScale.y);
context.translate(tilePosition.x, tilePosition.y);
context.fillStyle = sprite.__tilePattern;
context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y);
context.scale(1/tileScale.x, 1/tileScale.y);
context.translate(-tilePosition.x, -tilePosition.y);
context.closePath();
}
@ -321,18 +328,18 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
// draw triangles!!
var verticies = strip.verticies;
var uvs = strip.uvs;
var length = verticies.length/2;
this.count++;
for (var i=1; i < length-2; i++)
for (var i=1; i < length-2; i++)
{
// draw some triangles!
var index = i*2;
var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4];
var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5];
var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width;
var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height;
@ -343,10 +350,10 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.closePath();
context.clip();
// Compute matrix transform
var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2;
var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2;
@ -355,16 +362,16 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2;
var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2;
var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2;
context.transform(delta_a/delta, delta_d/delta,
delta_b/delta, delta_e/delta,
delta_c/delta, delta_f/delta);
context.drawImage(strip.texture.baseTexture.source, 0, 0);
context.restore();
};
}

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);
}
}
}

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

@ -24,7 +24,7 @@ PIXI._getBatch = function(gl)
*/
PIXI._returnBatch = function(batch)
{
batch.clean();
batch.clean();
PIXI._batchs.push(batch);
}
@ -33,7 +33,7 @@ PIXI._returnBatch = function(batch)
*/
PIXI._restoreBatchs = function(gl)
{
for (var i=0; i < PIXI._batchs.length; i++)
for (var i=0; i < PIXI._batchs.length; i++)
{
PIXI._batchs[i].restoreLostContext(gl);
};
@ -54,7 +54,7 @@ PIXI._restoreBatchs = function(gl)
PIXI.WebGLBatch = function(gl)
{
this.gl = gl;
this.size = 0;
this.vertexBuffer = gl.createBuffer();
@ -108,7 +108,7 @@ PIXI.WebGLBatch.prototype.restoreLostContext = function(gl)
* @method init
* @param sprite {Sprite} the first sprite to be added to the batch. Only sprites with
* the same base texture and blend mode will be allowed to be added to this batch
*/
*/
PIXI.WebGLBatch.prototype.init = function(sprite)
{
sprite.batch = this;
@ -128,7 +128,7 @@ PIXI.WebGLBatch.prototype.init = function(sprite)
* @method insertBefore
* @param sprite {Sprite} the sprite to be added
* @param nextSprite {nextSprite} the first sprite will be inserted before this sprite
*/
*/
PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite)
{
this.size++;
@ -156,7 +156,7 @@ PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite)
* @method insertAfter
* @param sprite {Sprite} the sprite to be added
* @param previousSprite {Sprite} the first sprite will be inserted after this sprite
*/
*/
PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite)
{
this.size++;
@ -184,7 +184,7 @@ PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite)
*
* @method remove
* @param sprite {Sprite} the sprite to be removed
*/
*/
PIXI.WebGLBatch.prototype.remove = function(sprite)
{
this.size--;
@ -268,7 +268,7 @@ PIXI.WebGLBatch.prototype.split = function(sprite)
* Merges two batchs together
*
* @method merge
* @param batch {WebGLBatch} the batch that will be merged
* @param batch {WebGLBatch} the batch that will be merged
*/
PIXI.WebGLBatch.prototype.merge = function(batch)
{
@ -325,10 +325,10 @@ PIXI.WebGLBatch.prototype.growBatch = function()
this.dirtyColors = true;
this.indices = new Uint16Array(this.dynamicSize * 6);
this.indices = new Uint16Array(this.dynamicSize * 6);
var length = this.indices.length/6;
for (var i=0; i < length; i++)
for (var i=0; i < length; i++)
{
var index2 = i * 6;
var index3 = i * 4;
@ -381,7 +381,7 @@ PIXI.WebGLBatch.prototype.refresh = function()
this.uvs[index +3] = frame.y / th;
this.uvs[index +4] = (frame.x + frame.width) / tw;
this.uvs[index +5] = (frame.y + frame.height) / th;
this.uvs[index +5] = (frame.y + frame.height) / th;
this.uvs[index +6] = frame.x / tw;
this.uvs[index +7] = (frame.y + frame.height) / th;
@ -443,17 +443,17 @@ PIXI.WebGLBatch.prototype.update = function()
tx = worldTransform[2];
ty = worldTransform[5];
this.verticies[index + 0 ] = a * w1 + c * h1 + tx;
this.verticies[index + 0 ] = a * w1 + c * h1 + tx;
this.verticies[index + 1 ] = d * h1 + b * w1 + ty;
this.verticies[index + 2 ] = a * w0 + c * h1 + tx;
this.verticies[index + 3 ] = d * h1 + b * w0 + ty;
this.verticies[index + 2 ] = a * w0 + c * h1 + tx;
this.verticies[index + 3 ] = d * h1 + b * w0 + ty;
this.verticies[index + 4 ] = a * w0 + c * h0 + tx;
this.verticies[index + 5 ] = d * h0 + b * w0 + ty;
this.verticies[index + 4 ] = a * w0 + c * h0 + tx;
this.verticies[index + 5 ] = d * h0 + b * w0 + ty;
this.verticies[index + 6] = a * w1 + c * h0 + tx;
this.verticies[index + 7] = d * h0 + b * w1 + ty;
this.verticies[index + 6] = a * w1 + c * h0 + tx;
this.verticies[index + 7] = d * h0 + b * w1 + ty;
if(displayObject.updateFrame || displayObject.texture.updateFrame)
{
@ -472,7 +472,7 @@ PIXI.WebGLBatch.prototype.update = function()
this.uvs[index +3] = frame.y / th;
this.uvs[index +4] = (frame.x + frame.width) / tw;
this.uvs[index +5] = (frame.y + frame.height) / th;
this.uvs[index +5] = (frame.y + frame.height) / th;
this.uvs[index +6] = frame.x / tw;
this.uvs[index +7] = (frame.y + frame.height) / th;
@ -522,7 +522,7 @@ PIXI.WebGLBatch.prototype.render = function(start, end)
start = start || 0;
if(end == undefined)end = this.size;
if(this.dirty)
{
this.refresh();
@ -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);

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

@ -9,7 +9,7 @@
*/
PIXI.WebGLGraphics = function()
{
}
/**
@ -24,62 +24,64 @@ PIXI.WebGLGraphics = function()
PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
{
var gl = PIXI.gl;
if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0,
if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0,
buffer:gl.createBuffer(),
indexBuffer:gl.createBuffer()};
if(graphics.dirty)
{
graphics.dirty = false;
if(graphics.clearDirty)
{
graphics.clearDirty = false;
graphics._webGL.lastIndex = 0;
graphics._webGL.points = [];
graphics._webGL.indices = [];
}
PIXI.WebGLGraphics.updateGraphics(graphics);
}
PIXI.activatePrimitiveShader();
// This could be speeded up fo sure!
var m = PIXI.mat3.clone(graphics.worldTransform);
PIXI.mat3.transpose(m);
// set the matrix transform for the
// set the matrix transform for the
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
gl.uniformMatrix3fv(PIXI.primitiveProgram.translationMatrix, false, m);
gl.uniform2f(PIXI.primitiveProgram.projectionVector, projection.x, projection.y);
gl.uniform1f(PIXI.primitiveProgram.alpha, graphics.worldAlpha);
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..
gl.vertexAttribPointer(PIXI.primitiveProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 4 * 6, 0);
gl.vertexAttribPointer(PIXI.primitiveProgram.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4);
// set the index buffer!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer);
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);
}
/**
@ -92,18 +94,18 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
*/
PIXI.WebGLGraphics.updateGraphics = function(graphics)
{
for (var i=graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++)
for (var i=graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++)
{
var data = graphics.graphicsData[i];
if(data.type == PIXI.Graphics.POLY)
{
if(data.fill)
{
if(data.points.length>3)
if(data.points.length>3)
PIXI.WebGLGraphics.buildPoly(data, graphics._webGL);
}
if(data.lineWidth > 0)
{
PIXI.WebGLGraphics.buildLine(data, graphics._webGL);
@ -118,18 +120,18 @@ PIXI.WebGLGraphics.updateGraphics = function(graphics)
PIXI.WebGLGraphics.buildCircle(data, graphics._webGL);
}
};
graphics._webGL.lastIndex = graphics.graphicsData.length;
var gl = PIXI.gl;
graphics._webGL.glPoints = new Float32Array(graphics._webGL.points);
gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.glPoints, gl.STATIC_DRAW);
graphics._webGL.glIndicies = new Uint16Array(graphics._webGL.indices);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.glIndicies, gl.STATIC_DRAW);
}
@ -147,45 +149,45 @@ PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
{
// --- //
// need to convert points to a nice regular data
//
//
var rectData = graphicsData.points;
var x = rectData[0];
var y = rectData[1];
var width = rectData[2];
var height = rectData[3];
if(graphicsData.fill)
{
var color = HEXtoRGB(graphicsData.fillColor);
var alpha = graphicsData.fillAlpha;
var r = color[0] * alpha;
var g = color[1] * alpha;
var b = color[2] * alpha;
var verts = webGLData.points;
var indices = webGLData.indices;
var vertPos = verts.length/6;
// start
verts.push(x, y);
verts.push(r, g, b, alpha);
verts.push(x + width, y);
verts.push(r, g, b, alpha);
verts.push(x , y + height);
verts.push(r, g, b, alpha);
verts.push(x + width, y + height);
verts.push(r, g, b, alpha);
// insert 2 dead triangles..
indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3)
}
if(graphicsData.lineWidth)
{
graphicsData.points = [x, y,
@ -193,10 +195,10 @@ PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
x + width, y + height,
x, y + height,
x, y];
PIXI.WebGLGraphics.buildLine(graphicsData, webGLData);
}
}
/**
@ -212,16 +214,16 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
{
// --- //
// need to convert points to a nice regular data
//
//
var rectData = graphicsData.points;
var x = rectData[0];
var y = rectData[1];
var width = rectData[2];
var height = rectData[3];
var totalSegs = 40;
var seg = (Math.PI * 2) / totalSegs ;
if(graphicsData.fill)
{
var color = HEXtoRGB(graphicsData.fillColor);
@ -230,41 +232,41 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
var r = color[0] * alpha;
var g = color[1] * alpha;
var b = color[2] * alpha;
var verts = webGLData.points;
var indices = webGLData.indices;
var vecPos = verts.length/6;
indices.push(vecPos);
for (var i=0; i < totalSegs + 1 ; i++)
for (var i=0; i < totalSegs + 1 ; i++)
{
verts.push(x,y, r, g, b, alpha);
verts.push(x + Math.sin(seg * i) * width,
y + Math.cos(seg * i) * height,
r, g, b, alpha);
indices.push(vecPos++, vecPos++);
};
indices.push(vecPos-1);
}
if(graphicsData.lineWidth)
{
graphicsData.points = [];
for (var i=0; i < totalSegs + 1; i++)
for (var i=0; i < totalSegs + 1; i++)
{
graphicsData.points.push(x + Math.sin(seg * i) * width,
y + Math.cos(seg * i) * height)
};
PIXI.WebGLGraphics.buildLine(graphicsData, webGLData);
}
}
/**
@ -279,89 +281,89 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
{
// TODO OPTIMISE!
var wrap = true;
var points = graphicsData.points;
if(points.length == 0)return;
// get first and last point.. figure out the middle!
var firstPoint = new PIXI.Point( points[0], points[1] );
var lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] );
// if the first point is the last point - goona have issues :)
if(firstPoint.x == lastPoint.x && firstPoint.y == lastPoint.y)
{
points.pop();
points.pop();
lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] );
var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5;
var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5;
points.unshift(midPointX, midPointY);
points.push(midPointX, midPointY)
}
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length / 2;
var indexCount = points.length;
var indexStart = verts.length/6;
// DRAW the Line
var width = graphicsData.lineWidth / 2;
// sort color
var color = HEXtoRGB(graphicsData.lineColor);
var alpha = graphicsData.lineAlpha;
var r = color[0] * alpha;
var g = color[1] * alpha;
var b = color[2] * alpha;
var p1x, p1y, p2x, p2y, p3x, p3y;
var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
var ipx, ipy;
var a1, b1, c1, a2, b2, c2;
var denom, pdist, dist;
p1x = points[0];
p1y = points[1];
p2x = points[2];
p2y = points[3];
perpx = -(p1y - p2y);
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
// start
verts.push(p1x - perpx , p1y - perpy,
r, g, b, alpha);
verts.push(p1x + perpx , p1y + perpy,
r, g, b, alpha);
for (var i = 1; i < length-1; i++)
for (var i = 1; i < length-1; i++)
{
p1x = points[(i-1)*2];
p1y = points[(i-1)*2 + 1];
p2x = points[(i)*2]
p2y = points[(i)*2 + 1]
p3x = points[(i+1)*2];
p3y = points[(i+1)*2 + 1];
perpx = -(p1y - p2y);
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
@ -370,91 +372,91 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
perp2x = -(p2y - p3y);
perp2y = p2x - p3x;
dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
perp2x /= dist;
perp2y /= dist;
perp2x *= width;
perp2y *= width;
a1 = (-perpy + p1y) - (-perpy + p2y);
b1 = (-perpx + p2x) - (-perpx + p1x);
c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
a2 = (-perp2y + p3y) - (-perp2y + p2y);
b2 = (-perp2x + p2x) - (-perp2x + p3x);
c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
denom = a1*b2 - a2*b1;
if (denom == 0) {
denom+=1;
}
px = (b1*c2 - b2*c1)/denom;
py = (a2*c1 - a1*c2)/denom;
pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
if(pdist > 140 * 140)
{
perp3x = perpx - perp2x;
perp3y = perpy - perp2y;
dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
perp3x /= dist;
perp3y /= dist;
perp3x *= width;
perp3y *= width;
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
verts.push(p2x + perp3x, p2y +perp3y);
verts.push(r, g, b, alpha);
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
indexCount++;
}
else
{
verts.push(px , py);
verts.push(r, g, b, alpha);
verts.push(p2x - (px-p2x), p2y - (py - p2y));
verts.push(r, g, b, alpha);
}
}
p1x = points[(length-2)*2]
p1y = points[(length-2)*2 + 1]
p1y = points[(length-2)*2 + 1]
p2x = points[(length-1)*2]
p2y = points[(length-1)*2 + 1]
perpx = -(p1y - p2y)
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
verts.push(p2x - perpx , p2y - perpy)
verts.push(r, g, b, alpha);
verts.push(p2x + perpx , p2y + perpy)
verts.push(r, g, b, alpha);
indices.push(indexStart);
for (var i=0; i < indexCount; i++)
for (var i=0; i < indexCount; i++)
{
indices.push(indexStart++);
};
indices.push(indexStart-1);
}
@ -471,25 +473,25 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
{
var points = graphicsData.points;
if(points.length < 6)return;
// get first and last point.. figure out the middle!
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length / 2;
// sort color
var color = HEXtoRGB(graphicsData.fillColor);
var alpha = graphicsData.fillAlpha;
var r = color[0] * alpha;
var g = color[1] * alpha;
var b = color[2] * alpha;
var triangles = PIXI.PolyK.Triangulate(points);
var vertPos = verts.length / 6;
for (var i=0; i < triangles.length; i+=3)
for (var i=0; i < triangles.length; i+=3)
{
indices.push(triangles[i] + vertPos);
indices.push(triangles[i] + vertPos);
@ -497,8 +499,8 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
indices.push(triangles[i+2] +vertPos);
indices.push(triangles[i+2] + vertPos);
};
for (var i = 0; i < length; i++)
for (var i = 0; i < length; i++)
{
verts.push(points[i * 2], points[i * 2 + 1],
r, g, b, alpha);

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

@ -19,7 +19,7 @@ PIXI.WebGLRenderGroup = function(gl)
{
this.gl = gl;
this.root;
this.backgroundColor;
this.batchs = [];
this.toRemove = [];
@ -33,18 +33,18 @@ PIXI.WebGLRenderGroup.prototype.constructor = PIXI.WebGLRenderGroup;
*
* @method setRenderable
* @param displayObject {DisplayObject}
* @private
* @private
*/
PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
{
// has this changed??
if(this.root)this.removeDisplayObjectAndChildren(this.root);
displayObject.worldVisible = displayObject.visible;
// soooooo //
// to check if any batchs exist already??
// TODO what if its already has an object? should remove it
this.root = displayObject;
this.addDisplayObjectAndChildren(displayObject);
@ -59,26 +59,24 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
PIXI.WebGLRenderGroup.prototype.render = function(projection)
{
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);
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++)
for (var i=0; i < this.batchs.length; i++)
{
renderable = this.batchs[i];
if(renderable instanceof PIXI.WebGLBatch)
{
this.batchs[i].render();
continue;
}
// non sprite batch..
var worldVisible = renderable.vcount === PIXI.visibleCount;
@ -96,42 +94,10 @@ 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)
{
}
/**
@ -145,20 +111,19 @@ PIXI.WebGLRenderGroup.prototype.handleFilter = function(filter, projection)
PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, projection)
{
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...
var startIndex;
var startBatchIndex;
var endIndex;
var endBatchIndex;
/*
* LOOK FOR THE NEXT SPRITE
* This part looks for the closest next sprite that can go into a batch
@ -172,14 +137,14 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
if(nextRenderable.renderable && nextRenderable.__renderGroup)break;
}
var startBatch = nextRenderable.batch;
if(nextRenderable instanceof PIXI.Sprite)
{
startBatch = nextRenderable.batch;
var head = startBatch.head;
var next = head;
// ok now we have the batch.. need to find the start index!
if(head == nextRenderable)
{
@ -188,7 +153,7 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
else
{
startIndex = 1;
while(head.__next != nextRenderable)
{
startIndex++;
@ -200,7 +165,7 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
{
startBatch = nextRenderable;
}
// Get the LAST renderable object
var lastRenderable = displayObject;
var endBatch;
@ -208,15 +173,15 @@ 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)
{
endBatch = lastRenderable.batch;
var head = endBatch.head;
if(head == lastRenderable)
{
endIndex = 0;
@ -224,7 +189,7 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
else
{
endIndex = 1;
while(head.__next != lastRenderable)
{
endIndex++;
@ -236,9 +201,9 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
{
endBatch = lastRenderable;
}
// TODO - need to fold this up a bit!
if(startBatch == endBatch)
{
if(startBatch instanceof PIXI.WebGLBatch)
@ -251,11 +216,11 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
}
return;
}
// now we have first and last!
startBatchIndex = this.batchs.indexOf(startBatch);
endBatchIndex = this.batchs.indexOf(endBatch);
// DO the first batch
if(startBatch instanceof PIXI.WebGLBatch)
{
@ -265,12 +230,12 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
{
this.renderSpecial(startBatch, projection);
}
// DO the middle batchs..
for (var i=startBatchIndex+1; i < endBatchIndex; i++)
for (var i=startBatchIndex+1; i < endBatchIndex; i++)
{
renderable = this.batchs[i];
if(renderable instanceof PIXI.WebGLBatch)
{
this.batchs[i].render();
@ -280,7 +245,7 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
this.renderSpecial(renderable, projection);
}
}
// DO the last batch..
if(endBatch instanceof PIXI.WebGLBatch)
{
@ -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)
{
/*
* for now only masks are supported..
*/
this.handleFilterBlock(renderable, projection);
}
}
var gl = PIXI.gl;
PIXI.WebGLRenderGroup.prototype.handleFilterBlock = function(renderable, projection)
{
/*
* for now only masks are supported..
*/
var gl = PIXI.gl;
if(renderable.open)
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.mask, projection);
// we know this is a render texture so enable alpha too..
PIXI.WebGLGraphics.renderGraphics(renderable.data, projection);
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);
@ -359,11 +357,11 @@ PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection)
*/
PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
{
// TODO definitely can optimse this function..
this.removeObject(displayObject);
/*
* LOOK FOR THE PREVIOUS RENDERABLE
* This part looks for the closest previous sprite that can go into a batch
@ -375,7 +373,7 @@ PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
previousRenderable = previousRenderable._iPrev;
if(previousRenderable.renderable && previousRenderable.__renderGroup)break;
}
/*
* LOOK FOR THE NEXT SPRITE
* This part looks for the closest next sprite that can go into a batch
@ -388,7 +386,7 @@ PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
nextRenderable = nextRenderable._iNext;
if(nextRenderable.renderable && nextRenderable.__renderGroup)break;
}
this.insertObject(displayObject, previousRenderable, nextRenderable);
}
@ -410,13 +408,13 @@ 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;
}
this.insertAfter(start, previousRenderable);
/*
* LOOK FOR THE NEXT SPRITE
* This part looks for the closest next sprite that can go into a batch
@ -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;
@ -456,20 +454,20 @@ PIXI.WebGLRenderGroup.prototype.removeFilterBlocks = function(start, end)
PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayObject)
{
if(displayObject.__renderGroup)displayObject.__renderGroup.removeDisplayObjectAndChildren(displayObject);
/*
* LOOK FOR THE PREVIOUS RENDERABLE
* This part looks for the closest previous sprite that can go into a batch
* It keeps going back until it finds a sprite or the stage
*/
var previousRenderable = displayObject.first;
while(previousRenderable != this.root.first)
{
previousRenderable = previousRenderable._iPrev;
if(previousRenderable.renderable && previousRenderable.__renderGroup)break;
}
/*
* LOOK FOR THE NEXT SPRITE
* This part looks for the closest next sprite that can go into a batch
@ -482,22 +480,22 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayOb
nextRenderable = nextRenderable._iNext;
if(nextRenderable.renderable && nextRenderable.__renderGroup)break;
}
// one the display object hits this. we can break the loop
// one the display object hits this. we can break the loop
var tempObject = displayObject.first;
var testObject = displayObject.last._iNext;
do
do
{
tempObject.__renderGroup = this;
if(tempObject.renderable)
{
this.insertObject(tempObject, previousRenderable, nextRenderable);
previousRenderable = tempObject;
}
tempObject = tempObject._iNext;
}
while(tempObject != testObject)
@ -513,10 +511,10 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayOb
PIXI.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren = function(displayObject)
{
if(displayObject.__renderGroup != this)return;
// var displayObject = displayObject.first;
var lastObject = displayObject.last;
do
do
{
displayObject.__renderGroup = null;
if(displayObject.renderable)this.removeObject(displayObject);
@ -539,16 +537,16 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
// while looping below THE OBJECT MAY NOT HAVE BEEN ADDED
var previousSprite = previousObject;
var nextSprite = nextObject;
/*
* so now we have the next renderable and the previous renderable
*
*
*/
if(displayObject instanceof PIXI.Sprite)
{
var previousBatch
var nextBatch
if(previousSprite instanceof PIXI.Sprite)
{
previousBatch = previousSprite.batch;
@ -566,13 +564,13 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
// TODO reword!
previousBatch = previousSprite;
}
if(nextSprite)
{
if(nextSprite instanceof PIXI.Sprite)
{
nextBatch = nextSprite.batch;
//batch may not exist if item was added to the display list but not to the webGL
if(nextBatch)
{
@ -588,18 +586,18 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
// THERE IS A SPLIT IN THIS BATCH! //
var splitBatch = previousBatch.split(nextSprite);
// COOL!
// add it back into the array
// add it back into the array
/*
* OOPS!
* seems the new sprite is in the middle of a batch
* lets split it..
* lets split it..
*/
var batch = PIXI.WebGLRenderer.getBatch();
var index = this.batchs.indexOf( previousBatch );
batch.init(displayObject);
this.batchs.splice(index+1, 0, batch, splitBatch);
return;
}
}
@ -608,21 +606,21 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
else
{
// TODO re-word!
nextBatch = nextSprite;
}
}
/*
* looks like it does not belong to any batch!
* but is also not intersecting one..
* time to create anew one!
*/
var batch = PIXI.WebGLRenderer.getBatch();
batch.init(displayObject);
if(previousBatch) // if this is invalid it means
if(previousBatch) // if this is invalid it means
{
var index = this.batchs.indexOf( previousBatch );
this.batchs.splice(index+1, 0, batch);
@ -631,16 +629,16 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
{
this.batchs.push(batch);
}
return;
}
else if(displayObject instanceof PIXI.TilingSprite)
{
// add to a batch!!
this.initTilingSprite(displayObject);
// this.batchs.push(displayObject);
}
else if(displayObject instanceof PIXI.Strip)
{
@ -651,14 +649,14 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
else if(displayObject)// instanceof PIXI.Graphics)
{
//displayObject.initWebGL(this);
// add to a batch!!
//this.initStrip(displayObject);
//this.batchs.push(displayObject);
}
this.insertAfter(displayObject, previousSprite);
// insert and SPLIT!
}
@ -676,31 +674,31 @@ PIXI.WebGLRenderGroup.prototype.insertAfter = function(item, displayObject)
if(displayObject instanceof PIXI.Sprite)
{
var previousBatch = displayObject.batch;
if(previousBatch)
{
// so this object is in a batch!
// is it not? need to split the batch
if(previousBatch.tail == displayObject)
{
// is it tail? insert in to batchs
// is it tail? insert in to batchs
var index = this.batchs.indexOf( previousBatch );
this.batchs.splice(index+1, 0, item);
}
else
{
// TODO MODIFY ADD / REMOVE CHILD TO ACCOUNT FOR FILTERS (also get prev and next) //
// THERE IS A SPLIT IN THIS BATCH! //
var splitBatch = previousBatch.split(displayObject.__next);
// COOL!
// add it back into the array
// add it back into the array
/*
* OOPS!
* seems the new sprite is in the middle of a batch
* lets split it..
* lets split it..
*/
var index = this.batchs.indexOf( previousBatch );
this.batchs.splice(index+1, 0, item, splitBatch);
@ -729,25 +727,25 @@ PIXI.WebGLRenderGroup.prototype.removeObject = function(displayObject)
{
// loop through children..
// display object //
// add a child from the render group..
// remove it and all its children!
//displayObject.cacheVisible = false;//displayObject.visible;
/*
* removing is a lot quicker..
*
*
*/
var batchToRemove;
if(displayObject instanceof PIXI.Sprite)
{
// should always have a batch!
var batch = displayObject.batch;
if(!batch)return; // this means the display list has been altered befre rendering
batch.remove(displayObject);
if(batch.size==0)
{
batchToRemove = batch;
@ -757,15 +755,15 @@ PIXI.WebGLRenderGroup.prototype.removeObject = function(displayObject)
{
batchToRemove = displayObject;
}
/*
* Looks like there is somthing that needs removing!
*/
if(batchToRemove)
if(batchToRemove)
{
var index = this.batchs.indexOf( batchToRemove );
if(index == -1)return;// this means it was added then removed before rendered
// ok so.. check to see if you adjacent batchs should be joined.
// TODO may optimise?
if(index == 0 || index == this.batchs.length-1)
@ -773,29 +771,30 @@ PIXI.WebGLRenderGroup.prototype.removeObject = function(displayObject)
// wha - eva! just get of the empty batch!
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove);
return;
}
if(this.batchs[index-1] instanceof PIXI.WebGLBatch && this.batchs[index+1] instanceof PIXI.WebGLBatch)
{
if(this.batchs[index-1].texture == this.batchs[index+1].texture && this.batchs[index-1].blendMode == this.batchs[index+1].blendMode)
{
//console.log("MERGE")
this.batchs[index-1].merge(this.batchs[index+1]);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove);
PIXI.WebGLRenderer.returnBatch(this.batchs[index+1]);
this.batchs.splice(index, 2);
return;
}
}
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove);
}
}
/**
* Initializes a tiling sprite
*
@ -808,26 +807,26 @@ PIXI.WebGLRenderGroup.prototype.initTilingSprite = function(sprite)
var gl = this.gl;
// make the texture tilable..
sprite.verticies = new Float32Array([0, 0,
sprite.width, 0,
sprite.width, sprite.height,
0, sprite.height]);
sprite.uvs = new Float32Array([0, 0,
1, 0,
1, 1,
0, 1]);
sprite.colors = new Float32Array([1,1,1,1]);
sprite.indices = new Uint16Array([0, 1, 3,2])//, 2]);
sprite._vertexBuffer = gl.createBuffer();
sprite._indexBuffer = gl.createBuffer();
sprite._uvBuffer = gl.createBuffer();
sprite._colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, sprite._vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, sprite.verticies, gl.STATIC_DRAW);
@ -839,7 +838,7 @@ PIXI.WebGLRenderGroup.prototype.initTilingSprite = function(sprite)
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, sprite._indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, sprite.indices, gl.STATIC_DRAW);
// return ( (x > 0) && ((x & (x - 1)) == 0) );
if(sprite.texture.baseTexture._glTexture)
@ -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 )
gl.useProgram(PIXI.stripShaderProgram);
var shaderProgram = 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);
// set the matrix transform for the
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)
@ -894,25 +889,25 @@ PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection)
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR);
}
*/
if(!strip.dirty)
{
gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies)
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
// update the uvs
gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer);
gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture);
gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer);
gl.vertexAttribPointer(shaderProgram.colorAttribute, 1, gl.FLOAT, false, 0, 0);
// dont need to upload!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer);
}
@ -922,29 +917,28 @@ PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection)
gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW)
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
// update the uvs
gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer);
gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW)
gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture);
gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW)
gl.vertexAttribPointer(shaderProgram.colorAttribute, 1, gl.FLOAT, false, 0, 0);
// dont need to upload!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer);
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);
}
/**
@ -959,31 +953,31 @@ PIXI.WebGLRenderGroup.prototype.renderTilingSprite = function(sprite, projection
{
var gl = this.gl;
var shaderProgram = PIXI.shaderProgram;
var tilePosition = sprite.tilePosition;
var tileScale = sprite.tileScale;
var offsetX = tilePosition.x/sprite.texture.baseTexture.width;
var offsetY = tilePosition.y/sprite.texture.baseTexture.height;
var scaleX = (sprite.width / sprite.texture.baseTexture.width) / tileScale.x;
var scaleY = (sprite.height / sprite.texture.baseTexture.height) / tileScale.y;
sprite.uvs[0] = 0 - offsetX;
sprite.uvs[1] = 0 - offsetY;
sprite.uvs[2] = (1 * scaleX) -offsetX;
sprite.uvs[3] = 0 - offsetY;
sprite.uvs[4] = (1 *scaleX) - offsetX;
sprite.uvs[5] = (1 *scaleY) - offsetY;
sprite.uvs[6] = 0 - offsetX;
sprite.uvs[7] = (1 *scaleY) - offsetY;
gl.bindBuffer(gl.ARRAY_BUFFER, sprite._uvBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs)
this.renderStrip(sprite, projectionMatrix);
}
@ -999,12 +993,12 @@ PIXI.WebGLRenderGroup.prototype.initStrip = function(strip)
// build the strip!
var gl = this.gl;
var shaderProgram = this.shaderProgram;
strip._vertexBuffer = gl.createBuffer();
strip._indexBuffer = gl.createBuffer();
strip._uvBuffer = gl.createBuffer();
strip._colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.DYNAMIC_DRAW);
@ -1014,7 +1008,8 @@ PIXI.WebGLRenderGroup.prototype.initStrip = function(strip)
gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW);
}

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

@ -21,7 +21,7 @@ PIXI.gl;
* @param view {Canvas} the canvas to use as a view, optional
* @param transparent=false {Boolean} the transparency of the render view, default false
* @param antialias=false {Boolean} sets antialias (only applicable in chrome at the moment)
*
*
*/
PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
{
@ -32,36 +32,37 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
this.width = width || 800;
this.height = height || 600;
this.view = view || document.createElement( 'canvas' );
this.view = view || document.createElement( 'canvas' );
this.view.width = this.width;
this.view.height = this.height;
// deal with losing context..
// deal with losing context..
var scope = this;
this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false)
this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false)
this.batchs = [];
try
try
{
PIXI.gl = this.gl = this.view.getContext("experimental-webgl", {
PIXI.gl = this.gl = this.view.getContext("experimental-webgl", {
alpha: this.transparent,
antialias:!!antialias, // SPEED UP??
premultipliedAlpha:false,
stencil:true
});
}
catch (e)
}
catch (e)
{
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;
@ -71,14 +72,17 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
gl.disable(gl.CULL_FACE);
gl.enable(gl.BLEND);
gl.colorMask(true, true, true, this.transparent);
gl.colorMask(true, true, true, this.transparent);
PIXI.projection = new PIXI.Point(400, 300);
this.resize(this.width, this.height);
this.contextLost = false;
PIXI.activateShader(PIXI.defaultShader);
this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl);
}
// constructor
@ -90,7 +94,7 @@ PIXI.WebGLRenderer.prototype.constructor = PIXI.WebGLRenderer;
* @static
* @method getBatch
* @return {WebGLBatch}
* @private
* @private
*/
PIXI.WebGLRenderer.getBatch = function()
{
@ -114,7 +118,7 @@ PIXI.WebGLRenderer.getBatch = function()
*/
PIXI.WebGLRenderer.returnBatch = function(batch)
{
batch.clean();
batch.clean();
PIXI._batchs.push(batch);
}
@ -127,8 +131,8 @@ PIXI.WebGLRenderer.returnBatch = function(batch)
PIXI.WebGLRenderer.prototype.render = function(stage)
{
if(this.contextLost)return;
// if rendering a new stage clear the batchs..
if(this.__stage !== stage)
{
@ -137,8 +141,8 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
this.__stage = stage;
this.stageRenderGroup.setRenderable(stage);
}
// TODO not needed now...
// TODO not needed now...
// update children if need be
// best to remove first!
/*for (var i=0; i < stage.__childrenRemoved.length; i++)
@ -147,29 +151,29 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
if(group)group.removeDisplayObject(stage.__childrenRemoved[i]);
}*/
// update any textures
// update any textures
PIXI.WebGLRenderer.updateTextures();
// update the scene graph
// update the scene graph
PIXI.visibleCount++;
stage.updateTransform();
var gl = this.gl;
// -- Does this need to be set every frame? -- //
gl.colorMask(true, true, true, this.transparent);
gl.viewport(0, 0, this.width, this.height);
gl.colorMask(true, true, true, this.transparent);
gl.viewport(0, 0, this.width, this.height);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent);
gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent);
gl.clear(gl.COLOR_BUFFER_BIT);
// HACK TO TEST
this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit;
this.stageRenderGroup.render(PIXI.projection);
// interaction
// run interaction!
if(stage.interactive)
@ -181,15 +185,15 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
stage.interactionManager.setTarget(this);
}
}
// after rendering lets confirm all frames that have been uodated..
if(PIXI.Texture.frameUpdates.length > 0)
{
for (var i=0; i < PIXI.Texture.frameUpdates.length; i++)
for (var i=0; i < PIXI.Texture.frameUpdates.length; i++)
{
PIXI.Texture.frameUpdates[i].updateFrame = false;
};
PIXI.Texture.frameUpdates = [];
}
}
@ -222,7 +226,7 @@ PIXI.WebGLRenderer.updateTexture = function(texture)
{
//TODO break this out into a texture manager...
var gl = PIXI.gl;
if(!texture._glTexture)
{
texture._glTexture = gl.createTexture();
@ -288,7 +292,7 @@ PIXI.WebGLRenderer.prototype.resize = function(width, height)
this.view.width = width;
this.view.height = height;
this.gl.viewport(0, 0, this.width, this.height);
this.gl.viewport(0, 0, this.width, this.height);
//var projectionMatrix = this.projectionMatrix;
@ -323,20 +327,20 @@ PIXI.WebGLRenderer.prototype.handleContextLost = function(event)
*/
PIXI.WebGLRenderer.prototype.handleContextRestored = function(event)
{
this.gl = this.view.getContext("experimental-webgl", {
this.gl = this.view.getContext("experimental-webgl", {
alpha: true
});
this.initShaders();
this.initShaders();
for(var key in PIXI.TextureCache)
for(var key in PIXI.TextureCache)
{
var texture = PIXI.TextureCache[key].baseTexture;
texture._glTexture = null;
PIXI.WebGLRenderer.updateTexture(texture);
};
for (var i=0; i < this.batchs.length; i++)
for (var i=0; i < this.batchs.length; i++)
{
this.batchs[i].restoreLostContext(this.gl)//
this.batchs[i].dirty = true;

121
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,48 +92,49 @@ PIXI.primitiveShaderVertexSrc = [
"}"
];
PIXI.initPrimitiveShader = function()
PIXI.shaderStack = [];
PIXI.initPrimitiveShader = function()
{
var gl = PIXI.gl;
var shaderProgram = PIXI.compileProgram(PIXI.primitiveShaderVertexSrc, PIXI.primitiveShaderFragmentSrc)
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor");
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()
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()
PIXI.initDefaultStripShader = function()
{
var gl = this.gl;
var shaderProgram = PIXI.compileProgram(PIXI.stripShaderVertexSrc, PIXI.stripShaderFragmentSrc)
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
@ -147,11 +144,9 @@ 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;
}
@ -186,9 +181,9 @@ PIXI.compileProgram = function(vertexSrc, fragmentSrc)
var gl = PIXI.gl;
var fragmentShader = PIXI.CompileFragmentShader(gl, fragmentSrc);
var vertexShader = PIXI.CompileVertexShader(gl, vertexSrc);
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
@ -198,34 +193,64 @@ PIXI.compileProgram = function(vertexSrc, fragmentSrc)
}
return shaderProgram;
}
PIXI.activateShader = function(shader)
{
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.colorAttribute);
gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
shader.syncUniforms();
PIXI.currentShader = shaderProgram;
}
PIXI.activateDefaultShader = function()
PIXI.popShader = function()
{
var gl = PIXI.gl;
var shaderProgram = PIXI.shaderProgram;
// activate last program..
var lastProgram = PIXI.shaderStack.pop();
var shaderProgram = PIXI.shaderStack[ PIXI.shaderStack.length-1 ].program;
gl.useProgram(shaderProgram);
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
gl.enableVertexAttribArray(shaderProgram.colorAttribute);
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.disableVertexAttribArray(PIXI.currentShader.vertexPositionAttribute);
//gl.disableVertexAttribArray(PIXI.currentShader.colorAttribute);
gl.disableVertexAttribArray(PIXI.currentShader.textureCoordAttribute);
//gl.enableVertexAttribArray(PIXI.primitiveProgram.vertexPositionAttribute);
//gl.enableVertexAttribArray(PIXI.primitiveProgram.colorAttribute);
}
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);
}

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

@ -5,11 +5,11 @@
/**
A RenderTexture is a special texture that allows any pixi displayObject to be rendered to it.
__Hint__: All DisplayObjects (exmpl. Sprites) that renders on RenderTexture should be preloaded.
Otherwise black rectangles will be drawn instead.
__Hint__: All DisplayObjects (exmpl. Sprites) that renders on RenderTexture should be preloaded.
Otherwise black rectangles will be drawn instead.
RenderTexture takes snapshot of DisplayObject passed to render method. If DisplayObject is passed to render method, position and rotation of it will be ignored. For example:
var renderTexture = new PIXI.RenderTexture(800, 600);
var sprite = PIXI.Sprite.fromImage("spinObj_01.png");
sprite.position.x = 800/2;
@ -37,9 +37,9 @@ 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);
this.frame = new PIXI.Rectangle(0, 0, this.width, this.height);
if(PIXI.gl)
{
@ -68,7 +68,7 @@ PIXI.RenderTexture.prototype.initWebGL = function()
gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer );
this.glFramebuffer.width = this.width;
this.glFramebuffer.height = this.height;
this.glFramebuffer.height = this.height;
this.baseTexture = new PIXI.BaseTexture();
@ -96,7 +96,7 @@ PIXI.RenderTexture.prototype.initWebGL = function()
// set the correct render function..
this.render = this.renderWebGL;
}
@ -105,19 +105,19 @@ PIXI.RenderTexture.prototype.resize = function(width, height)
this.width = width;
this.height = height;
if(PIXI.gl)
{
this.projection.x = this.width/2
this.projection.y = this.height/2;
var gl = PIXI.gl;
gl.bindTexture(gl.TEXTURE_2D, this.baseTexture._glTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
}
else
{
this.frame.width = this.width
this.frame.height = this.height;
this.renderer.resize(this.width, this.height);
@ -153,15 +153,15 @@ PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, position, cle
var gl = PIXI.gl;
// enable the alpha color mask..
gl.colorMask(true, true, true, true);
gl.colorMask(true, true, true, true);
gl.viewport(0, 0, this.width, this.height);
gl.viewport(0, 0, this.width, this.height);
gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer );
if(clear)
{
gl.clearColor(0,0,0, 0);
gl.clearColor(0,0,0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
}
@ -170,24 +170,24 @@ 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;
if(position)
{
displayObject.worldTransform[2] = position.x;
displayObject.worldTransform[5] -= position.y;
}
PIXI.visibleCount++;
displayObject.vcount = PIXI.visibleCount;
for(var i=0,j=children.length; i<j; i++)
{
children[i].updateTransform();
children[i].updateTransform();
}
var renderGroup = displayObject.__renderGroup;
@ -209,7 +209,7 @@ PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, position, cle
this.renderGroup.setRenderable(displayObject);
this.renderGroup.render(this.projection);
}
displayObject.worldTransform = originalWorldTransform;
}
@ -227,26 +227,25 @@ PIXI.RenderTexture.prototype.renderCanvas = function(displayObject, position, cl
var children = displayObject.children;
displayObject.worldTransform = PIXI.mat3.create();
if(position)
{
displayObject.worldTransform[2] = position.x;
displayObject.worldTransform[5] = position.y;
}
for(var i=0,j=children.length; i<j; i++)
{
children[i].updateTransform();
children[i].updateTransform();
}
if(clear)this.renderer.context.clearRect(0,0, this.width, this.height);
this.renderer.renderDisplayObject(displayObject);
this.renderer.context.setTransform(1,0,0,1,0,0);
this.renderer.context.setTransform(1,0,0,1,0,0);
// PIXI.texturesToUpdate.push(this.baseTexture);
}