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

时间:2019-03-16 12:35:52

标签: webgl haxe

我正在学习流体动力学(和Haxe),并且遇到了this个很棒的项目,并认为我会尝试扩展到它以帮助我学习。可以在here上看到原始项目的演示。

到目前为止,我已经创建了包含不同形状的项目的侧面菜单。当用户单击一种形状,然后单击画布时,所选图像应被压印到染料上。然后,用户将移动鼠标并浏览艺术品等。

为实现这一目标,我做了以下工作:

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:INVALID_ENUM:texSubImage2D:无效的纹理目标

可以安全地假定不允许我对第一个参数进行强制转换吗?

我已经了解到纹理目标是第一个参数,特别是INVALID_ENUM意味着gl.XXX参数中的一个对于该特定函数来说完全是错误的。

通向文件writeToTexture的声明为:public var writeToTexture (default, null):GLTexture;WriteToTexture是常规webgl句柄的包装。

我正在使用Haxe version 3.2.1Snow来构建项目。 WriteToTextureHaxeToolkit\haxe\lib\gltoolbox\git\gltoolbox\render内定义

1 个答案:

答案 0 :(得分:3)

gltoolbox中的

UserService#preparewriteToTexture。对于snowGLTexture,这在snow_web中定义为:

snow.modules.opengl.GL

因此,我们只在这里处理js.html.webgl.Texture或本机JS中的WebGLTexture

这表示是的,这绝对不是typedef GLTexture = js.html.webgl.Texture; 的{​​{1}},which is specified to take one of the gl.TEXTURE_* constants的有效值。

  

一个texSubImage2D(),用于指定活动纹理的绑定点(目标)。

从该描述中可以明显看出,该参数实际上并不是纹理本身的-它仅提供有关如何应使用 active 纹理的信息。

问题就变成了如何设置“活动”纹理。 bindTexture()可用于此目的。