перебирать большой объем данных в фрагментном шейдере - PullRequest
Новая
       20

перебирать большой объем данных в фрагментном шейдере

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

Я пытаюсь перебрать большой объем данных в моем фрагментном шейдере в webgl. Я хочу передать ему много данных и затем повторять каждый проход фрагмента шейдера. У меня есть некоторые проблемы с этим, хотя. Мои идеи были следующими: 1. передать данные в униформе шейдеру фрагмента, но я не могу отправить слишком много данных таким образом. 2. используйте буфер для отправки данных, как я делаю верты, в вершинный шейдер, а затем используйте переменные для отправки данных в шейдер фрагмента. к сожалению, это, кажется, связано с некоторыми проблемами. (а) различная интерполяция между векторами, и я думаю, что это вызовет проблемы с моим кодом (хотя, возможно, это неизбежно) (б), что более важно, я не знаю, как перебирать данные, которые я передаю в мой фрагментный шейдер. Я уже использую буфер для своих координат трехмерной точки, но как webgl обрабатывает второй буфер и данные, проходящие через него.

* Я хочу сказать, в каком порядке данные выбираются из каждого буфера (мой первый буфер, содержащий 3d-координаты и второй буфер, который я пытаюсь добавить)? наконец, как указано выше, если я хочу перебрать все данные, передаваемые для каждого прохода фрагмента шейдера, как я могу это сделать? *

Я уже пытался использовать унифицированный массив и перебирать его в моем фрагментном шейдере, но я столкнулся с ограничениями, которые, я считаю, так как существует относительно небольшое ограничение на размер для униформ. В настоящее время я пробую второй метод, упомянутый выше. 

//pseudo code

vertexCode = `

attribute vec4 3dcoords;
varying vec4 3dcoords;

??? ??? my_special_data;


void main(){...}

`


fragCode = `

varying vec4 3dcoords;

void main(){

...

// perform math operation on 3dcoords for all values in my_special_data variable and store in variable my_results

if( my_results ... ){

gl_FragColor += ...;

}

`

1 Ответ

1 голос
/ 16 апреля 2019

Текстуры в WebGL представляют собой двухмерные массивы данных с произвольным доступом, поэтому их можно использовать для чтения большого количества данных. Пример: 

const width = 256;
const height = 256;
const vs = `
attribute vec4 position;
void main() {
  gl_Position = position;
}
`;
const fs = `
precision highp float;
uniform sampler2D tex;
const int width = ${width};
const int height = ${height};
void main() {
  vec4 sums = vec4(0);
  for (int y = 0; y < height; ++y) {
    for (int x = 0; x < width; ++x) {
      vec2 xy = (vec2(x, y) + 0.5) / vec2(width, height);
      sums += texture2D(tex, xy);
    }
  }
  gl_FragColor = sums;
}
`;

function main() {
  const gl = document.createElement('canvas').getContext('webgl');
  // check if we can make floating point textures
  const ext1 = gl.getExtension('OES_texture_float');
  if (!ext1) {
    return alert('need OES_texture_float');
  }
  // check if we can render to floating point textures
  const ext2 = gl.getExtension('WEBGL_color_buffer_float');
  if (!ext2) {
    return alert('need WEBGL_color_buffer_float');
  }

  // make a 1x1 pixel floating point RGBA texture and attach it to a framebuffer
  const framebufferInfo = twgl.createFramebufferInfo(gl, [
    { type: gl.FLOAT, },
  ], 1, 1);
  
  // make random 256x256 texture
  const data = new Uint8Array(width * height * 4);
  for (let i = 0; i < data.length; ++i) {
    data[i] = Math.random() * 256;
  }
  const tex = twgl.createTexture(gl, {
    src: data,
    minMag: gl.NEAREST,
    wrap: gl.CLAMP_TO_EDGE,
  });
  
  // compile shaders, link, lookup locations
  const programInfo = twgl.createProgramInfo(gl, [vs, fs]);
  
  // create a buffer and put a 2 unit
  // clip space quad in it using 2 triangles
  const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
    position: {
      numComponents: 2,
      data: [
        -1, -1,
         1, -1,
        -1,  1,
        -1,  1,
         1, -1,
         1,  1,
      ],
    },
  });

  // render to the 1 pixel texture
  gl.bindFramebuffer(gl.FRAMEBUFFER, framebufferInfo.framebuffer);
  // set the viewport for 1x1 pixels
  gl.viewport(0, 0, 1, 1);
  gl.useProgram(programInfo.program);
  // calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  // calls gl.activeTexture, gl.bindTexture, gl.uniformXXX
  twgl.setUniforms(programInfo, {
    tex,
  });
  const offset = 0;
  const count = 6;
  gl.drawArrays(gl.TRIANGLES, offset, count);

  // read the result
  const pixels = new Float32Array(4);
  gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.FLOAT, pixels);
  console.log('webgl sums:', pixels);
  const sums = new Float32Array(4);
  for (let i = 0; i < data.length; i += 4) {
    for (let j = 0; j < 4; ++j) {
      sums[j] += data[i + j] / 255;
    }
  }
  console.log('js sums:', sums);
}

main();
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
...