jonforum

hum, Some more demo here (including debugger). These all I have in stock ! and it maybe not the most nice way. https://www.pixiplayground.com/#/edit/AStdtooMVCNX_-_AeShMd https://www.pixiplayground.com/#/edit/IwtekmtCPmQxACtqWvGh0 https://www.pixiplayground.com/#/edit/rxzi0sQeQXrTxIB5QotzW Am not understand the question here, my english may not be good enough, maybe rephrase the question. The code is also unreadable for me. My eyes are bleeding.🩸 😉

is this can help you ? https://www.pixiplayground.com/#/edit/iJSP1O9dmLpGUONUnIYBv

for gsap i think it gsap.ticker.remove(gsap.updateRoot); // remove autoticks gsap.updateRoot(time);// manually and feed in the time you want look easy but the name updateRoot was weird !

yes, the system has these limitations unfortunately, and I have no idea how to fix this. I help myself with jsdoc, it allow Intellisense to suggest me that the existing names and keep references in whole project, provided that I have not forgotten. It takes discipline and time, but I don't know how to do it any other way. 🙁 I am open to any idea to this subject, because it a static technique. And if you not sure in the workflow if the ref existe or are destroyed. You can do a if condition or use optional chaining this.child.SpriteName?.method(param); the ?. are useful in dynamic cases More info https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining Bench perfo are overhere https://jsbench.me/kck6knyjmg/1

This is what you're looking for ? It existe probably many other way. On my side i use this one. see demo and code line 46 https://github.com/pixijs/pixi.js/pull/6351 Also you can take a look on this script, it another version https://github.com/djmisterjon/ANFT/blob/af9c158e9d5f1639d26f4249bacc3c362feb5ff4/js/libs/poly/polyfill.js#L176 The idea it add a property named child to DisplayObjets And use it to add references of all childs sprites with name only Then it allow do thing like this this.child.spriteName.position.x = 0 also allow array this.child.spritesNames[8].position.x = 0

320 line of code ! hum.. This approach would more clear for your user case. 12 line only const list = [ ['name','url'], ['name','url'], ['name','url'], ['name','url'], ['name','url'], ['name','url'], ] const loader = new PIXI.loaders.Loader(); list.forEach(arr => loader.add(arr[0], arr[1]) ) // or .add(...arr) loader.load(); loader.onError.add((loader, res)=>{ //stuff }) loader.onProgress.add((loader, res) => { //stuff }) loader.onComplete.add((loader, res) => { //stuff }) And as ivan say to you , for the best practice in (pre) loading a big selection of images You will need a texture packer software. You also have this one free https://www.codeandweb.com/texturepacker Work fine in pixijs, or if you use multipack or normals (premium feature) you will need to code your own manager in the pixi loader.

i think it can be good also in boilerplate, it a good starter and the only one without typescript!

Intellisense is not perfect, sometime you need help him, especially for events. Am not using maybe the best solution but it work for me.

also here a nice video for PS and AE. This one helped me a lot to do VR picture. The depthmap are rendering on AE engine for the result, but its same logic, you replace AE by pixijs and filters.

also i can see some strange artefact, am not sure why but try with png high quality image. Jpg are compressed and lossy. If artefact not fixed with png, create a issue on github for the pixi team. It can maybe a displacementFilter bug !

A lot of issue with your demo, so i just make a playground for you. You will also need refactoring your image depth map. You will need practice and also this is not a very good image for this kind of 3d. But your are on the good way! make more experimentation. ex: more black on eyes. https://www.pixiplayground.com/#/edit/ZiuvxzRpK-EE03nlFJdQy ps: for the online demo you can use https://www.base64-image.de/ ps: i don't use your demo because you code are inside html and my IDE don't like this. Logicly you should separate css,js from html.

i can take a look, but plz make a zip projet with all stuff. I am lazy

the music lol

than you can save the depthMap and use dispestion in transform filter for test your result. I don't know for the english version sorry. but it should very similar.

on photoshop 2020 you have a commande named generate bumpMap depthMap. its the same way if you want make stereo 3d picture for VR. you can use the depth Map with displacement filter and mouse to make a live 3d feeling https://redstapler.co/3d-photo-from-image-javascript-tutorial/