Search the Community
Showing results for tags 'transparency'.
-
Dear Community, Thank you very much for the magnificent project! Currently, I am trying to create a filter which is based on a shader ""Godrays" by alaingalvan", but the one which only lightens a certain area where "lights" exist on a transparent stage. The current version creates dark places ('0x000000') where the "lights" are not shown, but the darkness must not surpass the background ('0x333333' or '0xffffff' as in CSS), so it would look like a transparent filter in the result. This is the incorrect behavior since it creates black background where the "lights" are (it is correct that it affects the background): ~ Is it even possible using this filter/shader? Is it correct that the issue is in the color matrix ("float noise(in vec3 p)")? Would it be correct to somehow base a pixel color on the source and only increase its "gain" instead? I will highly appreciate any suggestion! Best and kind regards
-
Like the Title says: I would like a game object (one) to become transparent only if another game object (two) is fully covered by the first object (one). What would be the best way about doing this? Thanks! -
In a game I am developing there is an odd issue where rotating the player character the water plane looses it's transparent state completely going opaque but only on a specific heading or the same heading facing the opposite direction, it only happens at a very small degree, you turn slightly and it goes back to transparent. How is rotating an object (which happens to be the player in this case) affect transparency only while facing in a specific direction when the object has nothing to do with the plane (except when the player moves the plane moves but it doesn't effect rotation or do anything with the plane while the character isn't moving). Is this a Three.js issue or a WebGL issue or what? I find nothing googling it in various manners even setting object.material.alphaTest doesn't do anything. It doesn't effect the shader for the water mirror, only the object material transparency.
-
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.
-
Good afternoon. Today I was given a glb of an engine part. The artist added a cutout texture to the model. When I load it into my BJS scene, the engine has a transparent/ghost-like appearance. I thought adding backfaceCulling = false and hasAlpha = true would solve this but no luck. Here's my code below: var myEngine = BABYLON.SceneLoader.ImportMesh("", "models/", "2.glb", scene, function (newMeshes) { myEngine = newMeshes[0]; myEngine.material.backFaceCulling = false; myEngine.material.hasAlpha = true; }); Do I have to create a new material and add it to the glb like in this playground? http://www.babylonjs-playground.com/#YDO1F#18 Here is an image of the engine: Thanks, Dave
-
The new GlowLayer doesn't seem to work when an opacityTexture is applied to a mesh that also has an emissiveColor. See PG https://www.babylonjs-playground.com/#ID4XRY When opacityTexture is commented out then the glow returns. Is this a bug or just a limitation of the technology at present? Or have I missed something? -
Hi Folks, I am looking for the source code about sorting transparent meshes by depth. Where can I find it? I cannot find it.. -
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?
-
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. https://playground.babylonjs.com/#AMU9TG#1
-
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: https://www.babylonjs-playground.com/#PVYYAQ , but it is clickable on the invisible corners of the square image. Is there any way to avoid that? Thanks,
-
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 : http://playground.babylonjs.com/#FWKUY0 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 : http://jerome.bousquie.fr/BJS/test/facetDepthSort.html
- 8 replies
-
- 4
-
-
- facet
- depth sort
- (and 1 more)
-
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) : http://playground.babylonjs.com/#EPBTB7#3 A new feature allows now to sort the internal mesh geometry live according to the current camera position : http://playground.babylonjs.com/#EPBTB7#2 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 ...
- 2 replies
-
- 6
-
-
-
- transparency
- particle sort
- (and 1 more)
-
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.
-
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
-
Does the PBR material have an Alpha Map Texture?
-
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!
-
Does anyone know why the edges of my transparent texture have red lines on it? Is there a way to prevent it from happening? https://www.babylonjs-playground.com/#YTHP9D
-
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? http://www.babylonjs-playground.com/#1SVN3I#57
-
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): http://www.babylonjs-playground.com/#1BAPRM#82
-
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: http://www.babylonjs-playground.com/#1UCP5L 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 -
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 = game.add.graphics(0, 0); graphics.beginFill(0xFF33ff); graphics.drawPolygon(poly.points); graphics.endFill();
-
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.
-
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: http://www.babylonjs-playground.com/#NL9YJ#1 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?
-
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.
-
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 : http://www.babylonjs-playground.com/#DC40G 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 : http://www.babylonjs-playground.com/#DC40G#1 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 ?
