LoaderModule

[thejmazz]

There are lots of times where you need to pull in async dependencies on a per app or per component basis. I normally just do

const textureLoader = new THREE.TextureLoader()

const myImage = textureLoader.load('./foo.png')

and then use myImage later in code. If it is not downloaded yet, component will show a blank black face, then suddenly get the texture. This is not ideal, I think we can make a generic module to handle loading component dependencies, and keeping track of their progress, so that a items loading bar would get automatically made and would expose a simple status() API. Things that could be loaded are

• textures
• fonts
• sounds
• what else?

It could look something like:

import { App, LoaderModule, Box, TextureModule } from 'whs'

const loader = new LoaderModule()

const app = new App([
  loader,
  ...
])

loader.on('change', ({ totalProgress, itemProgress, item, numItems }) => {
  console.log(`${totalProgress}%: loading ${item} of ${numItems} - ${itemProgress}%`)
})

// hmm, this API needs to be discussed how to do
// I'm imagining attaching an instance of LoaderModule to modules
// and then component can somehow pull it out, the item it desires
// maybe loader.set returns the loader
const box = new Box({
  material: new THREE.MeshBasicMaterial({
    map: new TextureModule({
      texture: (loader) => loader.get('crate')
      modules: [ loader.set('crate', '/textures/crate.albedo.png' ]
    })
})

box.addTo(app)

I hope my sketch gives an idea of what I'm looking for, lets discuss!

Version:

• v2.x.x
• v1.x.x

Issue type:

• Bug
• Proposal/Enhancement
• Question

---

Tested on:

Desktop

• Chrome
• Chrome Canary
• Chrome dev-channel
• Firefox
• Opera
• Microsoft IE
• Microsoft Edge

Android

• Chrome
• Firefox
• Opera

IOS

• Chrome
• Firefox
• Opera

[sasha240100]

@thejmazz Nice idea!

I have an idea (Concept similar to current DatGUIModule implementation).

Concept:

const loader = new LoaderModule();

const app = new WHS.App([
  // ...
  loader
]);

loader.on('change', ({ totalProgress, itemProgress, item, numItems }) => {
  console.log(`${totalProgress}%: loading ${item} of ${numItems} - ${itemProgress}%`)
})

const mesh = new WHS.Sphere({
  geometry: {
    radius: 3
  },

  material: new THREE.MeshPhongMaterial(),

  modules: [
    loader.Component('player component'), // The name can be used in displaying current loading state
    
    loader.Wait('player assets', component => {
      return new Promise(resolve => {
        // ...
      })
    })
  ]
});

• Module can get material with bridge and automatically detect unloaded textures.
• loader.Component(name) - Waits until component is added to app.
• loader.Wait(name, [promise / func]) - Waits until returned Promise is resolved.

[sasha240100]

@thejmazz tell me what you think about my concept and I will start implementing it.

[thejmazz]

@sasha240100 I am also working on my own implementation, when it has the basics working I will compare/contrast API with your concept :)

[thejmazz]

I don't see in your example how to

• declare a loadable item with a key
• fetch that item when loaded in the component using an instance of LoaderModule

('player assets' and 'player components' are not used in creation of mesh or material)

So you can easily write a material constructor that can pluck out a desired texture with a key from the loader, something like

import { LoaderModule, Plane } from 'whs'

// could also pass item type (e.g. font/texture/sound)
// important part is a key is set for loadable items in module
loader.load('mytexture', 'textures/mytexture.png')

const screen = new Plane({
   geometry: { width: 1, height: 1 },
   // pass loader into component constructors so they can easily build meshes/materials
   // without worrying about loading
   material: (loader) => new THREE.MeshBasicMaterial({ map: loader.get('mytexture') })
   modules: [
     loader.wants([ 'mytexture' ]) // Promise.all on loading of these items before passing loader into mesh/material bridges/constructors
   ]
})
screen.addTo(app)