Webgl 将图像打印到基于染料的应用程序

我正在学习流体动力学（和Haxe），遇到了一个很棒的项目，我想我会尝试扩展到它来帮助我学习。可以看到原始项目的演示

到目前为止，我已经创建了一个包含不同形状的项目的侧菜单。当用户单击其中一个形状，然后单击画布时，所选图像应压印到染料上。然后，用户将移动鼠标，探索艺术等

为了实现这一点，我做了以下工作：

import js.html.webgl.RenderingContext;

function imageSelection(): Void{        

    document.querySelector('.myscrollbar1').addEventListener('click', function() {
    // twilight image clicked
    closeNav(); 
    reset(); 
    var image:js.html.ImageElement = cast document.querySelector('img[src="images/twilight.jpg"]');
    gl.current_context.texSubImage2D(cast fluid.dyeRenderTarget.writeToTexture, 0, Math.round(mouse.x), Math.round(mouse.y), RenderingContext.RGB, RenderingContext.UNSIGNED_BYTE, image);
    TWILIGHT = true;  

});

override function update( dt:Float ){

        time = haxe.Timer.stamp() - initTime;
        performanceMonitor.recordFrameTime(dt);
        //Smaller number creates a bigger ripple, was 0.016
        dt = 0.090;//@!
        //Physics
        //interaction
        updateDyeShader.isMouseDown.set(isMouseDown && lastMousePointKnown);
        mouseForceShader.isMouseDown.set(isMouseDown && lastMousePointKnown);

        //step physics
        fluid.step(dt);

        particles.flowVelocityField = fluid.velocityRenderTarget.readFromTexture;

        if(renderParticlesEnabled){
            particles.step(dt);
        }

//Below handles the cycling of colours once the mouse is moved and then the image should be disrupted into the set dye colours.

}

在这次调用之后，在update函数中，我有以下内容：

import js.html.webgl.RenderingContext;

function imageSelection(): Void{        

    document.querySelector('.myscrollbar1').addEventListener('click', function() {
    // twilight image clicked
    closeNav(); 
    reset(); 
    var image:js.html.ImageElement = cast document.querySelector('img[src="images/twilight.jpg"]');
    gl.current_context.texSubImage2D(cast fluid.dyeRenderTarget.writeToTexture, 0, Math.round(mouse.x), Math.round(mouse.y), RenderingContext.RGB, RenderingContext.UNSIGNED_BYTE, image);
    TWILIGHT = true;  

});

override function update( dt:Float ){

        time = haxe.Timer.stamp() - initTime;
        performanceMonitor.recordFrameTime(dt);
        //Smaller number creates a bigger ripple, was 0.016
        dt = 0.090;//@!
        //Physics
        //interaction
        updateDyeShader.isMouseDown.set(isMouseDown && lastMousePointKnown);
        mouseForceShader.isMouseDown.set(isMouseDown && lastMousePointKnown);

        //step physics
        fluid.step(dt);

        particles.flowVelocityField = fluid.velocityRenderTarget.readFromTexture;

        if(renderParticlesEnabled){
            particles.step(dt);
        }

//Below handles the cycling of colours once the mouse is moved and then the image should be disrupted into the set dye colours.

}

然而，尽管项目已经构建，但我似乎无法将图像印在画布上。我已检查控制台日志，可以看到以下错误：

WebGL:无效的枚举：texSubImage2D:无效的纹理目标

可以安全地假设我对第一个参数的强制转换是不允许的吗

我已经了解到，纹理目标是第一个参数，

INVALID_ENUM

特别意味着其中一个

gl.XXX

参数对于该特定函数来说完全错误

查看文件

writeToTexture

的声明如下：

public var writeToTexture（默认值，null）：GLTexture
WriteToTexture
是常规webgl句柄的包装器

我正在使用
haxeversion3.2.1
和
Snow
构建项目
WriteToTexture
是在is中的
GLTexture
中定义的。使用和
snow\u web
，这在
snow.modules.opengl.GL
中定义为：

typedef GLTexture = js.html.webgl.Texture;

所以我们只是在这里，或者在原生JS中处理

这意味着是的，这绝对不是
texSubImage2D（）
的
目标的有效值

指定活动纹理的绑定点（目标）的
GLenum

从这个描述中可以明显看出，该参数实际上并不适用于纹理本身——它只是提供了一些有关如何使用活动纹理的信息

接下来的问题是如何设置“活动”纹理。可以用于此操作。
啊，好的，谢谢您的详细说明。我想当点击画布时，我必须想出其他方法来渲染染料中的图像！