How to bundle images into textures using Webpack

[Nikos123]

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:

https://github.com/QuantumInformation/youtube-space-invaders/blob/master/src/gameObjects/Player.ts#L78

https://github.com/QuantumInformation/youtube-space-invaders/blob/master/src/gameObjects/Player.ts#L28

 

[Wingnut]

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!

[fenomas]

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(
    "background.png", 
    require('url-loader!?limit=10000!./background.png'), 
    scene)

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

[Nikos123]

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");

 

[fenomas]

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.