Search the Community

Hi everyone, I have recently been learning to code and currently am creating a 2d game using PIXI v5. I want to implement some interactive shadows, based on different light points on the map(lights) or "above" the map(sunlight). I still have a lot to learn about Webgl and the insides of PIXI, and I got some questions about some different approaches. I noticed that there is a plugin, PIXI lights, but unfortunately it does not work with PIXI v5. On different forums and tutorials I encountered some shader ideas that create a shadow of particular objects. This works perfectly. However, when applied to my object container, it will render the container as a single texture and create shadows that are of course not in sync with the place of the objects itself, but will appear as a combined shadow of the total combination textures. I have also tried some shadowing through normal mapping, could work great as well, but if feel is mostly suitable for creating shadows for the terrain of the map. As far as i could tell, PIXI lights is using some form of flexible normal map rendering. Im curious what you all think is the best approach to create simple moving shadows for a container of display objects. some questions: I dont understand a lot about the batch renderer, and if that would be the right area to find a solution? I noticed some thing about a batch renderer that uses a %forloop% in the shader and 'uSamplers', could this be usefull to implement inside a shader to id the textures of the individual sprites which are inside the container? Would it even make a performance difference to use the shadow shader on every object in the container or using 1 shader? Would it be beneficial to put the shader inside a PIXI.program in that case? Im looking forward to hear your perspectives. Thank in advance

For my capstone software project we are making the game quarto using reactjs and babylonjs. We have the scene set up, but we are importing multiple .glb files and while they cast shadows on themselves and on the ground, we cannot make the shadows cast from the pieces to the board. I feel like there is something that should be obvious. We have changed the directional light source. We have changed the ability of both pieces and board to cast and receive shadows. We have overlayed a shadowOnly material object over the board itself. Nothing has worked so far. The meshes are created and textured in blender before being exported as .glb files. here is our code, we don't have a playground because of local objects: import React, { Component } from 'react'; import * as BABYLON from 'babylonjs'; import BabylonScene from './BabylonScene'; import * as BABYLON_LOADER from 'babylonjs-loaders'; import sadObject from '../objects/tallLightFlatSquare.glb'; import yayObject from '../objects/tallLightHoleCylinder.glb'; import slightlyHappierObject from '../objects/gameBoard.glb'; import plainPlane from '../objects/thePlainPlane.glb'; import shortDarkFlatCylinder from '../objects/shortDarkFlatCylinder.glb'; import { PositionGizmo, ShadowGenerator } from 'babylonjs'; export default class Viewer extends Component { onSceneMount = (e) => { const { canvas, scene, engine } = e; // This creates and positions a free camera (non-mesh) var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 90, BABYLON.Vector3.Zero(), scene); /*camera.lowerBetaLimit = 0.1; camera.upperBetaLimit = (Math.PI / 2) * 0.9;*/ camera.lowerRadiusLimit = 10; camera.upperRadiusLimit = 150; camera.attachControl(canvas); // This targets the camera to scene origin camera.setTarget(BABYLON.Vector3.Zero()); // This attaches the camera to the canvas camera.attachControl(canvas, true); // This creates a light, aiming 0,1,0 - to the sky (non-mesh) //const light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene); //var pointLight = new BABYLON.PointLight("pointLight", new BABYLON.Vector3(0, 1, 0), scene); var pointLight = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-1, -2, -1), scene); pointLight.position = new BABYLON.Vector3(20, 40, 20); var shadowGenerator = new BABYLON.ShadowGenerator(1024, pointLight); // Default intensity is 1. Let's dim the light a small amount //light.intensity = 2.7; pointLight.intensity = 10; // Our built-in 'sphere' shape. Params: name, subdivs, size, scene // const sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene); // Move the sphere upward 1/2 its height // sphere.position.y = 1; //Ground object // var ground = BABYLON.Mesh.CreateGround("ground", 15, 15, 1, scene, false); // var groundMaterial = new BABYLON.StandardMaterial("ground", scene); // groundMaterial.diffuseColor = new BABYLON.Color3(0.1, 0.1, 0.1); // groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0); // ground.material = groundMaterial; // ground.receiveShadows = true; //Board Positions var board4 = new BABYLON.Vector3(-3.69, 0.069, 1.2); var board5 = new BABYLON.Vector3(-3.69, 0.069, -1.2); var board15 = new BABYLON.Vector3(3.73, 0.069, -3.85); //importing the board object BABYLON.SceneLoader.ImportMesh("", slightlyHappierObject, "", scene, (newMeshes, particleSystems, skeletons) => { var board = newMeshes[0]; board.scaling = new BABYLON.Vector3(0.5, 0.5, 0.5); board.receiveShadows = true; shadowGenerator.getShadowMap().renderList.push(board); shadowGenerator.addShadowCaster(board, true); //var shadowBoard = board.clone("shadowBoard"); //shadowBoard.material = new BABYLON.ShadowOnlyMaterial("shadowBoi", scene); // shadowBoard.position = new BABYLON.Vector3(0, .0001, 0); //shadowBoard.receiveShadows = true; } ) //importing a piece BABYLON.SceneLoader.ImportMesh("",shortDarkFlatCylinder, "", scene, (newMeshes, particleSystems, skeletons) => { var tallWhiteFlatSquare = newMeshes[0]; tallWhiteFlatSquare.receiveShadows = true; shadowGenerator.getShadowMap().renderList.push(tallWhiteFlatSquare); tallWhiteFlatSquare.scaling = new BABYLON.Vector3(0.4, 0.4, 0.4); tallWhiteFlatSquare.position = board5; var alsoTallWhiteFlatSquare = tallWhiteFlatSquare.clone("tallWhiteFlatSquare2"); alsoTallWhiteFlatSquare.receiveShadows = true; alsoTallWhiteFlatSquare.position = board4; shadowGenerator.getShadowMap().renderList.push(alsoTallWhiteFlatSquare); shadowGenerator.addShadowCaster(tallWhiteFlatSquare, true); shadowGenerator.addShadowCaster(alsoTallWhiteFlatSquare, true); }); //this is also importing a piece BABYLON.SceneLoader.ImportMesh("", yayObject, "", scene, (newMeshes, particleSystems, skeletons)=> { var yayLookingBoy = newMeshes[0]; yayLookingBoy.scaling = new BABYLON.Vector3(0.4, 0.4, 0.4); yayLookingBoy.position = board15; shadowGenerator.getShadowMap().renderList.push(yayLookingBoy); shadowGenerator.addShadowCaster(yayLookingBoy, true); }); //heck if I know engine.runRenderLoop(() => { if (scene) { scene.render(); } }); } render() { return ( <BabylonScene onSceneMount={this.onSceneMount} /> ) } }

The object is added to the list to create a shadow (.renderList.push (obj)). To display the shadow on the object itself from other elements - (.receiveShadows = true). As a result, the object creates a shadow on itself. How to fix it? example : https://playground.babylonjs.com/#D516RY Also, if there is a surface between the light source and the object, then there is a shadow on it. How to solve this problem? example: https://playground.babylonjs.com/#1RVN7H PS: I'm sorry, if you already have a theme. I find it difficult to focus on foreign language resource.

Hi everybody, I have a plane with material and diffuseTexture. The image used for the texture is a png with transparent background. In order to keep the transparent background in babylon, I set useAlphaFromDiffuseTexture = true; on the material. But now I want to see the shadow of the image. But I cant because of the useAlphaFromDiffuseTexture parameter. So my question is : Is there a way to have the shadow of my png image following the transparent and not transparent part? Thanks for your help! Pichou

Hi, I have static objects and static lights inside my scene sou it would make sense to bake them to save resources,, anyone have done it? is there some workflow to generate them from scene (in 3d max or other tool). Thanks

Hi, has been a while however I started a new project using BabylonJS, where I'm importing a model from Blender into a scene, now for some reason I cannot get it to cast a shadow. I added a cube next to it and it does cast a shadow, I'm also adding both the cube and the model to the renderList of the shadow generator.. Any ideas or suggestions what I could try or why it wouldn't work?

Hi, found weird bug with shadows. Device: Galaxy S4 OS: Android 5.0.1 GPU: {vendor: "Qualcomm", renderer: "Adreno (TM) 320", version: "WebGL 1.0 (OpenGL ES 2.0 Chromium)"} Browser: Chrome (62.0.3202.84) / Native (6.2.01.12) PG Have mesh with PBRMetalnes material and ground with PBRMaterial. Added spot light as shadow light and included sphere as caster and box as receiver. Than created instance of the sphere. And after that both spheres disappear in S4 device. Sphere dont disappear if instead of instance, clone is used. Working PG

I have a strange bug where my shadowGenerator.setDarkness value doesn't have the same effect when the debug layer is open or closed. I really don't see the possible link between those two things. Here are the 2 screenshots. Same darkness value (0.82). The only thing that differ is the commenting of the line that shows the debug layer. The shadow is cast on a plane with a ShadowOnlyMaterial Material.

Hello everyone! This is my first question about my first babylon.js project. It will be a strategy game with complex economics (similar to Caesar 3, Knights and Merchants). The framework is amazing, I like it very much, but I have some problems with shadows. Everything works fine, until I add lots of instances of a mesh across a large ground. The shadow becomes just a blob, almost invisible. I think the problem comes from DirectionalLight.prototype.setShadowProjectionMatrix where all mesh positions are checked to see how big the area is for casting shadows. The bigger the area, the more detail will be lost. Can someone give me some advice on how to handle this problem? I thought of the following: 1. Increase the mapSize from 1024 to a much larger value, but it doesn't make much difference with 2048 and the fps drops very much. 2. Somehow force the shadow casting area to be smaller with the help of customProjectionMatrixBuilder, and make it follow the camera, but how? 3. Make the shadow part of the model, like an old-school circle shadow with transparency. Ugly, but at least I get 60 fps Any other idea may be helpful You can take a look at it if it helps: http://feszer.go.ro/babylon.js/1/ P.S. I know, that instances can't have different animations, I will handle that with separate clones for every action, I think

I was wondering what is the best way to handle shadow for a "character". I made a character and i want to put a shadow at the bottom a kind of "circle" with opacity, for convenience let's say it's gonna be a transparent PNG. The way i can think of : - (1) Just add the sprite to the game, this leads to duplicated calculations in the update part cause i have to update both the "character" sprite and his shadow; - (2) Add the shadow as a child sprite of the "character", this leads to having the shadow on top of the sprite instead of back to it; - (3) Add the "character" sprite as a child of the shadow sprite, this seems not logical, but it works somehow; - (4) Create a group and add both the shadow and the sprite, (havn't test it but most likely) this leads to define specific property to the group for the size, the position and the overflow boundaries for collision relative to the "character" sprite and the shadow; - (5) Using a filter (Shader) applied on the hole game, with my character position as uniform to render the shadow directly on the "groundLayer". What do you think please ? Is there a better way that i am missing ? Thanks.

Hello, I've created a standard shadowGenerator with var shadowGenerator = new BABYLON.ShadowGenerator(512, light) - after pushing in it multiple objects I've noticed automatic quality decreasing, like that number 512 becomes lower and lower. For example 1 box: https://www.babylonjs-playground.com/#8NWA0U The same with only 100 boxes: https://www.babylonjs-playground.com/#8NWA0U#1 You see the difference. Testing shows 512 becomes ~24 -> 20 times less. Is that true that there is a fixed count of "rays" for calculating shadows? Because the more objects I have - the less "rays" gets everyone of them. Of course I could set 4096 instead of 512 - but that dramatically decreases FPS. The main question is how can we get more or less good shadows with big amount of objects? Troubleshooting from https://doc.babylonjs.com/babylon101/shadows doesn't help with that.

Hi, I get weird shadow for my imported mesh: https://www.babylonjs-playground.com/#DCU3PP#3 Here is a stl version: https://www.babylonjs-playground.com/#DCU3PP#2 Any ideas how to fix it? Thank you very much!

Hello, Playing with shadows - https://www.babylonjs-playground.com/#JI41I3 Several issues: 1. Why there are no soft shadows? 2. How do I remove this ugly black square around box/torus on the ground? I've noticed it after switching to the latest babylon.js version. If you comment out the line "shadowGenerator.useBlurExponentialShadowMap = true;" - black square will disappear and shadows will appear, but not soft. 3. If you comment out "shadowGenerator.useBlurExponentialShadowMap = true;" and uncomment "shadowGenerator.usePoissonSampling = true;" - poison shadow appears, but black square still exists;

I am loading a mesh from a babylon file The mesh has a skeleton. The shadow casted by it is not proper. See file "with_skel.jpg" to check the shadow casted. Now if i remove the skeleton by doing mesh.skeleton=null; The shadow is proper. See file "without_skel.jpg" I was able to reproduce the issue in playground but wasn't able to save the code. I got the error message "file too big" when trying to save. The code is a little large as it has an embedded scene file. So I have attached the code here. See file "playground_code,txt" Copy the code to playground to check. comment on/off line 44 to see the issue playground_code.txt

I'm using a custom material which is pretty similar to the ground material used in WorldMonger demo. The problem is that I don't get a shadows on it. Well it's not a big surprise, because I'm overriding the _effect property of the base material. The question is how can I get both my effect with a base material effect without copy-pasting the code from base material. I mean how can I get shadows while using additional effects?

Hi guys. I have a little problem, and I'm confused ) Let me explain what I have to do, and what I did, and please tell me where I wrong. I did a ground with multiple textures, for this, I used a shader. All clear. Now I have to add shadows, but first I tryed to understand how it works lights in shader, and this is almost clear . Here you have a wonderfull playground, where I try to show you what happened to me. The light is draggable. http://www.babylonjs-playground.com/#1TWMLX So I have a light which rays shines the ground, but I want that the darkness of light to be more black. The second problem. The light is on left of the box, but the box is black on left side, and white in the right side. It looks like I have another light in the right of ground. And the water is shines from this light, not from my light.(for this I think I have to add a shader to the water material I think) And the last. For box shadow to be displayed on the ground I read that I need a modelMatrix to sent to shader, a dephtexture, and so on. I make a depthtexture using a rendererTargetTexture, And I put the box in renderingList, but how to sent modelMatrix to that shader? Thank you guys. I wish you a wonderful day!

Hi everyone I have some weird issue using shadows in Babylon. Please take a look at the sample below : http://www.babylonjs-playground.com/#ITTNDX#1 It seems that the shadow is not cutted off properly ! it still appears even if the object goes under the ground. Is there anything to do to fix that ? Thanks for your time A

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

Hey! I wanted to know if the library has been updated yet to perform this function, as I found a couple of post from 2014 talking about it being in future updates @Deltakosh, An example post I found and wanted to know if it's here as would be suuuuuper useful to me right now in my current project build, if you know of another way also of it being done please let me know, please find the babylon playground link and youtube video of my build as my textures are not very good at working! https://www.babylonjs-playground.com/#80E5N5

Hi, i have a question about shadows, is it possible to let a mesh cast shadow on it self? Currently I can make a tree looking like the first picture, but in this case the 3d deep looks not that good. I looking for a solution I can get a tree like the second picture. Thanks for your help Mirco

can't see any shaodw on my mobile phone for this pg http://playground.babylonjs.com/#TM2NLD#7 but this demo works pretty good http://www.babylonjs-playground.com/?15 don't know why, would you guys please give me a hand?

Hy gangs, how's your day been? i saw a post on how to cast shadow of a texture from a plane onto a surface using the pointlight, i've been looking for that post but i couldn't find it, i should have followed the discussion trend

Hi, I'm trying to make a light: has fixed position relative to the viewer (camera); casts shadows. I set camera as the light's parent to achieve (1). But the shadow seems not updated as camera orbits. Playground: https://playground.babylonjs.com/#GWK0TQ Can I tell the shadow map to refresh? Thank you very much!

Dear Babylon JS community, we as a company have decided, that we want to use Babylon JS for a larger project. For this we have specific requirements for what the shaders have to be able to do. I will first state the problem I am trying to solve and then give the context, for possible alternative solutions. PROBLEMS: For our more complex shader computations we want to integrate shadows from at least one shadow-generator in a custom shader. For reasons of confidentiality I can not submit our current project code, that is why I created this test playground: http://www.babylonjs-playground.com/#VZKI0U We want to get the influence of all shadows on a fragment as a float value in the shader for further computations. For this we encountered the following problems: - Mapping to shadow-map coordinates seems to be wrong - using functions like computeShadow() from #include<shadowsFragmentFunctions> yields not-declared-error - computeShadow() yields always 1.0 as a result COURSE OF EVENTS: We started playing around with the standart material and shadow generators and quickly got them to work. we wrote a small utility function for setting up the shadow generators, which you can find at the top of the linked playground code. After this we played around with uploading textures into our custom shaders and were able to create the desired effects. We looked into uploading the shadow-map and the shadow-generator parameters into the shader, which was sucessful. You can find the uploads at line 113-115 of the linked playground code. Since we do not want to write the mapping to shadow map coordinates ourselves, we looked if there is already existing code, which we found in the shadowsVertex.fx, shadowsFragment.fx and shadowsFragmentFunctions.fx files. While trying to get the mapping right, we encountered the aformentioned problems. We were not able to get correct results regarding the shadow-uv-coordinates, shaderincludes like the above mentioned #include<shadowsFragmentFunctions> yields a "computeShadow() has not been declared" error when used in the code after the statement and what code we currently copied from these files seems to always yield 1.0 as a result for the sha- dow intensity. We are turning to you now, because we are at a point where we cannot find the errors in our approach/code anymore. We are required to use Babylon JS version 2.5 in our project. Although it didn't seem to make a difference for the shader code we looked through I wanted to mention it. CONTEXT: Our scene is basically shadeless, with multiple materials per object, distributed via a mask. Therefor we combine a precomputed light texture (for individual objects) with a diffuse texture and multiple material textures blended via a mask texture. Since we require no lighting computation we just want the shadow values to get some visual depth in the scene. Therefor the standart material seems to be not sufficient for our purposes, hence the reliance on a custom shader. I saw code that created a custom material with the standart shaders and then re- placed parts of the vertex and fragment code via a function. We would be ready to do this kind of code insertion, if it yields correct shadow information. Sadly I cannot find the example project for this anymore, so if you could provide a link to a simmiliar source it would be much appreciated. Thank you sincerely for your time and help With best regards from the green heart of Germany The Mainequin Team

Hi ! I am having an issue with shadow maps, it seems pretty random, but from time to time the shadow map seems to "degenerate" meaning that the shadow map's resolution progressively lowers until the shadow is not visible anymore. I don't know what could cause that, I am not running any scene optimiser and not touching my shadow map during the renderloop so there is no reason its resolution suddently start to lower by itself... I am running the (v2.5.-beta) version. I will try and pose a screenshot of the scene as I can't seem to be able to reproduce it in the playground. Thanks in advance for your time and answer !