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

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

渲染警告：单元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);

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

如果您实际上并不需要（由于条件或其他原因），则对于2D或6像素纹理，保持大约1像素的纹理，对于立方体贴图，每面保持1像素，并在不需要时附加该纹理。具体的质地。

在这些情况下，我通常会保持白色和/或黑色纹理。例如，假设我有类似的数学

color = diffuseMapColor * diffuseColor + envMapColor;

如果我只想要diffuseColor，则可以将diffuseMapColor设置为白色，将envMapColor设置为黑色，

color = 1 * diffuseColor + 0;

类似地，我只希望将diffuseMapColor设置为白色，将diffuseColor设置为黑色，然后得到

envMapColor

如果我只想要color = diffuseMapColor * 1 + 0;，那么将envMapColor设置为0即可

diffuseColor

与

相同

color = diffuseMapColor * 0 + envMapColor;

另一方面，大多数3D引擎会为这些情况生成不同的着色器。如果未使用任何环境贴图，则它们将生成不包含环境贴图的着色器。这是因为通常在着色器中完成较少的工作比在着色器中完成更多的工作要快，因此好的3D引擎会针对每种情况生成着色器。

结构中的samplerCube原因GL_INVALID_OPERATION

1 个答案: