Chrome
WebGL

WebGL でローカルでテクスチャを読み込めない!

ウェブでも3Dグラフィック扱いたい!と思って Three.js をいじり始めたのですが、ローカルでテクスチャを読み込むにあたってつまづいたのでメモ。

これは何が原因かというと、プログラマブルシェーダーというのが悪用されるのを防ぐため、WebGLでは別ドメインから読み込んだ画像などをテクスチャとして使用できないことが原因だそうです。

※CORSというので明示的に許可した場合は除くとのこと

特に chrome はこの規制が厳しいらしく、ローカルにあるファイルは一切読み込めない!

ということで、都度サーバに上げて確認してもいいのですが、めんどくさいので chrome 起動の際にオプションつけると解決します。

$ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files

参考:webGLでローカルにあるテクスチャファイルを使用したい場合 | youth

これで、ローカルでもテクスチャ読み込み放題です。

プログラマブルシェーダー(っていうかシェーダー)とか、まだ全然わかってないけれども、とりあえずはよかったね!