如何在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>

​

至于我是如何找到答案的，我首先通过添加

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

与我和drawElements相似的是，它从来没有被调用过。

我在regl自述中试过这个样本，结果它成功了。

然后，我在调试器中遍历代码，看到它从未调用drawXXX并不是很深入，但是如果从updateColor中删除了函数，它就调用了drawXXX。至于如何知道regl.draw()会解决这个问题，这还只是猜测。上面提到了在医生里，但还不清楚该怎么做