1052 lines
29 KiB
HTML
1052 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>src/pixi/renderers/WebGLRenderer.js - Pixi.JS</title>
|
|
<link rel="stylesheet" href="http://yui.yahooapis.com/3.8.0/build/cssgrids/cssgrids-min.css">
|
|
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
|
|
<link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
|
|
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
|
|
<script src="http://yui.yahooapis.com/combo?3.8.0/build/yui/yui-min.js"></script>
|
|
</head>
|
|
<body class="yui3-skin-sam">
|
|
|
|
<div id="doc">
|
|
<div id="hd" class="yui3-g header">
|
|
<div class="yui3-u-3-4">
|
|
|
|
<h1><img src="http://www.goodboydigital.com/pixijs/logo_small.png" title="Pixi.JS"></h1>
|
|
|
|
</div>
|
|
<div class="yui3-u-1-4 version">
|
|
<em>API Docs for: 1.0.0</em>
|
|
</div>
|
|
</div>
|
|
<div id="bd" class="yui3-g">
|
|
|
|
<div class="yui3-u-1-4">
|
|
<div id="docs-sidebar" class="sidebar apidocs">
|
|
<div id="api-list">
|
|
<h2 class="off-left">APIs</h2>
|
|
<div id="api-tabview" class="tabview">
|
|
<ul class="tabs">
|
|
<li><a href="#api-classes">Classes</a></li>
|
|
<li><a href="#api-modules">Modules</a></li>
|
|
</ul>
|
|
|
|
<div id="api-tabview-filter">
|
|
<input type="search" id="api-filter" placeholder="Type to filter APIs">
|
|
</div>
|
|
|
|
<div id="api-tabview-panel">
|
|
<ul id="api-classes" class="apis classes">
|
|
|
|
<li><a href="../classes/AssetLoader.html">AssetLoader</a></li>
|
|
|
|
<li><a href="../classes/BaseTexture.html">BaseTexture</a></li>
|
|
|
|
<li><a href="../classes/BitmapFontLoader.html">BitmapFontLoader</a></li>
|
|
|
|
<li><a href="../classes/BitmapText.html">BitmapText</a></li>
|
|
|
|
<li><a href="../classes/CanvasRenderer.html">CanvasRenderer</a></li>
|
|
|
|
<li><a href="../classes/DisplayObject.html">DisplayObject</a></li>
|
|
|
|
<li><a href="../classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
|
|
|
|
<li><a href="../classes/ImageLoader.html">ImageLoader</a></li>
|
|
|
|
<li><a href="../classes/InteractionData.html">InteractionData</a></li>
|
|
|
|
<li><a href="../classes/InteractionManager.html">InteractionManager</a></li>
|
|
|
|
<li><a href="../classes/MovieClip.html">MovieClip</a></li>
|
|
|
|
<li><a href="../classes/Point.html">Point</a></li>
|
|
|
|
<li><a href="../classes/Rectangle.html">Rectangle</a></li>
|
|
|
|
<li><a href="../classes/Sprite.html">Sprite</a></li>
|
|
|
|
<li><a href="../classes/SpriteSheetLoader.html">SpriteSheetLoader</a></li>
|
|
|
|
<li><a href="../classes/Stage.html">Stage</a></li>
|
|
|
|
<li><a href="../classes/Text.html">Text</a></li>
|
|
|
|
<li><a href="../classes/Texture.html">Texture</a></li>
|
|
|
|
<li><a href="../classes/TilingSprite.html">TilingSprite</a></li>
|
|
|
|
<li><a href="../classes/WebGLBatch.html">WebGLBatch</a></li>
|
|
|
|
<li><a href="../classes/WebGLRenderer.html">WebGLRenderer</a></li>
|
|
|
|
</ul>
|
|
|
|
<ul id="api-modules" class="apis modules">
|
|
|
|
<li><a href="../modules/PIXI.html">PIXI</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="yui3-u-3-4">
|
|
<div id="api-options">
|
|
Show:
|
|
<label for="api-show-inherited">
|
|
<input type="checkbox" id="api-show-inherited" checked>
|
|
Inherited
|
|
</label>
|
|
|
|
<label for="api-show-protected">
|
|
<input type="checkbox" id="api-show-protected">
|
|
Protected
|
|
</label>
|
|
|
|
<label for="api-show-private">
|
|
<input type="checkbox" id="api-show-private">
|
|
Private
|
|
</label>
|
|
<label for="api-show-deprecated">
|
|
<input type="checkbox" id="api-show-deprecated">
|
|
Deprecated
|
|
</label>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="apidocs">
|
|
<div id="docs-main">
|
|
<div class="content">
|
|
<h1 class="file-heading">File: src/pixi/renderers/WebGLRenderer.js</h1>
|
|
|
|
<div class="file">
|
|
<pre class="code prettyprint linenums">
|
|
/**
|
|
* @author Mat Groves http://matgroves.com/ @Doormat23
|
|
*/
|
|
|
|
PIXI._defaultFrame = new PIXI.Rectangle(0,0,1,1);
|
|
|
|
/**
|
|
* the WebGLRenderer is draws the stage and all its content onto a webGL enabled canvas. This renderer should be used for browsers support webGL. This Render works by automatically managing webGLBatchs. So no need for Sprite Batch's or Sprite Cloud's
|
|
* Dont forget to add the view to your DOM or you will not see anything :)
|
|
* @class WebGLRenderer
|
|
* @constructor
|
|
* @param width {Number} the width of the canvas view
|
|
* @default 0
|
|
* @param height {Number} the height of the canvas view
|
|
* @default 0
|
|
* @param view {Canvas} the canvas to use as a view, optional
|
|
* @param transparent {Boolean} the transparency of the render view, default false
|
|
* @default false
|
|
*
|
|
*/
|
|
PIXI.WebGLRenderer = function(width, height, view, transparent)
|
|
{
|
|
// do a catch.. only 1 webGL renderer..
|
|
|
|
//console.log(transparent)
|
|
this.transparent = !!transparent;
|
|
|
|
this.width = width || 800;
|
|
this.height = height || 600;
|
|
|
|
this.view = view || document.createElement( 'canvas' );
|
|
this.view.width = this.width;
|
|
this.view.height = this.height;
|
|
|
|
// 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
|
|
{
|
|
this.gl = this.view.getContext("experimental-webgl", {
|
|
alpha: this.transparent,
|
|
antialias:false, // SPEED UP??
|
|
premultipliedAlpha:true
|
|
});
|
|
}
|
|
catch (e)
|
|
{
|
|
throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this);
|
|
}
|
|
|
|
this.initShaders();
|
|
|
|
|
|
var gl = this.gl;
|
|
|
|
this.batch = new PIXI.WebGLBatch(gl);
|
|
gl.disable(gl.DEPTH_TEST);
|
|
gl.enable(gl.BLEND);
|
|
gl.colorMask(true, true, true, this.transparent);
|
|
|
|
this.projectionMatrix = PIXI.mat4.create();
|
|
this.resize(this.width, this.height)
|
|
this.contextLost = false;
|
|
}
|
|
|
|
// constructor
|
|
PIXI.WebGLRenderer.constructor = PIXI.WebGLRenderer;
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
PIXI.WebGLRenderer.prototype.getBatch = function()
|
|
{
|
|
if(PIXI._batchs.length == 0)
|
|
{
|
|
return new PIXI.WebGLBatch(this.gl);
|
|
}
|
|
else
|
|
{
|
|
return PIXI._batchs.pop();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
PIXI.WebGLRenderer.prototype.returnBatch = function(batch)
|
|
{
|
|
batch.clean();
|
|
PIXI._batchs.push(batch);
|
|
}
|
|
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
PIXI.WebGLRenderer.prototype.initShaders = function()
|
|
{
|
|
var gl = this.gl;
|
|
var fragmentShader = PIXI.CompileFragmentShader(gl, PIXI.shaderFragmentSrc);
|
|
var vertexShader = PIXI.CompileVertexShader(gl, PIXI.shaderVertexSrc);
|
|
|
|
this.shaderProgram = gl.createProgram();
|
|
|
|
var shaderProgram = this.shaderProgram;
|
|
|
|
gl.attachShader(shaderProgram, vertexShader);
|
|
gl.attachShader(shaderProgram, fragmentShader);
|
|
gl.linkProgram(shaderProgram);
|
|
|
|
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
|
|
alert("Could not initialise shaders");
|
|
}
|
|
|
|
gl.useProgram(shaderProgram);
|
|
|
|
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
|
|
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
|
|
|
|
shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
|
|
gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
|
|
|
|
shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor");
|
|
gl.enableVertexAttribArray(shaderProgram.colorAttribute);
|
|
|
|
|
|
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
|
|
shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
|
|
|
|
PIXI.shaderProgram = this.shaderProgram;
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
PIXI.WebGLRenderer.prototype.checkVisibility = function(displayObject, globalVisible)
|
|
{
|
|
var children = displayObject.children;
|
|
|
|
|
|
for (var i=0; i < children.length; i++)
|
|
{
|
|
var child = children[i];
|
|
|
|
// TODO optimize... shouldt need to loop through everything all the time
|
|
var actualVisibility = child.visible && globalVisible;
|
|
|
|
// everything should have a batch!
|
|
// time to see whats new!
|
|
if(child.textureChange)
|
|
{
|
|
child.textureChange = false;
|
|
if(actualVisibility)
|
|
{
|
|
this.removeDisplayObject(child)
|
|
this.addDisplayObject(child)
|
|
}
|
|
// update texture!!
|
|
}
|
|
|
|
if(child.cacheVisible != actualVisibility)
|
|
{
|
|
child.cacheVisible = actualVisibility;
|
|
|
|
if(child.cacheVisible)
|
|
{
|
|
this.addDisplayObject(child);
|
|
}
|
|
else
|
|
{
|
|
this.removeDisplayObject(child);
|
|
}
|
|
}
|
|
|
|
if(child.children.length > 0)
|
|
{
|
|
this.checkVisibility(child, actualVisibility);
|
|
}
|
|
};
|
|
}
|
|
|
|
|
|
/**
|
|
* Renders the stage to its webGL view
|
|
* @method render
|
|
* @param stage {Stage} the PIXI.Stage element to be rendered
|
|
*/
|
|
PIXI.WebGLRenderer.prototype.render = function(stage)
|
|
{
|
|
if(this.contextLost)return;
|
|
|
|
|
|
// if rendering a new stage clear the batchs..
|
|
if(this.__stage !== stage)
|
|
{
|
|
if(this.__stage)this.checkVisibility(this.__stage, false)
|
|
this.__stage = stage;
|
|
}
|
|
|
|
// update children if need be
|
|
// best to remove first!
|
|
for (var i=0; i < stage.__childrenRemoved.length; i++)
|
|
{
|
|
this.removeDisplayObject(stage.__childrenRemoved[i]);
|
|
}
|
|
|
|
|
|
|
|
// update any textures
|
|
for (var i=0; i < PIXI.texturesToUpdate.length; i++) this.updateTexture(PIXI.texturesToUpdate[i]);
|
|
for (var i=0; i < PIXI.texturesToDestroy.length; i++) this.destroyTexture(PIXI.texturesToDestroy[i]);
|
|
|
|
// empty out the arrays
|
|
stage.__childrenRemoved = [];
|
|
stage.__childrenAdded = [];
|
|
PIXI.texturesToUpdate = [];
|
|
PIXI.texturesToDestroy = [];
|
|
// recursivly loop through all items!
|
|
this.checkVisibility(stage, true);
|
|
|
|
// update the scene graph
|
|
stage.updateTransform();
|
|
|
|
var gl = this.gl;
|
|
|
|
gl.clear(gl.COLOR_BUFFER_BIT)
|
|
|
|
gl.clearColor(stage.backgroundColorSplit[0], stage.backgroundColorSplit[1], stage.backgroundColorSplit[2], 0);
|
|
|
|
|
|
// set the correct blend mode!
|
|
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
|
|
gl.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform, false, this.projectionMatrix);
|
|
|
|
// render all the batchs!
|
|
|
|
|
|
var renderable;
|
|
for (var i=0; i < this.batchs.length; i++)
|
|
{
|
|
renderable = this.batchs[i];
|
|
if(renderable instanceof PIXI.WebGLBatch)
|
|
{
|
|
this.batchs[i].render();
|
|
}
|
|
else if(renderable instanceof PIXI.TilingSprite)
|
|
{
|
|
if(renderable.visible)this.renderTilingSprite(renderable);
|
|
}
|
|
else if(renderable instanceof PIXI.Strip)
|
|
{
|
|
if(renderable.visible)this.renderStrip(renderable);
|
|
}
|
|
}
|
|
|
|
// interaction
|
|
// run interaction!
|
|
if(stage.interactive)
|
|
{
|
|
//need to add some events!
|
|
if(!stage._interactiveEventsAdded)
|
|
{
|
|
stage._interactiveEventsAdded = true;
|
|
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++)
|
|
{
|
|
PIXI.Texture.frameUpdates[i].updateFrame = false;
|
|
};
|
|
|
|
PIXI.Texture.frameUpdates = [];
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
PIXI.WebGLRenderer.prototype.updateTexture = function(texture)
|
|
{
|
|
var gl = this.gl;
|
|
|
|
if(!texture._glTexture)
|
|
{
|
|
texture._glTexture = gl.createTexture();
|
|
}
|
|
|
|
if(texture.hasLoaded)
|
|
{
|
|
gl.bindTexture(gl.TEXTURE_2D, texture._glTexture);
|
|
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
|
|
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
|
|
|
|
// reguler...
|
|
|
|
//gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
|
|
//gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
|
|
if(!texture._powerOf2)
|
|
{
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
}
|
|
else
|
|
{
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
|
|
}
|
|
|
|
// gl.generateMipmap(gl.TEXTURE_2D);
|
|
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
}
|
|
|
|
this.refreshBatchs = true;
|
|
}
|
|
|
|
PIXI.WebGLRenderer.prototype.destroyTexture = function(texture)
|
|
{
|
|
var gl = this.gl;
|
|
|
|
if(texture._glTexture)
|
|
{
|
|
texture._glTexture = gl.createTexture();
|
|
gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
PIXI.WebGLRenderer.prototype.addDisplayObject = function(displayObject)
|
|
{
|
|
var objectDetaildisplayObject
|
|
if(!displayObject.stage)return; // means it was removed
|
|
if(displayObject.__inWebGL)return; //means it is already in webgL
|
|
|
|
//displayObject.cacheVisible = displayObject.visible;
|
|
|
|
// TODO if objects parent is not visible then dont add to stage!!!!
|
|
//if(!displayObject.visible)return;
|
|
|
|
|
|
displayObject.batch = null;
|
|
|
|
//displayObject.cacheVisible = true;
|
|
if(!displayObject.renderable)return;
|
|
|
|
// while looping below THE OBJECT MAY NOT HAVE BEEN ADDED
|
|
displayObject.__inWebGL = true;
|
|
|
|
/*
|
|
* LOOK FOR THE PREVIOUS SPRITE
|
|
* 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 previousSprite = displayObject;
|
|
do
|
|
{
|
|
if(previousSprite.childIndex == 0)
|
|
{
|
|
previousSprite = previousSprite.parent;
|
|
|
|
}
|
|
else
|
|
{
|
|
previousSprite = previousSprite.parent.children[previousSprite.childIndex-1];
|
|
// what if the bloop has children???
|
|
while(previousSprite.children.length != 0)
|
|
{
|
|
// keep diggin till we get to the last child
|
|
previousSprite = previousSprite.children[previousSprite.children.length-1];
|
|
}
|
|
}
|
|
|
|
if(previousSprite == displayObject.stage)break;
|
|
}
|
|
while(!previousSprite.renderable || !previousSprite.__inWebGL)
|
|
//while(!(previousSprite instanceof PIXI.Sprite))
|
|
|
|
/*
|
|
* LOOK FOR THE NEXT SPRITE
|
|
* This part looks for the closest next sprite that can go into a batch
|
|
* it keeps looking until it finds a sprite or gets to the end of the display
|
|
* scene graph
|
|
*
|
|
* These look a lot scarier than the actually are...
|
|
*/
|
|
var nextSprite = displayObject;
|
|
do
|
|
{
|
|
// moving forward!
|
|
// if it has no children..
|
|
if(nextSprite.children.length == 0)
|
|
{
|
|
// go along to the parent..
|
|
while(nextSprite.childIndex == nextSprite.parent.children.length-1)
|
|
{
|
|
nextSprite = nextSprite.parent;
|
|
if(nextSprite == displayObject.stage)
|
|
{
|
|
nextSprite = null
|
|
break;
|
|
}
|
|
}
|
|
|
|
if(nextSprite)nextSprite = nextSprite.parent.children[nextSprite.childIndex+1];
|
|
|
|
}
|
|
else
|
|
{
|
|
nextSprite = nextSprite.children[0];
|
|
}
|
|
|
|
if(!nextSprite)break;
|
|
}
|
|
while(!nextSprite.renderable || !nextSprite.__inWebGL)
|
|
|
|
/*
|
|
* 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;
|
|
|
|
if(previousBatch)
|
|
{
|
|
if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode)
|
|
{
|
|
previousBatch.insertAfter(displayObject, previousSprite);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
else
|
|
{
|
|
// 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)
|
|
{
|
|
if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode)
|
|
{
|
|
nextBatch.insertBefore(displayObject, nextSprite);
|
|
return;
|
|
}
|
|
else
|
|
{
|
|
if(nextBatch == previousBatch)
|
|
{
|
|
// THERE IS A SPLIT IN THIS BATCH! //
|
|
var splitBatch = previousBatch.split(nextSprite);
|
|
// COOL!
|
|
// add it back into the array
|
|
/*
|
|
* OOPS!
|
|
* seems the new sprite is in the middle of a batch
|
|
* lets split it..
|
|
*/
|
|
var batch = this.getBatch();
|
|
|
|
var index = this.batchs.indexOf( previousBatch );
|
|
batch.init(displayObject);
|
|
this.batchs.splice(index+1, 0, batch, splitBatch);
|
|
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
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 = this.getBatch();
|
|
batch.init(displayObject);
|
|
|
|
if(previousBatch) // if this is invalid it means
|
|
{
|
|
var index = this.batchs.indexOf( previousBatch );
|
|
this.batchs.splice(index+1, 0, batch);
|
|
}
|
|
else
|
|
{
|
|
this.batchs.push(batch);
|
|
}
|
|
|
|
}
|
|
else if(displayObject instanceof PIXI.TilingSprite)
|
|
{
|
|
// add to a batch!!
|
|
this.initTilingSprite(displayObject);
|
|
this.batchs.push(displayObject);
|
|
|
|
}
|
|
else if(displayObject instanceof PIXI.Strip)
|
|
{
|
|
// add to a batch!!
|
|
this.initStrip(displayObject);
|
|
this.batchs.push(displayObject);
|
|
|
|
}
|
|
|
|
// if its somthing else... then custom codes!
|
|
this.batchUpdate = true;
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
PIXI.WebGLRenderer.prototype.removeDisplayObject = function(displayObject)
|
|
{
|
|
//if(displayObject.stage)return;
|
|
displayObject.cacheVisible = false;//displayObject.visible;
|
|
|
|
if(!displayObject.renderable)return;
|
|
|
|
displayObject.__inWebGL = false;
|
|
|
|
/*
|
|
* 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
|
|
}
|
|
}
|
|
else
|
|
{
|
|
batchToRemove = displayObject;
|
|
}
|
|
|
|
/*
|
|
* Looks like there is somthing that needs removing!
|
|
*/
|
|
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)
|
|
{
|
|
// wha - eva! just get of the empty batch!
|
|
this.batchs.splice(index, 1);
|
|
if(batchToRemove instanceof PIXI.WebGLBatch)this.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)this.returnBatch(batchToRemove);
|
|
this.returnBatch(this.batchs[index+1]);
|
|
this.batchs.splice(index, 2);
|
|
return;
|
|
}
|
|
}
|
|
|
|
|
|
this.batchs.splice(index, 1);
|
|
if(batchToRemove instanceof PIXI.WebGLBatch)this.returnBatch(batchToRemove);
|
|
}
|
|
|
|
|
|
}
|
|
|
|
/**
|
|
* resizes the webGL view to the specified width and height
|
|
* @method resize
|
|
* @param width {Number} the new width of the webGL view
|
|
* @param height {Number} the new height of the webGL view
|
|
*/
|
|
PIXI.WebGLRenderer.prototype.resize = function(width, height)
|
|
{
|
|
this.width = width;
|
|
this.height = height;
|
|
|
|
this.view.width = width;
|
|
this.view.height = height;
|
|
|
|
this.gl.viewport(0, 0, this.width, this.height);
|
|
|
|
var projectionMatrix = this.projectionMatrix;
|
|
|
|
projectionMatrix[0] = 2/this.width;
|
|
projectionMatrix[5] = -2/this.height;
|
|
projectionMatrix[12] = -1;
|
|
projectionMatrix[13] = 1;
|
|
}
|
|
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
PIXI.WebGLRenderer.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);
|
|
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, sprite._uvBuffer);
|
|
gl.bufferData(gl.ARRAY_BUFFER, sprite.uvs, gl.DYNAMIC_DRAW);
|
|
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, sprite._colorBuffer);
|
|
gl.bufferData(gl.ARRAY_BUFFER, sprite.colors, gl.STATIC_DRAW);
|
|
|
|
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)
|
|
{
|
|
gl.bindTexture(gl.TEXTURE_2D, sprite.texture.baseTexture._glTexture);
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
|
|
sprite.texture.baseTexture._powerOf2 = true;
|
|
}
|
|
else
|
|
{
|
|
sprite.texture.baseTexture._powerOf2 = true;
|
|
}
|
|
|
|
/*
|
|
var context = this.context;
|
|
|
|
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.translate(-tilePosition.x, -tilePosition.y);
|
|
context.scale(1/tileScale.x, 1/tileScale.y);
|
|
*/
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
PIXI.WebGLRenderer.prototype.renderTilingSprite = function(sprite)
|
|
{
|
|
var gl = this.gl;
|
|
var shaderProgram = this.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///sprite.texture.baseTexture.width;
|
|
var scaleY = (sprite.height / sprite.texture.baseTexture.height) / tileScale.y///sprite.texture.baseTexture.height;
|
|
//
|
|
//sprite.dirty = true;
|
|
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);
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
PIXI.WebGLRenderer.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);
|
|
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer);
|
|
gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW);
|
|
|
|
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);
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
PIXI.WebGLRenderer.prototype.renderStrip = function(strip)
|
|
{
|
|
var gl = this.gl;
|
|
var shaderProgram = this.shaderProgram;
|
|
// mat
|
|
var mat4Real = PIXI.mat3.toMat4(strip.worldTransform);
|
|
PIXI.mat4.transpose(mat4Real);
|
|
PIXI.mat4.multiply(this.projectionMatrix, mat4Real, mat4Real )
|
|
|
|
gl.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform, false, mat4Real);
|
|
|
|
if(strip.blendMode == PIXI.blendModes.NORMAL)
|
|
{
|
|
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
|
|
}
|
|
else
|
|
{
|
|
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);
|
|
|
|
|
|
}
|
|
else
|
|
{
|
|
strip.dirty = false;
|
|
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.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform, false, this.projectionMatrix);
|
|
|
|
// console.log("!!!")
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
PIXI.WebGLRenderer.prototype.handleContextLost = function(event)
|
|
{
|
|
event.preventDefault();
|
|
this.contextLost = true;
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
PIXI.WebGLRenderer.prototype.handleContextRestored = function(event)
|
|
{
|
|
this.gl = this.view.getContext("experimental-webgl", {
|
|
alpha: true
|
|
});
|
|
|
|
this.initShaders();
|
|
|
|
for (var i=0; i < PIXI.TextureCache.length; i++)
|
|
{
|
|
this.updateTexture(PIXI.TextureCache[i]);
|
|
};
|
|
|
|
for (var i=0; i < this.batchs.length; i++)
|
|
{
|
|
this.batchs[i].restoreLostContext(this.gl)//
|
|
this.batchs[i].dirty = true;
|
|
};
|
|
|
|
PIXI._restoreBatchs(this.gl);
|
|
|
|
this.contextLost = false;
|
|
}
|
|
|
|
|
|
</pre>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="../assets/vendor/prettify/prettify-min.js"></script>
|
|
<script>prettyPrint();</script>
|
|
<script src="../assets/js/yui-prettify.js"></script>
|
|
<script src="../assets/../api.js"></script>
|
|
<script src="../assets/js/api-filter.js"></script>
|
|
<script src="../assets/js/api-list.js"></script>
|
|
<script src="../assets/js/api-search.js"></script>
|
|
<script src="../assets/js/apidocs.js"></script>
|
|
</body>
|
|
</html>
|