問題タブ [webgl]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
974 参照

webgl - gl_LightSource[gl_MaxLights] の操作

The OpenGL ® Shading Language Spec バージョン 1.20 http://www.opengl.org/registry/doc/GLSLangSpec.Full.1.20.8.pdfには、次のように示されています。

また、http://www.lighthouse3d.com/opengl/glsl/index.php?ogldir1には、次のコード スニペットが示されています。

https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.html#5.10は多くのuniform*関数を示していますが、uniform変数の配列を扱うものはないようですgl_LightSource[0].

JavaScript を使用してWebGLで gl_LightSource[0] フィールドを設定するにはどうすればよいですか? たとえば、gl_LightSource[0].position

よろしくお願いします。

注: http://www.khronos.org/message_boards/viewtopic.php?f=43&t=3373へのクロス ポスト

0 投票する
1 に答える
2075 参照

opengl - シェーダーを使用して衝突検出を実装する方法の例はWeb上にありますか?

3D衝突検出をシェーダー(できればGLSL)で実装する方法について、Web上にOpenGL、OpenGL ES、またはWebGLコードの例はありますか?

ありがとうございました。

0 投票する
1 に答える
961 参照

webgl - WebGLでの半ベクトルの計算

http://www.lighthouse3d.com/opengl/glsl/index.php?ogldir2は、次のことを示しています。

H=目-L

ハーフベクトルを計算するために、WebGL頂点シェーダーで次のことを行いました。

しかし、上記のコードスニペットが正しいかどうかはわかりません。

任意のポインタ/ヘルプをいただければ幸いです。よろしくお願いします。

編集:正しいコードは

0 投票する
1 に答える
926 参照

javascript - インデックスごとの法線?

5 つの頂点と 18 のインデックスを持つピラミッドがあります。各面に法線を追加したいので、各頂点の法線の解決策を見つけました。つまり、インデックスを使用してピラミッドを定義することはできません。18 個の頂点が必要です (空間内の同じ点に対して同じ頂点の 3 倍)。

頂点ベースではなくインデックス ベースで法線を使用するソリューションが必要です。

いくつかのコード (javascript):

0 投票する
3 に答える
1897 参照

javascript - WebGLベンチマーク-どのような種類のテストを作成する必要がありますか?

(これがhttps://softwareengineering.stackexchange.com/にあるべきかどうかはわかりませんが、そう思う場合はコメントしてください)

学位論文のWebGL実装のベンチマークを作成しようとしています。どのような種類のテストを作成する必要があるのか​​、ベンチマークに他の有用なデータを取得できるかどうかの1秒あたりのフレーム数のみを測定する必要があるのか​​どうかわかりません...

現在、私はそのようなテストについて考えました:

  • 1つの単色オブジェクト
  • 1つのマルチカラーオブジェクト
  • 1つのテクスチャオブジェクト
  • ブレンドされた1つのテクスチャオブジェクト
  • 稲妻のあるテクスチャオブジェクト1つ
  • 複数のライティングポイントを持つ1つのテクスチャオブジェクト
  • テクスチャにレンダリングされた1つのシーンを別のオブジェクトで使用する
  • 1モデルアニメーション
  • より多くのオブジェクトを使用したすべてのテスト:50、500、5000
  • レンダリングごとにシェーダー/プログラムを変更する(1回、2回、複数回)

これにより、40の異なるテストが実行されますが、これらがパフォーマンスの重要なテストであるかどうかはわかりません。

友人が複雑なシェーダーでテストすることを提案しましたが、シェーダーはグラフィックハードウェアで実行されているため、Javaデスクトップアプリケーションに違いはないはずです。

とにかく、JavaScriptのパフォーマンスがWebGLの主なボトルネックであると私は感じています。

アップデート

私はついにテストをしました。ベンチマークがどのように機能するかについて話し合った後、私は以下を作成しました:http: //martin.cyor.eu/benchmark

0 投票する
1 に答える
5888 参照

javascript - この回転スパイラルをWebGLに実装するにはどうすればよいですか?

誰かが与えられたアニメーションをWebGLシェーダーの例に実装しようとすることができますか?私のようにWebGLを利用している人にとっては素晴らしいことです。

代替テキスト

出典:http ://dvdp.tumblr.com/post/2664387637/110109

0 投票する
3 に答える
527 参照

opengl - プラグインなしでウェブ上で3Dビデオを支払う

ここにおそらく答えられない質問があります...

プラグインを使用せずに、3D対応のディスプレイ/モニターに3D画像を表示できるWebサイトを作成するにはどうすればよいですか?

帯域幅の問題は問題ではないため、無視してください。また、赤/緑の効果(アナグリフ)には多くの問題があるので避けたいと思います。120Hzのビデオを簡単に表示できると思いますが、左右の画像を画面のタイミングと同期させるにはどうすればよいですか?

どんな助けでもありがたいですが、「不可能」は決して答えではありません。ありがとう

0 投票する
2 に答える
6938 参照

webgl - WebGL 上の画像/テクスチャ データ (テクセル) へのアクセス

WebGL に次のコード スニペットがあります。

ロードされたテクスチャ マップのコンテンツ (RGBA) を取得したいと考えています。同様に、描画バッファの内容を取得するための readPixels() の機能。

出来ますか?もしそうなら、それを行うのが最善ですか?

開発に Chrome Canary ビルドを使用しています。

よろしくお願いします。

注: http://www.khronos.org/message_boards/viewtopic.php?f=43&t=3439へのクロス ポスト

0 投票する
1 に答える
17012 参照

javascript - ベクトルの配列をユニフォームに渡す

シェーダーに複数のライトを実装しようとしていますが、ユニフォームをライト データで埋めるのに問題があります。

私の頂点シェーダー:

最新のライトのみを表示するコード:

ユニフォームuPointLightingLocationはサイズが 16 の vec3 配列であるため、完全な配列をユニフォームに渡すことは可能であると考えましたが、有効な解決策がありません。

完全な配列 (インデックスなし) を渡そうとすると、this.lightsColorまったく光が見えません。

0 投票する
1 に答える
1772 参照

webgl - ロードされたテクスチャをWebGLから解放する

http://www.khronos.org/webgl/wiki/Demo_RepositoryのTexturedBoxデモには、次のコードスニペットがあります。

(グラフィックス)メモリリークを回避するために、割り当てられた/ロードされたテクスチャをどのように解放しますか?

次のコードは、ロード/割り当てられたテクスチャと画像の両方を解放しますか?

よろしくお願いします。

注: 2010年12月23日にhttp://www.khronos.org/message_boards/viewtopic.php?f=43&t=3367にクロスポストしましたが、これまでのところ回答はありません。