Graphics canvas texture generation

Author: bitnenfer

v3/src/gameobjects/graphics/Graphics.js

@@ -6,6 +6,7 @@ var Commands = require('./Commands');
 var MATH_CONST = require('../../math/const');
 var GetValue = require('../../utils/object/GetValue');
 var CanvasPool = require('../../dom/CanvasPool');
+var Camera = require('../../camera/Camera.js');
 
 var Graphics = new Class({
 
@@ -42,9 +43,6 @@ var Graphics = new Class({
 
         this.setDefaultStyles(options);
 
-        this.dstRenderTexture = null;
-        this.dstRenderTarget = null;
-
         var resourceManager = state.game.renderer.resourceManager;
 
         if (resourceManager !== undefined)
@@ -382,41 +380,32 @@ var Graphics = new Class({
         return this;
     },
 
-    createRenderTarget: function (width, height) 
-    {
-        var resourceManager = this.resourceManager;
-        if (this.dstRenderTarget === null) 
-        {
-            if (resourceManager !== undefined)
-            {
-                var gl = this.gl;
-                this.dstRenderTexture = resourceManager.createTexture(0, gl.LINEAR, gl.LINEAR, gl.CLAMP_TO_EDGE, gl.CLAMP_TO_EDGE, gl.RGBA, null, width, height);
-                this.dstRenderTarget = resourceManager.createRenderTarget(width, height, this.dstRenderTexture, null);
-                state.game.renderer.currentTexture = null; // force rebinding of prev texture
-            }
-            else
-            {
-                this.dstRenderTexture = CanvasPool.create2D(null, width, height);
-                this.dstRenderTarget = this.dstRenderTexture.getContext('2d');
-            }
-        }
-    },
-
     generateTexture: function (key, width, height) 
     {
         width = (typeof width === 'number') ? width : this.state.game.config.width;
         height = (typeof height === 'number') ? height : this.state.game.config.height;
 
         if (this.gl) 
         {
-            this.state.game.textures.create(key, null, width, height);
+            var texture = this.state.game.textures.create(key, null, width, height);
+            var glTexture = texture.source[0].glTexture;
+            var renderTarget = this.resourceManager.createRenderTarget(width, height, glTexture, null);
+            glTexture.width = width;
+            glTexture.height = height;
         }
         else
         {
-            this.state.game.textures.createCanvas(key, width, height);
+            var texture = this.state.game.textures.createCanvas(key, width, height);
+            var ctx = texture.source[0].image.getContext('2d');
+            Graphics.TargetCamera.setViewport(0, 0, width, height);
+            Graphics.TargetCamera.scrollX = this.x;
+            Graphics.TargetCamera.scrollY = this.y;
+            this.renderCanvas(this.state.game.renderer, this, 0, Graphics.TargetCamera, ctx);
         }
     }
 
 });
 
+Graphics.TargetCamera = new Camera(0, 0, 0, 0);
+
 module.exports = Graphics;

v3/src/gameobjects/graphics/GraphicsCanvasRenderer.js

@@ -1,7 +1,7 @@
 var Commands = require('./Commands');
 var MATH_CONST = require('../../math/const');
 
-var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, camera)
+var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, camera, renderTargetCtx)
 {
     if (this.renderMask !== this.renderFlags)
     {
@@ -16,7 +16,7 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c
     var srcScaleY = src.scaleY;
     var srcRotation = src.rotation;
     var commandBuffer = src.commandBuffer;
-    var ctx = renderer.currentContext;
+    var ctx = renderTargetCtx || renderer.currentContext;
     var value;
     var lineAlpha = 1.0;
     var fillAlpha = 1.0;

v3/src/renderer/webgl/WebGLRenderer.js

@@ -117,7 +117,7 @@ WebGLRenderer.prototype = {
         this.setBlendMode(0);
     },
 
-    createTexture: function (source)
+    createTexture: function (source, width, height)
     {
         var gl = this.gl;
         var filter = gl.NEAREST;
@@ -134,7 +134,22 @@ WebGLRenderer.prototype = {
                 filter = gl.NEAREST;
             }
 
-            source.glTexture = this.resourceManager.createTexture(
+            if (typeof width === 'number' && typeof height === 'number')
+            {
+                source.glTexture = this.resourceManager.createTexture(
+                    0,
+                    filter,
+                    filter,
+                    gl.CLAMP_TO_EDGE,
+                    gl.CLAMP_TO_EDGE,
+                    gl.RGBA,
+                    null,
+                    width, height
+                );
+            }
+            else
+            {
+                source.glTexture = this.resourceManager.createTexture(
                     0,
                     filter,
                     filter,
@@ -143,6 +158,7 @@ WebGLRenderer.prototype = {
                     gl.RGBA,
                     source.image
                 );
+            }
         }
 
         this.currentTexture = null;

v3/src/textures/TextureSource.js

@@ -123,7 +123,7 @@ var TextureSource = function (texture, source, width, height)
 
     if (game.config.renderType === CONST.WEBGL)
     {
-        game.renderer.createTexture(this);
+        game.renderer.createTexture(this, width, height);
     }
 };