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

Question

我正在学习流体动力学(和 Haxe)并遇到 this非常棒的项目，我想我会尝试扩展它来帮助我学习。可以看到原始项目的演示 here 。

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

为了尝试实现这一目标，我执行了以下操作:

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.

}

但是，尽管项目已构建，但我似乎无法将图像印到 Canvas 上。我检查了控制台日志，可以看到以下错误:

WebGL: INVALID_ENUM: texSubImage2D: invalid texture target

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

我读到纹理目标是第一个参数，并且 INVALID_ENUM 特别意味着其中一个 gl.XXX 参数对于该特定函数来说完全是错误的。

查看文件 writeToTexture 的声明如下:public var writeToTexture (default, null):GLTexture;。 WriteToTexture 是常规 webgl 句柄的包装器。

我正在使用 Haxe 版本 3.2.1 并使用 Snow 来构建项目。 WriteToTexture 定义在 HaxeToolkit\haxe\lib\gltoolbox\git\gltoolbox\render

中

Answer 1

gltoolbox 中的

writeToTexture是一个GLTexture。与snow和 snow_web，它在 snow.modules.opengl.GL 中定义为:

typedef GLTexture = js.html.webgl.Texture;

所以我们只是在处理 js.html.webgl.Texture在这里，或 WebGLTexture在原生 JS 中。

这意味着，是的，这绝对不是 texSubImage2D() 的 target 的有效值，which is specified to take one of the gl.TEXTURE_* constants .

A GLenum specifying the binding point (target) of the active texture.

从这个描述中可以明显看出，该参数实际上并不是针对纹理本身的 - 它只是提供了一些关于如何应该使用事件纹理的信息。 p>

接下来的问题就变成了如何设置“事件”纹理。 bindTexture()可以用于此目的。