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

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

ただいまの
回答率

90.76%

  • WebGL

    75questions

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

  • GLSL

    45questions

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

  • GLSL ES

    5questions

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

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

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 278

ukey

score 4

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は必ず存在するけど定義されてない場合がある.と書いてあったのでその場合かなとも思いました.どのような場合に定義されないのか,といったことを知りたいです(上記の通り,他の方法でプログラムはできているのでそこは大丈夫です)よろしくお願いします.

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

checkベストアンサー

0

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

イメージ説明

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

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

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/13 23: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でも試してみようと思います

    お付き合いいただきありがとうございました

    キャンセル

  • 2018/01/14 03:46

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

    キャンセル

  • 2018/01/14 10:10

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

    キャンセル

0

こんばんは。

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

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/13 21:50 編集

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

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

    キャンセル

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 23:36

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

    キャンセル

0

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

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

お騒がせいたしました

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.76%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • WebGL

    75questions

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

  • GLSL

    45questions

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

  • GLSL ES

    5questions

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