バグを拾ったようなので、暫定めも。
手元環境:
Firefox:52.0.1
PIXI.js:4.4.2
現象:texImage2D()などが呼ばれると、Firefoxで、"Error: WebGL: texImage2D: Conversion requires pixel reformatting."などがコンソールに出力される
※Firefoxのバージョンによって、メッセージは変わります。(ver51あたりから?)
旧バージョンの場合:
Error: WebGL: texImage2D: Incurred CPU-side conversion, which is very slow.
など。(別のメッセージも含めて3行位出るらしいです)
発生個所
pixi.jsの、1939行目
Texture.prototype.upload
のgl.texImage2D()
原因:Firefoxのバグと思われる(未解決)
おそらく画面側と画像のカラーフォーマットが一致しないのが原因ですが、未解決。
詳細はBug 1246410を参照して下さい。
(Firefoxのソース上、テクスチャのtypeがGL_UNSIGNED_BYTEの場合は、formatがRGBA以外では一致しません。なので、screen.colorDepthが24になった場合は一致しなさそうです。)
ただし、pixi.js側も、画像のフォーマットをTextureに反映していないようなので、
(別のIssueになると思いますが) この辺りも気になる所。
基本的に、format: GL_RGBA、type: GL_UNSIGNED_BYTEになると思います。コード内の場所によって、premultiplyAlphaがtrueになることも。
関連バグ
Bug 1246410 - Low performance of texImage2D with canvas and WebGL
おそらく同件のバグ
Firefox Errors when rendering Video in WebGL #2991
他多数。(#9109の下の方に、並んでいます)
再現方法
画像を表示する。
例えば、
pixi.jsのダウンロードページにある、Basic Usage Exampleを実行するなど。
※app.stage.addChild()
を実行するとエラーが出力されるはずです。
エラーの発生個所:
Texture.prototype.upload()
の、gl.texImage2D()
※SpriteRenderer.prototype.flush()
の、gl.drawElements()
でも、別のエラーが発生するので注意。
Error: WebGL: drawElements: This operation requires zeroing texture data. This is slow.
発生個所を調べるために使ったコードは、こんな感じ:
test.jsvar app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb}); document.body.appendChild(app.view); var img = PIXI.Sprite.fromImage('img/img1.png'); app.stage.addChild(img);
index.html<?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="content-style-type" content="text/css" > <meta http-equiv="content-script-type" content="text/javascript" > <title>Document</title> </head> <body> <script src='lib/pixi.js'></script> <script src='test.js'></script> </body> </html>