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

Question

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

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

    var particleNum=10;
    var position = new Array(particleNum*3);
    for (var i = 0; i < position.length; i++) {
        position[i] = 0;
    }
    let vPosition = create_vbo(position);
    vAttLocation[0] = gl.getAttribLocation(prg, "position");
    vAttStride[0] = 3;   
 
   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);

    (function () {         
        set_attribute([vPosition], 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();
        setTimeout(arguments.callee,1000);
        //requestAnimationFrame(arguments.callee);        
    })();

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

コンソール結果です

なってほしい結果はこんな感じです

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

Answer 1

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

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

お騒がせいたしました

Answer 2

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がうまく動作していない環境がある、というものでしょうか？

Comments

[ukey]

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

Answer 3

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

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

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

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

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

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

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

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

Comments

[ukey]

なるほど，お手数おかけしましたありがとうございます..........
あまり自分のコードを信用してないので環境については考慮していませんでした．これから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]

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

[ukey]

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

Answer 4

こんばんは。

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

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

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

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

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

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

Comments

[ukey]

そうですよね....完全に他の部分だと思っていたので肝心のコードの全体を載せませんでした．すみません
確認してみましたが，まだちょっとよくわからないので，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>

このようになっております．お手数をお掛けしますが，何かわかりましたらまたよろしくお願いいたします