Как записать в фреймбуфер в regl? - PullRequest
Новая
       29

Как записать в фреймбуфер в regl?

0 голосов
/ 09 апреля 2019

Я пытаюсь обновить текстуру внутри кадрового буфера в 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 будет красным, но он останется зеленым.

Что я делаю не так?

1 Ответ

0 голосов
/ 10 апреля 2019

Очевидно, что если вы предоставляете функцию для команды 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, и я увидел, что он никогда не вызывался.

Я попробовал пример в readme для regl, и он это сделал.

Затем я прошел через код вотладчик, было не так глубоко увидеть, что он никогда не вызывал drawXXX, но если удалить функцию из updateColor, он вызвал drawXXX.Что касается того, как узнать, что regl.draw() это исправит, это было предположение.Это упомянуто в документах , но не ясно, что это правильно делать

...