問題タブ [webgl2]

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 投票する
3 に答える
1087 参照

opengl-es - WebGL 2 のピクセルを Float 値として読み取る

フレームバッファのピクセルを float 値として読み取る必要があります。私の目標は、CPU と GPU の間で大量のパーティクルを高速に転送し、リアルタイムで処理することです。そのために、パーティクル プロパティを浮動小数点テクスチャに保存します。

新しいパーティクルが追加されるたびに、現在のパーティクル配列をテクスチャから取得し、新しいパーティクル プロパティを追加してからテクスチャに戻します (これは、パーティクルを動的に追加して処理するために考えられる唯一の方法です) GPU に関して)。

PIXEL_PACK_BUFFERターゲットへのピクセルの読み戻しをサポートしているため、WebGL 2 を使用しています。コードを Firefox Nightly でテストします。問題のコードは次のようになります。

コンソールに次のエラーが表示されます。

しかし、現在の WebGL 2 仕様を見ると、この関数呼び出しは可能なはずです。タイプを使用すると、gl.UNSIGNED_BYTEこのエラーも返されます。ArrayBufferView でピクセルを読み込もうとすると (かなり遅いように見えるので避けたい)、 and for a のフォーマット/タイプの組み合わせで機能しますが、and gl.RGBAfor gl.UNSIGNED_BYTEaでは機能Uint8Array()しません- これは文書化されているため、期待どおりです。 WebGL 仕様で。gl.RGBAgl.FLOATFloat32Array()

フレームバッファからフロートピクセル値を取得する方法、またはこのパーティクルパイプラインを実行する方法についての提案に感謝します。

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

opengl-es - webGL2 Uniform Buffer Object の使い方とレイアウト(std140)

トランスフォーム フィードバックを使用しようとして、webgl クロス シミュレーション プロジェクトに取り組んでいます。シミュレーションは頂点シェーダーで行われます。力を計算するには、頂点の隣接頂点にアクセスする必要があります。すべての頂点の位置を格納するために均一なバッファー オブジェクトを使用することを考えています。

以下のような均一ブロックを定義しました。

ただし、「レイアウト: 構文エラー」が発生しています。それはwebGL2でUBOを使用する正しい方法ですか? webGL2 仕様では、std140 レイアウトのみが均一ブロックでサポートされていると記載されていますが、なぜこのような構文エラーが発生するのでしょうか?

どうもありがとう!

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

webgl - webglはグラフィックスカードメモリにバッファリングされたデータを再配置しますか?

そこで、webgl を使用してバッファリングされたデータを管理するためのライブラリを作成しました。このライブラリは、単一のバッファのみを使用してグラフィックス カードのメモリ セグメンテーションを回避する方法を知っており、新しいオブジェクトが追加されたときに補充する空きメモリの最もぴったりした部分を見つける方法を知っています。必要に応じて、新しい値がベクトルに追加されるときに、より多くのスペースがある別の場所にメモリの一部をコピーする方法を教えてください。したがって、外部からはガベージ コレクションを完全に忘れることができ、append(新しい値を配列に追加するだけ) のような関数と、メモリを解放する別の関数を呼び出すことができます。ただし、webgl は現在 copyBufferSubData をサポートしていません。webgl2 ではこれを行うことができます。

そうでない場合は、古い webgl を使用するときにベクトルをメイン メモリに格納し、タイプごとに異なる方法で格納します。

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

graphics - WebGL2 で FBO に添付された深度テクスチャを読み取る方法

現在、WebGL2.0 を使用してディファード シェーディングに取り組んでいます。私が現在直面している主な問題の 1 つは、DEPTH_ATTACHMENT から深さの値を読み取れないことです。実際には、DEPTH24_STENCIL8 テクスチャを DEPTH_ATTACHMENT として使用して独自の GBuffer を作成し、このテクスチャをサンプラーにバインドして、次のような遅延シェーディング部分でフラグメント シェーダーの値を読み取ろうとします。

次に、シェーディング フラグメント シェーダーで出力として depthValue を設定します。

Firefox でこれを実行すると、エラーは報告されませんでしたが、出力色は純粋な赤です (これは vec3(1.0, 0.0, 0.0) を意味すると思います)。これは本当に私を混乱させます。誰でもいくつかの指示を提供できますか?glsl コードに問題はありますか? THX〜

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

javascript - sampler3D の使用時に WebGL 2.0 GLSL で発生した構文エラー

WebGL 2.0 を使用してブラウザで 3D 医療データをレンダリングしようとしています。

AFAIK 3D テクスチャが WebGL 2.0 でサポートされるようになりました。

texImage3D() は認識された関数呼び出しです。

フラグメント シェーダーを作成し、均一なサンプラーを宣言しています。

Firefox で実行すると、エラーが発生します。

キャッチされない例外: シェーダー コンパイル エラー: エラー: 0:19: 'sampler3D': 予約語の不正な使用 エラー: 0:19: 'sampler3D': 構文エラー

sampler2D を使用すると問題なく動作します (ただし、目的は解決しません)。

ここで何が間違っているのか、誰か教えてください。

sampler3D はまだサポートされていませんか? しかし、その場合、texImage3D() を使用してロードされたテクスチャはどのようにアクセスされるのでしょうか?

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

javascript - ND バッファーと G バッファーの違いは何ですか?

私は WebGL の初心者です。ND-Buffers と G-Buffers が WebGL 開発の戦略的な選択であるかのように、いくつかの投稿を読みました。

ND バッファーと G バッファーはパイプラインのレンダリングにどのように関連していますか? ND バッファーはフォワード レンダリングでのみ使用され、G バッファーは遅延レンダリングでのみ使用されますか?

両方を実装する JavaScript コード例は、違いを理解するのに役立ちます。

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

webgl2 - WebGL 2 でユニフォーム バッファ データを更新していますか?

OpenGL ES 3 とは異なり、gl.mapBufferRange andgl.bufferSubDataなし(存在する)、WebGL 2 で均一なバッファ データを更新する効率的な方法は何ですか? たとえば、PerDraw Uniform ブロック