Jump to content

Texture Data URL


Recommended Posts

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.




Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 4 months later...



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...


Link to comment
Share on other sites

  • 1 year later...

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...