Fix incompatibility of PIXI.Graphics (Fixes #5)

guansss · Sep 21, 2020 · babdcd4 · babdcd4
1 parent 929d253
commit babdcd4
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 5 deletions.
diff --git a/src/Live2DModel.ts b/src/Live2DModel.ts
@@ -289,7 +289,6 @@ export class Live2DModel extends Container {
 
             this.internal.updateWebGLContext(renderer.gl, this.glContextID);
 
-            const flipY = renderer.gl.getParameter(WebGLRenderingContext.UNPACK_FLIP_Y_WEBGL);
             renderer.gl.pixelStorei(WebGLRenderingContext.UNPACK_FLIP_Y_WEBGL, true);
 
             for (let i = 0; i < this.textures.length; i++) {
@@ -302,8 +301,6 @@ export class Live2DModel extends Container {
                 // kind of ugly but it does the trick :/
                 this.internal.bindTexture(i, (baseTexture as any)._glTextures[this.glContextID].texture);
             }
-
-            renderer.gl.pixelStorei(WebGLRenderingContext.UNPACK_FLIP_Y_WEBGL, flipY);
         }
 
         for (const texture of this.textures) {
@@ -317,7 +314,12 @@ export class Live2DModel extends Container {
         this.internal.draw(this.transform.getDrawingMatrix(renderer.gl));
 
         // reset the active texture that has been changed by Live2D's drawing system
-        renderer.gl.activeTexture(WebGLRenderingContext.TEXTURE0 + renderer.texture.currentLocation);
+        if (renderer.texture.currentLocation >= 0) {
+            renderer.gl.activeTexture(WebGLRenderingContext.TEXTURE0 + renderer.texture.currentLocation);
+        }
+
+        // reset WebGL state
+        renderer.state.reset();
     }
 
     /** @override */

diff --git a/test/module/Live2DModel.test.js b/test/module/Live2DModel.test.js
@@ -1,5 +1,6 @@
 import { Application } from '@pixi/app';
-import { Renderer } from '@pixi/core';
+import { BatchRenderer, Renderer } from '@pixi/core';
+import { Graphics } from '@pixi/graphics';
 import { InteractionManager } from '@pixi/interaction';
 import { Ticker, TickerPlugin } from '@pixi/ticker';
 import { Live2DModel } from '../../src';
@@ -8,6 +9,7 @@ import { createApp } from '../utils';
 import { TEST_MODEL } from './../env';
 
 Application.registerPlugin(TickerPlugin);
+Renderer.registerPlugin('batch', BatchRenderer);
 Renderer.registerPlugin('interaction', InteractionManager);
 Live2DModel.registerTicker(Ticker);
 
@@ -79,6 +81,40 @@ describe('Live2DModel', async () => {
         expect(bounds.height).to.equal(modelBaseHeight * 3);
     });
 
+    it('should not break rendering of PIXI.Graphics', function() {
+        // https://github.com/guansss/pixi-live2d-display/issues/5
+
+        const SIZE = 50;
+
+        const graphics = new Graphics();
+        graphics.beginFill(0xff0000);
+        graphics.drawRect(0, 0, SIZE, SIZE);
+        app.stage.addChild(graphics);
+        app.render();
+
+        const offscreenCanvas = document.createElement('canvas');
+        offscreenCanvas.width = app.view.width;
+        offscreenCanvas.height = app.view.height;
+
+        const context = offscreenCanvas.getContext('2d');
+        context.drawImage(app.view, 0, 0);
+
+        const pixels = context.getImageData(0, 0, SIZE, SIZE).data;
+
+        // detect the red square
+        expect(pixels).to.satisfy(() => {
+            for (let i = 0; i < pixels.length; i += 4) {
+                if (pixels[i] !== 255 ||
+                    pixels[i + 1] !== 0 ||
+                    pixels[i + 2] !== 0 ||
+                    pixels[i + 3] !== 255) {
+                    return false;
+                }
+            }
+            return true;
+        });
+    });
+
     it('should handle tapping', () => {
         const listener = sinon.spy();