到目前为止，在使用输入数据（纹理）渲染为输出纹理方面，我取得了很好的成功
在速度的利益，我想了一组预编译的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” 是所有的i选择用于程序活性制服和帧缓冲区＃1仍然完好无损??
答案 0 :(得分：0)
是的，您可以在初始化时设置多个程序。那是正常的事情。
注释：
例如，让我们制作两个具有完全相同内容的着色器程序，然后尝试将一个程序与另一个程序使用统一的位置。
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失败。您需要为每个程序分别查找位置
例如，让我们制作相同的程序，我们将在它们上设置制服，然后再使用它们进行渲染，以表明制服设置是“每个程序”
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>
调用vertexAttribPointer
特定程序的统一采样器使用的纹理单元是程序状态（它是统一的，所以它是程序状态）。但是每个纹理单元上的纹理是全局状态。换句话说，如果您的着色器程序带有
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);
}
}