需要帮助使用香草 webgl 中的帧缓冲区将位置渲染到纹理

Question

我正在尝试使用 webgl 对渲染为点的粒子进行位置更新。我之前问过一些关于我正在玩 here and 的同一个项目的问题，这让我在路上有一段相当长的路要走。不幸的是，大多数答案都使用 twgl，对我来说，它需要很多我很难理解的捷径（所以我不想只是尝试复制它，而是从基础开始）。

基本上，我尝试使用一个帧缓冲区 + 程序渲染到纹理，然后在另一个程序中使用该纹理。

我不知道我是否未能渲染到 posTexture，是否成功渲染了 posTexture 以及之后是否无法加载到 renderProgram（因为两者都发生在 'blackbox' GPU).

我在这里做了一个没有 renderFramebuffer 的片段（它只是直接渲染到 canvas）来显示问题。问题的核心在javascript位的末尾，剩下的就是setup（可能有关系）：

function initShaderProgram(gl, vShader, fShader) {
  const shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vShader);
  gl.attachShader(shaderProgram, fShader);
  gl.linkProgram(shaderProgram);

  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    throw new Error('Unable to initiate webgl shaders. Breaking.');
  }

  return shaderProgram;
}

function loadShader(gl, type, source) {
  const shader = gl.createShader(type);

  gl.shaderSource(shader, source);

  gl.compileShader(shader);

  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    let err = gl.getShaderInfoLog(shader);
    gl.deleteShader(shader);
    throw new Error(`Unable to compile shaders. ${err}`);
  }

  return shader;
}

const c = document.getElementById("c");
const gl = c.getContext('webgl2');
const amParticles = 1;

if (gl === null || gl === undefined) {
  throw new Error('Unable to initiate webgl context. Breaking.');
}

// Extensions used for anti aliasing in rendering dots
let ext = gl.getExtension('EXT_color_buffer_float');
if (!ext) {
  throw new Error("need EXT_color_buffer_float");
}

ext = gl.getExtension('EXT_float_blend');
if (!ext) {
  throw new Error("need EXT_float_blend");
}

// Setup programs
const VsPos = document.getElementById("posVs").textContent;
const FsPos = document.getElementById("posFs").textContent;
const VsRender = document.getElementById("renderVs").textContent;
const FsRender = document.getElementById("renderFs").textContent;

const vShaderRender = loadShader(gl,
  gl.VERTEX_SHADER, VsRender);
const vShaderPosUpd = loadShader(gl,
  gl.VERTEX_SHADER, VsPos);
const fShaderRender = loadShader(gl,
  gl.FRAGMENT_SHADER, FsRender);
const fShaderPosUpd = loadShader(gl,
  gl.FRAGMENT_SHADER, FsPos);

// Setup shader
const renderProgram = initShaderProgram(gl,
  vShaderRender, fShaderRender);
const posProgram = initShaderProgram(gl,
  vShaderPosUpd, fShaderPosUpd);

// Setup global GL settings
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// Blending to allow opacity (probably unrelated)
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

// Setup posTexture to render new positions to
let posTexture, posFrameBuffer; {
  posTexture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, posTexture);
  // Make texture non-mips
  gl.texParameteri(gl.TEXTURE_2D,
    gl.TEXTURE_WRAP_S,
    gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D,
    gl.TEXTURE_WRAP_T,
    gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D,
    gl.TEXTURE_MIN_FILTER,
    gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D,
    gl.TEXTURE_MAG_FILTER,
    gl.NEAREST);
  const level = 0;
  const internalFormat = gl.RGBA32F;
  const border = 0;
  const format = gl.RGBA;
  const type = gl.FLOAT;
  // Example position pre-render
  const data = new Float32Array([.5, .5, 0, 0]);
  // height = 1, amount pixels = width, rgba = position
  gl.texImage2D(gl.TEXTURE_2D,
    level,
    internalFormat,
    amParticles,
    1,
    border,
    format,
    type,
    data);

  // Pos framebuffer
  posFrameBuffer = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER,
    posFrameBuffer);

  // Bind it to posTexture
  gl.framebufferTexture2D(gl.FRAMEBUFFER,
    gl.COLOR_ATTACHMENT0,
    gl.TEXTURE_2D,
    posTexture,
    level);

  if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !==
    gl.FRAMEBUFFER_COMPLETE) {
    console.error(`Something went wrong with setting up the the posFrameBuffer. Status: ${
    gl.checkFramebufferStatus(gl.FRAMEBUFFER)}`);
  }
}

gl.useProgram(posProgram);
gl.bindFramebuffer(gl.FRAMEBUFFER, posFrameBuffer);
gl.viewport(0, 0, amParticles, 1);
// Now (it should be?) drawing new positions to 
// texture posTexture
gl.drawArrays(gl.POINTS, 0, amParticles);

// Set new posTexture to texture unit 1
gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, posTexture);

gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.useProgram(renderProgram);
// Set uniform location to texture unit 1
const loc = gl.getUniformLocation(renderProgram, "t0_pos_tex");
gl.uniform1i(loc, 1);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
// Should draw with new position
gl.drawArrays(gl.POINTS, 0, amParticles);

#c {
  width: 400px;
  height: 200px;
}

.hide {
  display: none;
}

<canvas id="c"></canvas>

<p>
  If the circle is at the <b>left</b> side of the canvas, rendered by the posProgram, the experiment is successfull.
</p>

<div id="posFs" class="hide"># version 300 es
  #define M_PI 3.1415927

  precision highp float;

  out vec4 outColor;

  // Only renders one particle for the sake
  // of the example to a predetermined position
  void main() {
  // New position to render to (should appear
  // top-left ish)
  float new_x = -.5;
  float new_y = .5;

  outColor = vec4(new_x, new_y, 0., 1.);
  }
</div>

<div id="posVs" class="hide">#version 300 es
  // Does nothing since the fragment shader sets
  // the new position depending on the pixel
  // which indicates which index of the texture
  // = index of the new positions to update
  void main() {}
</div>

<div id="renderVs" class="hide"># version 300 es
  #define M_PI 3.1415927

  uniform sampler2D t0_pos_tex;

  out vec4 color;

  void main() {
    vec4 t0_pos = texelFetch(t0_pos_tex, ivec2(gl_VertexID,     0), 0);
    gl_Position = vec4(t0_pos.x, t0_pos.y, 0., 1.);
    color = vec4(1., 1., 1., 1.);
    gl_PointSize = 50.0;
  }
</div>

<div id="renderFs" class="hide"># version 300 es
  precision highp float;

  in vec4 color;

  out vec4 outColor;

// Turns point into a circle and adds
// antialiasing to make it smoothly round
  void main() {
    float r = 0.0, delta = 0.0, alpha = 1.0;
    vec2 cxy = 2.0 * gl_PointCoord - 1.0;
    r = dot(cxy, cxy);
    delta = fwidth(r);
    alpha = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r);

    outColor = color * alpha;
  }
</div>

Answer 1

您的 posVS 顶点着色器不执行任何操作，因此片段着色器不会渲染任何内容。为了渲染某些东西，顶点着色器必须通过设置 gl_Position 和 gl_PointSize 来生成一个点，或者它必须通过被调用两次并每次将 gl_Position 设置为不同的值来生成一条线，或者三角形被调用 3 次并每次将 gl_Position 设置为不同的值，所以这是第一个问题。

改成了这个

  void main() {
    // draw a single pixel
    gl_PointSize = 1.0;
    // in the center of the viewport
    gl_Position = vec4(0, 0, 0, 1);
  }

function initShaderProgram(gl, vShader, fShader) {
  const shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vShader);
  gl.attachShader(shaderProgram, fShader);
  gl.linkProgram(shaderProgram);

  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    throw new Error('Unable to initiate webgl shaders. Breaking.');
  }

  return shaderProgram;
}

function loadShader(gl, type, source) {
  const shader = gl.createShader(type);

  gl.shaderSource(shader, source);

  gl.compileShader(shader);

  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    let err = gl.getShaderInfoLog(shader);
    gl.deleteShader(shader);
    throw new Error(`Unable to compile shaders. ${err}`);
  }

  return shader;
}

const c = document.getElementById("c");
const gl = c.getContext('webgl2');
const amParticles = 1;

if (gl === null || gl === undefined) {
  throw new Error('Unable to initiate webgl context. Breaking.');
}

// Extensions used for anti aliasing in rendering dots
let ext = gl.getExtension('EXT_color_buffer_float');
if (!ext) {
  throw new Error("need EXT_color_buffer_float");
}

ext = gl.getExtension('EXT_float_blend');
if (!ext) {
  throw new Error("need EXT_float_blend");
}

// Setup programs
const VsPos = document.getElementById("posVs").textContent;
const FsPos = document.getElementById("posFs").textContent;
const VsRender = document.getElementById("renderVs").textContent;
const FsRender = document.getElementById("renderFs").textContent;

const vShaderRender = loadShader(gl,
  gl.VERTEX_SHADER, VsRender);
const vShaderPosUpd = loadShader(gl,
  gl.VERTEX_SHADER, VsPos);
const fShaderRender = loadShader(gl,
  gl.FRAGMENT_SHADER, FsRender);
const fShaderPosUpd = loadShader(gl,
  gl.FRAGMENT_SHADER, FsPos);

// Setup shader
const renderProgram = initShaderProgram(gl,
  vShaderRender, fShaderRender);
const posProgram = initShaderProgram(gl,
  vShaderPosUpd, fShaderPosUpd);

// Setup global GL settings
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// Blending to allow opacity (probably unrelated)
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

// Setup posTexture to render new positions to
let posTexture, posFrameBuffer; {
  posTexture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, posTexture);
  // Make texture non-mips
  gl.texParameteri(gl.TEXTURE_2D,
    gl.TEXTURE_WRAP_S,
    gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D,
    gl.TEXTURE_WRAP_T,
    gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D,
    gl.TEXTURE_MIN_FILTER,
    gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D,
    gl.TEXTURE_MAG_FILTER,
    gl.NEAREST);
  const level = 0;
  const internalFormat = gl.RGBA32F;
  const border = 0;
  const format = gl.RGBA;
  const type = gl.FLOAT;
  // Example position pre-render
  const data = new Float32Array([.5, .5, 0, 0]);
  // height = 1, amount pixels = width, rgba = position
  gl.texImage2D(gl.TEXTURE_2D,
    level,
    internalFormat,
    amParticles,
    1,
    border,
    format,
    type,
    data);

  // Pos framebuffer
  posFrameBuffer = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER,
    posFrameBuffer);

  // Bind it to posTexture
  gl.framebufferTexture2D(gl.FRAMEBUFFER,
    gl.COLOR_ATTACHMENT0,
    gl.TEXTURE_2D,
    posTexture,
    level);

  if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !==
    gl.FRAMEBUFFER_COMPLETE) {
    console.error(`Something went wrong with setting up the the posFrameBuffer. Status: ${
    gl.checkFramebufferStatus(gl.FRAMEBUFFER)}`);
  }
}

gl.useProgram(posProgram);
gl.bindFramebuffer(gl.FRAMEBUFFER, posFrameBuffer);
gl.viewport(0, 0, amParticles, 1);
// Now (it should be?) drawing new positions to 
// texture posTexture
gl.drawArrays(gl.POINTS, 0, amParticles);

// Set new posTexture to texture unit 1
gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, posTexture);

gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.useProgram(renderProgram);
// Set uniform location to texture unit 1
const loc = gl.getUniformLocation(renderProgram, "t0_pos_tex");
gl.uniform1i(loc, 1);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
// Should draw with new position
gl.drawArrays(gl.POINTS, 0, amParticles);

#c {
  width: 400px;
  height: 200px;
}

.hide {
  display: none;
}

<canvas id="c"></canvas>

<p>
  If the circle is at the <b>left</b> side of the canvas, rendered by the posProgram, the experiment is successfull.
</p>

<div id="posFs" class="hide"># version 300 es
  #define M_PI 3.1415927

  precision highp float;

  out vec4 outColor;

  // Only renders one particle for the sake
  // of the example to a predetermined position
  void main() {
  // New position to render to (should appear
  // top-left ish)
  float new_x = -.5;
  float new_y = .5;

  outColor = vec4(new_x, new_y, 0., 1.);
  }
</div>

<div id="posVs" class="hide">#version 300 es
  void main() {
    // draw a single pixel
    gl_PointSize = 1.0;
    // in the center of the viewport
    gl_Position = vec4(0, 0, 0, 1);
  }
</div>

<div id="renderVs" class="hide"># version 300 es
  #define M_PI 3.1415927

  uniform sampler2D t0_pos_tex;

  out vec4 color;

  void main() {
    vec4 t0_pos = texelFetch(t0_pos_tex, ivec2(gl_VertexID,     0), 0);
    gl_Position = vec4(t0_pos.x, t0_pos.y, 0., 1.);
    color = vec4(1., 1., 1., 1.);
    gl_PointSize = 50.0;
  }
</div>

<div id="renderFs" class="hide"># version 300 es
  precision highp float;

  in vec4 color;

  out vec4 outColor;

// Turns point into a circle and adds
// antialiasing to make it smoothly round
  void main() {
    float r = 0.0, delta = 0.0, alpha = 1.0;
    vec2 cxy = 2.0 * gl_PointCoord - 1.0;
    r = dot(cxy, cxy);
    delta = fwidth(r);
    alpha = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r);

    outColor = color * alpha;
  }
</div>

但是，我建议您花几分钟时间尝试理解 . Yes it uses TWGL because the point of explaining how to do particles does not also want to be a tutorial on the entirely of WebGL. It should be pretty obvious what twgl.createTexture does just by looking at the inputs. Similarly with, twgl.createFramebufferInfo and twgl.createBufferInfoFromArrays if not obvious are probably just a few seconds away from understanding. twgl.setBuffersAndAttributes and twgl.setUniforms do exactly what they say. If you've done either of those things manually in webgl it should be pretty clear what it means to "set buffers and attributes" and to "set uniforms". All that's left is twgl.drawBufferInfo

在任何情况下，使用 gl.POINTS 每个粒子一个点计算新粒子位置会更慢，而不是绘制一个具有 N 个像素的四边形，每个点一个像素。绘制您可能会使用的粒子 gl.POINTS 但不更新位置。

另一个注意事项：就像您在编译失败时打印着色器信息日志一样，您可能想在链接失败时打印程序信息日志。有很多错误只在链接期间发生。

需要帮助使用香草 webgl 中的帧缓冲区将位置渲染到纹理

Need help rendering positions to a texture using framebuffers in vanilla webgl

javascript

shader

textures

webgl