effekseer / EffekseerForWebGL

MIT License
116 stars 17 forks source link

gl.UNPACK_FLIP_Y_WEBGL may affect effekseer context #82

Closed scarletsky closed 2 years ago

scarletsky commented 2 years ago

Introduction

I create a simple demo, please open the page below, and then play the MagicArea effect

https://scarletsky.github.io/EffekseerForWebGL/Sample/index.html?flipy=1 https://scarletsky.github.io/EffekseerForWebGL/Sample/index.html?flipy=0

Here are the screenshots: flipy=1:

flipy=0:

Reason

Because we draw the main scene first, and it called gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true). And in effekseer context, it call gl.texImage2D for the rest textures, so the textures in effect are flipped y unexpectly.

Solution

Make sure to set gl.UNPACK_FLIP_Y_WEBGL to false before calling gl.texImage2D.

var ASM_CONSTS = {
  321908: function($0, $1) {
      var binding = GLctx.getParameter(GLctx.TEXTURE_BINDING_2D);
      var img = Module._loadImage(UTF16ToString($0));
      GLctx.bindTexture(GLctx.TEXTURE_2D, GL.textures[$1]);
      var pa = gl.getParameter(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL);
+      var oldFlipY = gl.getParameter(gl.UNPACK_FLIP_Y_WEBGL);
      GLctx.pixelStorei(GLctx.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+      GLctx.pixelStorei(GLctx.UNPACK_FLIP_Y_WEBGL, false);
      GLctx.texImage2D(GLctx.TEXTURE_2D, 0, GLctx.RGBA, GLctx.RGBA, GLctx.UNSIGNED_BYTE, img);
      if (Module._isPowerOfTwo(img)) {
          GLctx.generateMipmap(GLctx.TEXTURE_2D)
      }
      GLctx.pixelStorei(GLctx.UNPACK_PREMULTIPLY_ALPHA_WEBGL, pa);
+      GLctx.pixelStorei(GLctx.UNPACK_FLIP_Y_WEBGL, oldFlipY);
      GLctx.bindTexture(GLctx.TEXTURE_2D, binding)
  }
};

It seems these codes are generated from the main cpp repository by emcc, you may need to update the main cpp repository ?

durswd commented 2 years ago

I fixed it.

scarletsky commented 2 years ago

Oh, I didn't notice these codes are in this repository. 🥲

scarletsky commented 2 years ago

Would you mind I update the DEMO page and submit here ? Changes are here: https://github.com/scarletsky/EffekseerForWebGL/commit/73f1f76475e62f718f1530576aef3bba780e771f

scarletsky commented 2 years ago

Would you mind I update the DEMO page and submit here ? Changes are here: scarletsky@73f1f76

  • Add orbit control
  • Add scale input
  • Add a texture to simulate flipY

It seems you don't need these changes, I should close this issue now.