2つのテクスチャを切り替えるにはどうすればいいですか？

Question

私はテクスチャに描画しようとしているので、レンダリングは互いに重ね合わされていきます。 2つのテクスチャと2つのフレームバッファを使用しています。 テクスチャ[0]はフレームバッファ[0]に添付され、テクスチャ[1]はフレームバッファ[1]に添付されます。

問題は、以前のレンダリングがテクスチャに保存されていないことです。 私は、bindframebuffer（）がテクスチャにレンダリングされると考えました。 私のフラグメントシェーダ：

precision mediump float;         // fragment shaders don't have a default precision so we need to pick one. mediump is a good default 

    varying vec2 v_texCoord;         // the texCoords passed in from the vertex shader. 

    uniform vec2 u_resolution;         // a uniform 
    uniform vec2 u_mouse; 

    uniform sampler2D u_image;        // this isn't set, so it will default to 0 (the current active texture) 
void main() {  

     vec4 texColor = texture2D(u_image, v_texCoord);   // Look up a color from the texture. 

     vec2 coord = vec2(gl_FragCoord.x,u_resolution.y-gl_FragCoord.y); 

     vec4 color = step(distance(coord,u_mouse),100.0)*vec4(1,0,0,1) + step(100.0,distance(coord,u_mouse))*texColor; 


     gl_FragColor = color;     // gl_FragColor is a special variable a fragment shader is responsible for setting 
    } 

u_imageは、アクティブな質感を0をデフォルトに設定されています。

私は見落としているものはありますか？なぜ以前のレンダリングは互いに重ね合わされていませんか？あたかもテクスチャが変更されていないかのように最新のレンダリングを表示しています。ここ

は、頂点シェーダである：

precision mediump float; 

    attribute vec2 a_position;         // an attribute will receive data from a buffer 
    attribute vec2 a_texCoord; 
    varying vec2 v_texCoord;         // a varying 
    uniform vec2 u_resolution;         // a uniform 
    uniform vec2 u_mouse; 
    uniform float u_flip; 

    // all shaders have a main function 
    void main() { 
     v_texCoord = a_texCoord;        // pass the texCoord to the fragment shader.The GPU will interpolate this value between points 

     vec2 zeroToOne = a_position/u_resolution;  // convert the position from pixels to 0.0 to 1.0 
     vec2 zeroToTwo = zeroToOne * 2.0;    // convert from 0->1 to 0->2 
     vec2 clipSpace = zeroToTwo - 1.0;     // convert from 0->2 to -1->+1 (clipspace) 

     // gl_Position is a special variable a vertex shader is responsible for setting 
     gl_Position = vec4(clipSpace * vec2(1, u_flip), 0, 1); 
    } 

Answer 1

私はあなたが何をしているかをエミュレートしようとした：

loop.flexStep = function(){ 
    gl.clear(gl.COLOR_BUFFER_BIT); 

    pingPong.pingPong().applyPass(//pingPong() just swaps the FBOs and return the current FBO being draw to 
     "outColor += src0 * 0.98;", 
     pingPong.otherTexture() // the src0 texture 
    ); 
    points.drawPoint([mouse.x, mouse.y, 0 ]); 
    points.renderAll(camera); 

    screenBuffer.applyPass(
     "outColor = src0;", 
     pingPong.resultFBO // src0 
    ); 
}; 

をここでは、（代わりに円のgl.POINTS）のようになります。

ここにglコマンドがあります。

フレームバッファが最初に正しく設定されているかどうかを確認する必要があります。その部分はそれほど難しいとは言えません。

また、シェーダを分離することを検討してください。以前のテクスチャの結果を現在のpingPong FBOテクスチャにコピー/変更するには、ピンポンステージに1つのシェーダが必要です。現在のpingPong FBOテクスチャに新しいものを描画するシェーダもあります。

Answer 2

間違ったテクスチャ座標を取得したり、テクスチャを反転したりすることが問題でした。 これは期待どおりに機能しています。あなたは、シェーダが何を期待するかに説明でき

this.vertex = ` 
    precision mediump float; 

    attribute vec2 a_position;         // an attribute will receive data from a buffer 
    attribute vec2 a_texCoord; 
    varying vec2 v_texCoord;         // a varying 
    uniform vec2 u_resolution;         // a uniform 
    uniform vec2 u_mouse; 
    uniform float u_flip; 

    // all shaders have a main function 
    void main() { 
     v_texCoord = a_texCoord/u_resolution;        // pass the texCoord to the fragment shader.The GPU will interpolate this value between points 

     vec2 zeroToOne = a_position/u_resolution;  // convert the position from pixels to 0.0 to 1.0 
     vec2 zeroToTwo = zeroToOne * 2.0;    // convert from 0->1 to 0->2 
     vec2 clipSpace = zeroToTwo - 1.0;     // convert from 0->2 to -1->+1 (clipspace) 

     // gl_Position is a special variable a vertex shader is responsible for setting 
     gl_Position = vec4(clipSpace * vec2(1, u_flip), 0, 1); 
    } 

`; 

this.fragment = ` 

    precision mediump float;         // fragment shaders don't have a default precision so we need to pick one. mediump is a good default 

    varying vec2 v_texCoord;         // the texCoords passed in from the vertex shader. 

    uniform vec2 u_resolution;         // a uniform 
    uniform vec2 u_mouse; 
    uniform float u_flip; 

    uniform sampler2D u_image;        // this isn't set, so it will default to 0 (the current active texture) 
    uniform sampler2D u_texture0; 
    uniform sampler2D u_texture1; 

    void main() {  

     vec4 texColor = texture2D(u_image, v_texCoord);   // Look up a color from the texture. 

     vec2 coord = vec2(gl_FragCoord.x, step(0.0,u_flip)*gl_FragCoord.y + step(u_flip,0.0)*(u_resolution.y-gl_FragCoord.y)); 

     vec4 color = step(distance(coord,u_mouse),100.0)*vec4(1,0,0,1) + step(100.0,distance(coord,u_mouse))*texColor; 


     gl_FragColor = color;     // gl_FragColor is a special variable a fragment shader is responsible for setting 
    } 

`;