Graphics shape fill added
shaders optimised - removed need for 4x4 matrix draw elipse added any shape can now be filled
This commit is contained in:
Mat Groves
parent
2ad9002a79
commit
72e38cccb0
105 changed files with 20670 additions and 4633 deletions
|
|
@ -26,6 +26,7 @@ module.exports = function(grunt) {
|
|||
'<%= dirs.src %>/utils/Utils.js',
|
||||
'<%= dirs.src %>/utils/EventTarget.js',
|
||||
'<%= dirs.src %>/utils/Detector.js',
|
||||
'<%= dirs.src %>/utils/Polyk.js',
|
||||
'<%= dirs.src %>/renderers/webgl/WebGLShaders.js',
|
||||
'<%= dirs.src %>/renderers/webgl/WebGLGraphics.js',
|
||||
'<%= dirs.src %>/renderers/webgl/WebGLRenderer.js',
|
||||
|
|
|
|||
968
bin/pixi.dev.js
968
bin/pixi.dev.js
File diff suppressed because it is too large
Load diff
11
bin/pixi.js
11
bin/pixi.js
File diff suppressed because one or more lines are too long
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
@ -411,7 +411,7 @@ Dont forget to add the view to your DOM or you will not see anything :)</p>
|
|||
|
||||
|
||||
|
||||
<a href="../files/src_pixi_renderers_webgl_WebGLRenderer.js.html#l143"><code>src/pixi/renderers/webgl/WebGLRenderer.js:143</code></a>
|
||||
<a href="../files/src_pixi_renderers_webgl_WebGLRenderer.js.html#l115"><code>src/pixi/renderers/webgl/WebGLRenderer.js:115</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
|
|
@ -504,7 +504,7 @@ Dont forget to add the view to your DOM or you will not see anything :)</p>
|
|||
|
||||
|
||||
|
||||
<a href="../files/src_pixi_renderers_webgl_WebGLRenderer.js.html#l285"><code>src/pixi/renderers/webgl/WebGLRenderer.js:285</code></a>
|
||||
<a href="../files/src_pixi_renderers_webgl_WebGLRenderer.js.html#l257"><code>src/pixi/renderers/webgl/WebGLRenderer.js:257</code></a>
|
||||
|
||||
</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
"project": {
|
||||
"name": "Pixi.JS",
|
||||
"description": "Pixi.js is a fast lightweight 2D library that works across all devices.",
|
||||
"version": "1.0.0",
|
||||
"version": "1.3.0",
|
||||
"url": "http://goodboydigital.com/",
|
||||
"logo": "http://www.goodboydigital.com/pixijs/logo_small.png"
|
||||
},
|
||||
|
|
@ -2254,21 +2254,21 @@
|
|||
},
|
||||
{
|
||||
"file": "src/pixi/renderers/canvas/CanvasRenderer.js",
|
||||
"line": 217,
|
||||
"line": 218,
|
||||
"access": "private",
|
||||
"tagname": "",
|
||||
"class": "CanvasRenderer"
|
||||
},
|
||||
{
|
||||
"file": "src/pixi/renderers/canvas/CanvasRenderer.js",
|
||||
"line": 252,
|
||||
"line": 253,
|
||||
"access": "private",
|
||||
"tagname": "",
|
||||
"class": "CanvasRenderer"
|
||||
},
|
||||
{
|
||||
"file": "src/pixi/renderers/canvas/CanvasRenderer.js",
|
||||
"line": 281,
|
||||
"line": 282,
|
||||
"access": "private",
|
||||
"tagname": "",
|
||||
"class": "CanvasRenderer"
|
||||
|
|
@ -2496,28 +2496,28 @@
|
|||
},
|
||||
{
|
||||
"file": "src/pixi/renderers/webgl/WebGLRenderer.js",
|
||||
"line": 81,
|
||||
"line": 84,
|
||||
"access": "private",
|
||||
"tagname": "",
|
||||
"class": "WebGLRenderer"
|
||||
},
|
||||
{
|
||||
"file": "src/pixi/renderers/webgl/WebGLRenderer.js",
|
||||
"line": 96,
|
||||
"line": 99,
|
||||
"access": "private",
|
||||
"tagname": "",
|
||||
"class": "WebGLRenderer"
|
||||
},
|
||||
{
|
||||
"file": "src/pixi/renderers/webgl/WebGLRenderer.js",
|
||||
"line": 106,
|
||||
"line": 109,
|
||||
"access": "private",
|
||||
"tagname": "",
|
||||
"class": "WebGLRenderer"
|
||||
},
|
||||
{
|
||||
"file": "src/pixi/renderers/webgl/WebGLRenderer.js",
|
||||
"line": 143,
|
||||
"line": 115,
|
||||
"description": "Renders the stage to its webGL view",
|
||||
"itemtype": "method",
|
||||
"name": "render",
|
||||
|
|
@ -2532,14 +2532,14 @@
|
|||
},
|
||||
{
|
||||
"file": "src/pixi/renderers/webgl/WebGLRenderer.js",
|
||||
"line": 226,
|
||||
"line": 198,
|
||||
"access": "private",
|
||||
"tagname": "",
|
||||
"class": "WebGLRenderer"
|
||||
},
|
||||
{
|
||||
"file": "src/pixi/renderers/webgl/WebGLRenderer.js",
|
||||
"line": 285,
|
||||
"line": 257,
|
||||
"description": "resizes the webGL view to the specified width and height",
|
||||
"itemtype": "method",
|
||||
"name": "resize",
|
||||
|
|
@ -2559,14 +2559,14 @@
|
|||
},
|
||||
{
|
||||
"file": "src/pixi/renderers/webgl/WebGLRenderer.js",
|
||||
"line": 309,
|
||||
"line": 281,
|
||||
"access": "private",
|
||||
"tagname": "",
|
||||
"class": "WebGLRenderer"
|
||||
},
|
||||
{
|
||||
"file": "src/pixi/renderers/webgl/WebGLRenderer.js",
|
||||
"line": 318,
|
||||
"line": 290,
|
||||
"access": "private",
|
||||
"tagname": "",
|
||||
"class": "WebGLRenderer"
|
||||
|
|
@ -3390,15 +3390,15 @@
|
|||
},
|
||||
{
|
||||
"message": "Missing item type",
|
||||
"line": " src/pixi/renderers/canvas/CanvasRenderer.js:217"
|
||||
"line": " src/pixi/renderers/canvas/CanvasRenderer.js:218"
|
||||
},
|
||||
{
|
||||
"message": "Missing item type",
|
||||
"line": " src/pixi/renderers/canvas/CanvasRenderer.js:252"
|
||||
"line": " src/pixi/renderers/canvas/CanvasRenderer.js:253"
|
||||
},
|
||||
{
|
||||
"message": "Missing item type",
|
||||
"line": " src/pixi/renderers/canvas/CanvasRenderer.js:281"
|
||||
"line": " src/pixi/renderers/canvas/CanvasRenderer.js:282"
|
||||
},
|
||||
{
|
||||
"message": "Missing item type",
|
||||
|
|
@ -3458,27 +3458,27 @@
|
|||
},
|
||||
{
|
||||
"message": "Missing item type",
|
||||
"line": " src/pixi/renderers/webgl/WebGLRenderer.js:81"
|
||||
"line": " src/pixi/renderers/webgl/WebGLRenderer.js:84"
|
||||
},
|
||||
{
|
||||
"message": "Missing item type",
|
||||
"line": " src/pixi/renderers/webgl/WebGLRenderer.js:96"
|
||||
"line": " src/pixi/renderers/webgl/WebGLRenderer.js:99"
|
||||
},
|
||||
{
|
||||
"message": "Missing item type",
|
||||
"line": " src/pixi/renderers/webgl/WebGLRenderer.js:106"
|
||||
"line": " src/pixi/renderers/webgl/WebGLRenderer.js:109"
|
||||
},
|
||||
{
|
||||
"message": "Missing item type",
|
||||
"line": " src/pixi/renderers/webgl/WebGLRenderer.js:226"
|
||||
"line": " src/pixi/renderers/webgl/WebGLRenderer.js:198"
|
||||
},
|
||||
{
|
||||
"message": "Missing item type",
|
||||
"line": " src/pixi/renderers/webgl/WebGLRenderer.js:309"
|
||||
"line": " src/pixi/renderers/webgl/WebGLRenderer.js:281"
|
||||
},
|
||||
{
|
||||
"message": "Missing item type",
|
||||
"line": " src/pixi/renderers/webgl/WebGLRenderer.js:318"
|
||||
"line": " src/pixi/renderers/webgl/WebGLRenderer.js:290"
|
||||
},
|
||||
{
|
||||
"message": "Missing item type",
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
@ -178,15 +178,12 @@ PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype )
|
|||
|
||||
PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
|
||||
{
|
||||
|
||||
this.lineWidth = lineWidth || 0;
|
||||
this.lineColor = color || 0;
|
||||
this.lineAlpha = (alpha == undefined) ? 1 : alpha;
|
||||
|
||||
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, points:[], type:PIXI.Graphics.POLY};
|
||||
this.graphicsData.push(this.currentPath);
|
||||
|
||||
// TODO store the last position of the line in the current
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
@ -339,6 +339,7 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
|
|||
}
|
||||
else if(displayObject instanceof PIXI.Graphics)
|
||||
{
|
||||
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5])
|
||||
PIXI.CanvasGraphics.renderGraphics(displayObject, context);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
@ -164,7 +164,6 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics)
|
|||
|
||||
// graphicsObject
|
||||
// a collection of "shapes" (mainly lines right now!)
|
||||
///this.shape.draw();
|
||||
if(!graphics._webGL)graphics._webGL = {points:[], lastPosition:new PIXI.Point(), lastIndex:0, buffer:gl.createBuffer()};
|
||||
|
||||
if(graphics.dirty)
|
||||
|
|
@ -182,13 +181,11 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics)
|
|||
PIXI.WebGLGraphics.initGraphics(graphics);
|
||||
}
|
||||
|
||||
gl.uniformMatrix4fv(PIXI.shaderProgram2.mvMatrixUniform, false, PIXI.projectionMatrix );
|
||||
gl.uniform2f(PIXI.primitiveProgram.projectionVector, 400, 300);
|
||||
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
|
||||
gl.vertexAttribPointer(PIXI.shaderProgram2.vertexPositionAttribute, 2, gl.FLOAT, false, 4 * 6, 0);
|
||||
gl.vertexAttribPointer(PIXI.shaderProgram2.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4);
|
||||
|
||||
//shaderProgram.colorAttribute
|
||||
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.drawArrays(gl.TRIANGLE_STRIP, 0, graphics._webGL.glPoints.length/6);
|
||||
|
||||
|
|
@ -536,52 +533,6 @@ function lineIntersectLine(A,B,E,F)
|
|||
|
||||
|
||||
|
||||
PIXI.primitiveShaderFragmentSrc = [
|
||||
"precision mediump float;",
|
||||
"varying vec4 vColor;",
|
||||
"void main(void) {",
|
||||
"gl_FragColor = vColor;",
|
||||
"}"
|
||||
];
|
||||
|
||||
PIXI.primitiveShaderVertexSrc = [
|
||||
"attribute vec2 aVertexPosition;",
|
||||
"attribute vec4 aColor;",
|
||||
"uniform mat4 uMVMatrix;",
|
||||
"varying vec4 vColor;",
|
||||
"void main(void) {",
|
||||
"gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);",
|
||||
"vColor = aColor;",
|
||||
"}"
|
||||
];
|
||||
|
||||
|
||||
PIXI.WebGLGraphics.initShaders = function()
|
||||
{
|
||||
var gl = PIXI.gl;
|
||||
var fragmentShader = PIXI.CompileFragmentShader(gl, PIXI.primitiveShaderFragmentSrc);
|
||||
var vertexShader = PIXI.CompileVertexShader(gl, PIXI.primitiveShaderVertexSrc);
|
||||
|
||||
PIXI.shaderProgram2 = gl.createProgram();
|
||||
|
||||
var shaderProgram = PIXI.shaderProgram2;
|
||||
|
||||
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");
|
||||
shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor");
|
||||
|
||||
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
|
||||
}
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
@ -196,8 +196,10 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
|
|||
throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this);
|
||||
}
|
||||
|
||||
PIXI.WebGLGraphics.initShaders();
|
||||
this.initShaders();
|
||||
PIXI.initPrimitiveShader();
|
||||
PIXI.initDefaultShader();
|
||||
|
||||
PIXI.activateDefaultShader();
|
||||
|
||||
var gl = this.gl;
|
||||
PIXI.WebGLRenderer.gl = gl;
|
||||
|
|
@ -209,6 +211,7 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
|
|||
gl.colorMask(true, true, true, this.transparent);
|
||||
|
||||
this.projectionMatrix = PIXI.mat4.create();
|
||||
|
||||
this.resize(this.width, this.height);
|
||||
this.contextLost = false;
|
||||
|
||||
|
|
@ -246,38 +249,7 @@ PIXI.WebGLRenderer.returnBatch = function(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);
|
||||
|
||||
PIXI.shaderProgram = gl.createProgram();
|
||||
|
||||
var shaderProgram = PIXI.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");
|
||||
|
||||
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.activateDefaultShader();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
@ -168,11 +168,64 @@ PIXI.shaderVertexSrc = [
|
|||
"}"
|
||||
];
|
||||
|
||||
|
||||
|
||||
PIXI.primitiveShaderFragmentSrc = [
|
||||
"precision mediump float;",
|
||||
"varying vec4 vColor;",
|
||||
"void main(void) {",
|
||||
"gl_FragColor = vColor;",
|
||||
"}"
|
||||
];
|
||||
|
||||
PIXI.primitiveShaderVertexSrc = [
|
||||
"attribute vec2 aVertexPosition;",
|
||||
"attribute vec4 aColor;",
|
||||
"uniform vec2 projectionVector;",
|
||||
"varying vec4 vColor;",
|
||||
"void main(void) {",
|
||||
"gl_Position = vec4( aVertexPosition.x / projectionVector.x -1.0, aVertexPosition.y / -projectionVector.y + 1.0 , 0.0, 1.0);",
|
||||
"vColor = aColor;",
|
||||
"}"
|
||||
];
|
||||
|
||||
/*
|
||||
* primitive shader..
|
||||
*/
|
||||
|
||||
|
||||
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");
|
||||
|
||||
PIXI.primitiveProgram = shaderProgram;
|
||||
}
|
||||
|
||||
PIXI.initDefaultShader = function()
|
||||
{
|
||||
var gl = this.gl;
|
||||
var shaderProgram = PIXI.compileProgram(PIXI.shaderVertexSrc, PIXI.shaderFragmentSrc)
|
||||
|
||||
gl.useProgram(shaderProgram);
|
||||
|
||||
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
|
||||
shaderProgram.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.CompileVertexShader = function(gl, shaderSrc)
|
||||
{
|
||||
return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER);
|
||||
|
|
@ -210,6 +263,25 @@ PIXI.activateDefaultShader = function()
|
|||
gl.enableVertexAttribArray(shaderProgram.colorAttribute);
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
|
||||
alert("Could not initialise shaders");
|
||||
}
|
||||
|
||||
return shaderProgram;
|
||||
}
|
||||
|
||||
PIXI.activatePrimitiveShader = function()
|
||||
{
|
||||
var gl = PIXI.gl;
|
||||
|
|
@ -217,13 +289,10 @@ PIXI.activatePrimitiveShader = function()
|
|||
gl.disableVertexAttribArray(PIXI.shaderProgram.textureCoordAttribute);
|
||||
gl.disableVertexAttribArray(PIXI.shaderProgram.colorAttribute);
|
||||
|
||||
var shaderProgram2 = PIXI.shaderProgram2;
|
||||
gl.useProgram(PIXI.primitiveProgram);
|
||||
|
||||
gl.useProgram(shaderProgram2);
|
||||
|
||||
gl.enableVertexAttribArray(shaderProgram2.vertexPositionAttribute);
|
||||
gl.enableVertexAttribArray(PIXI.shaderProgram2.colorAttribute);
|
||||
|
||||
gl.enableVertexAttribArray(PIXI.primitiveProgram.vertexPositionAttribute);
|
||||
gl.enableVertexAttribArray(PIXI.primitiveProgram.colorAttribute);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
</div>
|
||||
<div class="yui3-u-1-4 version">
|
||||
<em>API Docs for: 1.0.0</em>
|
||||
<em>API Docs for: 1.3.0</em>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bd" class="yui3-g">
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -11,13 +11,14 @@
|
|||
</style>
|
||||
|
||||
<script src="pixi.js"></script>
|
||||
<script src="../../src/pixi/renderers/WebGLGraphics.js"></script>
|
||||
<script src="../../src/pixi/renderers/WebGLShaders.js"></script>
|
||||
<!--<script src="../../src/pixi/renderers/webgl/WebGLGraphics.js"></script>
|
||||
<script src="../../src/pixi/renderers/webgl/WebGLShaders.js"></script>
|
||||
<script src="../../src/pixi/renderers/canvas/CanvasGraphics.js"></script>
|
||||
<script src="../../src/pixi/renderers/CanvasRenderer.js"></script>
|
||||
<script src="../../src/pixi/renderers/WebGLRenderer.js"></script>
|
||||
<script src="../../src/pixi/renderers/webgl/WebGLRenderer.js"></script>
|
||||
<script src="../../src/pixi/renderers/webgl/WebGLGraphics.js"></script>
|
||||
<script src="../../src/pixi/primitives/Graphics.js"></script>
|
||||
<script src="../../src/pixi/utils/Polyk.js"></script>-->
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
|
@ -45,22 +46,25 @@
|
|||
|
||||
var graphics = new PIXI.Graphics();
|
||||
|
||||
graphics.beginFill(0xFF0000);
|
||||
graphics.lineStyle(10, 0x30FF00, 0.5);
|
||||
graphics.moveTo(50,50);
|
||||
graphics.lineTo(250, 50);
|
||||
//graphics.lineTo(100, 100);
|
||||
graphics.lineTo(100, 100);
|
||||
graphics.lineTo(250, 220);
|
||||
graphics.lineTo(50, 220);
|
||||
|
||||
graphics.lineTo(150, 50);
|
||||
|
||||
graphics.lineTo(50, 50);
|
||||
graphics.endFill();
|
||||
graphics.lineStyle(2, 0x30FFFF, 1);
|
||||
|
||||
// graphics.beginFill(0xFF794B);
|
||||
graphics.beginFill(0xFF794B, 0.5);
|
||||
|
||||
graphics.drawRect(250, 250, 300, 100);
|
||||
|
||||
|
||||
graphics.drawCircle(350, 350,100);
|
||||
/*
|
||||
|
||||
|
||||
graphics.endFill();
|
||||
|
||||
graphics.lineTo(250, 50);
|
||||
|
|
@ -72,9 +76,10 @@
|
|||
graphics.lineStyle(30, 0xFF0000, 1);
|
||||
graphics.moveTo(400,100);
|
||||
graphics.lineTo(550, 50);
|
||||
// graphics.lineTo(92, 20);
|
||||
//graphics.lineTo(450, 223);
|
||||
|
||||
//graphics.lineTo(92, 20);
|
||||
//graphics.lineTo(450, 223);
|
||||
*/
|
||||
/*
|
||||
* point1 = new Point(350, 50);
|
||||
|
||||
|
|
@ -87,20 +92,29 @@
|
|||
points.push(point1, point2, point3, new Point(350, 220), new Point(450, 223));
|
||||
|
||||
*/
|
||||
graphics.lineTo(410,300);
|
||||
|
||||
// graphics.beginFill(0xFF700B, 1);
|
||||
// graphics.drawElipse(450,320, 100, 200);
|
||||
/* graphics.moveTo(210,300);
|
||||
graphics.lineTo(450,320);
|
||||
graphics.lineTo(570,350);
|
||||
graphics.lineTo(580,120);
|
||||
graphics.lineTo(630,120);
|
||||
var sprite = PIXI.Sprite.fromImage("spinObj_01.png");
|
||||
graphics.lineTo(580,20);
|
||||
graphics.lineTo(330,120);
|
||||
graphics.lineTo(410,300);
|
||||
*/
|
||||
//graphics.endFill();
|
||||
|
||||
stage.addChild(sprite);
|
||||
var sprite = PIXI.Sprite.fromImage("spinObj_01.png");
|
||||
var container = new PIXI.DisplayObjectContainer();
|
||||
container.addChild(sprite);
|
||||
sprite.position.x = 300;
|
||||
|
||||
stage.addChild(container);
|
||||
stage.addChild(graphics);
|
||||
|
||||
stage.click = function()
|
||||
{
|
||||
graphics.clear();
|
||||
//graphics.clear();
|
||||
}
|
||||
|
||||
requestAnimFrame(animate);
|
||||
|
|
@ -108,10 +122,15 @@
|
|||
function animate() {
|
||||
renderer.render(stage);
|
||||
requestAnimFrame( animate );
|
||||
graphics.lineStyle(Math.random() * 30, Math.random() * 0xFFFFFF, 0.8);
|
||||
|
||||
graphics.moveTo(Math.random() * 600,Math.random() * 600);
|
||||
graphics.lineTo(Math.random() * 600,Math.random() * 600);
|
||||
container.position.x = 100;//stage.interactionManager.mouse.local.x;
|
||||
container.position.y = 200;//stage.interactionManager.mouse.local.y;
|
||||
// graphics.lineStyle(Math.random() * 30, Math.random() * 0xFFFFFF, 1);
|
||||
// graphics.moveTo(Math.random() * 600,Math.random() * 600);
|
||||
// graphics.lineTo(Math.random() * 600,Math.random() * 600);
|
||||
// graphics.scale.x = 3;
|
||||
// container.rotation += 0.01;
|
||||
// sprite.rotation -= 0.01;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "Pixi.JS",
|
||||
"version": "1.0.0",
|
||||
"version": "1.3.0",
|
||||
"description": "Pixi.js is a fast lightweight 2D library that works across all devices.",
|
||||
|
||||
"author": "Mat Groves",
|
||||
|
|
|
|||
|
|
@ -85,6 +85,50 @@ PIXI.mat3.multiply = function (mat, mat2, dest)
|
|||
return dest;
|
||||
}
|
||||
|
||||
PIXI.mat3.clone = function(mat)
|
||||
{
|
||||
var matrix = new PIXI.Matrix(9);
|
||||
|
||||
matrix[0] = mat[0];
|
||||
matrix[1] = mat[1];
|
||||
matrix[2] = mat[2];
|
||||
matrix[3] = mat[3];
|
||||
matrix[4] = mat[4];
|
||||
matrix[5] = mat[5];
|
||||
matrix[6] = mat[6];
|
||||
matrix[7] = mat[7];
|
||||
matrix[8] = mat[8];
|
||||
|
||||
return matrix;
|
||||
}
|
||||
|
||||
PIXI.mat3.transpose = function (mat, dest)
|
||||
{
|
||||
// If we are transposing ourselves we can skip a few steps but have to cache some values
|
||||
if (!dest || mat === dest) {
|
||||
var a01 = mat[1], a02 = mat[2],
|
||||
a12 = mat[5];
|
||||
|
||||
mat[1] = mat[3];
|
||||
mat[2] = mat[6];
|
||||
mat[3] = a01;
|
||||
mat[5] = mat[7];
|
||||
mat[6] = a02;
|
||||
mat[7] = a12;
|
||||
return mat;
|
||||
}
|
||||
|
||||
dest[0] = mat[0];
|
||||
dest[1] = mat[3];
|
||||
dest[2] = mat[6];
|
||||
dest[3] = mat[1];
|
||||
dest[4] = mat[4];
|
||||
dest[5] = mat[7];
|
||||
dest[6] = mat[2];
|
||||
dest[7] = mat[5];
|
||||
dest[8] = mat[8];
|
||||
return dest;
|
||||
}
|
||||
|
||||
PIXI.mat3.toMat4 = function (mat, dest)
|
||||
{
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
|
||||
|
||||
/**
|
||||
* 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
|
||||
* @extends DisplayObject
|
||||
* The Graphics class contains a set of methods that you can use to create a primitive shapes and lines.
|
||||
* @class Graphics
|
||||
* @extends DisplayObjectContainer
|
||||
* @constructor
|
||||
*/
|
||||
PIXI.Graphics = function()
|
||||
|
|
@ -15,9 +15,6 @@ PIXI.Graphics = function()
|
|||
|
||||
this.renderable = true;
|
||||
|
||||
// style - color
|
||||
// style - thickness
|
||||
// alpha -
|
||||
this.fillAlpha = 1;
|
||||
|
||||
this.lineWidth = 2;
|
||||
|
|
@ -25,46 +22,68 @@ PIXI.Graphics = function()
|
|||
|
||||
this.graphicsData = [];
|
||||
|
||||
this.currentPath = {points:[]};
|
||||
}
|
||||
|
||||
// SOME TYPES:
|
||||
PIXI.Graphics.POLY = 0;
|
||||
PIXI.Graphics.RECT = 1;
|
||||
PIXI.Graphics.CIRC = 2;
|
||||
|
||||
// constructor
|
||||
PIXI.Graphics.constructor = PIXI.Graphics;
|
||||
PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
|
||||
|
||||
/**
|
||||
* @method lineStyle
|
||||
* @param lineWidth {Number}
|
||||
* @param color {Number}
|
||||
* @param alpha {Number}
|
||||
*/
|
||||
PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
|
||||
{
|
||||
if(this.currentPath.points.length == 0)this.graphicsData.pop();
|
||||
|
||||
this.lineWidth = lineWidth || 0;
|
||||
this.lineColor = color || 0;
|
||||
this.lineAlpha = (alpha == undefined) ? 1 : alpha;
|
||||
|
||||
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, points:[], type:PIXI.Graphics.POLY};
|
||||
this.graphicsData.push(this.currentPath);
|
||||
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
|
||||
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY};
|
||||
|
||||
// TODO store the last position of the line in the current
|
||||
this.graphicsData.push(this.currentPath);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @method moveTo
|
||||
* @param x {Number}
|
||||
* @param y {Number}
|
||||
*/
|
||||
PIXI.Graphics.prototype.moveTo = function(x, y)
|
||||
{
|
||||
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, points:[], type:PIXI.Graphics.POLY};
|
||||
if(this.currentPath.points.length == 0)this.graphicsData.pop();
|
||||
|
||||
this.currentPath = this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
|
||||
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY};
|
||||
|
||||
// {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, points:[], type:PIXI.Graphics.POLY};
|
||||
|
||||
this.currentPath.points.push(x, y);
|
||||
|
||||
this.graphicsData.push(this.currentPath);
|
||||
}
|
||||
|
||||
/**
|
||||
* @method lineTo
|
||||
* @param x {Number}
|
||||
* @param y {Number}
|
||||
*/
|
||||
PIXI.Graphics.prototype.lineTo = function(x, y)
|
||||
{
|
||||
this.currentPath.points.push(x, y);
|
||||
this.dirty = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* @method beginFill
|
||||
* @param color {Number}
|
||||
* @param alpha {Number}
|
||||
*/
|
||||
PIXI.Graphics.prototype.beginFill = function(color, alpha)
|
||||
{
|
||||
this.filling = true;
|
||||
|
|
@ -72,6 +91,9 @@ PIXI.Graphics.prototype.beginFill = function(color, alpha)
|
|||
this.fillAlpha = alpha || 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* @method endFill
|
||||
*/
|
||||
PIXI.Graphics.prototype.endFill = function()
|
||||
{
|
||||
this.filling = false;
|
||||
|
|
@ -79,14 +101,17 @@ PIXI.Graphics.prototype.endFill = function()
|
|||
this.fillAlpha = 1;
|
||||
}
|
||||
|
||||
PIXI.Graphics.prototype.updateTransform = function()
|
||||
{
|
||||
if(!this.visible)return;
|
||||
PIXI.DisplayObject.prototype.updateTransform.call( this );
|
||||
}
|
||||
|
||||
/**
|
||||
* @method drawRect
|
||||
* @param x {Number}
|
||||
* @param y {Number}
|
||||
* @param width {Number}
|
||||
* @param height {Number}
|
||||
*/
|
||||
PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
|
||||
{
|
||||
if(this.currentPath.points.length == 0)this.graphicsData.pop();
|
||||
|
||||
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
|
||||
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
|
||||
points:[x, y, width, height], type:PIXI.Graphics.RECT};
|
||||
|
|
@ -95,19 +120,55 @@ PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
|
|||
this.dirty = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* @method drawCircle
|
||||
* @param x {Number}
|
||||
* @param y {Number}
|
||||
* @param radius {Number}
|
||||
*/
|
||||
PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
|
||||
{
|
||||
if(this.currentPath.points.length == 0)this.graphicsData.pop();
|
||||
|
||||
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
|
||||
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
|
||||
points:[x, y, radius], type:PIXI.Graphics.CIRC};
|
||||
points:[x, y, radius, radius], type:PIXI.Graphics.CIRC};
|
||||
|
||||
this.graphicsData.push(this.currentPath);
|
||||
this.dirty = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* @method drawElipse
|
||||
* @param x {Number}
|
||||
* @param y {Number}
|
||||
* @param width {Number}
|
||||
* @param height {Number}
|
||||
*/
|
||||
PIXI.Graphics.prototype.drawElipse = function( x, y, width, height)
|
||||
{
|
||||
if(this.currentPath.points.length == 0)this.graphicsData.pop();
|
||||
|
||||
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
|
||||
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
|
||||
points:[x, y, width, height], type:PIXI.Graphics.ELIP};
|
||||
|
||||
this.graphicsData.push(this.currentPath);
|
||||
this.dirty = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* @method clear
|
||||
*/
|
||||
PIXI.Graphics.prototype.clear = function()
|
||||
{
|
||||
this.dirty = true;
|
||||
this.clearDirty = true;
|
||||
this.graphicsData = [];
|
||||
}
|
||||
|
||||
// SOME TYPES:
|
||||
PIXI.Graphics.POLY = 0;
|
||||
PIXI.Graphics.RECT = 1;
|
||||
PIXI.Graphics.CIRC = 2;
|
||||
PIXI.Graphics.ELIP = 3;
|
||||
|
|
|
|||
|
|
@ -27,11 +27,11 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
|
|||
context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6);
|
||||
|
||||
context.lineWidth = data.lineWidth;
|
||||
context.globalAlpha = data.lineAlpha;
|
||||
|
||||
if(data.type == PIXI.Graphics.POLY)
|
||||
{
|
||||
if(data.lineWidth <= 0)continue;
|
||||
|
||||
//if(data.lineWidth <= 0)continue;
|
||||
|
||||
context.beginPath();
|
||||
|
||||
|
|
@ -48,20 +48,31 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
|
|||
context.closePath();
|
||||
}
|
||||
|
||||
context.stroke();
|
||||
if(data.fill)
|
||||
{
|
||||
context.globalAlpha = data.fillAlpha;
|
||||
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
|
||||
context.fill();
|
||||
}
|
||||
if(data.lineWidth)
|
||||
{
|
||||
context.globalAlpha = data.lineAlpha;
|
||||
context.stroke();
|
||||
}
|
||||
}
|
||||
else if(data.type == PIXI.Graphics.RECT)
|
||||
{
|
||||
// TODO - need to be Undefined!
|
||||
if(data.fillColor)
|
||||
{
|
||||
context.globalAlpha = data.fillAlpha;
|
||||
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
|
||||
|
||||
context.fillRect(points[0], points[1], points[2], points[3]);
|
||||
|
||||
}
|
||||
if(data.lineWidth)
|
||||
{
|
||||
context.globalAlpha = data.lineAlpha;
|
||||
context.strokeRect(points[0], points[1], points[2], points[3]);
|
||||
}
|
||||
}
|
||||
|
|
@ -74,11 +85,56 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
|
|||
|
||||
if(data.fill)
|
||||
{
|
||||
context.globalAlpha = data.fillAlpha;
|
||||
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
|
||||
context.fill();
|
||||
}
|
||||
if(data.lineWidth)
|
||||
{
|
||||
context.globalAlpha = data.lineAlpha;
|
||||
context.stroke();
|
||||
}
|
||||
}
|
||||
else if(data.type == PIXI.Graphics.ELIP)
|
||||
{
|
||||
|
||||
// elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
|
||||
|
||||
var elipseData = data.points;
|
||||
|
||||
var w = elipseData[2] * 2;
|
||||
var h = elipseData[3] * 2;
|
||||
|
||||
var x = elipseData[0] - w/2;
|
||||
var y = elipseData[1] - h/2;
|
||||
|
||||
context.beginPath();
|
||||
|
||||
var kappa = .5522848,
|
||||
ox = (w / 2) * kappa, // control point offset horizontal
|
||||
oy = (h / 2) * kappa, // control point offset vertical
|
||||
xe = x + w, // x-end
|
||||
ye = y + h, // y-end
|
||||
xm = x + w / 2, // x-middle
|
||||
ym = y + h / 2; // y-middle
|
||||
|
||||
context.moveTo(x, ym);
|
||||
context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
|
||||
context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
|
||||
context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
|
||||
context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
|
||||
|
||||
context.closePath();
|
||||
|
||||
if(data.fill)
|
||||
{
|
||||
context.globalAlpha = data.fillAlpha;
|
||||
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
|
||||
context.fill();
|
||||
}
|
||||
if(data.lineWidth)
|
||||
{
|
||||
context.globalAlpha = data.lineAlpha;
|
||||
context.stroke();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -199,6 +199,7 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
|
|||
}
|
||||
else if(displayObject instanceof PIXI.Graphics)
|
||||
{
|
||||
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5])
|
||||
PIXI.CanvasGraphics.renderGraphics(displayObject, context);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,15 +17,15 @@ PIXI.WebGLGraphics = function()
|
|||
// constructor
|
||||
PIXI.WebGLGraphics.constructor = PIXI.WebGLGraphics;
|
||||
|
||||
PIXI.WebGLGraphics.renderGraphics = function(graphics)
|
||||
PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
|
||||
{
|
||||
PIXI.activatePrimitiveShader();
|
||||
var gl = PIXI.gl;
|
||||
|
||||
// graphicsObject
|
||||
// a collection of "shapes" (mainly lines right now!)
|
||||
///this.shape.draw();
|
||||
if(!graphics._webGL)graphics._webGL = {points:[], lastPosition:new PIXI.Point(), lastIndex:0, buffer:gl.createBuffer()};
|
||||
if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0,
|
||||
buffer:gl.createBuffer(),
|
||||
indexBuffer:gl.createBuffer()};
|
||||
|
||||
if(graphics.dirty)
|
||||
{
|
||||
|
|
@ -39,30 +39,46 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics)
|
|||
graphics._webGL.points = [];
|
||||
}
|
||||
|
||||
PIXI.WebGLGraphics.initGraphics(graphics);
|
||||
PIXI.WebGLGraphics.updateGraphics(graphics);
|
||||
}
|
||||
|
||||
gl.uniformMatrix4fv(PIXI.shaderProgram2.mvMatrixUniform, false, PIXI.projectionMatrix );
|
||||
// This could be speeded up fo sure!
|
||||
var m = PIXI.mat3.clone(graphics.worldTransform);
|
||||
|
||||
PIXI.mat3.transpose(m);
|
||||
|
||||
// set the matrix transform for the
|
||||
gl.uniformMatrix3fv(PIXI.primitiveProgram.translationMatrix, false, m);
|
||||
gl.uniform2f(PIXI.primitiveProgram.projectionVector, projection.x, projection.y);
|
||||
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
|
||||
gl.vertexAttribPointer(PIXI.shaderProgram2.vertexPositionAttribute, 2, gl.FLOAT, false, 4 * 6, 0);
|
||||
gl.vertexAttribPointer(PIXI.shaderProgram2.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4);
|
||||
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);
|
||||
|
||||
//shaderProgram.colorAttribute
|
||||
// set the index buffer!
|
||||
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer);
|
||||
|
||||
gl.drawArrays(gl.TRIANGLE_STRIP, 0, graphics._webGL.glPoints.length/6);
|
||||
gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 );
|
||||
|
||||
// return to default shader...
|
||||
PIXI.activateDefaultShader();
|
||||
}
|
||||
|
||||
PIXI.WebGLGraphics.initGraphics = function(graphics)
|
||||
PIXI.WebGLGraphics.updateGraphics = function(graphics)
|
||||
{
|
||||
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)
|
||||
PIXI.WebGLGraphics.buildPoly(data, graphics._webGL);
|
||||
}
|
||||
|
||||
if(data.lineWidth > 0)
|
||||
{
|
||||
PIXI.WebGLGraphics.buildLine(data, graphics._webGL);
|
||||
|
|
@ -72,21 +88,24 @@ PIXI.WebGLGraphics.initGraphics = function(graphics)
|
|||
{
|
||||
PIXI.WebGLGraphics.buildRectangle(data, graphics._webGL);
|
||||
}
|
||||
else if(data.type == PIXI.Graphics.CIRC)
|
||||
else if(data.type == PIXI.Graphics.CIRC || data.type == PIXI.Graphics.ELIP)
|
||||
{
|
||||
PIXI.WebGLGraphics.buildCircle(data, graphics._webGL);
|
||||
}
|
||||
};
|
||||
|
||||
//console.log(graphics._webGL.lastIndex - graphics.graphicsData.length )
|
||||
graphics._webGL.lastIndex = graphics.graphicsData.length;
|
||||
|
||||
// convert to points
|
||||
graphics._webGL.glPoints = new Float32Array(graphics._webGL.points);
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -106,16 +125,15 @@ PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
|
|||
{
|
||||
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;
|
||||
|
||||
// dead triangle
|
||||
verts.push(webGLData.lastPosition.x, webGLData.lastPosition.y, 1, 1, 1, 1);
|
||||
verts.push(x, y, 1, 1, 1, 1);
|
||||
var indices = webGLData.indices;
|
||||
|
||||
var vertPos = verts.length/6;
|
||||
|
||||
// start
|
||||
verts.push(x, y);
|
||||
|
|
@ -130,8 +148,8 @@ PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
|
|||
verts.push(x + width, y + height);
|
||||
verts.push(r, g, b, alpha);
|
||||
|
||||
webGLData.lastPosition.x = x + width;
|
||||
webGLData.lastPosition.y = y + height;
|
||||
// insert 2 dead triangles..
|
||||
indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3)
|
||||
}
|
||||
|
||||
if(graphicsData.lineWidth)
|
||||
|
|
@ -155,9 +173,10 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
|
|||
var rectData = graphicsData.points;
|
||||
var x = rectData[0];
|
||||
var y = rectData[1];
|
||||
var radius = rectData[2];
|
||||
var width = rectData[2];
|
||||
var height = rectData[3];
|
||||
|
||||
var totalSegs = 40
|
||||
var totalSegs = 40;
|
||||
var seg = (Math.PI * 2) / totalSegs ;
|
||||
|
||||
if(graphicsData.fill)
|
||||
|
|
@ -170,26 +189,24 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
|
|||
var b = color[2] * alpha;
|
||||
|
||||
var verts = webGLData.points;
|
||||
var indices = webGLData.indices;
|
||||
|
||||
var vecPos = verts.length/6;
|
||||
|
||||
verts.push(webGLData.lastPosition.x, webGLData.lastPosition.y, 1, 1, 1, 1);
|
||||
verts.push(x, y, 1, 1, 1, 1);
|
||||
indices.push(vecPos);
|
||||
|
||||
for (var i=0; i < totalSegs + 1 ; i++)
|
||||
{
|
||||
verts.push(x,y);
|
||||
verts.push(r, g, b, alpha);
|
||||
verts.push(x,y, r, g, b, alpha);
|
||||
|
||||
verts.push(x + Math.sin(seg * i) * radius,
|
||||
y + Math.cos(seg * i) * radius);
|
||||
verts.push(x + Math.sin(seg * i) * width,
|
||||
y + Math.cos(seg * i) * height,
|
||||
r, g, b, alpha);
|
||||
|
||||
verts.push(r, g, b, alpha);
|
||||
indices.push(vecPos++, vecPos++);
|
||||
};
|
||||
|
||||
verts.push(x,y);
|
||||
verts.push(1, 0, 0, 1);
|
||||
|
||||
webGLData.lastPosition.x = x;
|
||||
webGLData.lastPosition.y = y;
|
||||
indices.push(vecPos-1);
|
||||
}
|
||||
|
||||
if(graphicsData.lineWidth)
|
||||
|
|
@ -198,8 +215,8 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
|
|||
|
||||
for (var i=0; i < totalSegs + 1; i++)
|
||||
{
|
||||
graphicsData.points.push(x + Math.sin(seg * i) * radius,
|
||||
y + Math.cos(seg * i) * radius)
|
||||
graphicsData.points.push(x + Math.sin(seg * i) * width,
|
||||
y + Math.cos(seg * i) * height)
|
||||
};
|
||||
|
||||
PIXI.WebGLGraphics.buildLine(graphicsData, webGLData);
|
||||
|
|
@ -209,6 +226,8 @@ 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;
|
||||
|
|
@ -233,12 +252,19 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
|
|||
}
|
||||
|
||||
var verts = webGLData.points;
|
||||
var indices = webGLData.indices;
|
||||
|
||||
|
||||
var length = points.length / 2;
|
||||
|
||||
var indexCount = points.length;// + 2;
|
||||
|
||||
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;
|
||||
|
|
@ -248,7 +274,8 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
|
|||
// i = 0 //
|
||||
var point1 = new PIXI.Point( points[0], points[1] );
|
||||
var point2 = new PIXI.Point( points[2], points[3] );
|
||||
var perp = getPerp(point1, point2);
|
||||
|
||||
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
|
||||
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
|
||||
|
||||
perp.x /= dist;
|
||||
|
|
@ -256,12 +283,9 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
|
|||
perp.x *= width;
|
||||
perp.y *= width;
|
||||
|
||||
// insert dead triangle!
|
||||
verts.push(webGLData.lastPosition.x, webGLData.lastPosition.y, 1, 1, 1, 1);
|
||||
verts.push(points[0] - perp.x , points[1] - perp.y, 1, 1, 1, 1);
|
||||
|
||||
|
||||
// start
|
||||
|
||||
verts.push(points[0] - perp.x , points[1] - perp.y);
|
||||
verts.push(r, g, b, alpha);
|
||||
|
||||
|
|
@ -274,27 +298,44 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
|
|||
var point2 = new PIXI.Point(points[(i)*2],points[(i)*2 + 1] );
|
||||
var point3 = new PIXI.Point(points[(i+1)*2],points[(i+1)*2 + 1] );
|
||||
|
||||
var perp = getPerp(point1, point2);
|
||||
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
|
||||
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
|
||||
perp.x /= dist;
|
||||
perp.y /= dist;
|
||||
perp.x *= width;
|
||||
perp.y *= width;
|
||||
|
||||
var perp2 = getPerp(point2, point3);
|
||||
var perp2 = new PIXI.Point(-(point2.y - point3.y), point2.x - point3.x);
|
||||
var dist2 = Math.sqrt(perp2.x*perp2.x + perp2.y*perp2.y);
|
||||
perp2.x /= dist2;
|
||||
perp2.y /= dist2;
|
||||
perp2.x *= width;
|
||||
perp2.y *= width;
|
||||
|
||||
var p1 = new PIXI.Point(-perp.x+ point2.x , -perp.y+point2.y);
|
||||
var p1_ = new PIXI.Point(-perp.x+ point1.x, -perp.y+point1.y);
|
||||
var A = new PIXI.Point(-perp.x+ point2.x , -perp.y+point2.y);
|
||||
var B = new PIXI.Point(-perp.x+ point1.x, -perp.y+point1.y);
|
||||
|
||||
var p2 = new PIXI.Point(-perp2.x+ point2.x , -perp2.y+point2.y );
|
||||
var p2_ = new PIXI.Point(-perp2.x+ point3.x , -perp2.y+point3.y );
|
||||
var E = new PIXI.Point(-perp2.x+ point2.x , -perp2.y+point2.y );
|
||||
var F = new PIXI.Point(-perp2.x+ point3.x , -perp2.y+point3.y );
|
||||
|
||||
var p = lineIntersectLine(p1, p1_, p2, p2_);
|
||||
var a1 = B.y-A.y;
|
||||
var b1 = A.x-B.x;
|
||||
var c1 = B.x*A.y - A.x*B.y;
|
||||
var a2 = F.y-E.y;
|
||||
var b2 = E.x-F.x;
|
||||
var c2 = F.x*E.y - E.x*F.y;
|
||||
|
||||
var denom = a1*b2 - a2*b1;
|
||||
|
||||
if (denom == 0) {
|
||||
denom+=1;
|
||||
}
|
||||
|
||||
var p = new PIXI.Point();
|
||||
|
||||
p.x = (b1*c2 - b2*c1)/denom;
|
||||
p.y = (a2*c1 - a1*c2)/denom;
|
||||
|
||||
|
||||
var pdist = (p.x -point2.x) * (p.x -point2.x) + (p.y -point2.y) + (p.y -point2.y);
|
||||
|
||||
|
|
@ -309,18 +350,20 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
|
|||
|
||||
verts.push(point2.x - perp3.x, point2.y -perp3.y);
|
||||
verts.push(r, g, b, alpha);
|
||||
|
||||
|
||||
verts.push(point2.x + perp3.x, point2.y +perp3.y);
|
||||
verts.push(r, g, b, alpha);
|
||||
|
||||
|
||||
verts.push(point2.x - perp3.x, point2.y -perp3.y);
|
||||
verts.push(r, g, b, alpha);
|
||||
|
||||
indexCount++;
|
||||
}
|
||||
else
|
||||
{
|
||||
verts.push(p.x , p.y);
|
||||
verts.push(r, g, b, alpha);
|
||||
|
||||
|
||||
verts.push(point2.x - (p.x-point2.x), point2.y - (p.y - point2.y));//, 4);
|
||||
verts.push(r, g, b, alpha);
|
||||
}
|
||||
|
|
@ -329,22 +372,70 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
|
|||
var point1 = new PIXI.Point( points[(length-2)*2], points[(length-2)*2 + 1] );
|
||||
var point2 = new PIXI.Point( points[(length-1)*2], points[(length-1)*2 + 1] );
|
||||
|
||||
var perp = getPerp(point1, point2);
|
||||
var perp = new PIXI.Point(-(point1.y - point2.y), point1.x - point2.x);
|
||||
var dist = Math.sqrt(perp.x*perp.x + perp.y*perp.y);
|
||||
perp.x /= dist;
|
||||
perp.y /= dist;
|
||||
perp.x *= width;
|
||||
perp.y *= width;
|
||||
|
||||
verts.push(point2.x - perp.x , point2.y - perp.y)
|
||||
verts.push(r, g, b, alpha);
|
||||
|
||||
verts.push(point2.x + perp.x , point2.y + perp.y)
|
||||
verts.push(r, g, b, alpha);
|
||||
|
||||
// set last triangle!
|
||||
webGLData.lastPosition.x = point2.x + perp.x;
|
||||
webGLData.lastPosition.y = point2.y + perp.y;
|
||||
indices.push(indexStart);
|
||||
|
||||
for (var i=0; i < indexCount; i++)
|
||||
{
|
||||
indices.push(indexStart++);
|
||||
};
|
||||
|
||||
indices.push(indexStart-1);
|
||||
}
|
||||
|
||||
|
||||
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)
|
||||
{
|
||||
indices.push(triangles[i] + vertPos);
|
||||
indices.push(triangles[i] + vertPos);
|
||||
indices.push(triangles[i+1] + vertPos);
|
||||
indices.push(triangles[i+2] +vertPos);
|
||||
indices.push(triangles[i+2] + vertPos);
|
||||
};
|
||||
|
||||
indices.push(triangles[i+2] + vertPos);
|
||||
|
||||
for (var i = 0; i < length; i++)
|
||||
{
|
||||
verts.push(points[i * 2], points[i * 2 + 1],
|
||||
r, g, b, alpha);
|
||||
};
|
||||
}
|
||||
|
||||
function HEXtoRGB(hex) {
|
||||
|
|
@ -352,92 +443,5 @@ function HEXtoRGB(hex) {
|
|||
}
|
||||
|
||||
|
||||
function normalise(point)
|
||||
{
|
||||
var dist = Math.sqrt(point.x * point.x + point.y * point.y);
|
||||
return new PIXI.Point(point.x / dist, point.y / dist);
|
||||
}
|
||||
|
||||
function getPerp(point, point2)
|
||||
{
|
||||
return new PIXI.Point(-(point.y - point2.y), point.x - point2.x);
|
||||
}
|
||||
|
||||
function lineIntersectLine(A,B,E,F)
|
||||
{
|
||||
var ip;
|
||||
var a1;
|
||||
var a2;
|
||||
var b1;
|
||||
var b2;
|
||||
var c1;
|
||||
var c2;
|
||||
|
||||
a1= B.y-A.y;
|
||||
b1= A.x-B.x;
|
||||
c1= B.x*A.y - A.x*B.y;
|
||||
a2= F.y-E.y;
|
||||
b2= E.x-F.x;
|
||||
c2= F.x*E.y - E.x*F.y;
|
||||
|
||||
var denom=a1*b2 - a2*b1;
|
||||
|
||||
if (denom == 0) {
|
||||
// return null;
|
||||
console.log("!")
|
||||
denom+=1;
|
||||
}
|
||||
ip=new PIXI.Point();
|
||||
ip.x=(b1*c2 - b2*c1)/denom;
|
||||
ip.y=(a2*c1 - a1*c2)/denom;
|
||||
|
||||
return ip;
|
||||
}
|
||||
|
||||
|
||||
|
||||
PIXI.primitiveShaderFragmentSrc = [
|
||||
"precision mediump float;",
|
||||
"varying vec4 vColor;",
|
||||
"void main(void) {",
|
||||
"gl_FragColor = vColor;",
|
||||
"}"
|
||||
];
|
||||
|
||||
PIXI.primitiveShaderVertexSrc = [
|
||||
"attribute vec2 aVertexPosition;",
|
||||
"attribute vec4 aColor;",
|
||||
"uniform mat4 uMVMatrix;",
|
||||
"varying vec4 vColor;",
|
||||
"void main(void) {",
|
||||
"gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);",
|
||||
"vColor = aColor;",
|
||||
"}"
|
||||
];
|
||||
|
||||
|
||||
PIXI.WebGLGraphics.initShaders = function()
|
||||
{
|
||||
var gl = PIXI.gl;
|
||||
var fragmentShader = PIXI.CompileFragmentShader(gl, PIXI.primitiveShaderFragmentSrc);
|
||||
var vertexShader = PIXI.CompileVertexShader(gl, PIXI.primitiveShaderVertexSrc);
|
||||
|
||||
PIXI.shaderProgram2 = gl.createProgram();
|
||||
|
||||
var shaderProgram = PIXI.shaderProgram2;
|
||||
|
||||
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");
|
||||
shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor");
|
||||
|
||||
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,15 +43,17 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
|
|||
//displayObject
|
||||
}
|
||||
|
||||
PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
|
||||
PIXI.WebGLRenderGroup.prototype.render = function(projection)
|
||||
{
|
||||
PIXI.WebGLRenderer.updateTextures();
|
||||
|
||||
var gl = this.gl;
|
||||
|
||||
// set the flipped matrix..
|
||||
gl.uniformMatrix4fv(PIXI.shaderProgram.mvMatrixUniform, false, projectionMatrix);
|
||||
// gl.uniformMatrix4fv(PIXI.shaderProgram.mvMatrixUniform, false, PIXI.projectionMatrix);
|
||||
|
||||
gl.uniform2f(PIXI.shaderProgram.projectionVector, projection.x, projection.y);
|
||||
|
||||
// TODO remove this by replacing visible with getter setters..
|
||||
this.checkVisibility(this.root, this.root.visible);
|
||||
|
||||
|
|
@ -68,28 +70,30 @@ PIXI.WebGLRenderGroup.prototype.render = function(projectionMatrix)
|
|||
}
|
||||
else if(renderable instanceof PIXI.TilingSprite)
|
||||
{
|
||||
if(renderable.visible)this.renderTilingSprite(renderable, projectionMatrix);
|
||||
if(renderable.visible)this.renderTilingSprite(renderable, projection);
|
||||
}
|
||||
else if(renderable instanceof PIXI.Strip)
|
||||
{
|
||||
if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
|
||||
if(renderable.visible)this.renderStrip(renderable, projection);
|
||||
}
|
||||
else if(renderable instanceof PIXI.Graphics)
|
||||
{
|
||||
if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix);
|
||||
if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable, projection);//, projectionMatrix);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, projectionMatrix)
|
||||
PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, projection)
|
||||
{
|
||||
PIXI.WebGLRenderer.updateTextures();
|
||||
|
||||
var gl = this.gl;
|
||||
this.checkVisibility(displayObject, displayObject.visible);
|
||||
gl.uniformMatrix4fv(PIXI.shaderProgram.mvMatrixUniform, false, projectionMatrix);
|
||||
|
||||
// gl.uniformMatrix4fv(PIXI.shaderProgram.mvMatrixUniform, false, projectionMatrix);
|
||||
gl.uniform2f(PIXI.shaderProgram.projectionVector, projection.x, projection.y);
|
||||
|
||||
|
||||
//console.log("SPECIFIC");
|
||||
// to do!
|
||||
|
|
@ -171,28 +175,15 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
|
|||
|
||||
// TODO - need to fold this up a bit!
|
||||
|
||||
|
||||
if(startBatch == endBatch)
|
||||
{
|
||||
if(startBatch instanceof PIXI.WebGLBatch)
|
||||
{
|
||||
startBatch.render(startIndex, endIndex+1);
|
||||
}
|
||||
else if(startBatch instanceof PIXI.TilingSprite)
|
||||
else
|
||||
{
|
||||
if(startBatch.visible)this.renderTilingSprite(startBatch, projectionMatrix);
|
||||
}
|
||||
else if(startBatch instanceof PIXI.Strip)
|
||||
{
|
||||
if(startBatch.visible)this.renderStrip(startBatch, projectionMatrix);
|
||||
}
|
||||
else if(startBatch instanceof PIXI.CustomRenderable)
|
||||
{
|
||||
if(startBatch.visible) startBatch.renderWebGL(this, projectionMatrix);
|
||||
}
|
||||
else if(renderable instanceof PIXI.Graphics)
|
||||
{
|
||||
if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix);
|
||||
this.renderSpecial(startBatch);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
|
@ -206,22 +197,11 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
|
|||
{
|
||||
startBatch.render(startIndex);
|
||||
}
|
||||
else if(startBatch instanceof PIXI.TilingSprite)
|
||||
else
|
||||
{
|
||||
if(startBatch.visible)this.renderTilingSprite(startBatch, projectionMatrix);
|
||||
this.renderSpecial(startBatch);
|
||||
}
|
||||
else if(startBatch instanceof PIXI.Strip)
|
||||
{
|
||||
if(startBatch.visible)this.renderStrip(startBatch, projectionMatrix);
|
||||
}
|
||||
else if(startBatch instanceof PIXI.CustomRenderable)
|
||||
{
|
||||
if(startBatch.visible) startBatch.renderWebGL(this, projectionMatrix);
|
||||
}
|
||||
else if(renderable instanceof PIXI.Graphics)
|
||||
{
|
||||
if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix);
|
||||
}
|
||||
|
||||
// DO the middle batchs..
|
||||
for (var i=startBatchIndex+1; i < endBatchIndex; i++)
|
||||
{
|
||||
|
|
@ -231,21 +211,9 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
|
|||
{
|
||||
this.batchs[i].render();
|
||||
}
|
||||
else if(renderable instanceof PIXI.TilingSprite)
|
||||
else
|
||||
{
|
||||
if(renderable.visible)this.renderTilingSprite(renderable, projectionMatrix);
|
||||
}
|
||||
else if(renderable instanceof PIXI.Strip)
|
||||
{
|
||||
if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
|
||||
}
|
||||
else if(renderable instanceof PIXI.CustomRenderable)
|
||||
{
|
||||
if(renderable.visible) renderable.renderWebGL(this, projectionMatrix);
|
||||
}
|
||||
else if(renderable instanceof PIXI.Graphics)
|
||||
{
|
||||
if(renderable.visible) PIXI.WebGLGraphics.renderGraphics(renderable);//, projectionMatrix);
|
||||
this.renderSpecial(renderable);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -254,17 +222,25 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
|
|||
{
|
||||
endBatch.render(0, endIndex+1);
|
||||
}
|
||||
else if(endBatch instanceof PIXI.TilingSprite)
|
||||
else
|
||||
{
|
||||
if(endBatch.visible)this.renderTilingSprite(endBatch);
|
||||
this.renderSpecial(endBatch);
|
||||
}
|
||||
else if(endBatch instanceof PIXI.Strip)
|
||||
}
|
||||
|
||||
PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable)
|
||||
{
|
||||
if(renderable instanceof PIXI.TilingSprite)
|
||||
{
|
||||
if(endBatch.visible)this.renderStrip(endBatch);
|
||||
if(renderable.visible)this.renderTilingSprite(renderable, projectionMatrix);
|
||||
}
|
||||
else if(endBatch instanceof PIXI.CustomRenderable)
|
||||
else if(renderable instanceof PIXI.Strip)
|
||||
{
|
||||
if(endBatch.visible) endBatch.renderWebGL(this, projectionMatrix);
|
||||
if(renderable.visible)this.renderStrip(renderable, projectionMatrix);
|
||||
}
|
||||
else if(renderable instanceof PIXI.CustomRenderable)
|
||||
{
|
||||
if(renderable.visible) renderable.renderWebGL(this, projectionMatrix);
|
||||
}
|
||||
else if(renderable instanceof PIXI.Graphics)
|
||||
{
|
||||
|
|
@ -518,6 +494,7 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObject = function(displayObject)
|
|||
}
|
||||
else if(displayObject instanceof PIXI.TilingSprite)
|
||||
{
|
||||
|
||||
// add to a batch!!
|
||||
this.initTilingSprite(displayObject);
|
||||
this.batchs.push(displayObject);
|
||||
|
|
@ -753,7 +730,6 @@ PIXI.WebGLRenderGroup.prototype.initTilingSprite = function(sprite)
|
|||
|
||||
sprite.indices = new Uint16Array([0, 1, 3,2])//, 2]);
|
||||
|
||||
|
||||
sprite._vertexBuffer = gl.createBuffer();
|
||||
sprite._indexBuffer = gl.createBuffer();
|
||||
sprite._uvBuffer = gl.createBuffer();
|
||||
|
|
@ -789,17 +765,26 @@ PIXI.WebGLRenderGroup.prototype.initTilingSprite = function(sprite)
|
|||
/**
|
||||
* @private
|
||||
*/
|
||||
PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projectionMatrix)
|
||||
PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection)
|
||||
{
|
||||
var gl = this.gl;
|
||||
var shaderProgram = PIXI.shaderProgram;
|
||||
// mat
|
||||
var mat4Real = PIXI.mat3.toMat4(strip.worldTransform);
|
||||
PIXI.mat4.transpose(mat4Real);
|
||||
PIXI.mat4.multiply(projectionMatrix, mat4Real, mat4Real )
|
||||
//var mat4Real = PIXI.mat3.toMat4(strip.worldTransform);
|
||||
//PIXI.mat4.transpose(mat4Real);
|
||||
//PIXI.mat4.multiply(projectionMatrix, mat4Real, mat4Real )
|
||||
|
||||
|
||||
gl.useProgram(PIXI.stripShaderProgram);
|
||||
|
||||
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.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mat4Real);
|
||||
|
||||
if(strip.blendMode == PIXI.blendModes.NORMAL)
|
||||
{
|
||||
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
|
||||
|
|
@ -828,8 +813,6 @@ PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projectionMatrix)
|
|||
|
||||
// dont need to upload!
|
||||
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer);
|
||||
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
|
|
@ -855,11 +838,11 @@ PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projectionMatrix)
|
|||
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW);
|
||||
|
||||
}
|
||||
//console.log(gl.TRIANGLE_STRIP)
|
||||
//console.log(gl.TRIANGLE_STRIP);
|
||||
|
||||
gl.drawElements(gl.TRIANGLE_STRIP, strip.indices.length, gl.UNSIGNED_SHORT, 0);
|
||||
|
||||
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, projectionMatrix);
|
||||
|
||||
gl.useProgram(PIXI.shaderProgram);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -56,8 +56,11 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
|
|||
throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this);
|
||||
}
|
||||
|
||||
PIXI.WebGLGraphics.initShaders();
|
||||
this.initShaders();
|
||||
PIXI.initPrimitiveShader();
|
||||
PIXI.initDefaultShader();
|
||||
PIXI.initDefaultStripShader();
|
||||
|
||||
PIXI.activateDefaultShader();
|
||||
|
||||
var gl = this.gl;
|
||||
PIXI.WebGLRenderer.gl = gl;
|
||||
|
|
@ -68,7 +71,8 @@ PIXI.WebGLRenderer = function(width, height, view, transparent)
|
|||
gl.enable(gl.BLEND);
|
||||
gl.colorMask(true, true, true, this.transparent);
|
||||
|
||||
this.projectionMatrix = PIXI.mat4.create();
|
||||
PIXI.projection = new PIXI.Point(400, 300);
|
||||
|
||||
this.resize(this.width, this.height);
|
||||
this.contextLost = false;
|
||||
|
||||
|
|
@ -106,38 +110,7 @@ PIXI.WebGLRenderer.returnBatch = function(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);
|
||||
|
||||
PIXI.shaderProgram = gl.createProgram();
|
||||
|
||||
var shaderProgram = PIXI.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");
|
||||
|
||||
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.activateDefaultShader();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
|
|
@ -186,7 +159,7 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
|
|||
gl.viewport(0, 0, this.width, this.height);
|
||||
|
||||
// set the correct matrix..
|
||||
// gl.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform, false, this.projectionMatrix);
|
||||
// gl.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform, false, this.projectionMatrix);
|
||||
|
||||
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
||||
|
||||
|
|
@ -194,10 +167,10 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
|
|||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
// HACK TO TEST
|
||||
PIXI.projectionMatrix = this.projectionMatrix;
|
||||
//PIXI.projectionMatrix = this.projectionMatrix;
|
||||
|
||||
this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit;
|
||||
this.stageRenderGroup.render(this.projectionMatrix);
|
||||
this.stageRenderGroup.render(PIXI.projection);
|
||||
|
||||
// interaction
|
||||
// run interaction!
|
||||
|
|
@ -298,12 +271,15 @@ PIXI.WebGLRenderer.prototype.resize = function(width, height)
|
|||
|
||||
this.gl.viewport(0, 0, this.width, this.height);
|
||||
|
||||
var projectionMatrix = this.projectionMatrix;
|
||||
//var projectionMatrix = this.projectionMatrix;
|
||||
|
||||
projectionMatrix[0] = 2/this.width;
|
||||
projectionMatrix[5] = -2/this.height;
|
||||
projectionMatrix[12] = -1;
|
||||
projectionMatrix[13] = 1;
|
||||
PIXI.projection.x = this.width/2;
|
||||
PIXI.projection.y = this.height/2;
|
||||
|
||||
// projectionMatrix[0] = 2/this.width;
|
||||
// projectionMatrix[5] = -2/this.height;
|
||||
// projectionMatrix[12] = -1;
|
||||
// projectionMatrix[13] = 1;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -3,6 +3,11 @@
|
|||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
* the default suoer fast shader!
|
||||
*/
|
||||
|
||||
PIXI.shaderFragmentSrc = [
|
||||
"precision mediump float;",
|
||||
"varying vec2 vTextureCoord;",
|
||||
|
|
@ -18,20 +23,117 @@ PIXI.shaderVertexSrc = [
|
|||
"attribute vec2 aVertexPosition;",
|
||||
"attribute vec2 aTextureCoord;",
|
||||
"attribute float aColor;",
|
||||
"uniform mat4 uMVMatrix;",
|
||||
//"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 = 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;",
|
||||
"}"
|
||||
];
|
||||
|
||||
/*
|
||||
* the triangle strip shader..
|
||||
*/
|
||||
PIXI.stripShaderVertexSrc = [
|
||||
"attribute vec2 aVertexPosition;",
|
||||
"attribute vec2 aTextureCoord;",
|
||||
"attribute float aColor;",
|
||||
"uniform mat3 translationMatrix;",
|
||||
"uniform vec2 projectionVector;",
|
||||
"varying vec2 vTextureCoord;",
|
||||
"varying float vColor;",
|
||||
"void main(void) {",
|
||||
"vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);",
|
||||
"gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);",
|
||||
"vTextureCoord = aTextureCoord;",
|
||||
"vColor = aColor;",
|
||||
"}"
|
||||
];
|
||||
|
||||
|
||||
/*
|
||||
* primitive shader..
|
||||
*/
|
||||
|
||||
PIXI.primitiveShaderFragmentSrc = [
|
||||
"precision mediump float;",
|
||||
"varying vec4 vColor;",
|
||||
"void main(void) {",
|
||||
"gl_FragColor = vColor;",
|
||||
"}"
|
||||
];
|
||||
|
||||
PIXI.primitiveShaderVertexSrc = [
|
||||
"attribute vec2 aVertexPosition;",
|
||||
"attribute vec4 aColor;",
|
||||
"uniform mat3 translationMatrix;",
|
||||
"uniform vec2 projectionVector;",
|
||||
"varying vec4 vColor;",
|
||||
"void main(void) {",
|
||||
"vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);",
|
||||
"gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);",
|
||||
"vColor = aColor;",
|
||||
"}"
|
||||
];
|
||||
|
||||
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");
|
||||
|
||||
PIXI.primitiveProgram = shaderProgram;
|
||||
}
|
||||
|
||||
PIXI.initDefaultShader = function()
|
||||
{
|
||||
var gl = this.gl;
|
||||
var shaderProgram = PIXI.compileProgram(PIXI.shaderVertexSrc, PIXI.shaderFragmentSrc)
|
||||
|
||||
gl.useProgram(shaderProgram);
|
||||
|
||||
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
|
||||
shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector");
|
||||
shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
|
||||
shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor");
|
||||
|
||||
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
|
||||
shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
|
||||
|
||||
PIXI.shaderProgram = shaderProgram;
|
||||
}
|
||||
|
||||
PIXI.initDefaultStripShader = function()
|
||||
{
|
||||
var gl = this.gl;
|
||||
var shaderProgram = PIXI.compileProgram(PIXI.stripShaderVertexSrc, PIXI.shaderFragmentSrc)
|
||||
|
||||
gl.useProgram(shaderProgram);
|
||||
|
||||
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
|
||||
shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector");
|
||||
shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
|
||||
shaderProgram.translationMatrix = gl.getUniformLocation(shaderProgram, "translationMatrix");
|
||||
|
||||
shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor");
|
||||
|
||||
shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector");
|
||||
|
||||
shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
|
||||
|
||||
PIXI.stripShaderProgram = shaderProgram;
|
||||
}
|
||||
|
||||
PIXI.CompileVertexShader = function(gl, shaderSrc)
|
||||
{
|
||||
|
|
@ -70,6 +172,25 @@ PIXI.activateDefaultShader = function()
|
|||
gl.enableVertexAttribArray(shaderProgram.colorAttribute);
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
|
||||
alert("Could not initialise shaders");
|
||||
}
|
||||
|
||||
return shaderProgram;
|
||||
}
|
||||
|
||||
PIXI.activatePrimitiveShader = function()
|
||||
{
|
||||
var gl = PIXI.gl;
|
||||
|
|
@ -77,12 +198,9 @@ PIXI.activatePrimitiveShader = function()
|
|||
gl.disableVertexAttribArray(PIXI.shaderProgram.textureCoordAttribute);
|
||||
gl.disableVertexAttribArray(PIXI.shaderProgram.colorAttribute);
|
||||
|
||||
var shaderProgram2 = PIXI.shaderProgram2;
|
||||
gl.useProgram(PIXI.primitiveProgram);
|
||||
|
||||
gl.useProgram(shaderProgram2);
|
||||
|
||||
gl.enableVertexAttribArray(shaderProgram2.vertexPositionAttribute);
|
||||
gl.enableVertexAttribArray(PIXI.shaderProgram2.colorAttribute);
|
||||
|
||||
gl.enableVertexAttribArray(PIXI.primitiveProgram.vertexPositionAttribute);
|
||||
gl.enableVertexAttribArray(PIXI.primitiveProgram.colorAttribute);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -65,6 +65,8 @@ PIXI.RenderTexture.prototype.initWebGL = function()
|
|||
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.baseTexture._glTexture, 0);
|
||||
|
||||
// create a projection matrix..
|
||||
this.projection = new PIXI.Point(this.width/2 , this.height/2);
|
||||
|
||||
this.projectionMatrix = PIXI.mat4.create();
|
||||
|
||||
this.projectionMatrix[5] = 2/this.height// * 0.5;
|
||||
|
|
@ -115,6 +117,9 @@ PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, clear)
|
|||
|
||||
//TODO -? create a new one??? dont think so!
|
||||
displayObject.worldTransform = PIXI.mat3.create();//sthis.indetityMatrix;
|
||||
// modify to flip...
|
||||
displayObject.worldTransform[4] = -1;
|
||||
displayObject.worldTransform[5] = this.projection.y * 2;
|
||||
|
||||
for(var i=0,j=children.length; i<j; i++)
|
||||
{
|
||||
|
|
@ -127,18 +132,18 @@ PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, clear)
|
|||
{
|
||||
if(displayObject == renderGroup.root)
|
||||
{
|
||||
renderGroup.render(this.projectionMatrix);
|
||||
renderGroup.render(this.projection);
|
||||
}
|
||||
else
|
||||
{
|
||||
renderGroup.renderSpecific(displayObject, this.projectionMatrix);
|
||||
renderGroup.renderSpecific(displayObject, this.projection);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
if(!this.renderGroup)this.renderGroup = new PIXI.WebGLRenderGroup(gl);
|
||||
this.renderGroup.setRenderable(displayObject);
|
||||
this.renderGroup.render(this.projectionMatrix);
|
||||
this.renderGroup.render(this.projection);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
130
src/pixi/utils/Polyk.js
Normal file
130
src/pixi/utils/Polyk.js
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
|
||||
/*
|
||||
PolyK library
|
||||
url: http://polyk.ivank.net
|
||||
Released under MIT licence.
|
||||
|
||||
Copyright (c) 2012 Ivan Kuckir
|
||||
|
||||
Permission is hereby granted, free of charge, to any person
|
||||
obtaining a copy of this software and associated documentation
|
||||
files (the "Software"), to deal in the Software without
|
||||
restriction, including without limitation the rights to use,
|
||||
copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the
|
||||
Software is furnished to do so, subject to the following
|
||||
conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
|
||||
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
||||
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||
OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
||||
This is an amazing lib!
|
||||
|
||||
slightly modified by mat groves (matgroves.com);
|
||||
* */
|
||||
|
||||
PIXI.PolyK = {};
|
||||
|
||||
PIXI.PolyK.Triangulate = function(p)
|
||||
{
|
||||
var sign = true;
|
||||
|
||||
var n = p.length>>1;
|
||||
if(n<3) return [];
|
||||
var tgs = [];
|
||||
var avl = [];
|
||||
for(var i=0; i<n; i++) avl.push(i);
|
||||
|
||||
var i = 0;
|
||||
var al = n;
|
||||
while(al > 3)
|
||||
{
|
||||
var i0 = avl[(i+0)%al];
|
||||
var i1 = avl[(i+1)%al];
|
||||
var i2 = avl[(i+2)%al];
|
||||
|
||||
var ax = p[2*i0], ay = p[2*i0+1];
|
||||
var bx = p[2*i1], by = p[2*i1+1];
|
||||
var cx = p[2*i2], cy = p[2*i2+1];
|
||||
|
||||
var earFound = false;
|
||||
if(PIXI.PolyK._convex(ax, ay, bx, by, cx, cy, sign))
|
||||
{
|
||||
earFound = true;
|
||||
for(var j=0; j<al; j++)
|
||||
{
|
||||
var vi = avl[j];
|
||||
if(vi==i0 || vi==i1 || vi==i2) continue;
|
||||
if(PIXI.PolyK._PointInTriangle(p[2*vi], p[2*vi+1], ax, ay, bx, by, cx, cy)) {earFound = false; break;}
|
||||
}
|
||||
}
|
||||
if(earFound)
|
||||
{
|
||||
tgs.push(i0, i1, i2);
|
||||
avl.splice((i+1)%al, 1);
|
||||
al--;
|
||||
i = 0;
|
||||
}
|
||||
else if(i++ > 3*al)
|
||||
{
|
||||
// need to flip flip reverse it!
|
||||
// reset!
|
||||
if(sign)
|
||||
{
|
||||
var tgs = [];
|
||||
avl = [];
|
||||
for(var i=0; i<n; i++) avl.push(i);
|
||||
|
||||
i = 0;
|
||||
al = n;
|
||||
|
||||
sign = false;
|
||||
}
|
||||
else
|
||||
{
|
||||
return [];
|
||||
}
|
||||
}
|
||||
}
|
||||
tgs.push(avl[0], avl[1], avl[2]);
|
||||
return tgs;
|
||||
}
|
||||
|
||||
PIXI.PolyK._PointInTriangle = function(px, py, ax, ay, bx, by, cx, cy)
|
||||
{
|
||||
var v0x = cx-ax;
|
||||
var v0y = cy-ay;
|
||||
var v1x = bx-ax;
|
||||
var v1y = by-ay;
|
||||
var v2x = px-ax;
|
||||
var v2y = py-ay;
|
||||
|
||||
var dot00 = v0x*v0x+v0y*v0y;
|
||||
var dot01 = v0x*v1x+v0y*v1y;
|
||||
var dot02 = v0x*v2x+v0y*v2y;
|
||||
var dot11 = v1x*v1x+v1y*v1y;
|
||||
var dot12 = v1x*v2x+v1y*v2y;
|
||||
|
||||
var invDenom = 1 / (dot00 * dot11 - dot01 * dot01);
|
||||
var u = (dot11 * dot02 - dot01 * dot12) * invDenom;
|
||||
var v = (dot00 * dot12 - dot01 * dot02) * invDenom;
|
||||
|
||||
// Check if point is in triangle
|
||||
return (u >= 0) && (v >= 0) && (u + v < 1);
|
||||
}
|
||||
|
||||
|
||||
PIXI.PolyK._convex = function(ax, ay, bx, by, cx, cy, sign)
|
||||
{
|
||||
return ((ay-by)*(cx-bx) + (bx-ax)*(cy-by) >= 0) == sign;
|
||||
}
|
||||
|
||||
203
src/pixi/utils/pixi.js example 13 - Graphics.html
Normal file
203
src/pixi/utils/pixi.js example 13 - Graphics.html
Normal file
|
|
@ -0,0 +1,203 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- saved from url=(0077)http://127.0.0.1:8020/pixi.js/examples/example%2013%20-%20Graphics/index.html -->
|
||||
<html><script>(function main() {
|
||||
// Create enabled event
|
||||
function fireEnabledEvent() {
|
||||
// If gli exists, then we are already present and shouldn't do anything
|
||||
if (!window.gli) {
|
||||
setTimeout(function () {
|
||||
var enabledEvent = document.createEvent("Event");
|
||||
enabledEvent.initEvent("WebGLEnabledEvent", true, true);
|
||||
document.dispatchEvent(enabledEvent);
|
||||
}, 0);
|
||||
} else {
|
||||
//console.log("WebGL Inspector already embedded on the page - disabling extension");
|
||||
}
|
||||
};
|
||||
|
||||
// Grab the path root from the extension
|
||||
document.addEventListener("WebGLInspectorReadyEvent", function (e) {
|
||||
var pathElement = document.getElementById("__webglpathroot");
|
||||
if (window["gliloader"]) {
|
||||
gliloader.pathRoot = pathElement.innerText;
|
||||
} else {
|
||||
// TODO: more?
|
||||
window.gliCssUrl = pathElement.innerText + "gli.all.css";
|
||||
}
|
||||
}, false);
|
||||
|
||||
// Rewrite getContext to snoop for webgl
|
||||
var originalGetContext = HTMLCanvasElement.prototype.getContext;
|
||||
if (!HTMLCanvasElement.prototype.getContextRaw) {
|
||||
HTMLCanvasElement.prototype.getContextRaw = originalGetContext;
|
||||
}
|
||||
HTMLCanvasElement.prototype.getContext = function () {
|
||||
var ignoreCanvas = this.internalInspectorSurface;
|
||||
if (ignoreCanvas) {
|
||||
return originalGetContext.apply(this, arguments);
|
||||
}
|
||||
|
||||
var result = originalGetContext.apply(this, arguments);
|
||||
if (result == null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
var contextNames = ["moz-webgl", "webkit-3d", "experimental-webgl", "webgl", "3d"];
|
||||
var requestingWebGL = contextNames.indexOf(arguments[0]) != -1;
|
||||
if (requestingWebGL) {
|
||||
// Page is requesting a WebGL context!
|
||||
fireEnabledEvent(this);
|
||||
|
||||
// If we are injected, inspect this context
|
||||
if (window.gli) {
|
||||
if (gli.host.inspectContext) {
|
||||
// TODO: pull options from extension
|
||||
result = gli.host.inspectContext(this, result);
|
||||
// NOTE: execute in a timeout so that if the dom is not yet
|
||||
// loaded this won't error out.
|
||||
window.setTimeout(function() {
|
||||
var hostUI = new gli.host.HostUI(result);
|
||||
result.hostUI = hostUI; // just so we can access it later for debugging
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
})();</script><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
|
||||
<title>pixi.js example 13 - Graphics</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #000000;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="./pixi.js example 13 - Graphics_files/pixi.js"></script>
|
||||
<script src="./pixi.js example 13 - Graphics_files/WebGLGraphics.js"></script>
|
||||
<script src="./pixi.js example 13 - Graphics_files/WebGLShaders.js"></script>
|
||||
<script src="./pixi.js example 13 - Graphics_files/CanvasGraphics.js"></script>
|
||||
<script src="./pixi.js example 13 - Graphics_files/CanvasRenderer.js"></script>
|
||||
<script src="./pixi.js example 13 - Graphics_files/WebGLRenderer.js"></script>
|
||||
<script src="./pixi.js example 13 - Graphics_files/WebGLGraphics.js"></script>
|
||||
<script src="./pixi.js example 13 - Graphics_files/Graphics.js"></script>
|
||||
<script src="./pixi.js example 13 - Graphics_files/Polyk.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
|
||||
// create an new instance of a pixi stage
|
||||
var stage = new PIXI.Stage(0x000000, true);
|
||||
|
||||
stage.setInteractive(true);
|
||||
|
||||
// create a renderer instance
|
||||
//var renderer = new PIXI.CanvasRenderer(800, 600);//PIXI.autoDetectRenderer(800, 600);
|
||||
var renderer = PIXI.autoDetectRenderer(800, 600);
|
||||
|
||||
// set the canvas width and height to fill the screen
|
||||
// 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);
|
||||
|
||||
// OOH! SHINY!
|
||||
// create two render textures.. these dynamic textures will be used to draw the scene into itself
|
||||
|
||||
var graphics = new PIXI.Graphics();
|
||||
|
||||
graphics.beginFill(0xFF0000);
|
||||
graphics.lineStyle(10, 0x30FF00, 0.5);
|
||||
graphics.moveTo(50,50);
|
||||
graphics.lineTo(250, 50);
|
||||
graphics.lineTo(100, 100);
|
||||
graphics.lineTo(250, 220);
|
||||
graphics.lineTo(50, 220);
|
||||
|
||||
graphics.lineTo(50, 50);
|
||||
graphics.endFill();
|
||||
graphics.lineStyle(2, 0x30FFFF, 1);
|
||||
|
||||
|
||||
/*
|
||||
// graphics.beginFill(0xFF794B);
|
||||
graphics.drawRect(250, 250, 300, 100);
|
||||
|
||||
|
||||
graphics.drawCircle(350, 350,100);
|
||||
graphics.endFill();
|
||||
|
||||
graphics.lineTo(250, 50);
|
||||
|
||||
graphics.lineStyle(10, 0xFF0000, 1);
|
||||
graphics.moveTo(400,400);
|
||||
graphics.lineTo(550, 50);
|
||||
|
||||
graphics.lineStyle(30, 0xFF0000, 1);
|
||||
graphics.moveTo(400,100);
|
||||
graphics.lineTo(550, 50);
|
||||
|
||||
//graphics.lineTo(92, 20);
|
||||
//graphics.lineTo(450, 223);
|
||||
*/
|
||||
/*
|
||||
* point1 = new Point(350, 50);
|
||||
|
||||
point2 = new Point(100, 100);
|
||||
|
||||
point3 = new Point(250, 220);
|
||||
|
||||
|
||||
points = new Vector.<Point>();
|
||||
points.push(point1, point2, point3, new Point(350, 220), new Point(450, 223));
|
||||
|
||||
*/
|
||||
//graphics.beginFill(0xFF700B);
|
||||
// graphics.drawElipse(450,320, 100, 200);
|
||||
|
||||
graphics.lineTo(410,300);
|
||||
|
||||
graphics.lineTo(450,320);
|
||||
graphics.lineTo(570,350);
|
||||
graphics.lineTo(580,120);
|
||||
graphics.lineTo(630,120);
|
||||
|
||||
var sprite = PIXI.Sprite.fromImage("spinObj_01.png");
|
||||
var container = new PIXI.DisplayObjectContainer();
|
||||
container.addChild(sprite);
|
||||
sprite.position.x = 300;
|
||||
|
||||
stage.addChild(container);
|
||||
stage.addChild(graphics);
|
||||
|
||||
stage.click = function()
|
||||
{
|
||||
//graphics.clear();
|
||||
}
|
||||
|
||||
requestAnimFrame(animate);
|
||||
|
||||
function animate() {
|
||||
renderer.render(stage);
|
||||
requestAnimFrame( animate );
|
||||
|
||||
container.position.x = 100;//stage.interactionManager.mouse.local.x;
|
||||
container.position.y = 200;//stage.interactionManager.mouse.local.y;
|
||||
// graphics.lineStyle(Math.random() * 30, Math.random() * 0xFFFFFF, 1);
|
||||
// graphics.moveTo(Math.random() * 600,Math.random() * 600);
|
||||
// graphics.lineTo(Math.random() * 600,Math.random() * 600);
|
||||
// graphics.scale.x = 3;
|
||||
// container.rotation += 0.01;
|
||||
// sprite.rotation -= 0.01;
|
||||
}
|
||||
|
||||
</script><canvas width="800" height="600" style="display: block; cursor: default;"></canvas>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
/**
|
||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 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
|
||||
* @extends DisplayObject
|
||||
* @constructor
|
||||
*/
|
||||
PIXI.CanvasGraphics = function()
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
// constructor
|
||||
|
||||
PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
|
||||
{
|
||||
|
||||
for (var i=0; i < graphics.graphicsData.length; i++)
|
||||
{
|
||||
var data = graphics.graphicsData[i];
|
||||
var points = data.points;
|
||||
|
||||
context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6);
|
||||
|
||||
context.lineWidth = data.lineWidth;
|
||||
context.globalAlpha = data.lineAlpha;
|
||||
|
||||
if(data.type == PIXI.Graphics.POLY)
|
||||
{
|
||||
if(data.lineWidth <= 0)continue;
|
||||
|
||||
context.beginPath();
|
||||
|
||||
context.moveTo(points[0], points[1]);
|
||||
|
||||
for (var j=1; j < points.length/2; j++)
|
||||
{
|
||||
context.lineTo(points[j * 2], points[j * 2 + 1]);
|
||||
}
|
||||
|
||||
// if the first and last point are the same close the path - much neater :)
|
||||
if(points[0] == points[points.length-2] && points[1] == points[points.length-1])
|
||||
{
|
||||
context.closePath();
|
||||
}
|
||||
|
||||
context.stroke();
|
||||
}
|
||||
else if(data.type == PIXI.Graphics.RECT)
|
||||
{
|
||||
// TODO - need to be Undefined!
|
||||
if(data.fillColor)
|
||||
{
|
||||
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
|
||||
|
||||
context.fillRect(points[0], points[1], points[2], points[3]);
|
||||
|
||||
}
|
||||
if(data.lineWidth)
|
||||
{
|
||||
context.strokeRect(points[0], points[1], points[2], points[3]);
|
||||
}
|
||||
}
|
||||
else if(data.type == PIXI.Graphics.CIRC)
|
||||
{
|
||||
// TODO - need to be Undefined!
|
||||
context.beginPath();
|
||||
context.arc(points[0], points[1], points[2],0,2*Math.PI);
|
||||
context.closePath();
|
||||
|
||||
if(data.fill)
|
||||
{
|
||||
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
|
||||
context.fill();
|
||||
}
|
||||
if(data.lineWidth)
|
||||
{
|
||||
context.stroke();
|
||||
}
|
||||
}
|
||||
else if(data.type == PIXI.Graphics.ELIP)
|
||||
{
|
||||
|
||||
// elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
|
||||
|
||||
var elipseData = data.points;
|
||||
|
||||
var w = elipseData[2] * 2;
|
||||
var h = elipseData[3] * 2;
|
||||
|
||||
var x = elipseData[0] - w/2;
|
||||
var y = elipseData[1] - h/2;
|
||||
|
||||
context.beginPath();
|
||||
|
||||
var kappa = .5522848,
|
||||
ox = (w / 2) * kappa, // control point offset horizontal
|
||||
oy = (h / 2) * kappa, // control point offset vertical
|
||||
xe = x + w, // x-end
|
||||
ye = y + h, // y-end
|
||||
xm = x + w / 2, // x-middle
|
||||
ym = y + h / 2; // y-middle
|
||||
|
||||
context.moveTo(x, ym);
|
||||
context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
|
||||
context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
|
||||
context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
|
||||
context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
|
||||
|
||||
context.closePath();
|
||||
|
||||
if(data.fill)
|
||||
{
|
||||
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
|
||||
context.fill();
|
||||
}
|
||||
if(data.lineWidth)
|
||||
{
|
||||
context.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<html><body><h1>File /pixi.js/src/pixi/renderers/CanvasRenderer.js not found</h1></body></html>
|
||||
163
src/pixi/utils/pixi.js example 13 - Graphics_files/Graphics.js
Normal file
163
src/pixi/utils/pixi.js example 13 - Graphics_files/Graphics.js
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
/**
|
||||
* @author Mat Groves http://matgroves.com/ @Doormat23
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* The Graphics class contains a set of methods that you can use to create a primitive shapes and lines.
|
||||
* @class Graphics
|
||||
* @extends DisplayObjectContainer
|
||||
* @constructor
|
||||
*/
|
||||
PIXI.Graphics = function()
|
||||
{
|
||||
PIXI.DisplayObjectContainer.call( this );
|
||||
|
||||
this.renderable = true;
|
||||
|
||||
this.fillAlpha = 1;
|
||||
|
||||
this.lineWidth = 2;
|
||||
this.lineColor = "#FF0000";
|
||||
|
||||
this.graphicsData = [];
|
||||
|
||||
}
|
||||
|
||||
// constructor
|
||||
PIXI.Graphics.constructor = PIXI.Graphics;
|
||||
PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
|
||||
|
||||
/**
|
||||
* @method lineStyle
|
||||
* @param lineWidth {Number}
|
||||
* @param color {Number}
|
||||
* @param alpha {Number}
|
||||
*/
|
||||
PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
|
||||
{
|
||||
this.lineWidth = lineWidth || 0;
|
||||
this.lineColor = color || 0;
|
||||
this.lineAlpha = (alpha == undefined) ? 1 : alpha;
|
||||
|
||||
this.currentPath = this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
|
||||
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY};
|
||||
|
||||
this.graphicsData.push(this.currentPath);
|
||||
}
|
||||
|
||||
/**
|
||||
* @method moveTo
|
||||
* @param x {Number}
|
||||
* @param y {Number}
|
||||
*/
|
||||
PIXI.Graphics.prototype.moveTo = function(x, y)
|
||||
{
|
||||
this.currentPath = this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
|
||||
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY};
|
||||
|
||||
// {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, points:[], type:PIXI.Graphics.POLY};
|
||||
|
||||
this.currentPath.points.push(x, y);
|
||||
|
||||
this.graphicsData.push(this.currentPath);
|
||||
}
|
||||
|
||||
/**
|
||||
* @method lineTo
|
||||
* @param x {Number}
|
||||
* @param y {Number}
|
||||
*/
|
||||
PIXI.Graphics.prototype.lineTo = function(x, y)
|
||||
{
|
||||
this.currentPath.points.push(x, y);
|
||||
this.dirty = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* @method beginFill
|
||||
* @param color {Number}
|
||||
* @param alpha {Number}
|
||||
*/
|
||||
PIXI.Graphics.prototype.beginFill = function(color, alpha)
|
||||
{
|
||||
this.filling = true;
|
||||
this.fillColor = color || 0;
|
||||
this.fillAlpha = alpha || 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* @method endFill
|
||||
*/
|
||||
PIXI.Graphics.prototype.endFill = function()
|
||||
{
|
||||
this.filling = false;
|
||||
this.fillColor = null;
|
||||
this.fillAlpha = 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* @method drawRect
|
||||
* @param x {Number}
|
||||
* @param y {Number}
|
||||
* @param width {Number}
|
||||
* @param height {Number}
|
||||
*/
|
||||
PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
|
||||
{
|
||||
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
|
||||
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
|
||||
points:[x, y, width, height], type:PIXI.Graphics.RECT};
|
||||
|
||||
this.graphicsData.push(this.currentPath);
|
||||
this.dirty = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* @method drawCircle
|
||||
* @param x {Number}
|
||||
* @param y {Number}
|
||||
* @param radius {Number}
|
||||
*/
|
||||
PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
|
||||
{
|
||||
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
|
||||
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
|
||||
points:[x, y, radius, radius], type:PIXI.Graphics.CIRC};
|
||||
|
||||
this.graphicsData.push(this.currentPath);
|
||||
this.dirty = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* @method drawElipse
|
||||
* @param x {Number}
|
||||
* @param y {Number}
|
||||
* @param width {Number}
|
||||
* @param height {Number}
|
||||
*/
|
||||
PIXI.Graphics.prototype.drawElipse = function( x, y, width, height)
|
||||
{
|
||||
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
|
||||
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
|
||||
points:[x, y, width, height], type:PIXI.Graphics.ELIP};
|
||||
|
||||
this.graphicsData.push(this.currentPath);
|
||||
this.dirty = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* @method clear
|
||||
*/
|
||||
PIXI.Graphics.prototype.clear = function()
|
||||
{
|
||||
this.dirty = true;
|
||||
this.clearDirty = true;
|
||||
this.graphicsData = [];
|
||||
}
|
||||
|
||||
// SOME TYPES:
|
||||
PIXI.Graphics.POLY = 0;
|
||||
PIXI.Graphics.RECT = 1;
|
||||
PIXI.Graphics.CIRC = 2;
|
||||
PIXI.Graphics.ELIP = 3;
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue