如何逐像素的绘制一张图片

我的需求是把一张图片一个像素一个像素的绘制出来,就像贴瓷砖一样,每块转飞过去,然后填充颜色。

因为图片是像素风,所以我现在的做法是拿到图片所有的像素,然后用Graphics.fillRect绘制每个像素,效果是可以,但是有个问题,Graphics.fillRect没绘制一个rect就会产生两个面,而一张图片至少100*100个像素,面数爆炸

我做了一个测试,用了一张256*256的图片,测试图片不是像素风的,一共65536个像素点,绘制出来产生了131072个三角形

screenshot-20240430-182349

这太不能接受了,兄弟门有没有什么好的方案,或者Graphics绘制可以怎么优化一下

有像素用像素生成texture就行了,可以刷新texture做出贴瓷砖的效果

shader
gl_FragCoord

你是说texture,uploadData(buffer)方法吗,每次刷新buffer的长度

有这个方法吗,不清楚,你可每次都 新init个texture

shader不怎么了解,只会简单的 :joy:

3.X是不,那就用ImageAsset,它的data可以是HTMLCanvasElement也可以是一个存储所有像素点颜色的ArrayBuffer,然后把ImageAsset赋值给Texture2D,每次更新像素点再刷新纹理就可以了;我就懒得写示例了,需要再找我 :rofl:

这题 用shader

1赞

创建好多texture2d,重复使用是吗

只需要2个三角面就行了,更新texture arraybuffer对应区域的的色值

听起来像是Assembler 的工作。

不是,不管是ImageAsset还是Texture2D都是只创建1个就好,更新函数分别可以用“reset”和“updateImage”。

用一个专门的texture去存储你最后的那张图,然后每次飞了图片以后,删除飞的那个图,然后把这个texture的数据进行更新,这样,不管图怎么乱,最起码底板的那张图只是一个矩形的纹理。

合成-1_1_1

image

TransitionGrid.zip (919 字节)

image

新建材质并使用, 代码中动态设置进度就行, 进度的key是 “progress”

2赞

这是2.4.x 的effect文件, 如果3.x不能使用的话, 自己翻译一下

估计楼主想要更炫酷一些的,类似这样 :smile:
image

1赞

:joy:show me the code

这种其实不光是像素的显示消失,每个小碎块其实还有一定的位移。
shader中有种几何着色器,可以实现面片飞散效果,但是没有达到像素级,而且ccc里也没有:
20200111211014857
你这种我以前一直想做来着,但是没有想通用片元着色器的情况下怎么做出那种位移。
如果只是像素级的消失显示是很容易的。

thanos
用噪点图做shader,实现像素点显示隐藏

1赞

I’m也没有code,我只是凭猜想网上找了个图 :joy: