Jump to content

Creating a Texture from a memory-resident image


Recommended Posts

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,



Link to comment
Share on other sites

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.




Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...