なぜWebGLは1回ではなく3回テクスチャを描画しますか？

Question

私はWebGLとElectronで小さな2Dゲームを構築しようとしています。何らかの理由で、レンダリングを1回だけ呼び出すと、私のテクスチャがトリプルレンダリングされています。私はなぜか、どういうわけかテクスチャを間違ってロードしているとその問題を引き起こしているのかどうかを判断できないようです。

私のコードの最終的な結果は以下の通りです：

export function render(tex: texture_t, _x: number, _y: number): void { 
    if (!is_valid(tex)) { 
     throw new Error('Invalid value - bad texture'); 
    } 
    if (shader_program == null) { 
     shader_program = program_create_from_sources(default_v_shader, default_f_shader); 
    } 
    const gl = tex.context.context; 
    if (index_buffer == null) { 
     index_buffer = gl.createBuffer(); 
     if (index_buffer == null) { 
      throw new Error('Failed to create default index buffer'); 
     } 
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer); 
     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(index_data), gl.STATIC_DRAW); 
    } else { 
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer); 
    } 
    gl.useProgram(shader_program.native); 
    if (vertex_buffer == null) { 
     vertex_buffer = gl.createBuffer(); 
     if (vertex_buffer == null) { 
      throw new Error('Failed to create default vertex buffer'); 
     } 
     gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); 
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertex_data), gl.STATIC_DRAW); 
    } else { 
     gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); 
    } 
    gl.enableVertexAttribArray(shader_program.attributes.vertex_model); 
    gl.vertexAttribPointer(shader_program.attributes.vertex_model, 3, gl.FLOAT, false, 0, 0); 

    if (uv_buffer == null) { 
     uv_buffer = gl.createBuffer(); 
     if (uv_buffer == null) { 
      throw new Error('Failed to create default UV buffer'); 
     } 
     gl.bindBuffer(gl.ARRAY_BUFFER, uv_buffer); 
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(uv_data), gl.STATIC_DRAW); 
    } else { 
     gl.bindBuffer(gl.ARRAY_BUFFER, uv_buffer); 
    } 
    gl.enableVertexAttribArray(shader_program.attributes.uv_model); 
    gl.vertexAttribPointer(shader_program.attributes.uv_model, 2, gl.FLOAT, false, 0, 0); 

    gl.activeTexture(gl.TEXTURE0); 
    gl.bindTexture(gl.TEXTURE_2D, tex.native); 
    gl.uniform1i(shader_program.uniforms.texture, 0); 

    gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); 

    gl.disableVertexAttribArray(shader_program.attributes.uv_model); 
    gl.disableVertexAttribArray(shader_program.attributes.vertex_model); 
} 

ロードコード：（xとyパラメータがまだ使用されていない）、次のように

私のレンダリングコードは次のとおりです。

export function create_empty(): texture_t { 
    const ctx = context_get_current(); 
    if (ctx == null) { 
     throw new Error('Invalid operation - no rendering context'); 
    } 
    const gl = ctx.context; 
    const nat: WebGLTexture|null = gl.createTexture(); 
    if (nat == null) { 
     throw new Error('Invalid operation - unable to create texture'); 
    } 
    return { 
     native: nat, 
     width: 0, 
     height: 0, 
     source: null, 
     context: ctx 
    }; 
} 

export async function create_from_image(src: string): Promise<texture_t> { 
    const p = new Promise<texture_t>((resolve, reject) => { 
     const tex = create_empty(); 
     const gl = tex.context.context; 
     const img = new Image(); 
     img.addEventListener('load',() => { 
      gl.bindTexture(gl.TEXTURE_2D, tex.native); 
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img); 
      tex.source = img.src; 
      tex.width = img.width; 
      tex.height = img.height; 
      resolve(tex); 
     }); 
     img.addEventListener('error', (err) => { 
      destroy(tex); 
      reject(err); 
     }); 
     img.src = src; 
    }); 
    return p; 
} 

主な機能：

Answer 1

多くのオプションで遊んだ後、私は問題の原因を発見しました。それは、プレマルチプルアルファがデフォルトでオンになっているようです（私はコンテキスト作成オプションでpremultipliedAlpha: falseを指定しませんでした）。UNPACK_PREMULTIPLIED_ALPHA_WEBGLをtrueに設定していませんでした。

強制終了後、問題は解決しませんでした。 への呼び出しを介して上記のパラメータをtrueに設定すると、問題が解決されませんでした。いずれかの変更を元に戻すと、問題がもう一度現れます。私は、なぜこの効果がデフォルト設定で起こるのか、少し不思議だが、私の問題は解決されている。