Alternative to displacementMap just using values or data

Questions
1

I’m currently using a canvas displacementMap to deform a texture

this.displacement_map = new THREE.Texture( MYDEPTH.canvas );
    this.plane_material = new THREE.MeshPhongMaterial( { map:this.video_texture, displacementMap:this.displacement_map, overdraw: true, side:THREE.DoubleSide } );

It’s working fine but I am wondering if it’s more efficient to do displacement simply with data instead of drawing to a canvas each loop.

Is there a data/values alternative to displacementMap?

Thanks.

2

You can directly displace the vertices with js (on CPU) as well, however that isn’t more efficient depending on how the data is generated, rendering on a canvas for example with drawing functions is faster than rendering pixel data manually, as drawing is gpu accelerated, while if you compute each pixel yourself it makes more sense to displace the vertices.

But that again also depends on the density of the vertices, if you have much more vertices than the supplied texture resolution, you save a lot computation using a texture as the vertices between will interpolate the result (but with an 8bit texture and linear interpolation stretching won’t look well).

2 Likes