Today, I wanted to generate a displacement map with a perlin noise, and then apply it to a mesh.
I checked the doc : I can use a ProceduralTexture to generate a nice perlin noise texture. And there is also a mesh method to apply a displacement map to the geometry.
Looks like everything I need is here.
But no : you actually need an image url to apply a displacement map to a mesh, not a texture !
So, to make it work that I can either draw a perlin noise in canvas, and to dataurl it or draw the perlin texture on screen, take a screenshot and generate an url for it ?
It seems to me me that an export to dataUrl for proceduralTextures (or textures in general) could be a nice feature, it would solve my problem and allow user to create procedural textures from babylon and use them in the DOM.
Otherwise, the applyDisplacementMap function could also accept a texture instead of an url in first parameter.
What do you think about this ?
toDataUrl method would be great:
let size = texture.getSize(); let canvas = document.createElement('canvas'); // or use some temporary canvas from elsewere canvas.width = size.width; canvas.height = size.height; let ctx = canvas.getContext('2d'); ctx.putImageData(new ImageData(new Uint8ClampedArray(texture.readPixels()), size.width, size.height), 0, 0); let dataUrl = canvas.toDataURL();
But then first a separate
toImageData function to use in the
toDataUrl function. Then we might as well add a
ImageBitmaps can be drawn using the
drawImage function on a
Thanks for your help. I’ll try it out monday.
You’re right, a
toImageBitmap function would be great.