WebGL - Apakah mungkin meneruskan gl ke fungsi img.onload?

Dalam program WebGL yang saya tulis di ES6, saya memiliki kelas bernama Tekstur.

Pada awalnya, ia menggambar tekstur sebagai 1 piksel merah. Setelah gambar dimuat, saya ingin mengganti piksel merah dengan gambar.

Saya agak buntu karena saya tidak yakin pendekatan apa yang terbaik untuk ini karena saat ini terjadi kesalahan dan tidak berfungsi:

TypeError Tidak Tertangkap: Gagal menjalankan 'texImage2D' di 'WebGLRenderingContext': Tidak ditemukan fungsi yang cocok dengan tanda tangan yang diberikan.

Tebakan terbaik saya adalah ini terjadi karena JavaScript tidak sinkron, jadi setelah gambar dimuat, gl hilang, atau mungkin saya salah tentang hal ini.

Bantuan untuk memahami hal ini dan/atau solusinya akan sangat dihargai.

export default class Texture {
    constructor(gl, src) {
        // create texture then bind it
        this.texture = gl.createTexture();
        gl.bindTexture(gl.TEXTURE_2D, this.texture);

        // texture settings for the texture
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

        // create it as a red pixel first so it can be quickly drawn then replaced with the actual image
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([255, 0, 0, 255]));

        // active the texture
        gl.activeTexture(gl.TEXTURE0);

        // load the image
        this.img = new Image();
        this.img.src = src;

        // replace the red pixel with the texture once it is loaded
        this.img.onload = function() {
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.img);
        }
    }
}

Saya sudah mencoba ini:

this.img.onload = function(gl) {
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.img);
}

Tapi itu menimbulkan kesalahan ini:

TypeError Tidak Tertangkap: t.texImage2D bukan fungsi


javascript ecmascript-6 webgl
person Edward    schedule 06.04.2018    source sumber
comment
apakah ini membantu? stackoverflow.com/questions/49187705/   -  person gman    schedule 07.04.2018
comment
@gman ini sebenarnya informatif tentang cara kerjanya, terima kasih!   -  person Edward    schedule 09.04.2018

Jawaban (2)


arrow_upward
2
arrow_downward

Anda membuat cakupan baru di dalam fungsi. Cara termudah untuk mencegahnya di ES6 adalah fungsi panah:

this.img.onload = () => {
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.img);
}
person Sebastian Speitel    schedule 06.04.2018
comment
Ini sempurna, saya akan menerima jawaban Anda ketika saya bisa dan saya akan membaca fungsi panah. - person Edward; 06.04.2018

arrow_upward
1
arrow_downward

Kata kunci this di dalam fungsi onload Anda tidak sama dengan konteks this yang Anda harapkan. Salah satu caranya adalah dengan menggunakan fungsi panah seperti pada jawaban Sebastian Speitel.

Anda juga dapat menyimpan referensi ke dalam variabel self, yang merupakan pola umum:

var self = this;
this.img.onload = function() {
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, self.img);
}

Fungsi apa pun dapat mengakses variabel dari lingkup luar, itu sebabnya self dapat diakses di dalam this.img.onload.

person Tomasz Bubała    schedule 06.04.2018
comment
Saya baru saja menguji ini dan itu juga berhasil. Terima kasih atas penjelasannya, fungsi panah adalah solusi pilihan saya untuk ini, tapi mengetahui informasi ini pasti berguna karena saya sedang dalam proses mempelajari ES6. - person Edward; 06.04.2018
comment
Ya, gunakan ES6 jika Anda bisa. Fungsi panah tidak memiliki this sendiri. This terikat dengan konteks pembuatannya, yang berguna dalam banyak situasi - seperti situasi Anda misalnya :) - person Tomasz Bubała; 06.04.2018