Image Data as a texture?

[spritefire]

Hey guys, 

Just a quick question because  couldn't find any info anywhere.

Is it possible to use image data as a texture? if so how would i go about it? I'm not having much luck

 

ie var image= canvas.toDataURL("image/jpg");  Can post this to the server and create image file which works fine which I can then change the texture on the mesh with that file. 

But what I would like to do is just skip the server upload / file creation so the data is used directly. 

 

scene.mesh.material.diffuseTexture.dispose();

scene.mesh.material.diffuseTexture = new BABYLON.Texture(image, scene); //works if its a file created by the data, but not if it is just the data.

[jerome]

is this the same question : http://www.html5gamedevs.com/topic/11570-sprite-manager-texture/?p=66896 ?

[JCPalmer]

I just added Texture inlining in Tower of Babel, a Blender source code generator.  It is not in production yet, and I will not show you the python script, since it would probably just confuse you.

 

Here is the source code generated though (I shortened the string)

texture = BABYLON.Texture.CreateFromBase64String("data:image/jpg;base64,/9j/4AAQgABAQAAAD/2wBDAAgGBgcGBQ...", "texture name", scene); 

Do not know how get the data into base64 in javascript.  I just had to figure that out in python.  This exceeded my expectation though!  It was pretty easy to code, and it actually compressed my data!  Before my scene with 2 texture files was:

 

inline.js     :  141.8 kb

image.jpg :  726.4 kb

image.png:  191.4 kb

TOTAL      : 1059.6 kb

 

now the combined file is: 523.6 kb

[JCPalmer]

Ok, found how it could possibly be compressing.  It, of course, was not.  The 726.4 kb .jpg was generated from a .blend file with an embedded .jpg file.  When an image is embedded in the .blend, the export script HAS to copy it out into a separate file for use in BJS (or used to HAVE to ).  When it does this, the file gets very large for some reason.

 

Blender pro tip: never embed or in Blender jargon pack a .jpg image, unless you are going inline your textures with TOB.

 

I found an original of the .jpg that was 92.3 kb / 425.5 kb total.  This means encoding was less efficient than separate files.  That does not mean separate images are going to be faster, probably the opposite.  Pestering the server several times when it can be done with 1 usually can be faster with TCP/IP.  Not sure if gzip on http server is different for text vs image.

 

Sorry for hijacking your thread, but AFAIK CreateFromBase64String does answer your question.

[spritefire]

Ahh I had a silly mistake in my code :/ 

Jerome was right about it being answered (you can use urlData as a texture via buffer). 
I also found this working example in the playground: http://www.babylonjs-playground.com/#17YNKA

I had replicated it and it still wasn't working and even copied my image data to the playground (which worked).. and went and had a cup of coffee went back to my code and saw I had two lines of code of the same thing :/

This is awesome that you can do this though. Has so many possibilities. Can move the data around on the mesh on the fly, grab it and throw it onto a 2d canvas and then add filters, or bake lighting etc and then place it back up on the mesh or do some procedural textures etc