LoginSignup
1
0

More than 5 years have passed since last update.

[めも]pixi.jsなどで、Error: WebGL: texImage2D: Conversion requires pixel reformatting.が発生する場合[Firefoxのバグ]

Last updated at Posted at 2017-03-21

バグを拾ったようなので、暫定めも。
手元環境:
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.uploadgl.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 Nightly: Error: WebGL: texImage2D: Chosen format/type incured an expensive reformat: 0x1908/0x1401 #9109

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.js
var 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>
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0