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

Docs updated

Browse source
This commit is contained in:
Mat Groves 2013-11-02 11:37:42 +00:00
parent a46b74f8ca
commit 6c762fb396
119 changed files with 38715 additions and 9039 deletions
Download patch file Download diff file Expand all files Collapse all files

297
docs/files/src_pixi_renderers_webgl_WebGLGraphics.js.html
View file

@ -2,12 +2,12 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>src&#x2F;pixi&#x2F;renderers&#x2F;webgl&#x2F;WebGLGraphics.js - Pixi.JS</title>
<link rel="stylesheet" href="http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;3.8.0&#x2F;build&#x2F;cssgrids&#x2F;cssgrids-min.css">
<link rel="stylesheet" href="..&#x2F;assets/vendor/prettify/prettify-min.css">
<link rel="stylesheet" href="..&#x2F;assets/css/main.css" id="site_styles">
<link rel="shortcut icon" type="image/png" href="..&#x2F;assets/favicon.png">
<script src="http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;combo?3.8.0&#x2F;build&#x2F;yui&#x2F;yui-min.js"></script>
<title>src/pixi/renderers/webgl/WebGLGraphics.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">
@ -15,7 +15,7 @@
<div id="hd" class="yui3-g header">
<div class="yui3-u-3-4">
<h1><img src="http:&#x2F;&#x2F;www.goodboydigital.com&#x2F;pixijs&#x2F;logo_small.png" title="Pixi.JS"></h1>
<h1><img src="http://www.goodboydigital.com/pixijs/logo_small.png" title="Pixi.JS"></h1>
</div>
<div class="yui3-u-1-4 version">
@ -41,71 +41,95 @@
<div id="api-tabview-panel">
<ul id="api-classes" class="apis classes">
<li><a href="..&#x2F;classes/AssetLoader.html">AssetLoader</a></li>
<li><a href="../classes/AbstractFilter.html">AbstractFilter</a></li>
<li><a href="..&#x2F;classes/BaseTexture.html">BaseTexture</a></li>
<li><a href="../classes/AssetLoader.html">AssetLoader</a></li>
<li><a href="..&#x2F;classes/BitmapFontLoader.html">BitmapFontLoader</a></li>
<li><a href="../classes/BaseTexture.html">BaseTexture</a></li>
<li><a href="..&#x2F;classes/BitmapText.html">BitmapText</a></li>
<li><a href="../classes/BitmapFontLoader.html">BitmapFontLoader</a></li>
<li><a href="..&#x2F;classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="../classes/BitmapText.html">BitmapText</a></li>
<li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="../classes/BlurFilter.html">BlurFilter</a></li>
<li><a href="..&#x2F;classes/Circle.html">Circle</a></li>
<li><a href="../classes/CanvasGraphics.html">CanvasGraphics</a></li>
<li><a href="..&#x2F;classes/CustomRenderable.html">CustomRenderable</a></li>
<li><a href="../classes/CanvasRenderer.html">CanvasRenderer</a></li>
<li><a href="..&#x2F;classes/DisplayObject.html">DisplayObject</a></li>
<li><a href="../classes/Circle.html">Circle</a></li>
<li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="../classes/ColorMatrixFilter.html">ColorMatrixFilter</a></li>
<li><a href="..&#x2F;classes/Ellipse.html">Ellipse</a></li>
<li><a href="../classes/CustomRenderable.html">CustomRenderable</a></li>
<li><a href="..&#x2F;classes/Graphics.html">Graphics</a></li>
<li><a href="../classes/DisplacementFilter.html">DisplacementFilter</a></li>
<li><a href="..&#x2F;classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="../classes/DisplayObject.html">DisplayObject</a></li>
<li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>
<li><a href="../classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
<li><a href="..&#x2F;classes/InteractionManager.html">InteractionManager</a></li>
<li><a href="../classes/Ellipse.html">Ellipse</a></li>
<li><a href="..&#x2F;classes/JsonLoader.html">JsonLoader</a></li>
<li><a href="../classes/EventTarget.html">EventTarget</a></li>
<li><a href="..&#x2F;classes/MovieClip.html">MovieClip</a></li>
<li><a href="../classes/Graphics.html">Graphics</a></li>
<li><a href="..&#x2F;classes/Point.html">Point</a></li>
<li><a href="../classes/GreyFilter.html">GreyFilter</a></li>
<li><a href="..&#x2F;classes/Polygon.html">Polygon</a></li>
<li><a href="../classes/ImageLoader.html">ImageLoader</a></li>
<li><a href="..&#x2F;classes/Rectangle.html">Rectangle</a></li>
<li><a href="../classes/InvertFilter.html">InvertFilter</a></li>
<li><a href="..&#x2F;classes/RenderTexture.html">RenderTexture</a></li>
<li><a href="../classes/JsonLoader.html">JsonLoader</a></li>
<li><a href="..&#x2F;classes/Spine.html">Spine</a></li>
<li><a href="../classes/MovieClip.html">MovieClip</a></li>
<li><a href="..&#x2F;classes/Sprite.html">Sprite</a></li>
<li><a href="../classes/PixelateFilter.html">PixelateFilter</a></li>
<li><a href="..&#x2F;classes/SpriteSheetLoader.html">SpriteSheetLoader</a></li>
<li><a href="../classes/Point.html">Point</a></li>
<li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
<li><a href="../classes/Polygon.html">Polygon</a></li>
<li><a href="..&#x2F;classes/Text.html">Text</a></li>
<li><a href="../classes/PolyK._convex.html">PolyK._convex</a></li>
<li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
<li><a href="../classes/PolyK._PointInTriangle.html">PolyK._PointInTriangle</a></li>
<li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>
<li><a href="../classes/PolyK.AjaxRequest.html">PolyK.AjaxRequest</a></li>
<li><a href="..&#x2F;classes/WebGLBatch.html">WebGLBatch</a></li>
<li><a href="../classes/PolyK.InteractionData.html">PolyK.InteractionData</a></li>
<li><a href="..&#x2F;classes/WebGLRenderer.html">WebGLRenderer</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="..&#x2F;modules/PIXI.html">PIXI</a></li>
<li><a href="../modules/PIXI.html">PIXI</a></li>
</ul>
</div>
@ -142,28 +166,35 @@
<div class="apidocs">
<div id="docs-main">
<div class="content">
<h1 class="file-heading">File: src&#x2F;pixi&#x2F;renderers&#x2F;webgl&#x2F;WebGLGraphics.js</h1>
<h1 class="file-heading">File: src/pixi/renderers/webgl/WebGLGraphics.js</h1>
<div class="file">
<pre class="code prettyprint linenums">
&#x2F;**
* @author Mat Groves http:&#x2F;&#x2F;matgroves.com&#x2F; @Doormat23
*&#x2F;
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
&#x2F;**
/**
* A set of functions used by the webGL renderer to draw the primitive graphics data
* @class CanvasGraphics
*&#x2F;
*
* @class CanvasGraphics
*/
PIXI.WebGLGraphics = function()
{
}
/**
* Renders the graphics object
*
* @static
* @private
* @method renderGraphics
* @param graphics {Graphics}
* @param projection {Object}
*/
PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
{
var gl = PIXI.gl;
if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0,
@ -187,42 +218,52 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
PIXI.WebGLGraphics.updateGraphics(graphics);
}
PIXI.activatePrimitiveShader();
&#x2F;&#x2F; This could be speeded up fo sure!
// This could be speeded up fo sure!
var m = PIXI.mat3.clone(graphics.worldTransform);
PIXI.mat3.transpose(m);
&#x2F;&#x2F; set the matrix transform for the
// set the matrix transform for the
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
gl.uniformMatrix3fv(PIXI.primitiveShader.translationMatrix, false, m);
gl.uniformMatrix3fv(PIXI.primitiveProgram.translationMatrix, false, m);
gl.uniform2f(PIXI.primitiveProgram.projectionVector, projection.x, projection.y);
gl.uniform2f(PIXI.primitiveShader.projectionVector, projection.x, -projection.y);
gl.uniform2f(PIXI.primitiveShader.offsetVector, -PIXI.offset.x, -PIXI.offset.y);
gl.uniform1f(PIXI.primitiveProgram.alpha, graphics.worldAlpha);
gl.uniform1f(PIXI.primitiveShader.alpha, graphics.worldAlpha);
gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
&#x2F;&#x2F; WHY DOES THIS LINE NEED TO BE THERE???
gl.vertexAttribPointer(PIXI.shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
&#x2F;&#x2F; its not even used.. but need to be set or it breaks?
&#x2F;&#x2F; only on pc though..
// WHY DOES THIS LINE NEED TO BE THERE???
//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);
gl.vertexAttribPointer(PIXI.primitiveShader.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0);
gl.vertexAttribPointer(PIXI.primitiveShader.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4);
&#x2F;&#x2F; set the index buffer!
// 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 );
&#x2F;&#x2F; return to default shader...
PIXI.activateDefaultShader();
PIXI.deactivatePrimitiveShader();
// return to default shader...
// PIXI.activateShader(PIXI.defaultShader);
}
/**
* Updates the graphics object
*
* @static
* @private
* @method updateGraphics
* @param graphics {Graphics}
*/
PIXI.WebGLGraphics.updateGraphics = function(graphics)
{
for (var i=graphics._webGL.lastIndex; i &lt; graphics.graphicsData.length; i++)
@ -267,12 +308,20 @@ PIXI.WebGLGraphics.updateGraphics = function(graphics)
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.glIndicies, gl.STATIC_DRAW);
}
/**
* Builds a rectangle to draw
*
* @static
* @private
* @method buildRectangle
* @param graphics {Graphics}
* @param webGLData {Object}
*/
PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
{
&#x2F;&#x2F; --- &#x2F;&#x2F;
&#x2F;&#x2F; need to convert points to a nice regular data
&#x2F;&#x2F;
// --- //
// need to convert points to a nice regular data
//
var rectData = graphicsData.points;
var x = rectData[0];
var y = rectData[1];
@ -292,9 +341,9 @@ PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
var verts = webGLData.points;
var indices = webGLData.indices;
var vertPos = verts.length&#x2F;6;
var vertPos = verts.length/6;
&#x2F;&#x2F; start
// start
verts.push(x, y);
verts.push(r, g, b, alpha);
@ -307,7 +356,7 @@ PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
verts.push(x + width, y + height);
verts.push(r, g, b, alpha);
&#x2F;&#x2F; insert 2 dead triangles..
// insert 2 dead triangles..
indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3)
}
@ -324,11 +373,20 @@ PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
}
/**
* Builds a circle to draw
*
* @static
* @private
* @method buildCircle
* @param graphics {Graphics}
* @param webGLData {Object}
*/
PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
{
&#x2F;&#x2F; --- &#x2F;&#x2F;
&#x2F;&#x2F; need to convert points to a nice regular data
&#x2F;&#x2F;
// --- //
// need to convert points to a nice regular data
//
var rectData = graphicsData.points;
var x = rectData[0];
var y = rectData[1];
@ -336,7 +394,7 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
var height = rectData[3];
var totalSegs = 40;
var seg = (Math.PI * 2) &#x2F; totalSegs ;
var seg = (Math.PI * 2) / totalSegs ;
if(graphicsData.fill)
{
@ -350,7 +408,7 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
var verts = webGLData.points;
var indices = webGLData.indices;
var vecPos = verts.length&#x2F;6;
var vecPos = verts.length/6;
indices.push(vecPos);
@ -383,19 +441,28 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
}
/**
* Builds a line to draw
*
* @static
* @private
* @method buildLine
* @param graphics {Graphics}
* @param webGLData {Object}
*/
PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
{
&#x2F;&#x2F; TODO OPTIMISE!
// TODO OPTIMISE!
var wrap = true;
var points = graphicsData.points;
if(points.length == 0)return;
&#x2F;&#x2F; get first and last point.. figure out the middle!
// 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] );
&#x2F;&#x2F; if the first point is the last point - goona have issues :)
// if the first point is the last point - goona have issues :)
if(firstPoint.x == lastPoint.x &amp;&amp; firstPoint.y == lastPoint.y)
{
points.pop();
@ -412,14 +479,14 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length &#x2F; 2;
var length = points.length / 2;
var indexCount = points.length;
var indexStart = verts.length&#x2F;6;
var indexStart = verts.length/6;
&#x2F;&#x2F; DRAW the Line
var width = graphicsData.lineWidth &#x2F; 2;
// DRAW the Line
var width = graphicsData.lineWidth / 2;
&#x2F;&#x2F; sort color
// sort color
var color = HEXtoRGB(graphicsData.lineColor);
var alpha = graphicsData.lineAlpha;
var r = color[0] * alpha;
@ -443,12 +510,12 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx &#x2F;= dist;
perpy &#x2F;= dist;
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
&#x2F;&#x2F; start
// start
verts.push(p1x - perpx , p1y - perpy,
r, g, b, alpha);
@ -470,8 +537,8 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx &#x2F;= dist;
perpy &#x2F;= dist;
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
@ -479,8 +546,8 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
perp2y = p2x - p3x;
dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
perp2x &#x2F;= dist;
perp2y &#x2F;= dist;
perp2x /= dist;
perp2y /= dist;
perp2x *= width;
perp2y *= width;
@ -497,8 +564,8 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
denom+=1;
}
px = (b1*c2 - b2*c1)&#x2F;denom;
py = (a2*c1 - a1*c2)&#x2F;denom;
px = (b1*c2 - b2*c1)/denom;
py = (a2*c1 - a1*c2)/denom;
pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
@ -508,8 +575,8 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
perp3y = perpy - perp2y;
dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
perp3x &#x2F;= dist;
perp3y &#x2F;= dist;
perp3x /= dist;
perp3y /= dist;
perp3x *= width;
perp3y *= width;
@ -529,7 +596,7 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
verts.push(px , py);
verts.push(r, g, b, alpha);
verts.push(p2x - (px-p2x), p2y - (py - p2y));&#x2F;&#x2F;, 4);
verts.push(p2x - (px-p2x), p2y - (py - p2y));
verts.push(r, g, b, alpha);
}
}
@ -544,8 +611,8 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx &#x2F;= dist;
perpy &#x2F;= dist;
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
@ -565,19 +632,27 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
indices.push(indexStart-1);
}
/**
* Builds a polygon to draw
*
* @static
* @private
* @method buildPoly
* @param graphics {Graphics}
* @param webGLData {Object}
*/
PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
{
var points = graphicsData.points;
if(points.length &lt; 6)return;
&#x2F;&#x2F; get first and last point.. figure out the middle!
// get first and last point.. figure out the middle!
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length &#x2F; 2;
var length = points.length / 2;
&#x2F;&#x2F; sort color
// sort color
var color = HEXtoRGB(graphicsData.fillColor);
var alpha = graphicsData.fillAlpha;
var r = color[0] * alpha;
@ -586,7 +661,7 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
var triangles = PIXI.PolyK.Triangulate(points);
var vertPos = verts.length &#x2F; 6;
var vertPos = verts.length / 6;
for (var i=0; i &lt; triangles.length; i+=3)
{
@ -605,7 +680,7 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
}
function HEXtoRGB(hex) {
return [(hex &gt;&gt; 16 &amp; 0xFF) &#x2F; 255, ( hex &gt;&gt; 8 &amp; 0xFF) &#x2F; 255, (hex &amp; 0xFF)&#x2F; 255];
return [(hex &gt;&gt; 16 &amp; 0xFF) / 255, ( hex &gt;&gt; 8 &amp; 0xFF) / 255, (hex &amp; 0xFF)/ 255];
}
@ -621,13 +696,13 @@ function HEXtoRGB(hex) {
</div>
</div>
</div>
<script src="..&#x2F;assets/vendor/prettify/prettify-min.js"></script>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="..&#x2F;assets/js/yui-prettify.js"></script>
<script src="..&#x2F;assets/../api.js"></script>
<script src="..&#x2F;assets/js/api-filter.js"></script>
<script src="..&#x2F;assets/js/api-list.js"></script>
<script src="..&#x2F;assets/js/api-search.js"></script>
<script src="..&#x2F;assets/js/apidocs.js"></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>