glTF出力時のGL ERRORについて

「部屋の3DCGをWebVRで表示」で、部屋の3DCGをWebVRに対応させてOculus Questで見れるようにしました。

もっといろいろ制作したいと思い、Youtubeのチュートリアル動画を見て宇宙船の廊下を制作し、glTFに出力したさい「GL ERROR :GL_INVALID_VALUE : glVertexAttribPointer: size GL_INVALID_VALUE」に悩まされたので、解決方法をまとめました。

宇宙船の廊下の3DCGを制作

● Create a Spaceship Corridor in Blender

• Create a Spaceship Corridor - Part 1 of 2
• Create a Spaceship Corridor - Part 2 of 2

チュートリアル動画を参考に、宇宙船の廊下を制作しました。同じパーツをうまく使い、ミラーと配列モディファイアーを駆使して、複雑そうに見える構造物を効率よく制作する方法は参考になります。

glTF出力時のGL ERRORについて

宇宙船の廊下をglTFに出力して、Three.jsで読み込みました。容量を軽くしたかったので、圧縮にチェックを入れてDraco圧縮しました。ブラウザのコンソールで確認すると、「GL ERROR :GL_INVALID_VALUE : glVertexAttribPointer: size GL_INVALID_VALUE」というエラーが出て、パイプや壁面のパーツがうまく表示されません。エラーの内容がわからず、どこが影響しているかも検討がつかなかったため困りました。

インターネットで調べたところ、glVertexAttribPointerは、WebGLのレンダリングに使用する属性インデックスとバッファオブジェクトを関連付けるメソッドで、GL_INVALID_VALUEは、引数に正しい数値が入ってない時に出るエラーのようです。

• WebGLRenderingContext.vertexAttribPointer()

WebGLをさわっているわけではなく、BlenderでglTFを出力しているので、影響している箇所を特定するため、設定やパーツを一つずつ調べました。

テクスチャを外すと、エラーは出なくなりますが、根本的な原因はわかりません。そこで、Draco圧縮せずに出力したところ、エラーも出ず綺麗に出力できました。Draco圧縮が、属性インデックスとバッファオブジェクトの関連付けに影響を与えていたようです。

解決方法がわかったので、テクスチャをベイクしてglTFに出力しました。

• Blender2.8でテクスチャをベイク

glTF出力時のGL ERRORを解決して、宇宙船の廊下の3DCGをThree.jsで読み込みました。Draco圧縮できなかったので、glTFの容量は55MBあります。