Modify dynamic texture float 32 array with frag shaders

Questions
, , ,
1

hey all,

would anyone be able to tell me how this image hover effect is done or has an example of how to do this they could point me in the right direction to?! i would like to create the same visual effect in this example… (excuse the horrible source, i just like the visual effect)

thank you so much!!

2

I’d start by trying to recreate it without the mouse movement - just shifting UVs around.

It can be done with shaders, but shaders are math and literally nobody likes math, so a here’s no-shader way:

  1. Fill scene with rectangular Plane or Box geometries. Make them, in total, cover the entire screen to simulate big “pixels”.
  2. Apply same material to all of them (with the entire texture you’d like to show, so ex. that artist portrait.)
  3. Scale UV coordinates on each box down - so that instead of (0,0)→(1,1) they cover (x,y)→(x + pixelWidth, y + pixelHeight).
  4. Save these initial coordinates to userData.
  5. When cursor moves, determine the direction / velocity vector for the movement.
  6. Shift UV mapping of all “pixel” boxes touched by cursor by that displacement vector (afterwards you can slowly lerp them back to original coordinates saved in userData.)

Here’s a small sample - without mouse movement tho, just to show that displacement among pixels.

2 Likes
3

@mjurczyk

that’s an amazing approach!! thanks so much for the guidance!
am i right in thinking there is a seperate geometry for each “pixel” in your example?
going to have a look into how you’ve coded this now, was looking at another example yesterday to try get my head around it here…

https://threejs.org/examples/webgl_materials_texture_partialupdate

this seems like it’s subdividing one texture map into a 16x16 grid and updating each tile seperately…
do you think if i try to combine parts from both examples together it will work? also going to look into the mouse functionality but that’s also going to be tricky for me, whould you suggest a fragment shader to do that or do you know if there’s a way to calculate a radius from around a ray that has some sort of decay as to it’s effect?

thank you so much for your input!!

4

Yep - it can be either boxes, or planes, up to you to decide. Technically speaking all this can be done with a single textured plane or some shader math - it’s a matter of clipping separate rectangles on a surface (in shaders you can probably also use a normal / bump map for that.)

Personally I just find separate geometries a bit more flexible and manageable for this. :thinking:

2 Likes