如何在regl中写入帧缓冲区？

Question

我试图在REGL中更新帧缓冲区内的纹理。但由于某种原因，它不会更新帧缓冲区。

这是完整的代码：

const regl = createREGL({
  extensions: 'OES_texture_float'
})

const initialTexture = regl.texture([
  [
    [0, 255, 0, 255]
  ]
])

const fbo = regl.framebuffer({
  color: initialTexture,
  depth: false,
  stencil: false,
})

const updateColor = regl({
  framebuffer: () => fbo,
  vert: `
    precision mediump float;
		
    attribute vec2 position;

    void main() {
      gl_Position = vec4(position, 0.0, 1.0);
    }
	`,
  frag: `
    precision mediump float;

    void main() {
      gl_FragColor = vec4(255.0, 0.0, 0.0, 255.0);
    }
	`,
  attributes: {
    // a triangle big enough to fill the screen
    position: [
     -4, 0,
      4, 4,
      4, -4
    ],
  },

  count: 3,
})

regl.clear({
  // background color (black)
  color: [0, 0, 0, 1],
  depth: 1,
});

updateColor(() => {
  console.log(regl.read())
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/regl/1.3.11/regl.min.js"></script>

• 我将initialTexture设置为绿色。
• 在updateColor命令中，我指定帧缓冲区使帧重缓冲渲染到帧缓冲区
• updateColor中的片段着色器呈现红色
• 在updateColor命令运行之后，我预计initialTexture是红色的，但它保持绿色。

我究竟做错了什么？

Answer 1

显然，如果你为regl命令提供一个函数，那么你必须手动绘制

updateColor(() => {
  regl.draw();   // manually draw
  console.log(regl.read())
});

我想重点是，如果你提供了一个函数，那么你要求自定义东西？

const regl = createREGL({
  extensions: 'OES_texture_float'
})

const initialTexture = regl.texture([
  [
    [0, 255, 0, 255]
  ]
])

const fbo = regl.framebuffer({
  color: initialTexture,
  depth: false,
  stencil: false,
})

const updateColor = regl({
  framebuffer: () => fbo,
  vert: `
    precision mediump float;
		
    attribute vec2 position;

    void main() {
      gl_Position = vec4(position, 0.0, 1.0);
    }
	`,
  frag: `
    precision mediump float;

    void main() {
      gl_FragColor = vec4(255.0, 0.0, 0.0, 255.0);
    }
	`,
  // Here we define the vertex attributes for the above shader
  attributes: {
    // regl.buffer creates a new array buffer object
    position: regl.buffer([
      [-2, -2],   // no need to flatten nested arrays, regl automatically
      [4, -2],    // unrolls them into a typedarray (default Float32)
      [4,  4]
    ])
    // regl automatically infers sane defaults for the vertex attribute pointers
  },
  count: 3,
})

regl.clear({
  // background color (black)
  color: [0, 0, 0, 1],
  depth: 1,
});

updateColor(() => {
  regl.draw();
  console.log(regl.read())
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/regl/1.3.11/regl.js"></script>

至于我是如何找到答案的，我首先检查了drawArrays和/或drawElements是通过添加来调用的

WebGLRenderingContext.prototype.drawArrays = function() {
  console.log('drawArrays');
}

和drawElements类似，我看到它从未被调用过。

我在regl自述文件中尝试了这个样本，但确实如此。

然后我逐步调试了调试器中的代码，看到它从未调用drawXXX并没有那么深，但是如果从updateColor中删除了函数，它确实调用了drawXXX。至于如何知道regl.draw()会解决这个问题。它被提及in the docs，但目前尚不清楚这是做什么的