0

我正在尝试更新 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它是红色的，但它保持绿色。

我究竟做错了什么？

4

1 回答 1

0

显然，如果您为 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()会解决它，那是一个猜测。文档中提到了它，但不清楚这是正确的做法

于 2019-04-10T06:31:28.400 回答