Search the Community

Showing results for tags 'transparency'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 26 results

  1. Hi Folks, I am looking for the source code about sorting transparent meshes by depth. Where can I find it? I cannot find it..
  2. Hi, When I create a cube in Blender scene, add alpha transparency, then export it as *.babylon file - cube has extra diagonals, which badly affects how transparent cube looks. How they can be removed?
  3. Hello. When I try to use png with transparency it has a very thin line where the image ends. You can see in the following example the texture has a thin grey line on the bottom side but the actual png image is completely transparent at these pixels. It might not be visible at first glance, but make the viewport of the Playground bigger and you should notice it. The line shows up on both chrome and firefox but is more visible with chrome.
  4. Hey guys, is it possible to select a sprite (via actionManager or scene.pickSprite, whatever) so the sprite transparency is taken into account? For example, in this playground the sprite is a circle: , but it is clickable on the invisible corners of the square image. Is there any way to avoid that? Thanks,
  5. Mesh Facet Depth Sort

    Hi ladies and Gentlemen, Here comes a new feature in the FacetData pack. As you may know, for performance reasons, the facets of a given mesh are always drawn in the same order. This comes to visual issues when the mesh is transparent and is no longer oriented in the right place from the camera : This new feature solves the self transparency issue by sorting the mesh facets from some location (the camera position by default) just before drawing them. The mesh is required to be updatable. The depth sort is done on each call to updateFacetData(). It can be disabled at any time to save CPU cycles if the mesh and the camera don't move any more. Usage : // the mesh must be updatable var mesh = BABYLON.MeshBuilder.CreateTorusKnot("mesh", {updatable: true}, scene); mesh.material = mat; // transparent material mesh.mustDepthSortFacets = true; // enable the depth sort, can be disabled at any time scene.registerBeforeRender(function() { mesh.updateFacetData(); // sort the facets each frame }); Note that this feature uses more memory and more CPU than an usual standard mesh. Please wait for the code review and the PR to be merged and to be pushed in the PG. Demo :
  6. SPS Particle Depth Sort

    As you know, the SPS is a standard mesh. Applying the transparency to a standard mesh leads to well-known issues ... not when visualizing other opaque or transparent meshes through this current transparent mesh, but when visualizing some parts of this transparent mesh through itself. Indeed, when passing the mesh geometry to the GPU, this one draws the mesh in the order the mesh facets are sorted in the indices array : first triangle, second one, etc ... whatever the position of the camera. The shader only respects the geometry order and this geometry is fixed. As the SPS is a standard mesh, it has the same issue when dealing with transparent particles (rotate the camera) : A new feature allows now to sort the internal mesh geometry live according to the current camera position : It sorts the SPS particles only, not all the facets, for performance reasons. To enable it, just create your SPS with the parameter enableDepthSort to true. By default, each next call to setParticles() will sort the particles according to the camera global position. If for some reasons (immobile camera and sps), you want to stop (or reactivate) the sort on the next calls to setParticles(), just set the property sps.depthSortParticles to false (or true to reactivate it) // create a particle depth sort enabled SPS var sps = new BABYLON.SolidParticleSystem("sps", scene, {enableDepthSort: true}); // then later, only do ... sps.setParticles(); // and the particle are depth sorted each call // We can skip the sorting at any time (or reactive it) : sps and camera not moving anymore sps.depthSortParticles = false; // true by default when enableDepthSort is set to true initial post : Documentation coming soon ...
  7. Is it possible with or without pixi.js to calculate the number of transparent or solid pixels for a given x/y position? My use case is that I have random trees and I want to calculate the width of their trunk at the base of the tree.
  8. Hey Folks! In our scene we have some images with transparency on quads. The transparency is just used to mask the silhouettes of the image, so we have no larger half- transparent areas. So far we used the default shader for this, which produced nice silhouettes. All these Objekt are registered in a shadow generator from which we extract the shadow map an pass it in a custom shader. After writing our own shader for the images we ran into a problem: The shadow generator now only takes the quad into account, not the transparency of the image. Therefor the shadows of these images are square. When constructing the custom shader we tell baby- lon to use alpha blending and we also tell the shadow- generator to use transparency shadows. The diffuse texture is simply loaded with a texture sampler in- cluding the alpha channel. We even tried to clip frag- ments under a certain value but the shadow genera- tor still ignores it. We looked through the default shader but couldn't find anything that's helping us in this matter. We found the opacity map, which to our understanding is just a separate, black and white masking texture. So our question is: What steps are necessiary to generate shadow silhouettes based on the alpha channel of an objects texture? As we said, clipping with a threshold or cutout for that matter would be enough. Thank you for your time -Mainequin Team
  9. PBR Alpha Map

    Does the PBR material have an Alpha Map Texture?
  10. Hi there, Is there any kind of renderer.sortObjects() or renderer.depthTest() like other frameworks have? I have several transparent objects (alpha < 1.0) on the scene and sometimes renderer behaves glitchy (please see attachment). Theoretically, could write a function for sorting meshes by a distance to camera and set .alphaIndex, but it doesn't solve the problem with self-intersection like frame does c) & b). Babylon.JS 3.01, materials are PBRMaterial() with .disableDepthWrite = false and .alphaMode = 2. Any ideas? Thanks in advance!
  11. Does anyone know why the edges of my transparent texture have red lines on it? Is there a way to prevent it from happening?
  12. Model tint with transparency

    I'd like to tint a model to black with a certain amount of transparency, let's say 60%, in a way that you'll be able to see the model's texture beneath the black tint, at 40% clarity. I created a material with black diffuse color, and applied it to the model's meshes. It is pitch black though, is there a way to make it only 60% tinted?
  13. I noticed that decals can be transparent in places but they are either 100% transparent in a pixel or 0%. I would like to have "soft" edges on my decals and also be able to only slightly color the underlying object. So a 50% transparency decal for example, or a decal with different values for the alpha channel. Is there any way to accomplish this? I tried setting visibility to 0.5 on the decal, but this breaks it (it's rendered transparent.. but as a square instead of the texture). Example here (line 38 breaks it):
  14. Hi! So I'm ultimately trying to pick some meshes with textures that have transparency, but when they overlap, the transparent parts of the mesh still get picked. Playground: If you open up the console in the playground and click the 2 black circles in the center of the overlapping "impact" textures, you'll notice that it always picks the 1st texture (although you're clicking on 2 separate "visible" textures if you take transparency into account). I thought perhaps I could test to see if the texture color at the UV coordinates of the picked mesh is transparent, and if it was, I could temporarily mark that mesh as not pickable and pick again at the same location to get the mesh under it until I got something that isn't transparent (and then restore the isPickable state of everything). I still think that could work (although it seems terribly inefficient as I have to do several picks unnecessarily), but I frustratingly can't actually find a good way to get the texture color given the texture and some UV indices (obtained through the pickedInfo). Am I just missing something obvious? Is there not simply an analogous textureObject.getTextureColorAtUV(u, v) function? I'm also open to other suggestions to get more accurate picking with transparency taken into account. Thanks so much! Zack
  15. I have this code to add a rectangle in phaser and works fine but it fills with a solid color and i want some transparency in my poly. Is that possible? poly = new Phaser.Polygon(p_1, p_2, p_3, p_4); graphics =, 0); graphics.beginFill(0xFF33ff); graphics.drawPolygon(poly.points); graphics.endFill();
  16. Text2D transparency

    Hey guys, just wondering if there's a way to set the transparency of a Text2D object (or a ScreenSpaceCanvas2D object) after it has been created? I'm assuming this functionality is somewhere but I can't find it or figure it out.
  17. Hi, I don't know how to describe or if it's the right term in the title.... I'm importing a kinematic model/hierarchy from blender (mesh with multiple submeshes) and have to change the transparency of the whole mesh. My problem is that the meshes are partially overlapping. Here is a simple playground: I think it's self-explanatory. Is it possible to make Babylon use the distance vertex-camera for alpha blending and not the distance center-camera?
  18. I notice that when I use the FxaaPostProcess my scene retains its alpha transparancy. This is important because I am overlaying my scene over a background image behind the canvas. When I use the ColorCorrectionPostProcess the background becomes black. Does anyone have a way around this? If I insert my background into the scene it will either move with the camera or be affected by the ColorCorrectionPostProcess which I do not want.
  19. Hi, I don't exactly know how the _gl.clear function works, but I would like that each frame to be redrawn ontop the former one on a transparent background. This would make each moving mesh let some kind of trace on the screen. What I did : Look at the line 4, I just set a clear color as a Color4 with an alpha value lower than 1. Now, I set the scene autoClear property to false : Well, something happens, but not what I expected ... Does someone know how to achieve what I wanted then ? and could someone also explain what happened in this PG ?
  20. Hi, all! Coul you please help me because I have no more ideas what to do with my situation. I have have many objects on my scene created with Solid Particle System. Also I have my material with custom defined shader created with needAlphaBlending: true option. The promlem is that objects are drawn in wrong order. Objects located far are drawn in front of closer objects and alphaIndex is not set for these objects. Do you have some ideas what is wrong in my case?
  21. Hi forum, i want to use order independent transparency (OIT) by using the "multiplicative blending" approach outlined in this article. Out of the box Babylon.js already supports the "sorting approach", by implementing the third rendering step documented here: ( But this will not work for overlapping meshes (which I need). In addition the multiplicative approach does not need the sorting step. I believe, that "injecting" an additional step after rendering sorted alpha blended meshes and before rendering sprites would be a solution. My question are: Does this approach make sense in the Babylon world?And if so, how could I implement it without changing Babylon itself
  22. Transparency problem

    Hello everyone, I have been struggling with a problem that I can't seem to solve. Don't know if it's lack of pixi knowledge, concept problem or lack of a good night sleep (probably a bit of all). I'm working on a simple game concept, similar to an old game called Jumpin Jack. Consider this image: This scene is composed by 2 sprite types: the red lines (platform) and a white sprite (the hole) moving along the lines (on a top layer). So, each time I want to create a hole, I simple add a new sprite of type 2 and move him accordingly. Problem is, behind this first top layer, I can have background images or other objects, etc, so the white holes that worked so well on a white background now looks really bad, because in fact the white block appears on top of everything. I consider using tilesprite, only moving the red line (that already has a transparent hole) when the hole is in that line, but gave problems because I can have two holes on the same line (moving on different directions). I consider using a transparent sprite for the hole, but of course the transparent white shows.... the red line behind.. I consider using a mask, using the sprite but that didn't work either. So, what I really need is a way to say: on this specific rectangle, sprite line is transparent (creating the hole and seeing the background), and I update that area every frame, thus moving the hole. Any ideas? Thanks, AM
  23. Transparency color

    Hi! Does anybody know if there is a way to set color of the plane to transparency? If i set hex value of plane to "#80FFFFFF" (should have 50% transparency) it just becomes black. How can I set not to have background color only BLACK text. Or if I set alpha value to transparent, everything becomes transparent. But I want only transparent background. You can see the problem in the picture (white rectangle - on which text is on is my problem):
  24. I'm not sure whether or not this is intended, but when viewing a concave mesh with hasVertexAlpha enabled, faces with normals that face the camera become visible through the rest of the mesh, resulting in a sort of 'x-ray' effect. (The depth buffer is being handled incorrectly?) Backface culling has no real effect on this, as far as I can tell. No alpha (control) [] X-Ray effect with partially-transparent voxels [] X-Ray effect with empty voxels [] Close up of X-ray effect with empty voxels []
  25. LinesMesh smooth fading

    Linesmesh does not seem to have semitransparant option. It is shown or it is invisible. (LinesMesh.visibility = 0.5 has no effect). I have unsucessfully with animated visibility nor with material.alpha. Animation itself works. How do I make it smooth fade from visible to invisible ?