预编译多个程序

Question

到目前为止，我已经在渲染输出的纹理与使用的输入数据（纹理）具有良好的成功

在速度的利益，我想了一组预编译的WebGL程序的准备“使用”这取决于我想要做的

是有可能（伪代码）

 createProgram #1
 createProgram #2
 createProgram #3
 createProgram #4

1: useProgram #1
2: attach selected frame buffers/uniforms
3: setViewPort (depended on output framebuffer attached texture)
3: drawArrays
4: readPixels

在这一点上，我想使用其他程序（＃2为例）会发生什么所附的制服和缓冲区编程＃1，我需要清除它们？我可以LEAV他们在的地方，后来再使用它们？

如果我发出“useProgram＃1”是我所有的选择方案＃1活动制服和帧缓存仍然完好无缺？

Answer 1

是的，你可以在初始化时多个程序的设置。这是做正常的事情。

笔记：

Uniform locations are unique to each program

例如让我们2着色器程序具有完全相同的内容，并尝试从一个程序与其他程序使用统一的位置。

const gl = document.querySelector('canvas').getContext('webgl');

const vs = `
void main() {
  // draw a 10 pixel "POINT" in the center of the canvas
  gl_PointSize = 10.0;
  gl_Position = vec4(0, 0, 0, 1);
}
`;

const fs = `
precision mediump float;
uniform vec4 color;
void main() {
  gl_FragColor = color;
}
`;

// make 2 identical programs
// compile shaders, link programs
const p1 = twgl.createProgram(gl, [vs, fs]);
const p2 = twgl.createProgram(gl, [vs, fs]);

// look up color location from first program
const colorLoc = gl.getUniformLocation(p1, 'color');

// try to use colorLoc with second program
gl.useProgram(p2);  // make p2 the current program
gl.uniform4fv(colorLoc, [1, 0, 0, 1]);

console.log('error:', glEnumToString(gl, gl.getError()));

function glEnumToString(gl, v) {
  return Object.keys(WebGLRenderingContext.prototype)
      .filter(k => gl[k] === v)
      .join(' | ');
}

<canvas></canvas>
<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>

它失败INVALID_OPERATION。你需要查找单独为每个程序位置

uniform state is per program

因此，例如，让我们做出同样的程序，我们将设置对他们的制服和他们渲染之前表明统一设置为“每个程序”

const gl = document.querySelector('canvas').getContext('webgl');

const vs = `
attribute vec4 position;
void main() {
  // draw a 10 pixel "POINT" in the center of the canvas
  gl_PointSize = 10.0;
  gl_Position = position;
}
`;

const fs = `
precision mediump float;
uniform vec4 color;
void main() {
  gl_FragColor = color;
}
`;

// make 3 identical programs
// compile shaders, link programs, force position to location 0 by calling 
// bindAttribLocation
const p1 = twgl.createProgram(gl, [vs, fs], ['position']);
const p2 = twgl.createProgram(gl, [vs, fs], ['position']);
const p3 = twgl.createProgram(gl, [vs, fs], ['position']);

// look up color location for each program
const colorLocP1 = gl.getUniformLocation(p1, 'color');
const colorLocP2 = gl.getUniformLocation(p2, 'color');
const colorLocP3 = gl.getUniformLocation(p3, 'color');

// set the color uniform on each program
gl.useProgram(p1);
gl.uniform4fv(colorLocP1, [1, 0, 0, 1]);
gl.useProgram(p2);
gl.uniform4fv(colorLocP2, [0, 1, 0, 1]);
gl.useProgram(p3);
gl.uniform4fv(colorLocP3, [0, 0, 1, 1]);

// draw with each program
const positionIndex = 0; 
gl.vertexAttrib2f(positionIndex, -0.5, 0);
gl.useProgram(p1);
gl.drawArrays(gl.POINTS, 0, 1);  // draw 1 point

gl.vertexAttrib2f(positionIndex, 0.0, 0);
gl.useProgram(p2);
gl.drawArrays(gl.POINTS, 0, 1);  // draw 1 point

gl.vertexAttrib2f(positionIndex, 0.5, 0);
gl.useProgram(p3);
gl.drawArrays(gl.POINTS, 0, 1);  // draw 1 point

<canvas></canvas>
<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>

attributes are part of vertex array state

每个启用属性都有，当你调用vertexAttribPointer附加缓冲

texture units are global state.

其纹理单元的特定节目的均匀的样器使用是程序的状态（它是一个均匀的，所以它的编程状态）。但每一个纹理单元是什么质地的全局状态。换句话说，如果你有一个着色器程序

uniform sampler2D foo;

然后你告诉着色器程序，纹理单元与使用

gl.uniform1i(fooLocation, indexOfTextureUnit);

但是，但是状态，如果每个纹理单元本身是全球性的状态。例如，如果它在JavaScript中实施

gl = {
  activeTexture: 0,
  textureUnits: [
    { TEXTURE_2D: null, TEXTURE_CUBE_MAP: null, ... },
    { TEXTURE_2D: null, TEXTURE_CUBE_MAP: null, ... },
    { TEXTURE_2D: null, TEXTURE_CUBE_MAP: null, ... },
    { TEXTURE_2D: null, TEXTURE_CUBE_MAP: null, ... },
    { TEXTURE_2D: null, TEXTURE_CUBE_MAP: null, ... },
    { TEXTURE_2D: null, TEXTURE_CUBE_MAP: null, ... },
    ... MAX_COMBINED_TEXTURE_UNITS ...
  ],
};

和操纵纹理的功能对这些单位这样的工作

gl = {
  activeTexture(unitEnum) {
    this.activeTexture = unitEnum - gl.TEXTURE0;
  }
  bindTexture(target, texture) {
    const textureUnit = this.textureUnits[this.activeTexture];
    textureUnit[target] = texture;
  }
  texImage2D(target, ...args) {
    const textureUnit = this.textureUnits[this.activeTexture];
    updateDataToTexture(textureUnit[target], ...args);
  }
}

Current framebuffer bindings are global state.