>

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 가 없을 때  셰이더에 전달되면 오류가 발생합니다.

다음에 무엇을해야할지 모르겠습니다. 누구든지 나를 도울 수 있습니까?


  • 답변 # 1

    실제 오류는 텍스처를 올바르게 바인딩하지 않거나 잘못된 위치 또는 다른 것을 찾지 못하는 다른 부분 일 가능성이 높습니다

    와이즈 비즈

    여기서 균일 한 구조의 실제 사례

    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>
    
    

    Null이 아닌 값을 반환하면 WebGL과 관련하여 AFAIK가 해당 샘플러에 유효한 텍스처를 제공해야합니다.

    조건부 등으로 인해 실제로 필요하지 않은 경우 2D 또는 6 픽셀 텍스처의 경우 1 픽셀 텍스처, 큐브 맵의 경우 얼굴 당 1 픽셀을 유지하고 필요하지 않은 경우 해당 텍스처를 첨부하십시오. 특정 질감.

    이 경우에는 보통 흰색 및/또는 검은 색 질감을 ​​유지합니다. 예를 들어 내가 수학을 좋아한다고 가정 해 봅시다.

    gl.getUniformLocation(program, nameOfSamplerUniform);
    
    
    내가 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 엔진이 필요한 각 경우에 대해 셰이더를 생성하기 때문입니다.

    color = 0 + envMapColor;

  • 이전 java - 다른 시간 형식을 구문 분석하는 방법
  • 다음 javascript - ExtJS 4 이벤트 처리 설명