Search the Community

Hello guys, I have troubles with showing shapes that have an opacity < 1 and which are behind a sprite that also has an opacity < 1. I attach a screenshot and here the playground As you can see the shapes behind the sprite disappear I tried differents options with material's shape such as : forceDepthWrite needDepthPrePass separateCullingPass zOffset But nothing works, and on the Sprite side we don't have a lot of parameters to play with. I wonder if it's not due to a kind of optimization of babylon to not drop down the render.

First, animationGroup.setWeightForAllAnimatables works for the UFO file https://www.babylonjs-playground.com/#PSR2ZX#17, but not https://www.babylonjs-playground.com/#PSR2ZX#18. Is it because of the skeleton animation? /** * Start all animations on given targets * @param loop defines if animations must loop * @param speedRatio defines the ratio to apply to animation speed (1 by default) * @param from defines the from key (optional) * @param to defines the to key (optional) * @returns the current animation group */ public start(loop = false, speedRatio = 1, from?: number, to?: number): AnimationGroup { if (this._isStarted || this._targetedAnimations.length === 0) { return this; } for (const targetedAnimation of this._targetedAnimations) { this._animatables.push(this._scene.beginDirectAnimation(targetedAnimation.target, [targetedAnimation.animation], from !== undefined ? from : this._from, to !== undefined ? to : this._to, loop, speedRatio, () => { this.onAnimationEndObservable.notifyObservers(targetedAnimation); })); } this._speedRatio = speedRatio; this._isStarted = true; return this; } In AnimationGroup, beginDirectAnimation was used. Will beginWeightedAnimation make weight and blending working? Second (I guess is't a different issue), scene.animationPropertiesOverride = new BABYLON.AnimationPropertiesOverride(); scene.animationPropertiesOverride.enableBlending = true; scene.animationPropertiesOverride.blendingSpeed = 0.02; That works with https://www.babylonjs-playground.com/#BCU1XR, but not with scene.animationGroups._targetedAnimations.animation.enableBlending (in both https://www.babylonjs-playground.com/#PSR2ZX#17 and https://www.babylonjs-playground.com/#PSR2ZX#18). The value of enableBlending is always undefined. BTW, Weight -1 means stop while 0 also means stop too. That's confusing.

Hello! I am working on a Phaser project (however, the issue is PIXI related). I was having issues with blend modes not always being set correctly when reloading my page. After a couple of days me and my colleague found that the PIXI.blendModesCanvas was being set to something like ["source-over", "lighter", "source-over", "source-over", "source-over", "source-over"] etc. I don't know if other people have ran in to this bug, but I thought I would document this here at least, and if it still exists in newer versions of Phaser/PIXI, that is what is causing it. To fix it we just set the PIXI.blendModesCanvas to a correct list when we start loading the game. We are using Phaser 2.6.2 at the moment, and the correct list is: ["source-over", "lighter", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"]

Hi! I'm creating a game that has a lamp sprite that you can switch on/off that uses blendMode 10 or PIXI.blendModes.SOFT_LIGHT However everytime you load the game without cache on Safari 10 the blend mode fails to show. When you refresh the page so its cached it starts working. When I console.log sprite.blendMode in the sprite's update() function it says 10 so it's applied. I use canvas only mode.

Hello. I've been experimenting and enjoying Babylon.JS; thanks for all the hard work on the library. I've been trying to blend loaded model bone animations and run into issues. The simplest case would be idle->walk->run loops. This has been mentioned a while back (pre v2) here, here, and here. While you can call custom animations on each bone (ie, arms get one frame set, legs get another), this doesn't help with easing between animations that use the same bone. Another suggestion was storing the combined animations in the model, but that doesn't allow for smooth transitions (or permutes up very quickly) As a learning experiment, I dove into the code. Here's a demo of my results. The babylon.js it references is a hack experiment where I do the following: 1) allow multiple animations per target by not calling stopAnimation(target) on beginAnimation 2) on every call to a scene's animation, pass along a cache 3) on every animation._interpolate() where datatype == Animation.ANIMATIONTYPE_MATRIX, write the matrix to the cache 4) if the animation._interpolate() has a cache hit, invoke the otherwise unused matrixInterpolateFunction() with a factor value to interpolate between the 2 matrix The result plays the animations, mostly. The result is flipped, both in normals and on the z-axis, which I don't understand (my grasp of matrix math is not great). Most of the work revolved around getting data passed between the otherwise isolated animation instances so they could be aware of the other animation to blend. This hack also doesn't handle an arbitrary number of animations to merge or an easy way to work with them, since calls to stop use the target as the common factor. What is the best way to approach this? Is there something I missed in the library? Or how could I implement this correctly for Babylon.js? Thanks

Hi all - new to the forum! I've been working on something recently and had to use a bit of a wonky (slow) workaround to get the desired effect and was wondering whether anyone here had had the same issue. I'm finding it difficult to blend two images together using a bitmask without first rendering the results to a separate canvas, then drawing the blended image from the other canvas to the 'main' canvas. All my images are the same rectangular shape, and also the same size. For simplicity let's say that the first image is solid blue and the second image is solid green. The bitmask image is a left-to-right gradient ranging from transparent to solid black. What I'm trying to achieve is to make the green image transition into the blue image without, as I say, using a separate canvas and then transplanting the result into the main canvas. Here's the JS that I'm using at the moment to achieve this in a separate canvas: context.drawImage(sprites, 96, 0, 32, 16, 0, 0, 32, 16); // Draw bitmap image context.globalCompositeOperation = 'source-in'; context.drawImage(sprites, 0, 0, 32, 16, 0, 0, 32, 16); // Draw green image over the bitmask context.globalCompositeOperation = 'destination-over'; context.drawImage(sprites, 32, 0, 32, 16, 0, 0, 32, 16); // Draw blue image under the current canvas content I should probably mention that all my sprites are in a single image referenced by 'sprites'. The reason why I'm forced to use a separate canvas is because I need to *first* render my bitmask on a transparent canvas (which my main canvas isn't, there's a solid background colour) in order to retain the bitmask's transparency. In this contrived example I could just create a transparent image sized gap in the correct region of the main canvas, then perform all my operations there. This is fine when the shapes I'm rendering cover the entire sprite rectangle, although I have a case where I'm rendering circle & diamond shaped sprites and this would result in transparent gaps appearing around the resulting shape in the canvas. I've been referencing this article in my use of 'globalCompositeOperation': https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation Am I approaching this in a reasonable way or is there a better tactic to achieve this?

Hey everyone, I was looking at the documentation on BLEND_MODES and noticed there was actually no way to disable blending, equivalent of calling glDisable(GL_BLEND) on Desktop and ES OpenGL. On native mobile it increases performance when rendering fullscreen background images that do not need to blend (ie. they have no transparency in the image). Is there another way of achieving this I'm not aware of ? Thank you.

Hello, I just finished writing a small tutorial on how to apply grayscale to an image without using WebGL, and without re-creating all your assets as black&white to show unavailable/disabled/locked modes. You can find it here: http://nightlycoding.com/index.php/2015/08/phaser-io-how-to-apply-a-grayscale-filter-tip/ If you only want the code and a quick example check out this codepen: http://codepen.io/netgfx/full/KpgLmV/ Let me know if you liked this technique!

How can I create a PIXI.Container with a transparent background which I can render on top of my main stage container? My goal is it to have 4 layers which contain PIXI.Sprites and PIXI.Texts: layer 1 should be rendered beneath the player layer 2 should be rendered above layer 1 layer 3 should be rendered above the player and above layer 1 and layer 2 layer 4 should be rendered above everything else for debug information In case I can cannot use multiple PIXI.Container then how else could I achieve this effect?

Title sums it up. I tried messing with PIXI blend modes like this: this.blend = PIXI.blendModes.ADDthis.blendMode = PIXI.blendModes.ADD But they didn't seem to do anything, I think I'm doing it wrong, and I couldn't find any Phaser examples. How do I add a glow effect to Phaser Sprites or Graphics?

Hello, I am starting with 3D development so even though I know pretty much about JavaScript and CSS, all the concepts discussed here are new to me. I have followed the tutorials and now, I wanted to find a free 3D object on the web, open it with Blender and convert it to BabylonJS to go further and try myself at BabylonJS. I have installed "Blend for Visual Studio 2013" but reading the tutorial to import the file, I didn't find such file paths and it was not able to load the '.blend' file that I have found. Is it my version of Blend ?? I really feel it is a noob question but I couldn't find any other version to download... Could you please provide a few pointers to me ? Thanks a lot, Claude VERNIER