2

私はこのチュートリアルから WebGL を学んでいます: https://developer.mozilla.org/en-US/docs/WebGL/Animating_textures_in_WebGLと最後のレッスンでは、ビデオ オブジェクトをテクスチャとして使用する方法を示しています。ここに実際の例があります: https://developer.mozilla.org/samples/webgl/sample8/index.htmlは問題なく動作します (私は Firefox を使用しています)。問題は、自分でやろうとしたときに問題に遭遇したことです。さらに奇妙なことに、PC (オフライン) とホスティング (オンライン) で異なるエラー メッセージが表示されます。オフライン エラー:

file:///C:/Users/NPS/Desktop/gallery/video.html(351): SecurityError: 操作は安全ではありません。

351行目は次のとおりです。

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, videoElement);

Firefox 開発者ツールバーには、さらに次のように記載されています。

エラー: WebGL: CORS で検証されていないクロスドメイン要素から WebGL テクスチャをロードすることは禁止されています。https://developer.mozilla.org/en/WebGL/Cross-Domain_Texturesを参照してください

そのエラーについて読んだことがありますが、html ファイルとビデオ ファイルが同じ場所にあるため、機能しないのは奇妙に思えます。また、ページを開くと、ビデオファイルのサウンドが実際に再生されます（ただし、それだけです）。一方、オンライン バージョンのエラーは異なります (ただし、これはポーランド語であり、正確な英語版が何であるかわからないため、ここに掲載することはできません。ただし、Firefox を使用している場合は、ここで確認できます: http:/ /nps.netarteria.pl/gallery/video.html (私は firefox 開発者バーを使用しています). もちろん、ページのソース コードと私が使用しているすべてのものもそこで確認できます。

それを機能させるために何ができるでしょうか？プロジェクトにビデオ テクスチャを入れたいのですが、今は行き詰まっています。

4

2 に答える 2

7

サンプルの問題は、ビデオ テクスチャが 2 の累乗ではなく、それを処理するテクスチャ フィルタリングを設定していないことです。

行 353 を変更します

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);

に

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

これらの2行を追加します

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

gl.generateMipmap(GL_TEXTURE_2D)2 の累乗でないテクスチャのミップを生成できないため、 への呼び出しも削除します。

2 の累乗でないテクスチャに関する問題については、WebGL Wiki を参照してください。

MDN サイトのサンプルは長い間壊れていて、誰もそれを修正しようとはしていません :-( 以前は Firefox のバグが修正されていたために機能していました。

注: Chrome 25 (Chrome Canary) では、これを指摘するのに役立ついくつかのメッセージが出力されます。サンプルを Chrome 25 で実行すると、次のメッセージが表示されます

WebGL: INVALID_OPERATION: generateMipmap: level 0 not power of 2 or not all the same size video.html:1
WebGL: drawElements: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'
于 2012-11-27T08:23:08.353 に答える
0

Chrome の場合、パラメータ「chrome.exe --allow-file-access-from-files」を使用してショートカットを試すことができます

于 2012-11-26T20:43:48.683 に答える