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和/或drawElements

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

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

我在regl自述文件中尝试了该示例，并且确实如此。

然后，我在调试器中遍历了代码，看到它从未调用drawXXX并没有那么深，但是如果从updateColor中删除了该函数，它将调用drawXXX。至于如何知道regl.draw()会解决这个问题，这只是一个猜测。其中提到了in the docs，但不清楚这是正确的做法

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

1 个答案: