在 Haxe 中使用 texSubImage2D 渲染图像答案

【问题标题】：Rendering image using texSubImage2D in Haxe在 Haxe 中使用 texSubImage2D 渲染图像
【发布时间】：2019-03-15 21:18:29
【问题描述】：

我正在学习如何使用 Haxe 将图像标记到我的画布上，并且我已经读到 texSubImage2D 应该是我完成这项工作所需的功能。

我已经阅读了一些找到 here 的文档，并认为我可以通过完成以下参数来实现我所追求的：

void gl.texSubImage2D(target, level, xoffset, yoffset, format, type, HTMLImageElement? pixels);

这就是我所做的：

gl.texSubImage2D (cast fluid.dyeRenderTarget.writeToTexture, 0, Math.round(mouse.x), Math.round(mouse.y), gl.RGB, gl.UNSIGNED_BYTE, document.querySelector('img[src="images/myImage.jpg"]'));

但是，当我尝试构建项目时，出现以下错误：

src/Main.hx:571: characters 135-191 : js.html.Element should be Int
src/Main.hx:571: characters 135-191 : For function argument 'format'

当我回到文档时，我传递的格式 gl.RGB 是一个可接受的参数，所以我不确定我哪里出错了。

任何指导将不胜感激。

【问题讨论】：

你使用的是什么 Haxe 版本？
@Gama11 3.2.1，只是因为我 fork 的项目在使用较新版本时会产生错误...
我明白了.. 在我写答案之前还有一个问题，您需要转换的fluid.dyeRenderTarget.writeToTexture 的类型是什么？
@Gama11 查看文件 writeToTexture 声明为 public var writeToTexture (default, null):GLTexture; writeToTexture 是常规 webgl 句柄的包装器

标签： webgl haxe

【解决方案1】：

我无法完全重现您收到的错误消息，我认为这些错误在最近的 Haxe 版本中可能有所改善。无论如何，这里有几个问题：

首先，通过执行gl.RGB / gl.UNSIGNED_BYTE，您尝试从实例访问静态字段。我实际上得到了一个有用的错误：

无法从类实例访问静态字段 RGB

虽然其他语言允许这样做，Haxe does not，但您必须通过类名访问它们。要解决此问题，只需添加前缀 js.html.webgl.RenderingContext。
其次，querySelector() 返回一个普通的js.html.Element，none of the overloads 接受。他们都想要更具体的东西：VideoElement、ImageElement 或 CanvasElement。所以你必须先施放它：
```
var image:js.html.ImageElement = cast document.querySelector('img[src="images/myImage.jpg"]');
```
最后，您需要强制转换第一个参数似乎有点可疑。即使它有效，也可能有更好的方法来使用您正在使用的包装器。

所以总而言之，以下应该编译：

gl.texSubImage2D(cast fluid.dyeRenderTarget.writeToTexture, 0,
    Math.round(mouse.x), Math.round(mouse.y),
    RenderingContext.RGB, RenderingContext.UNSIGNED_BYTE, image);

【讨论】：

感谢您的详细回答，一切都很有道理，但是，我仍然遇到两个错误； src/Main.hx:574: characters 162-167 : js.html.ImageElement should be Int 和 src/Main.hx:574: characters 162-167 : For function argument 'format' 我将不得不进一步调查，因为显然有更多的东西！
找到了原因——我正在使用雪库，但该方法不存在！要解决此问题，我只需将方法名称更改为 gl.current_context.texSubImage2D();