[英]WebGL - Is It Possible To Pass gl Into img.onload Function?
在我在ES6中编写的WebGL程序中,我有一个名为Texture的类。
首先,它将纹理绘制为1个红色像素。 加载图像后,我想用图像替换红色像素。
我有点陷入困境,因为我不知道最好的方法是什么,因为它当前抛出错误并且不起作用:
未捕获的TypeError:无法在'WebGLRenderingContext'上执行'texImage2D':未找到与提供的签名匹配的函数。
我最好的猜测是,这是因为JavaScript是异步的,所以一旦图像加载,gl就会消失,或者我可能错了。
帮助理解这个和/或解决方案将非常感激。
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);
}
}
}
我试过这个:
this.img.onload = function(gl) {
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.img);
}
但它抛出了这个错误:
未捕获的TypeError:t.texImage2D不是函数
您正在函数内创建一个新范围。 在ES6中防止它的最简单的方法是箭头功能:
this.img.onload = () => {
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.img);
}
关键字this
你里面onload
功能是不一样的this
情况下,你的期望。 一种方法是使用箭头功能,如Sebastian Speitel的回答。
您还可以将引用保存为self
变量,这是一种常见模式:
var self = this;
this.img.onload = function() {
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, self.img);
}
任何函数都可以从外部作用域访问变量,这就是在this.img.onload
可以访问self
的原因。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.