如何在 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 命令中，我指定了帧缓冲区，使 regl 渲染到帧缓冲区
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 and/or drawElements 是通过添加

调用的

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

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

我尝试了 regl 自述文件中的示例，它成功了。

然后我逐步检查了调试器中的代码，发现它从未调用过 drawXXX 并没有那么深入，但如果从 updateColor 中删除该函数，它确实调用了 drawXXX。至于如何知道 regl.draw() 会修复它那是一个猜测。提到了 in the docs 但不清楚那是正确的做法

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

How to write to a framebuffer in regl?

javascript

framebuffer

regl