Texture Data URL

[fcicconeto]

WebGL supports textures with base64 Data URLs, following the format "data:[mediatype];base64,[base64string]".

 

However, when creating a texture with a data url in Babylon.js:

var material = new BABYLON.StandardMaterial("0", scene);material.diffuseTexture = new BABYLON.Texture(dataUrl, scene, false, false, BABYLON.Texture.CUBIC_MODE);

the browser console shows the message:

Uncaught TypeError: Cannot read property 'replace' of null

Is there something I am doing wrong or is it a Babylon bug?

 

I attached my full test code.

 

Thanks!

index.html

[GameMonetize]

Don't forget that you can pass a buffer (DataURL or ArrayBuffer) to a new Texture using :

 

var t = new BABYLON.Texture('data:my_image_name', scene, noMipmap, invertY, samplingMode, onLoad, onError, buffer, deleteBuffer);

- name: begins with 'data:' to precise that you want to use the buffer to generate your texture

- buffer can be your base64 string from a canvas.toDataURL() or an array buffer

- deleteBuffer, means if you want to delete the buffer after loading the texture or keep it for cloning.

​

[Dédé]

Hi,

 

I have same problem.

 

Using v2.3.0-alpha (Nugget package BabylonJS version 2.2.0 targetting dotnet framework 4.6).

 

 

I have tried your solution :

var bbTex = new BABYLON.Texture("data:" + filename, scene, true, false, BABYLON.Texture.TRILINEAR_SAMPLINGMODE, null, null, arrBuff, true);

Same error :

TypeError: e.replace is not a function    at Function.r.CleanUrl (babylon.js:5)    at Function.r.LoadImage (babylon.js:5)    at a.createTexture (babylon.js:6)    at new i (babylon.js:15)

My buffer is an ArrayBuffer

 

Digging into source code (branch master) :

 

 

With your approach, it seams that the buffer is passed to the Tools.LoadImage function as the url. But the LoadImage expects a string, not the buffer...

 

[GameMonetize]

Can you reproduce it in the playground?

[Dédé]

Yes  http://www.babylonjs-playground.com/#YSDYW#1

 

This is not my final code (I am using angularjs with $http) but the behavior is the same.

 

Playground is very cool

[GameMonetize]

Ok gotcha

 

You have to encode your arayBuffer to base64 first like this:

http://stackoverflow.com/questions/11089732/display-image-from-blob-using-javascript-and-websockets

[GameMonetize]

Like this:

http://www.babylonjs-playground.com/#YSDYW#3

[GameMonetize]

Actually I integrated it in the core, that's even simpler:

 

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

[Dédé]

Thanks, pretty perfect with my code 

[tsaminamina]

hi deltakosh

i tried your playground but i change url to data base64

http://www.babylonjs-playground.com/#1ZHE0O

but its strange the direction of arrow should to right not to left

 

[GameMonetize]

Fixed:)

http://www.babylonjs-playground.com/#1ZHE0O#1