Webgl 动态更新渲染目标的宽度和高度
我创建了一个纹理和一个renderbuffer,将现有的3d场景渲染为纹理,并将该纹理用作另一个webgl程序的输入 下面是处理将场景渲染为纹理的类的伪代码 例如,如果浏览器调整大小,根据需要更新纹理宽度和高度的最佳方法是什么?是否每次都需要创建新的纹理/渲染缓冲区 我想知道我是否可以用比现在更少的代码来完成这个任务Webgl 动态更新渲染目标的宽度和高度,webgl,Webgl,我创建了一个纹理和一个renderbuffer,将现有的3d场景渲染为纹理,并将该纹理用作另一个webgl程序的输入 下面是处理将场景渲染为纹理的类的伪代码 例如,如果浏览器调整大小,根据需要更新纹理宽度和高度的最佳方法是什么?是否每次都需要创建新的纹理/渲染缓冲区 我想知道我是否可以用比现在更少的代码来完成这个任务 class Renderer { constructor() { // creates the texture and framebuffer for th
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);
}
}
它足以重置纹理/渲染缓冲属性,如下所示:
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;
}
它足以重置纹理/渲染缓冲属性,如下所示:
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;
}