如何使图片扭曲呢

Creator 2.x
#1

目前能想到的方式只有顶点和shader
但具体怎么修改mesh

#2

ps :rofl: :rofl: :rofl:

#3

(pos - 0.5) * rotMat + 0.5

#5

CCProgram distort-fs %{
precision highp float;
#include
#include
in vec2 v_uv;
uniform sampler2D texture;
uniform float time; // 用于控制扭曲的时间
void main() {
// 将纹理坐标转换为中心点为(0.5, 0.5)的坐标
vec2 center = v_uv - vec2(0.5);

// 计算扭曲效果
float angle = atan(center.y, center.x);
float radius = length(center);

// 计算新的坐标
float distortion = sin(radius * 10.0 - time * 3.0) * 0.02;
vec2 distortedUV = v_uv + distortion * vec2(cos(angle), sin(angle));

// 在新坐标处采样纹理
vec4 color = texture(texture, distortedUV);

gl_FragColor = color;

}
}%

1赞
#6

网格会不会比shader好 可以控制每个点的偏移

#7

shader简单点吧，你是说网格mesh么，建模软件里搞成想要的扭曲效果，然后uv展贴图

#8

刚改了下，可以用image
CCEffect %{
techniques:

  • passes:
    • vert: vs
      frag: fs
      blendState:
      targets:
      • blend: true
        rasterizerState:
        cullMode: none
        properties:
        texture: { value: white }
        time: { value: 0.0 }
        }%

CCProgram vs %{
precision highp float;

#include
#include
#include

in vec4 a_position;
in vec2 a_uv0;
out vec2 v_uv;
void main() {
gl_Position = cc_matViewProj * a_position;
v_uv = a_uv0;
}
}%

CCProgram fs %{
precision highp float;
#include
#include
in vec2 v_uv;
uniform sampler2D texture;
uniform c{
float time; // 用于控制扭曲的时间
};

void main() {
vec2 p = v_uv - 0.5; // 将坐标原点移到纹理中心
float distanceToCenter = length§;

// 计算偏移角度，与距离成正比
float offsetAngle = distanceToCenter * time;

// 计算偏移后的坐标
vec2 offsetCoord = vec2(
    p.x * cos(offsetAngle) - p.y * sin(offsetAngle),
    p.x * sin(offsetAngle) + p.y * cos(offsetAngle)
);

// 归一化坐标
vec2 normalizedCoord = offsetCoord + 0.5;

// 输出颜色
gl_FragColor = texture2D(texture, normalizedCoord);

}
}%

#9

能用Assembler解决就别用Shader，Shader会打断合批。
Assembler操作图片的顶点，Shader操作图片每个像素点

#10

应该是吧 就是把图片分成n个格子 调整其中一个或者多个点

#11

视频效果


大概知道怎么实现的了

#12

通过修改mesh实现的 实现代码 这是c++的 不是cocos引擎的
https://game-test-1251227798.cos.ap-nanjing.myqcloud.com/hge_tut05.cpp

#13

合批都会打断 理论上提交不同的数据都会打断

#14

用mesh的话 需要很多个顶点 不然扭曲会不自然，shader可以逐个像素处理，会更自然

#15

Assembler操作顶点，不会打断合批，我之前写的拖尾组件就是操作顶点画拖尾
【包教包会】对CocosCreator拖尾组件MotionStreak做了全面优化

#16

视频里的是16x16的顶点数 512的图片大小

#17

晚点学习 谢谢大佬 理论上如果全局公用一个fbo 那么updatedata都会打断 不知道cocos是不是每个精灵都单独一个fbo 计算dc的方式不一样

#18

其实我就想实现类似live2d或者spine的简单飘动而已 顶点应该比shader好控制

#19

Assembler 按理说应该是不会打断的，Buffer数据每一帧计算放到model中，着色器程序、texture、渲染技术（模板测试、深度测试、透明测试、混合等等）都相同，可以合批的。使用shader 是百分百会打断的，因为着色器程序变了，无法跟普通的共用。

#20

提交不同的buffer其实也算打断了 只是每个引擎计算dc的方式不一样 如果共用一个fbo 优化才是最好的

#21

不是的，一个合批model的Buffer， 它包含了多个渲染组件的RenderData数据，当然它有一个最大值限制，超过了最大值就会使用(flush)新的model。而你这个可以跟其他的渲染组件一起放入到一个Buffer中，一起给到GPU。只要渲染状态共用，同时不超过最大值条件，那么就可以一次渲染了。