• Content Count

  • Joined

  • Last visited

About AlbertTJames

  • Rank
    Advanced Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Did you stop support for canvas 2d ?? I cant see any examples in the sandbox anymore... Please do not delete support, I have thousands of hours of development building a middleware based on it. ...
  2. Do you plan on developing helpers for Sprites ? If I am using only a screenSpaceCanvas2d in my app do you think I should use GUI instead ? A lot of what I am building relies on Canvas2d, but I am spending a lot of time trying to make things work... Maybe this would be more appropriate ?
  3. Hi, I have a Text2D in a Rectangle2D, I change the text every 200ms but it does not refresh on the screen. Although when looking at the text property it changes properly. The text refreshes only if I set its levelVisible property on and off at each tic. I do not have this problem in the playground so I am not sure what is going on. state.tic = function () { const text = newText() // this works state.tooltipPause.text.text = text // setting the parent rectangle2d levelVisible // is the only way i have found to refresh the view = true // delay is simply a promise that will resolve in 200ms delay(200).then(() => { = false state.tic() }) } Just sharing the little hack I found, in case someone else has the same problem
  4. Here is a comparison of 3 center cross, one with the sprite 3d, and 2 with the sprite 2d. To reproduce the effect, grab the side of the window and resize slowly, you will see the flickering of 1 pixel. I am sure it is a round() , a floor() or ceil() somewhere... This will not be a problem for large sprites ... this flickering is present for all sprites but it is really a 1px flicker.. As a hack I will just put transparency margin around my sprite and I think it will not be visible any more, ill let you know.
  5. Hi, So... my problem is a bit specific. I will try to reproduce it in the playgroud but I am not sure I will be able to. So I have a Rectangle2d that holds 4 rectangle2d children, the green background is the parent square and the children square are the 4 grey rectangles. I am using the centering and margin system: I used to dispose of those rectangle children and recreate them at certain points in time, storing the newly created children in the same array replacing the hold ones. The problem is that when I resize the window there is a call to Prim2DBase._updatePositioning that returns (NaN, NaN) as the _actualPosition (in the if (hasMargin) ... which they do). And it cause the parent and all its children to disappear from the screen. That's why i though it was linked to the bug @Wingnut mentionned yesterday. There are several variables that are NaN, one of them is Prim2d._size3... but i do not know why, nor do I see where it is define (I only see one definition that sets it to zero... I will look tonight into the typescript source to see if it is there...). This does not happen if I do not dispose of the children prim2d... I had problems with Prim2d.dispose() before, and looking at it, I do not see where the prim2d is actually set to null. Maybe that is the problem? Some kind of persistant reference that interferes with the computation of the rectangles. I will look more into it, but if it is something people have encountered I am interested to know their thoughts. @Nockawa <3 For now I am not disposing of the prims anymore
  6. Edit: probably unrelated issue. Sorry for the spam.
  7. Should we report issues on the github directly now ?
  8. Hi, Just to report that on the example given in the documentation: Increasing the number of primitive slows down the fps, but when reducing that number fps stays low even after dispose(). I don't know it if was reported before, and I did not remember this behavior last time I checked this example... @Nockawa
  9. Dont loose hope @Nockawa ! You did such an amazing job already. I imagine how frustrating it must be, but there is no reason it should not work. With the proper approach, in theory, it should work for all use case. Just take a breather, work on it when you have time. I am sorry I cant be of more help. I can test stuff to help, but really getting into the core of canvas2d and understanding how you implemented those things is too much work for me right now. And even if I did, i would probably mess things up ! about your question, here is a link to a pixel perfect version of the center target: The behavior seems better now, but it is still jumpy with resize. And it seems not to be the size of the canvas, but the size of the whole window, because in the playground, if you cange the size of the canvas by moving the center bar the image/offset stays the same, but if you resize the window somehow it resets the sprite offset
  10. I missed those messages. Do you mean use the Sprite in a 3d scene and resize ? @Deltakosh
  11. So maybe - for this post not to be for nothing, here is the solution I am using to make sure the sounds are ready before resolving. The deferred function I am using is pretty basic, adapted from somewhere, can't remember where.. maybe bluebird: function Deferred() { this.resolve = null this.reject = null /* A newly created Pomise object. * Initially in pending state. */ this.promise = new Promise((resolve, reject) => { this.resolve = resolve this.reject = reject }) Object.freeze(this) } And there is the loading function, there is a lot of elements that will be useful to nobody, the two important part are surrounded by // IMPORTANT PART ++ // 😙 loadAssets(assetObject = mandatory(), scene = mandatory(), assetFolder = '') { if (assetObject.constructor !== Object) { throw new Error('TaskObject.loadAssets: assetObject is not an Object') } if ((assetFolder === '') && (typeof this.ASSETS_FOLDER !== 'undefined')) { assetFolder = this.ASSETS_FOLDER } const textureFormats = ['png', 'bmp', 'jpg', 'tiff', 'svg'] const soundFormats = ['wav', 'mp3', 'flac', 'aac', 'mp4', 'ogg'] const assetManager = new BABYLON.AssetsManager(scene) const R = this.R const binaryPromises = [] const names = Object.keys(assetObject) let field let type let path for (let i = 0; i < names.length; i++) { field = assetObject[names[i]] if (field.constructor === String) { path = this.ASSETS_FOLDER + field if (textureFormats.indexOf(R.getFormat(path)) !== -1) { type = 'texture' } else if (soundFormats.indexOf(R.getFormat(path)) !== -1) { type = 'sound' } else { console.warn('TaskObject.loadAssets: asset invalid or not implement with shorthand function') type = 'invalid' } } else if ((field.constructor === Object) && (Object.keys(field).includes(['path', 'type']))) { path = this.ASSETS_FOLDER + field.path type = field.type } else { console.warn('TaskObject.loadAssets: asset invalid or not implement with shorthand function') type = 'invalid' } if (type === 'texture') { const assetManagerTask = assetManager.addTextureTask(`${names[i]}Task`, path) assetManagerTask.onSuccess = function (task) { R.add({ textures: { [this.textureName]: task.texture, }, }) }.bind({ textureName: names[i], }) } else if (type === 'sound') { // IMPORTANT PART ++++++++++ // const assetManagerTask = assetManager.addBinaryFileTask(`${names[i]}Task`, path) assetManagerTask.onSuccess = function (task) { const isReady = new Deferred() binaryPromises.push(isReady.promise) R.add({ sounds: { [this.soundName]: new BABYLON.Sound(this.soundName,, scene, isReady.resolve), }, }) }.bind({ soundName: names[i], }) } // TODO all the rest such as Meshes.. what else ? } /* --- Create a Deferred promise that will resolve after loading is complete --- */ const loadDeferred = new Deferred() assetManager.load() assetManager.onFinish = function onFinish(tasks) { debuglog('TaskObject.loadAssets: tasks completed', tasks) // IMPORTANT PART +++++ // Promise.all(binaryPromises).then(() => loadDeferred.resolve(tasks)) } return loadDeferred.promise } Anyways, thanks
  12. Looking at your PG I understand the way it was intended to work. The asset manager loads raw data, then you state for each sound a callback when the Sound object will be finished transforming the data into readable sound (_audioBuffer) ? I see how I can fix my problem better on my end, and I am not sure indeed that the behavior I am requesting is really relevant, my bad. To explain where my request come from is that I am building a little layer of abstraction above Babylon and I have a function that can load a bunch of assets and store them into an external object to be used by different scenes and interact with the website too. I was intended for user to simply call this function with an object like so: taskObject.assetsToLoad = { logo2: '/assets/experiment-js-light.svg', heldenklage: { path: '/assets/sounds/nietzscheHeldenklage.mp3', type: 'sound', }, } the function would return a promise resolving when the assetManager finished all its work. It was using the assetManager like that: Anyways.. I understand that I have to give a callback when creating the sound, but in this context it is not ideal. I will just make a bunch of separate promises waiting for the sounds to be ready to play before resolving the main loader. But I am curious, what takes time between AssetManager loading and the sound being processed ?
  13. Hi, I had trouble loading sounds and playing them directly at startup. I realised that the AssetManager calls the onFinish callback before loaded sounds _audioBuffer is set and are _readyToPlay. I dont know if it was a designed choice but it would be really useful either if the asset manager waited by default for the readytoplay flag to be set, or if there was an option to set when adding the job to the manager.
  14. Could it be due to the fact that the image is not pixel perfect ? But it does not explain the different behavior in browsers... EDIT: Ok im not sure if it is pixel perfect... let me make a real pixel perfect for sure.. EDIT2: Ok the image was not exactly pixel perfect but that did not change the problem. So I pinpointed the issue a bit more. It is LINKED (due?) to the resize behavior of the canvas, if I resize my window, the slight offset changes, up down left right, sometime it actually lends perfectly.. weird
  15. Hi, I was wondering if someone had experienced slight differences in "offsets" using sprite2D texture and wether it might be related to caching. As an example I have a fairly small texture of 16*16 here in svg, but i tried also using png, same problem. That's the begining of the sprite texture zoomed in 4800% When using it in chrome with a code like this: const crossSheet = taskObject.cloneAssetIntoScene(R.get.crossSheet, scene) crossSheet.hasAlpha = false const cross = new BABYLON.Sprite2D(crossSheet, { parent: canvas, id: 'cross', marginAlignment: 'v: center, h: center', spriteSize: new BABYLON.Size(16, 16), spriteLocation: new BABYLON.Vector2(0, 0), }) cross.spriteFrame = R.get.cross_predict The texture is at the center of the screen here, in chrome the top misses 0.5px In Safari there is a difference in colors and width of strokes: If now I am using a 16,17 sprite size i get a correct sprite in chrome: But somehow it is seems worst in safari: Any clue ? Do you think it is related to the caching strategy ? @Nockawa Here is the link to the texture: Here is a playground, on the playground it is the BOTTOM 0.5px that get cutoff..