将图像打印到基于染料的应用程序
Printing an image to a dye based application
我正在学习流体动力学(和 Haxe)并且遇到了 this awesome project and thought I would try to extend to it to help me learn. A demo of the original project in action can be seen 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 version 3.2.1
并使用 Snow
来构建项目。 WriteToTexture
定义在 HaxeToolkit\haxe\lib\gltoolbox\git\gltoolbox\render
内
writeToTexture
在gltoolbox
is a GLTexture
. With snow
和snow_web
中,这在snow.modules.opengl.GL
中定义为:
typedef GLTexture = js.html.webgl.Texture;
所以我们只是在处理原生 JS 中的 js.html.webgl.Texture
here, or WebGLTexture
。
这意味着是的,这绝对不是 texSubImage2D()
的 target
、which is specified to take one of the gl.TEXTURE_*
constants.
的有效值
A GLenum
specifying the binding point (target) of the active texture.
从这个描述中可以明显看出该参数实际上并不是针对纹理本身的 - 它只是提供了一些关于如何 active[=41= 的信息] 应该使用纹理。
问题就变成了如何设置"active"纹理。 bindTexture()
可用于此。
我正在学习流体动力学(和 Haxe)并且遇到了 this awesome project and thought I would try to extend to it to help me learn. A demo of the original project in action can be seen 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 version 3.2.1
并使用 Snow
来构建项目。 WriteToTexture
定义在 HaxeToolkit\haxe\lib\gltoolbox\git\gltoolbox\render
writeToTexture
在gltoolbox
is a GLTexture
. With snow
和snow_web
中,这在snow.modules.opengl.GL
中定义为:
typedef GLTexture = js.html.webgl.Texture;
所以我们只是在处理原生 JS 中的 js.html.webgl.Texture
here, or WebGLTexture
。
这意味着是的,这绝对不是 texSubImage2D()
的 target
、which is specified to take one of the gl.TEXTURE_*
constants.
A
GLenum
specifying the binding point (target) of the active texture.
从这个描述中可以明显看出该参数实际上并不是针对纹理本身的 - 它只是提供了一些关于如何 active[=41= 的信息] 应该使用纹理。
问题就变成了如何设置"active"纹理。 bindTexture()
可用于此。