レンダリングターゲットの幅と高さの更新

Question

既存の3Dシーンをテクスチャにレンダリングし、そのテクスチャを別のwebglプログラムの入力として使用するために、テクスチャとレンダバッファを作成しました。

以下は、シーンをテクスチャにレンダリングする処理を行うクラスの擬似コードです。

テクスチャの幅と高さを必要に応じて更新する最も良い方法は何ですか（ブラウザのサイズが変更された場合など）。毎回新しいテクスチャ/レンダリングバッファを作成する必要がありますか？

私が現在行っているより少ないコードでこれを行うことができるのだろうかと思いますか？

class Renderer { 
    constructor() { 
     // creates the texture and framebuffer for the first time 
     this.updateRTT(128, 128); 
    } 

    updateRTT(width, height) { 
     const gl = getContext(); 

     this.rttwidth = width; 
     this.rttheight = height; 
     console.log('update RTT', this.rttwidth, this.rttheight); 

     this.frameBuffer = gl.createFramebuffer(); 
     gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer); 

     this.texture = gl.createTexture(); 
     gl.bindTexture(gl.TEXTURE_2D, this.texture); 
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.rttwidth, this.rttheight, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 

     this.renderBuffer = gl.createRenderbuffer(); 
     gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderBuffer); 
     gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, this.rttwidth, this.rttheight); 
     gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); 
     gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, this.renderBuffer); 

     gl.bindTexture(gl.TEXTURE_2D, null); 
     gl.bindRenderbuffer(gl.RENDERBUFFER, null); 
     gl.bindFramebuffer(gl.FRAMEBUFFER, null); 
    } 

    render_to_target(width, height) { 
     // is there a better way to just update the texture/framebuffer? 
     if (this.rttwidth !== width || this.rttheight !== height) { 
      // if the width or height is different from the previous one, update the texture and framebuffer 
      this.updateRTT(width, height); 
     } 

     gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer); 

     // draw my scene here 


     gl.activeTexture(gl.TEXTURE0); 
     gl.bindTexture(gl.TEXTURE_2D, this.texture); 
     gl.generateMipmap(gl.TEXTURE_2D); 

     // clear 
     gl.bindTexture(gl.TEXTURE_2D, null); 
     gl.bindRenderbuffer(gl.RENDERBUFFER, null); 
     gl.bindFramebuffer(gl.FRAMEBUFFER, null); 
    } 
} 

Answer 1

そのようなどの属性レンダテクスチャ/リセットするのに十分な：

resize(width, height) { 
    // resize color attachment 
    gl.bindTexture(gl.TEXTURE_2D, this.texture); 
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 
    gl.bindTexture(gl.TEXTURE_2D, null); 

    // resize depth attachment 
    gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderBuffer); 
    gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, width, height); 
    gl.bindRenderbuffer(gl.RENDERBUFFER, null); 

    // update internal dimensions 
    this.rttwidth=width; 
    this.rttheight=height; 
} 

を