質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
GLSL

GLSL (OpenGL Shading Language) はC言語をベースとしたシェーディング言語です。

GLSL ES

GLSL ESは、GLSLの派生規格で、 組み込み環境向けのOpenGL ES用のシェーダー言語です。

WebGL

WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。

Q&A

解決済

4回答

2958閲覧

webGL2.0のGPGPUでgl_VertexIDが機能してない?

ukey

総合スコア12

GLSL

GLSL (OpenGL Shading Language) はC言語をベースとしたシェーディング言語です。

GLSL ES

GLSL ESは、GLSLの派生規格で、 組み込み環境向けのOpenGL ES用のシェーダー言語です。

WebGL

WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。

0グッド

1クリップ

投稿2018/01/13 10:44

編集2018/01/13 10:45

webGL2.0で,transformFeedBackを使ってGPGPUを行なっています.やってることはただのピンポンで,レンダリングするたびにvertexBufferをtransformFeedbackBufferと入れ替えるプログラムです.
そこで毎回,頂点座標にgl_VertexIDを足して更新する,といったプログラムにしたいのですが,一度目はちゃんと足され,二度目以降更新がされなくなります.

以下一部を抜粋したコードです

js

1 var particleNum=10; 2 var position = new Array(particleNum*3); 3 for (var i = 0; i < position.length; i++) { 4 position[i] = 0; 5 } 6 let vPosition = create_vbo(position); 7 vAttLocation[0] = gl.getAttribLocation(prg, "position"); 8 vAttStride[0] = 3; 9 10 const vTransformFeedback = [gl.createBuffer()]; 11 const transformFeedback = [gl.createTransformFeedback()]; 12 gl.bindBuffer(gl.ARRAY_BUFFER, vTransformFeedback[0]); 13 gl.bufferData(gl.ARRAY_BUFFER, Float32Array.BYTES_PER_ELEMENT * position.length , gl.DYNAMIC_COPY); 14 gl.bindBuffer(gl.ARRAY_BUFFER, null); 15 16 (function () { 17 set_attribute([vPosition], vAttLocation, vAttStride); 18 gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback[0]); 19 gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, vTransformFeedback[0]); 20 gl.beginTransformFeedback(gl.POINTS); 21 gl.drawArrays(gl.POINTS, 0, position.length/3); 22 gl.endTransformFeedback(); 23 var arrBuffer = new Float32Array(position.length); 24 gl.getBufferSubData(gl.TRANSFORM_FEEDBACK_BUFFER, 0, arrBuffer); 25 console.log(arrBuffer); 26 gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, null); 27 var temp = vPosition; 28 vPosition = vTransformFeedback[0]; 29 vTransformFeedback[0] = temp; 30 gl.flush(); 31 setTimeout(arguments.callee,1000); 32 //requestAnimationFrame(arguments.callee); 33 })();

glsl

1 void main(void){ 2 gl_Position=vec4(position,1.0); 3 outPosition=position+vec3(float(gl_VertexID)); 4 }

コンソール結果です
コンソール結果

なってほしい結果はこんな感じです
イメージ説明
ちなみにこれは,gl_VertexIDの代わりに頂点属性として自分でIDを設定した場合の画像です.
同じことしてるはずなんですけどちゃんと動いてるのでやっぱりgl_VertexIDがちゃんと機能してないのかな?と思いました
https://qiita.com/nami634/items/afc9ac7956bb21f76517
ここ見るとgl_VertexIDは必ず存在するけど定義されてない場合がある.と書いてあったのでその場合かなとも思いました.どのような場合に定義されないのか,といったことを知りたいです(上記の通り,他の方法でプログラムはできているのでそこは大丈夫です)よろしくお願いします.

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

こちら手持ちのWindowsで実行してみたところ正常に動作しました

回答にもありますが,ハードの性能のせいぽいです.....

お騒がせいたしました

投稿2018/01/17 08:56

ukey

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

OpenGL ES 3.0の仕様書の2.12.9.5 Shader Inputsにこうあります
https://www.khronos.org/registry/OpenGL/specs/es/3.0/es_spec_3.0.pdf

The value of gl_VertexID is defined if and only if all enabled vertex arrays have non-zero buffer object bindings.

これが原因かはわかりませんが。
(ANGLEバックエンドによるDirectXトランスレーション実行と、OpenGL系実装で挙動が異なる可能性を疑いましたが、Macでも正常動作していたので、謎ですね。doxasさんのおっしゃる通り、ハードウェアまたはドライバかもしれません。Windowsなどで、ドライバをアップデートできる環境であれば、アップデートを試してみてはいかがでしょうか。)

あともう一つの原因としてありうるのは、gl_VertexIDは有効な値が入っているが、transform_feedbackがうまく動作していない環境がある、というものでしょうか?

投稿2018/01/13 14:01

編集2018/01/13 14:07
EMADURANDAL

総合スコア41

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ukey

2018/01/13 14:36

ちょっと意味はよくわかりませんが,buffer objectへのバインドについて書いてありますね......やっていることも見事に関係しているのでそこらへんが怪しそうではあります ありがとうございます.そこらへんちょっと考えてみたいと思います
guest

0

ベストアンサー

ukey さん、コードの提供ありがとうございます。
早速いただいた内容をそのまま実行してみたところ……

イメージ説明

ふつうにうまくいってしまいました……

私がテストに使った環境は以下のようになっています。

Windows 10 Home
Intel Core i7-7700K 4.2GHz
GTX 1080 Ti
GeForce のドライバは 390.65

環境というか、ドライバによってはこういった不具合が出る場合もある、というのが正しい答えなのかもしれません……

もしくは、私の環境では「ソースに不具合があってもうまく動いてしまう」という可能性もあり得ます。ただ、あらためて全体像を見てみた感じでも、おかしなところは一見なさそうに見えます。もしも当方でも同じ現象が起こるようだったらひとつひとつ検証してみることもできるのですが、如何せんうまくいってしまったので、これ以上はちょっとわからなさそうです……すみません。

もしかしたら、他の方が別の可能性を回答してくださるかもしれませんが、環境についてはもう少し具体的に書かないと、今回のような「あっちではうまくいったがこっちではダメ」みたいなことが起こりやすいかと思います。

WebGL は普通のフロントエンドの実装とは違い、ブラウザだけでなく、ハードウェアの影響も受けますので、そのあたりも掲示するようにするといいかもしれません。

投稿2018/01/13 13:19

doxas

総合スコア112

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ukey

2018/01/13 14:32

なるほど,お手数おかけしましたありがとうございます.......... あまり自分のコードを信用してないので環境については考慮していませんでした.これからwebGLについて質問する際は環境についても考慮いたします.... ちなみにですが,僕の環境については, MacBook Air (13-inch, Early 2015) CPU 2.2 GHz Intel Core i7 メモリ 8 GB 1600 MHz DDR3 となっております.もしお役立てできそうでしたらお使いください また,ブラウザはgoogle chrome, chrome canary, firefox などで試してみました.全部ダメだったのでハードのせいっぽいです.また今度Windowsでも試してみようと思います お付き合いいただきありがとうございました
doxas

2018/01/13 18:46

ukey さん、わざわざ環境までお知らせくださってありがとうございます。 Air の Early 2015 ということは Intel HD Graphics 6000 が積まれている……と思うんですけど、Intel Iris Graphics だと大丈夫みたいです(MacBook Pro Mid 2014) このあたり、なんとか原因追求を一緒にしていきたい気持ちが強いのですが、いかんせん、手元の環境では全部うまくいってしまっていて、環境特有の問題である可能性が高そうな印象です。ピンポイントなアドバイスができず、本当に申し訳ない…… なにか新しい手がかりがつかめたら、ここに投げるようにします!
ukey

2018/01/14 01:10

ありがとうございます!!こちらでも何か進展がありましたら解決として載せたいと思います
guest

0

こんばんは。

ソースの全体像が見えないので、確実な解決方法になるかどうかは確約しにくいのですが……

この質問を拝見してから、私のほうでも同様の状態を実装してみようと思ってやってみましたが、少なくとも私の環境では同様の問題は再現しませんでした。(ドライバによって挙動が違う可能性はもちろんありますが……)

原因として考えられるのではと思う点としては、transform feedback 用にフォーマットされた VBO を使っているのかなあというのが気になりました。

vTransformFeedbackgl.DYNAMIC_COPY でフォーマットされていて、こっちは問題ないと思います。ただ先に生成されている vPosition のほうは create_vbo という恐らく独自関数のほうで生成している感じですよね。この中身は、どうなってるんでしょうか。

シェーダや GLSL の問題というよりは、単にこういった初期化やバインドの手順など、WebGL の API の使い方の問題なのではないかなあという感じがします。

確認してみていただければと思います。

投稿2018/01/13 12:18

doxas

総合スコア112

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ukey

2018/01/13 12:51 編集

そうですよね....完全に他の部分だと思っていたので肝心のコードの全体を載せませんでした.すみません 確認してみましたが,まだちょっとよくわからないので,create_vboの中身も含めてですが,一応全体のコードを載せておきます "main.js" window.addEventListener("load", function () { var canvas = document.getElementById("canvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var gl = canvas.getContext("webgl2"); var prg = create_program(create_shader("vs"), create_shader("fs")); var vAttLocation = new Array(); var vAttStride = new Array(); var particleNum = 10; var position = new Array(particleNum * 3); var id = new Array(); for (var i = 0; i < position.length; i++) { position[i] = 0; id[i] = i; } let vPosition = create_vbo(position); vAttLocation[0] = gl.getAttribLocation(prg, "position"); vAttStride[0] = 3; let vId = create_vbo(id); vAttLocation[1] = gl.getAttribLocation(prg, "id"); vAttStride[1] = 1; const vTransformFeedback = [gl.createBuffer()]; const transformFeedback = [gl.createTransformFeedback()]; gl.bindBuffer(gl.ARRAY_BUFFER, vTransformFeedback[0]); gl.bufferData(gl.ARRAY_BUFFER, Float32Array.BYTES_PER_ELEMENT * position.length, gl.DYNAMIC_COPY); gl.bindBuffer(gl.ARRAY_BUFFER, null); gl.enable(gl.BLEND); gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE); gl.clearColor(0, 0, 0, 1); (function () { set_attribute([vPosition, vId], vAttLocation, vAttStride); gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback[0]); gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, vTransformFeedback[0]); gl.beginTransformFeedback(gl.POINTS); gl.drawArrays(gl.POINTS, 0, position.length / 3); gl.endTransformFeedback(); var arrBuffer = new Float32Array(position.length); gl.getBufferSubData(gl.TRANSFORM_FEEDBACK_BUFFER, 0, arrBuffer); console.log(arrBuffer); gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, null); var temp = vPosition; vPosition = vTransformFeedback[0]; vTransformFeedback[0] = temp; gl.flush(); // requestAnimationFrame(arguments.callee); setTimeout(arguments.callee, 1000); })(); function create_shader(id) { let shader; const scriptElement = document.getElementById(id); if (!scriptElement) { return; } switch (scriptElement.type) { case "x-shader/x-vertex": shader = gl.createShader(gl.VERTEX_SHADER); break; case "x-shader/x-fragment": shader = gl.createShader(gl.FRAGMENT_SHADER); break; default: return; } gl.shaderSource(shader, scriptElement.text); gl.compileShader(shader); if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { return shader; } else { alert(gl.getShaderInfoLog(shader)); console.log(gl.getShaderInfoLog(shader)); } } function create_program(vs, fs) { const program = gl.createProgram(); gl.attachShader(program, vs); gl.attachShader(program, fs); gl.transformFeedbackVaryings(program, ["outPosition"], gl.SEPARATE_ATTRIBS); gl.linkProgram(program); if (gl.getProgramParameter(program, gl.LINK_STATUS)) { gl.useProgram(program); return program; } else { return null; } } function create_vbo(data) { const vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.DYNAMIC_COPY); gl.bindBuffer(gl.ARRAY_BUFFER, null); return vbo; } function set_attribute(vbo, attL, attS) { for (let i in vbo) { gl.bindBuffer(gl.ARRAY_BUFFER, vbo[i]); gl.enableVertexAttribArray(attL[i]); gl.vertexAttribPointer(attL[i], attS[i], gl.FLOAT, false, 0, 0); } } }); "index.html" <!DOCTYPE html> <html> <head> <meta charset="utf8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimum-scale=1,maximum-scale=1"> <style> body { margin: 0px; overflow: hidden; } </style> <script src="main.js"></script> <script id="vs" type="x-shader/x-vertex">#version 300 es #define PI 3.141592 in vec3 position; in float id; out vec3 outPosition; void main(void){ float vId=id; gl_Position=vec4(position,1.0); outPosition=position+vec3(float(gl_VertexID)); //outPosition=position+vec3(vId); } </script> <script id="fs" type="x-shader/x-fragment">#version 300 es precision highp float; out vec4 outColor; void main(void){ outColor=vec4(1.0,0.0,0.0,0.5); } </script> </head> <body> <canvas id="canvas"></canvas> </body> </html> このようになっております.お手数をお掛けしますが,何かわかりましたらまたよろしくお願いいたします
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問