到目前为止,我已经在渲染输出的纹理与使用的输入数据(纹理)具有良好的成功
在速度的利益,我想了一组预编译的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活动制服和帧缓存仍然完好无缺?
是的,你可以在初始化时多个程序的设置。这是做正常的事情。
笔记:
例如让我们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
。你需要查找单独为每个程序位置
因此,例如,让我们做出同样的程序,我们将设置对他们的制服和他们渲染之前表明统一设置为“每个程序”
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);
}
}