How to load textures dynamically

[hit2501]

Hi.

 

I´m trying to load a texture dynamically to a mesh through an input type="file" as you can see here:

http://concept.wec360project.se/tff.html

 

But I don´t know how to do it

 

I´m using the following code to show the choosed image in a <img>:

Select image to upload:<input type='file' name="fileToUpload" onchange="readURL(this);" /><img id="fileToUpload" src="#" alt="your image"/><script>   var design;   function readURL(input) {      if (input.files && input.files[0]) {         var reader = new FileReader();         reader.onload = function (e) {            $('#fileToUpload').attr('src', e.target.result)            $('#fileToUpload').width(200)            $('#fileToUpload').height(200);         };         reader.readAsDataURL(input.files[0]);      }   }</script>

Sorry if its messy, I´m still learning (javascript, html and english ^^')

[iiceman]

Something like that seems to work: http://www.babylonjs-playground.com/#VNVOU (found here: http://www.html5gamedevs.com/topic/14278-image-data-as-a-texture/)

 

But somehow it only works on the first selected file. If you try to change the file it somehow doesn't work anymore and I couldn't figure out why

 

Ohw and there might be a way using createObjectURL like davrous suggested here: http://www.html5gamedevs.com/topic/17066-loading-texture-from-file-dialog/?hl=%2Bcreate+%2Blocal+%2Bimage#entry96040

... but I didn't really figure that out...maybe somebody else can make a simple example

[hit2501]

Thanks iiceman by now its very useful. One more question: do you know how can I move the texture dynamically. I tried with a dynamic Offset but nothing happens  

[iiceman]

Should work with offset i think. Try something like 1.5 to See the result better.

[RaananW]

Moving the textures dynamically using v and u offset : http://www.babylonjs-playground.com/#VNVOU#1

[jerome]

mmmh... copy/paste issue with your link Raanan ...

[RaananW]

Fixed, thanks jerome.

[hit2501]

Thanks RaananW with your example I can go on with my research, but when I try to run locally I get the following error: "Uncaught ReferenceError: $ is not defined" in the line:

$('#upload').remove();

Do you know why this happens?

 

Thank you too jerome and iiceman.

[Wingnut]

Hi bud!

 

   Um, that darned $ is a jQuery thing.  You'll need to include-in that library, if you haven't yet done so.  I think that's the problem.  Party on.

[GameMonetize]

$('#upload') can be replace by document.getElementById("upload")

[hit2501]

Including the jQuery library works fine thanks Wingnut.

[dbawel]

Hello,

I've been looking for a way to select video textures by the user, and came across this post. I've tried using jquery, but have been unsucessful. If someone would be kind enough to modify the following playground scene posted by @iiceman, or provide how I might change textures on the sphere (Iassume this will work for videoTextures as well), I would be indepted.

 http://www.babylonjs-playground.com/#VNVOU

Thank you,

DB

 

[Nabroski]

this works for me:

http://www.babylonjs-playground.com/#VNVOU#8

Best

[dbawel]

Hi @Nabroski -

Thank you for putting the Playground scene together. I tried in several browsers, and no texture loads on the shpere.

I do receive an error in the console for the loader.js file Duplicate definition of module 'vs/languages/javascript/javascript'  which I don't recive on the 1st version Playgound scene. Any thoughts - perhaps a line left out?

DB

[dbawel]

@Nabroski -

Again, thank you. So does this work for you? I cannot get any texture to load on the sphere. Also, to see the error I was speaking of you need to open the JS console - it may not be an issue, but it doesn't appear when a single texture loads in the previous playground scene. I'm using Windows and have tried Chrome, Safari, and others with no luck. Is it something specific to your platform or OS?

Cheers,

DB

[Nabroski]

Hey @dbawel

could be a problem with crossOrigin settings in you browser maybe
i use with chrome --allow-file-access-from-files
try also 
chromium-browser --disable-web-security

I receive this message since two days, but ignore it.

@dbawel created a ground for you:
alternativ version
http://www.babylonjs-playground.com/#VNVOU#9

Edited June 27, 2016 by Nabroski
gif + new playground

[dbawel]

@Nabroski -

I disabled web security on both Chrome and Firefox, and still no texture. Wow, I bet we're both confused now.

Cheers,

DB

[Nabroski]

@dbawel
download and try this one:
http://www.babylonjs-playground.com/textures/babylonjs.mp4

you can also set a timeinterval, or check if the texture is loaded. ~ control structures befor you draw
when babylon console log shows percentloading the video is buffered, then the problem is somewhere else.

Maybe a Texture/Video Problem

texture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE;
texture.wrapV = BABYLON.Texture.CLAMP_ADDRESSMODE;
texture._generateMipMaps = false;
//this dont work for me, but you can give it a try
//texture.video.crossOrigin = "anonymous";

I guess we should wait for the response of developers  

Best

[dbawel]

@Nabroski -

Thank you for all your efforts. I'll keep working on this, but I hope DK or Davrous takes a look.

Cheers,

DB

[Nabroski]

also have tried other browser and it works  

 

[GameMonetize]

Works for me as well

(as least this one:  http://www.babylonjs-playground.com/#VNVOU#9  with  http://www.babylonjs-playground.com/textures/babylonjs.mp4 )

[dbawel]

Are you saying that you're not loading the textures from your local disk as the playground scene below?

http://www.babylonjs-playground.com/#VNVOU

I need to be able to load more than one file from disk. What am I missing?

Thanks,

DB

[Nabroski]

@dbawel
it seems you need to hire a developer. placing an advertisement in the local newspaper is probably a good start.

[GameMonetize]

yep I'm loading it from the disk (I downloaded the video and saved it to my desktop)

[GameMonetize]

Do you have any console error or F12 network issue?