Displacement map from canvas in ThreeJS (normalMap shader)

[jurito]

Hello yall!

I'm trying to make a dynamic displacementMap drawing (onmousemove) an html canvas.

The experiment is based on http://mrdoob.github.io/three.js/examples/webgl_materials_normalmap.html.
The problem is that updating uniforms.tDisplacement.value with new THREE.Texture(canvas) won't work at all.
I tried using THREE.ImageUtils.loadTexture( canvas.toDataUrl()) and it kinda works, but's too slow and messes up the canvas itself update.
To exclude problems with the canvas, I tried using THREE.Texture(canvas) as map of a MeshBasicMaterial and it worked fine onmousemove.

TIA

 

TL;DR What's the best/fastest way to update a displacement map in a ThreeJS normalmap shader from a canvas?