javascript - 结构中的 samplerCube 导致 GL_INVALID_OPERATION

Question

我在 glsl 中有以下代码:

// snippet 1, works well
uniform vec4 uDiffuse;
uniform sampler2D uDiffuseMap;
uniform vec4 uSpecular;
uniform sampler2D uSpecularMap;
uniform float uShininess;
uniform samplerCube uEnvironmentMap;

// snippet 2, not work
struct PhongMaterial {
  vec4 diffuse;
  sampler2D diffuseMap;

  vec4 specular;
  sampler2D specularMap;

  float shininess;

  samplerCube environmentMap; // works well if I remove this line.
};

但它抛出以下错误:

[.WebGL-0x7fabfe002e00]RENDER WARNING: there is no texture bound to the unit 0
[.WebGL-0x7fabfe002e00]GL ERROR :GL_INVALID_OPERATION : GetShaderiv: <- error from previous GL command
[.WebGL-0x7fabfe002e00]GL ERROR :GL_INVALID_OPERATION : GLES2DecoderImpl::DoBindTexImage2DCHROMIUM: <- error from previous GL command
[.WebGL-0x7fabfe002e00]GL ERROR :GL_INVALID_OPERATION : glFramebufferTexture2D: <- error from previous GL command
[.WebGL-0x7fabfe002e00]GL ERROR :GL_INVALID_OPERATION : GLES2DecoderImpl::DoBindTexImage2DCHROMIUM: <- error from previous GL command
WebGL: too many errors, no more errors will be reported to the console for this context.

举个例子: https://codepen.io/scarletsky/pen/KEgBzx?editors=1010

我想做的是实现一个可以接收sampler2D 和samplerCube 的着色器。当没有 samplerCube 传入着色器时，它会抛出错误。

我不知道下一步该做什么。谁能帮帮我？

Answer 1

您真正的错误可能是在其他地方，并且与您没有正确绑定(bind)纹理或查找错误的位置或其他原因有关

RENDER WARNING: there is no texture bound to the unit 0

这是一个使用统一结构的工作示例

const fs = `
precision mediump float;

struct PhongMaterial {
  vec4 diffuse;
  sampler2D diffuseMap;

  vec4 specular;
  sampler2D specularMap;

  float shininess;

  samplerCube environmentMap; 
};
uniform PhongMaterial material;

void main() {
  vec4 diffuse  = texture2D(material.diffuseMap, gl_PointCoord.xy);
  vec4 specular = texture2D(material.specularMap, gl_PointCoord.xy);
  vec4 cube = textureCube(
     material.environmentMap, 
     vec3(gl_PointCoord.xy, gl_PointCoord.x * gl_PointCoord.y) * 2. - 1.);
     
  // use all 3 textures so we can see they were set
  vec4 diffuseOrSpecular = mix(diffuse, specular, step(0.25, gl_PointCoord.y));
  gl_FragColor = mix(diffuseOrSpecular, cube, step(0.5, gl_PointCoord.y));
}
`
const vs = `
void main() {
  gl_Position = vec4(0, 0, 0, 1);
  gl_PointSize = 128.0;
}
`;

const gl = document.querySelector('canvas').getContext('webgl');
const prg = twgl.createProgram(gl, [vs, fs]);
const diffuseLocation = gl.getUniformLocation(prg, 'material.diffuseMap');
const specularLocation = gl.getUniformLocation(prg, 'material.specularMap');
const envmapLocation = gl.getUniformLocation(prg, 'material.environmentMap');

const texDiffuse = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texDiffuse);
{
  const level = 0;
  const format = gl.RGBA;
  const width = 1;
  const height = 1;
  const type = gl.UNSIGNED_BYTE;
  const pixel = new Uint8Array([255, 255, 0, 255]);  // yellow
  gl.texImage2D(gl.TEXTURE_2D, level, format, width, height, 0, format, type, pixel);
}

const texSpecular = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texSpecular);
{
  const level = 0;
  const format = gl.RGBA;
  const width = 1;
  const height = 1;
  const type = gl.UNSIGNED_BYTE;
  const pixel = new Uint8Array([0, 0, 255, 255]);  // blue
  gl.texImage2D(gl.TEXTURE_2D, level, format, width, height, 0, format, type, pixel);
}

const texCube = gl.createTexture();
gl.bindTexture(gl.TEXTURE_CUBE_MAP, texCube);
for (let i = 0; i < 6; ++i) {
  const level = 0;
  const format = gl.RGBA;
  const width = 1;
  const height = 1;
  const type = gl.UNSIGNED_BYTE;
  const pixel = new Uint8Array([(i & 1) * 255, (i & 2) * 255, (i & 4) * 255, 255]);
  gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, level, format, width, height, 0, format, type, pixel);
}

gl.useProgram(prg);

// put the yellow diffuse texture on texture unit 0
gl.activeTexture(gl.TEXTURE0 + 0);  
gl.bindTexture(gl.TEXTURE_2D, texDiffuse);

// use texture on texture unit 0
gl.uniform1i(diffuseLocation, 0);   

// put the blue specular texture on texture unit 1
gl.activeTexture(gl.TEXTURE0 + 1);  
gl.bindTexture(gl.TEXTURE_2D, texSpecular);

// tell the specular sampler to use texture unit 1
gl.uniform1i(specularLocation, 1);  

// put the cubemap on texture unit 2
gl.activeTexture(gl.TEXTURE0 + 2);
gl.bindTexture(gl.TEXTURE_CUBE_MAP, texCube);

// tell the cubemap sampler to use texture unit 2
gl.uniform1i(envmapLocation, 2);    

// draw one 128x128 pixel point
gl.drawArrays(gl.POINTS, 0, 1);  

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

注意:您需要为您的着色器声称正在使用的每个采样器统一提供有效纹理，无论它是否实际被使用。

要查明着色器是否声称它正在被调用

gl.getUniformLocation(program, nameOfSamplerUniform);

如果它返回非空值，那么 AFAIK 就 WebGL 而言，您必须为该采样器提供有效的纹理。

如果您实际上不需要一个(因为条件或其他原因)，那么为 2D 或 6 像素纹理保留大约 1 像素纹理，为立方体贴图保留每个面 1 像素，并在不需要时附加该纹理具体质地。

对于这些情况，我通常会在周围保留白色和/或黑色纹理。例如，假设我有这样的数学

color = diffuseMapColor * diffuseColor + envMapColor;

如果我只想要 diffuseColor，那么我可以将 diffuseMapColor 设置为白色，将 envMapColor 设置为黑色，这是有效的

color = 1 * diffuseColor + 0;

类似地，我只想要diffuseMapColor，我可以将diffuseColor设置为白色，将envMapColor设置为黑色，然后得到

color = diffuseMapColor * 1 + 0;

如果我只想要 envMapColor，那么将 diffuseColor 设置为 0 就可以了

color = diffuseMapColor * 0 + envMapColor;

与

相同

color = 0 + envMapColor;

另一方面，大多数 3D 引擎会为这些情况生成不同的着色器。如果没有使用环境贴图，他们会生成一个不包含环境贴图的着色器。这是因为通常在着色器中做更少的工作比做更多的工作更快，所以一个好的 3D 引擎会为每种需要的情况生成着色器。