555 lines
16 KiB
HTML
555 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>src/pixi/renderers/webgl/WebGLRenderer.js - Pixi.JS</title>
|
|
<link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/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.9.1/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.3.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/AbstractFilter.html">AbstractFilter</a></li>
|
|
|
|
<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/BlurFilter.html">BlurFilter</a></li>
|
|
|
|
<li><a href="../classes/CanvasGraphics.html">CanvasGraphics</a></li>
|
|
|
|
<li><a href="../classes/CanvasRenderer.html">CanvasRenderer</a></li>
|
|
|
|
<li><a href="../classes/Circle.html">Circle</a></li>
|
|
|
|
<li><a href="../classes/ColorMatrixFilter.html">ColorMatrixFilter</a></li>
|
|
|
|
<li><a href="../classes/CustomRenderable.html">CustomRenderable</a></li>
|
|
|
|
<li><a href="../classes/DisplacementFilter.html">DisplacementFilter</a></li>
|
|
|
|
<li><a href="../classes/DisplayObject.html">DisplayObject</a></li>
|
|
|
|
<li><a href="../classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
|
|
|
|
<li><a href="../classes/Ellipse.html">Ellipse</a></li>
|
|
|
|
<li><a href="../classes/EventTarget.html">EventTarget</a></li>
|
|
|
|
<li><a href="../classes/Graphics.html">Graphics</a></li>
|
|
|
|
<li><a href="../classes/GreyFilter.html">GreyFilter</a></li>
|
|
|
|
<li><a href="../classes/ImageLoader.html">ImageLoader</a></li>
|
|
|
|
<li><a href="../classes/InvertFilter.html">InvertFilter</a></li>
|
|
|
|
<li><a href="../classes/JsonLoader.html">JsonLoader</a></li>
|
|
|
|
<li><a href="../classes/MovieClip.html">MovieClip</a></li>
|
|
|
|
<li><a href="../classes/PixelateFilter.html">PixelateFilter</a></li>
|
|
|
|
<li><a href="../classes/Point.html">Point</a></li>
|
|
|
|
<li><a href="../classes/Polygon.html">Polygon</a></li>
|
|
|
|
<li><a href="../classes/PolyK._convex.html">PolyK._convex</a></li>
|
|
|
|
<li><a href="../classes/PolyK._PointInTriangle.html">PolyK._PointInTriangle</a></li>
|
|
|
|
<li><a href="../classes/PolyK.AjaxRequest.html">PolyK.AjaxRequest</a></li>
|
|
|
|
<li><a href="../classes/PolyK.InteractionData.html">PolyK.InteractionData</a></li>
|
|
|
|
<li><a href="../classes/PolyK.InteractionManager.html">PolyK.InteractionManager</a></li>
|
|
|
|
<li><a href="../classes/Rectangle.html">Rectangle</a></li>
|
|
|
|
<li><a href="../classes/RenderTexture.html">RenderTexture</a></li>
|
|
|
|
<li><a href="../classes/SepiaFilter.html">SepiaFilter</a></li>
|
|
|
|
<li><a href="../classes/Spine.html">Spine</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/webgl/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);
|
|
|
|
// an instance of the gl context..
|
|
// only one at the moment :/
|
|
PIXI.gl;
|
|
|
|
/**
|
|
* 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=0 {Number} the width of the canvas view
|
|
* @param height=0 {Number} the height of the canvas view
|
|
* @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)
|
|
{
|
|
// do a catch.. only 1 webGL renderer..
|
|
|
|
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 = [];
|
|
|
|
var options = {
|
|
alpha: this.transparent,
|
|
antialias:!!antialias, // SPEED UP??
|
|
premultipliedAlpha:false,
|
|
stencil:true
|
|
}
|
|
|
|
//try 'experimental-webgl'
|
|
try {
|
|
PIXI.gl = this.gl = this.view.getContext("experimental-webgl", options);
|
|
} catch (e) {
|
|
//try 'webgl'
|
|
try {
|
|
PIXI.gl = this.gl = this.view.getContext("webgl", options);
|
|
} catch (e) {
|
|
// fail, not able to get a context
|
|
throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this);
|
|
}
|
|
}
|
|
|
|
PIXI.initDefaultShaders();
|
|
|
|
|
|
|
|
|
|
// PIXI.activateDefaultShader();
|
|
|
|
var gl = this.gl;
|
|
|
|
gl.useProgram(PIXI.defaultShader.program);
|
|
|
|
|
|
PIXI.WebGLRenderer.gl = gl;
|
|
|
|
this.batch = new PIXI.WebGLBatch(gl);
|
|
gl.disable(gl.DEPTH_TEST);
|
|
gl.disable(gl.CULL_FACE);
|
|
|
|
gl.enable(gl.BLEND);
|
|
gl.colorMask(true, true, true, this.transparent);
|
|
|
|
PIXI.projection = new PIXI.Point(400, 300);
|
|
PIXI.offset = new PIXI.Point(0, 0);
|
|
|
|
// TODO remove thease globals..
|
|
|
|
this.resize(this.width, this.height);
|
|
this.contextLost = false;
|
|
|
|
//PIXI.pushShader(PIXI.defaultShader);
|
|
|
|
this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl);
|
|
|
|
}
|
|
|
|
// constructor
|
|
PIXI.WebGLRenderer.prototype.constructor = PIXI.WebGLRenderer;
|
|
|
|
/**
|
|
* Gets a new WebGLBatch from the pool
|
|
*
|
|
* @static
|
|
* @method getBatch
|
|
* @return {WebGLBatch}
|
|
* @private
|
|
*/
|
|
PIXI.WebGLRenderer.getBatch = function()
|
|
{
|
|
if(PIXI._batchs.length == 0)
|
|
{
|
|
return new PIXI.WebGLBatch(PIXI.WebGLRenderer.gl);
|
|
}
|
|
else
|
|
{
|
|
return PIXI._batchs.pop();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Puts a batch back into the pool
|
|
*
|
|
* @static
|
|
* @method returnBatch
|
|
* @param batch {WebGLBatch} The batch to return
|
|
* @private
|
|
*/
|
|
PIXI.WebGLRenderer.returnBatch = function(batch)
|
|
{
|
|
batch.clean();
|
|
PIXI._batchs.push(batch);
|
|
}
|
|
|
|
/**
|
|
* Renders the stage to its webGL view
|
|
*
|
|
* @method render
|
|
* @param stage {Stage} the 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)
|
|
{
|
|
// TODO make this work
|
|
// dont think this is needed any more?
|
|
this.__stage = stage;
|
|
this.stageRenderGroup.setRenderable(stage);
|
|
}
|
|
|
|
// update any textures
|
|
PIXI.WebGLRenderer.updateTextures();
|
|
|
|
// 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.bindFramebuffer(gl.FRAMEBUFFER, null);
|
|
|
|
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;
|
|
|
|
PIXI.projection.x = this.width/2;
|
|
PIXI.projection.y = -this.height/2;
|
|
|
|
this.stageRenderGroup.render(PIXI.projection);
|
|
|
|
// 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 = [];
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Updates the textures loaded into this webgl renderer
|
|
*
|
|
* @static
|
|
* @method updateTextures
|
|
* @private
|
|
*/
|
|
PIXI.WebGLRenderer.updateTextures = function()
|
|
{
|
|
//TODO break this out into a texture manager...
|
|
for (var i=0; i < PIXI.texturesToUpdate.length; i++) PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]);
|
|
for (var i=0; i < PIXI.texturesToDestroy.length; i++) PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]);
|
|
PIXI.texturesToUpdate = [];
|
|
PIXI.texturesToDestroy = [];
|
|
}
|
|
|
|
/**
|
|
* Updates a loaded webgl texture
|
|
*
|
|
* @static
|
|
* @method updateTexture
|
|
* @param texture {Texture} The texture to update
|
|
* @private
|
|
*/
|
|
PIXI.WebGLRenderer.updateTexture = function(texture)
|
|
{
|
|
//TODO break this out into a texture manager...
|
|
var gl = PIXI.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...
|
|
|
|
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.bindTexture(gl.TEXTURE_2D, null);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Destroys a loaded webgl texture
|
|
*
|
|
* @method destroyTexture
|
|
* @param texture {Texture} The texture to update
|
|
* @private
|
|
*/
|
|
PIXI.WebGLRenderer.destroyTexture = function(texture)
|
|
{
|
|
//TODO break this out into a texture manager...
|
|
var gl = PIXI.gl;
|
|
|
|
if(texture._glTexture)
|
|
{
|
|
texture._glTexture = gl.createTexture();
|
|
gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 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;
|
|
|
|
PIXI.projection.x = this.width/2;
|
|
PIXI.projection.y = -this.height/2;
|
|
|
|
//PIXI.size.x = this.width/2;
|
|
//PIXI.size.y = -this.height/2;
|
|
|
|
// projectionMatrix[0] = 2/this.width;
|
|
// projectionMatrix[5] = -2/this.height;
|
|
// projectionMatrix[12] = -1;
|
|
// projectionMatrix[13] = 1;
|
|
}
|
|
|
|
/**
|
|
* Handles a lost webgl context
|
|
*
|
|
* @method handleContextLost
|
|
* @param event {Event}
|
|
* @private
|
|
*/
|
|
PIXI.WebGLRenderer.prototype.handleContextLost = function(event)
|
|
{
|
|
event.preventDefault();
|
|
this.contextLost = true;
|
|
}
|
|
|
|
/**
|
|
* Handles a restored webgl context
|
|
*
|
|
* @method handleContextRestored
|
|
* @param event {Event}
|
|
* @private
|
|
*/
|
|
PIXI.WebGLRenderer.prototype.handleContextRestored = function(event)
|
|
{
|
|
this.gl = this.view.getContext("experimental-webgl", {
|
|
alpha: true
|
|
});
|
|
|
|
this.initShaders();
|
|
|
|
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++)
|
|
{
|
|
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>
|