Jump to content

How to bundle images into textures using Webpack


Recommended Posts

I would to bundle images into textures using Webpack, without loading them at runtime. I can't do it like the attached.

Any recommendations?

In vanilla js you can do it like this with the draw image api on canvas 2D:




Screen Shot 2017-04-01 at 17.12.58.png

Link to comment
Share on other sites

Hi Nikos!  Umm... I'm not qualified to try to answer but...  have you got extract-loader & html-loader?  Dunno much about them, but I hear people talking about those, as I browse the web... about this issue.

Do you think it is possible to retrieve the image into base64 string? 

Then you could use this method:  http://www.babylonjs-playground.com/#1WQSPX#5

Just thinkin'.  It might be worth some new web searches (webpack + base64, etc)... now that you know BABYLON.Texture.LoadFromDataString() exists.  :)

I once tried to cross that "deep river" between <img> and new Image(), and I nearly drown.  :)  Somebody (probably Deltakosh) threw a flotation device to me, and said something about trying to cross a security boundary, or similar. 

I can't remember, and I'm not smart enough to say anything fancier about that.  heh.  I think it might be a CORS border.  It's an electrified fence with Constantine wire... so... bring bandages and spare blood.  heh

IF you COULD move images from <img> tags in webpages, into Image() used in BJS DynamicTextures (for example)... that would be a CORS "step-around" circumvention, yes?  *shrug*  Not sure, though.  Smarter people will comment soon... I'm sure.  Be well!

Link to comment
Share on other sites

It looks to me like wingy's API should work as long as you don't create an Image object around the target of your require statement.

In other words:

var tex = BABYLON.Texture.LoadFromDataString(

I assume this will blow up if the image is over the size limit, of course.

Link to comment
Share on other sites

I decided to do it this way:


export default class Ground {
  mesh: BABYLON.Mesh
  click: (e: MouseEvent) => void

  defaultMaterial: BABYLON.StandardMaterial

  constructor (scene) {

    // Creation of a plane with a texture
    this.mesh = BABYLON.Mesh.CreatePlane('ground', common.MEDIUM_SIZE_MAP, scene)
    let matGround = new BABYLON.StandardMaterial('matGround', scene)
    matGround.diffuseTexture = new BABYLON.Texture(url, scene);
    (matGround.diffuseTexture as Texture).uScale = common.MEDIUM_SIZE_MAP_SUBDIVISIONS;
    (matGround.diffuseTexture as Texture).vScale = common.MEDIUM_SIZE_MAP_SUBDIVISIONS
    matGround.specularColor = new BABYLON.Color3(0, 0, 0)
    this.mesh.material = matGround
    this.mesh.rotation.x = Math.PI / 2
    this.mesh.position = new BABYLON.Vector3(0, 0, 0)
var url = require("file-loader!./assets/img/background.png");


Link to comment
Share on other sites

That should work, but I don't think it's doing what you asked for - (bundling the image without loading it at runtime). 

I believe webpack will just replace that require statement with a URL to wherever it intends to put the image, and then the image  will get loaded normally.

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