javascript webgl 용 텍스처

Question

Webgl에서 텍스처를로드하는 방법을 객관화하려고합니다. 나는 행성 세트를 가지고 이름과 다른 값을 설정했다. 내 모든 텍스처는 sun.jpg, mercury.jpg 등으로 불리우므로 이름 문자열을 조정할 때 Planets[i].name+".jpg"을 사용하여 텍스처의 이름을 가져올 수 있습니다.

var TextureName = []; 
    function setBufferName() 
    { 
     for(var i = 0; i < Planets.length; i++) 
     { 
      TextureName[i] = {name: Planets[i].name+"TextureName"}; 
     } 
    } 

그럼이 같은 텍스처를 초기화하기 (이러한 배열은 나중에 참조하는 각 변수를 보유) : ( 내가 오류가

Uncaught TypeError: Cannot read property 'image' of undefinedSpheredPlanetsGL.js:138 handleLoadedTextureSpheredPlanetsGL.js:179 TextureName.(anonymous function).image.onload

는 I이 같은 textureName 배열을 설정 이것은 "sunTextureName는"오류가 여기에 때 "handleLoade 발생하는 모든 행성 등"sun.jpg "등)

function initTexture() 
    { 
     for(var i = 0; i < Planets.length; i++) 
     { 
      TextureName[i] = gl.createTexture(); 
      TextureName[i].image = new Image(); 
      TextureName[i].image.onload = function() 
      { 
       handleLoadedTexture(TextureName[i]); 
      } 
      TextureName[i].image.src = Planets[i].name+".jpg"; 
     } 
    } 

참조해야합니다 있는지 확인해야합니다 dTexture (TextureName [I]) "라고하며 기능이 왜 확실하지 메신저입니다 :

function handleLoadedTexture(texture) 
    { 
     gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); 
     gl.bindTexture(gl.TEXTURE_2D, texture); 
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image); 
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST); 
     gl.generateMipmap(gl.TEXTURE_2D); 
     gl.bindTexture(gl.TEXTURE_2D, null); 
    } 

이 줄 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);에 오류가 발생 명확합니다. 내가 왜 변수를 전달하기 때문에 내가 배열에 무엇을 참조해야하는지 모르겠다.

어떤 도움이 필요합니까?

Answer 1

문제는 카운터 변수의 범위입니다. 루프가 카운터 변수를 증가시키고 Planets.length보다 크거나 같을 때 종료합니다. 콜백이 실행되면 루프가 이미 완료되고 i은 Planets.length에 남습니다.

당신과 같이 i의 범위 복사본을 생성하는 인생 (즉시 호출 함수 표현식)를 사용할 수 있습니다 :

for(var i = 0; i < Planets.length; i++) 
    { 
     TextureName[i] = gl.createTexture(); 
     TextureName[i].image = new Image(); 
     TextureName[i].image.onload = (function (index) { 
      return function() { handleLoadedTexture(TextureName[index]) } 
     })(i); 
     TextureName[i].image.src = Planets[i].name+".jpg"; 
    }