Creating a Texture from a memory-resident image

[christian]

Hi there,

   I'm fairly new to Babylon.js, having previously worked mostly on OGL and Apple's SceneKit (similar to Babylon) outside the browser. As such, I'm probably overlooking something absolutely basic, so please bear with me if I ask a stupid question.

I'm tasked with bringing a 3D visualisation app to the web that until now only runs natively on a workstation. One task that I assumed should be simple involves materials. I can, and did, assign file-based images to materials (diffuse and specular maps), and this works really nice. But after looking through the extensive (thank you!) documentation, I'm slightly at a loss at how to achieve the following:

The original (non-web) application usually takes a client-provided image (file, usually TIFF or PDF), and then applies a filter onto that image to generate the specular map. This generation process can be quite involved, and may include importing other client-provided imagery. I have written some javascript code that imports the file to a HTML 5 canvas, runs the filter, and then creates the JavaScript image object from the result as follows:

function convertCanvasToImage(canvas) {
	var image = new Image();
	image.src = canvas.toDataURL("image/png");
	return image;
}

So far, so good.

Now, for the life if me, I don't know how to get this image into a material property; at least not short of writing this as a file somewhere, and then loading it  - this can create a ton of issues and I'd like to avoid that. There is brilliant support for a file-based image that take a string as the name, e.g.;

materialMain.diffuseTexture = new BABYLON.Texture("textures/owl90.png", scene);

But there is no way that I have found to do the same with a JavaScript object of type Image.

I have looked at procedural textures that can be based on image files, but their setup appears a bit too inflexible (relying on cofig files) and complex/big calibre (animations, shader) for something that I assume to be basic. 

So, how can I load an image / html 5 context (basically an RGBA raster image) into a babylon texture? I can't be the first poor sod to try this - what am I overlooking?

 

Thanks for any help,

-ch 

 

[jpdev]

I think you need a dynamicTexture:

var texture = new BABYLON.DynamicTexture("dynamic texture", 512, scene, true);

var textureContext = texture.getContext();

Now paint/blit your image onto the canvas of this texture.

[christian]

Ah! Thank yo *so* much for that hint! Yes, that should work. I originally dismissed the dynamic textures because I was so fixed on processing the image first, and then assigning them to the texture. This way I first generate the texture object, access the context and process directly into the texture. Brilliant, saves a couple of copy operations as well.

 

Cheer,

-ch