search

fand / vfx-js

WebGL effects made easy.
https://amagi.dev/vfx-js
608 stars 18 forks source link

Custom vertex shader #15

Open glebka100500 opened 3 years ago

glebka100500 commented 3 years ago

Hi, I really like this package, easy to use and to set up, is there a possibility to use custom vertex shader, or at least include my own model matrix? I think it would be really helpful and will expand project's versatility

fand commented 2 years ago

Hi @glebka100500 ! sorry I didn't notice the issue...

Currently REACT-VFX only accepts fragment shaders. However, by recent updated, the mesh is placed to cover the entire screen so that it can render outside the area of the original element. So now you can move or scale the textures by modifying the uv coord like this:

void main() {
  vec2 uv = (gl_FragCoord.xy - offset) / resolution;

  // scale
  uv = (uv - 0.5) * 1.5 + 0.5;

  // offset
  uv.x += sin(time) * 0.3;

  gl_FragColor = texture2D(src, uv);
}

I think this covers most usecases, but if you have any ideas to do something cool with vertex shaders, please tell me again.