Search the Community

Congrats on v5 you awesome people! So a long time ago I was working on top down 2D game that had line of sight, but I ran into performance problems problems that sound like they can be more easily solved in v5. For some reason the forum is not letting me upload images so here are some links. Screenshots: https://timetocode.tumblr.com/post/164071887541/much-progress-screenshots-show-in-game-terrain Video of line of sight https://timetocode.tumblr.com/post/163227386513/11-second-video-tree-blocking-line-of-sight It's just one of those pseudo-roguelike line of sight effects where you can't see around corners (real-time though!). It involved lots of triangles, and the algos were based on Amit Patel's https://www.redblobgames.com/articles/visibility/ To achieve this effect I created a canvas separate from pixi with the shadow color filling the screen, and then I would mask/subtract the triangles generated by the visibility algo. I would then take that resulting image with a littl ebit of blur and put it in a container that was rendered underneath the wall sprites. That was the fast version, I also made another version based on pixi graphics that had other issue. Even the fast version had all sorts of garbage collection problems, probably because it was creating a texture the size of the whole screen every frame and then discarding it. It sounds like v5 can probably handle this feature without generating a texture every frame. Could someone suggest a way to accomplish this in v5? I don't have to put the shadows under the wall sprites if that is particularly hard.. they could be ontop of everything instead -- just whatever stands a chance of hitting 60 fps on a chromebook. TY TY

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} /> ) } }

This was entirely accidental. I was adding large voxel maps (126x126x32) together with Mesh.MergeMeshes and trying to have them self-cast shadows. I was testing frame rates on a few computers to see which techniques were better for performance. A strange and buggy texture appeared on everything that looks like stripes, but for whatever reason it is lighter near the outwards facing edges of meshes and darker towards the inner edges. I think it looks like ambient occlusion. Before fixing it, I figured I should take a few pictures in case it was the type of thing worth trying to reproduce in the future. Sorry if this is just some normal thing that shadows do, for me it was a surprise. The interesting looking "bug": How my game usually looks: Example of the performance test, this used to be 9 meshes, but I merged them into one. Some of the meshes were 5 MB+ of voxel noise converted to meshes via magicavoxel. The striped pattern (not a texture, i have no textures) is visible in the pink area, meanwhile all of the voxels in the distance look like they're being shaded. The tree and the stairs behind it got some special texture and shading. Normally the steps on the stairs aren't even distinctly visible b/c they're the same color and I've done nothing to make them pop out. Just seeing this makes me want to add some textures or maybe learn about shaders.

I'm trying to cast some shadows from a voxely mesh onto itself, and I seem to be getting a bit of light right at the base of the shadows. Any idea how to fix? First picture is the shadows in their simplest mode before any blurring: And here are some shadows with all of the effects, which causes even more light to appear: I'm not sure how to reproduce it in the playground. I got my shadows just by copying and pasting the ShadowGenerator from the shadow demo: https://playground.babylonjs.com/#FH3FM2 In the shadow demo there is no problem, the shadow goes right to the foot of the columns without any light appearing underneath. My scene is one single mesh, so I tried merging the ground and the columns in the shadow demo but that didn't reproduce it either. Here is the merged: https://playground.babylonjs.com/#FH3FM2#12 Any ideas?

Greetings, BJS guru's!!! I need get right direction on yours experiens Task: we have scene with many different medium and small static objects on few objects (as table with glasses, books, notepads and etc... or city site with houses, pillars, cars and so on). And we wanna looking good shadows for this objects. First way: Render lightmaps for every objects in Blender and get heavy-metal loading time for scene, but fast rendering on weakly devices. And big headache, if some objects needs moving (new render lightmap and ...jump to start). Second way: Use babylonjs shadowgenetator's (PercentageCloserFiltering make very beauty shadows) with risk get slow render (oh where's my liked 60fps!?) :)) But for this task we have static objects... Perhaps Babylon can cache or generate lightmaps only once? Or this is the case for objects with freezeWorldMatrix flag? Or we need someways control this process? Or some otherwise? Or what? ) Please tell your's advice and sorry for language in message )

So, I am trying to make a room, lit up with some lights. I use blender v2.77a on GNU/linux, blenderexporter 4.4.4 and I am testing the result in the babylonJS sandbox online. l the walls have the same purple material, the floor has a gray material and the two boxes have a red solid material. The light is a spot light, under a certain angle, and a larger size, the light values are otherwise unchanged from default. You can see the the issue in the attached files, the babylonresult.jpg looks crazy compared to what blender "previews". The middle wall is lit on both sides, even though the light is on one side only, there are no shadows, the rightmost wall is not lit at all and the light on the floor seems constant, regardless of distance from source. Can someone please point me into a direction where I can learn of my wrongdoings? The .blend, .babylon and the log are also attached. Thank you in advance! Borut ctest.blend ctest.babylon ctest.log

I'm trying to add shadows and its not coming out too well. I think the high-poly count (100k) and lack of soft shadowing is producing some weird affects. This is the result from Babylon.js http://www.punkoffice.com/babylon/luke.html What I'm trying to do is find out if Babylon.js is suitable for animated photogrammetry-made humans. The only framework that I've gotten this working with so far is Unity 5, which you can see here http://www.punkoffice.com/luke/ My shadows are set up like this var shadowGenerator = new BABYLON.ShadowGenerator(4096, light); var mesh = newScene.meshes[0]; shadowGenerator.getShadowMap().renderList.push(mesh); shadowGenerator.useVarianceShadowMap = true; shadowGenerator.usePoissonSampling = true; mesh.receiveShadows = true; ground.receiveShadows = true; (using directional light as light source) Is there any way to make the Babylon.js shadow look like the Unity 5 one?

So I can either use Triplanar Material or have shadows it seems.. I get the following when I try to use ground.receiveShadows=true; babylon.js:3 BJS - [16:18:56]: Unable to compile effect with current defines. Trying next fallback.t._ErrorEnabled @ babylon.js:3t._prepareEffect @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadFragmentShader @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadVertexShader @ babylon.js:15t @ babylon.js:15s.createEffect @ babylon.js:5t.isReady @ babylon.triPlanarMaterial.min.js:1r.render @ babylon.js:13t.render @ babylon.js:13t.renderUnsorted @ babylon.js:10t.render @ babylon.js:10t.render @ babylon.js:10i._renderForCamera @ babylon.js:12i._processSubCameras @ babylon.js:12i.render @ babylon.js:12(anonymous function) @ index.html:1374s._renderLoop @ babylon.js:4 babylon.js:3 BJS - [16:18:56]: Vertex shader:triplanart._ErrorEnabled @ babylon.js:3t._dumpShadersName @ babylon.js:15t._prepareEffect @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadFragmentShader @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadVertexShader @ babylon.js:15t @ babylon.js:15s.createEffect @ babylon.js:5t.isReady @ babylon.triPlanarMaterial.min.js:1r.render @ babylon.js:13t.render @ babylon.js:13t.renderUnsorted @ babylon.js:10t.render @ babylon.js:10t.render @ babylon.js:10i._renderForCamera @ babylon.js:12i._processSubCameras @ babylon.js:12i.render @ babylon.js:12(anonymous function) @ index.html:1374s._renderLoop @ babylon.js:4 babylon.js:3 BJS - [16:18:56]: Fragment shader:triplanart._ErrorEnabled @ babylon.js:3t._dumpShadersName @ babylon.js:15t._prepareEffect @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadFragmentShader @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadVertexShader @ babylon.js:15t @ babylon.js:15s.createEffect @ babylon.js:5t.isReady @ babylon.triPlanarMaterial.min.js:1r.render @ babylon.js:13t.render @ babylon.js:13t.renderUnsorted @ babylon.js:10t.render @ babylon.js:10t.render @ babylon.js:10i._renderForCamera @ babylon.js:12i._processSubCameras @ babylon.js:12i.render @ babylon.js:12(anonymous function) @ index.html:1374s._renderLoop @ babylon.js:4 babylon.js:3 BJS - [16:18:56]: Unable to compile effect with current defines. Trying next fallback.t._ErrorEnabled @ babylon.js:3t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadFragmentShader @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadVertexShader @ babylon.js:15t @ babylon.js:15s.createEffect @ babylon.js:5t.isReady @ babylon.triPlanarMaterial.min.js:1r.render @ babylon.js:13t.render @ babylon.js:13t.renderUnsorted @ babylon.js:10t.render @ babylon.js:10t.render @ babylon.js:10i._renderForCamera @ babylon.js:12i._processSubCameras @ babylon.js:12i.render @ babylon.js:12(anonymous function) @ index.html:1374s._renderLoop @ babylon.js:4 babylon.js:3 BJS - [16:18:56]: Vertex shader:triplanart._ErrorEnabled @ babylon.js:3t._dumpShadersName @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadFragmentShader @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadVertexShader @ babylon.js:15t @ babylon.js:15s.createEffect @ babylon.js:5t.isReady @ babylon.triPlanarMaterial.min.js:1r.render @ babylon.js:13t.render @ babylon.js:13t.renderUnsorted @ babylon.js:10t.render @ babylon.js:10t.render @ babylon.js:10i._renderForCamera @ babylon.js:12i._processSubCameras @ babylon.js:12i.render @ babylon.js:12(anonymous function) @ index.html:1374s._renderLoop @ babylon.js:4 babylon.js:3 BJS - [16:18:56]: Fragment shader:triplanart._ErrorEnabled @ babylon.js:3t._dumpShadersName @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadFragmentShader @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadVertexShader @ babylon.js:15t @ babylon.js:15s.createEffect @ babylon.js:5t.isReady @ babylon.triPlanarMaterial.min.js:1r.render @ babylon.js:13t.render @ babylon.js:13t.renderUnsorted @ babylon.js:10t.render @ babylon.js:10t.render @ babylon.js:10i._renderForCamera @ babylon.js:12i._processSubCameras @ babylon.js:12i.render @ babylon.js:12(anonymous function) @ index.html:1374s._renderLoop @ babylon.js:4 babylon.js:3 BJS - [16:18:56]: Unable to compile effect with current defines. Trying next fallback.t._ErrorEnabled @ babylon.js:3t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadFragmentShader @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadVertexShader @ babylon.js:15t @ babylon.js:15s.createEffect @ babylon.js:5t.isReady @ babylon.triPlanarMaterial.min.js:1r.render @ babylon.js:13t.render @ babylon.js:13t.renderUnsorted @ babylon.js:10t.render @ babylon.js:10t.render @ babylon.js:10i._renderForCamera @ babylon.js:12i._processSubCameras @ babylon.js:12i.render @ babylon.js:12(anonymous function) @ index.html:1374s._renderLoop @ babylon.js:4 babylon.js:3 BJS - [16:18:56]: Vertex shader:triplanart._ErrorEnabled @ babylon.js:3t._dumpShadersName @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadFragmentShader @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadVertexShader @ babylon.js:15t @ babylon.js:15s.createEffect @ babylon.js:5t.isReady @ babylon.triPlanarMaterial.min.js:1r.render @ babylon.js:13t.render @ babylon.js:13t.renderUnsorted @ babylon.js:10t.render @ babylon.js:10t.render @ babylon.js:10i._renderForCamera @ babylon.js:12i._processSubCameras @ babylon.js:12i.render @ babylon.js:12(anonymous function) @ index.html:1374s._renderLoop @ babylon.js:4 babylon.js:3 BJS - [16:18:56]: Fragment shader:triplanart._ErrorEnabled @ babylon.js:3t._dumpShadersName @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadFragmentShader @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadVertexShader @ babylon.js:15t @ babylon.js:15s.createEffect @ babylon.js:5t.isReady @ babylon.triPlanarMaterial.min.js:1r.render @ babylon.js:13t.render @ babylon.js:13t.renderUnsorted @ babylon.js:10t.render @ babylon.js:10t.render @ babylon.js:10i._renderForCamera @ babylon.js:12i._processSubCameras @ babylon.js:12i.render @ babylon.js:12(anonymous function) @ index.html:1374s._renderLoop @ babylon.js:4 babylon.js:3 BJS - [16:18:56]: Unable to compile effect: t._ErrorEnabled @ babylon.js:3t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadFragmentShader @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadVertexShader @ babylon.js:15t @ babylon.js:15s.createEffect @ babylon.js:5t.isReady @ babylon.triPlanarMaterial.min.js:1r.render @ babylon.js:13t.render @ babylon.js:13t.renderUnsorted @ babylon.js:10t.render @ babylon.js:10t.render @ babylon.js:10i._renderForCamera @ babylon.js:12i._processSubCameras @ babylon.js:12i.render @ babylon.js:12(anonymous function) @ index.html:1374s._renderLoop @ babylon.js:4 babylon.js:3 BJS - [16:18:56]: Vertex shader:triplanart._ErrorEnabled @ babylon.js:3t._dumpShadersName @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadFragmentShader @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadVertexShader @ babylon.js:15t @ babylon.js:15s.createEffect @ babylon.js:5t.isReady @ babylon.triPlanarMaterial.min.js:1r.render @ babylon.js:13t.render @ babylon.js:13t.renderUnsorted @ babylon.js:10t.render @ babylon.js:10t.render @ babylon.js:10i._renderForCamera @ babylon.js:12i._processSubCameras @ babylon.js:12i.render @ babylon.js:12(anonymous function) @ index.html:1374s._renderLoop @ babylon.js:4 babylon.js:3 BJS - [16:18:56]: Fragment shader:triplanart._ErrorEnabled @ babylon.js:3t._dumpShadersName @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadFragmentShader @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadVertexShader @ babylon.js:15t @ babylon.js:15s.createEffect @ babylon.js:5t.isReady @ babylon.triPlanarMaterial.min.js:1r.render @ babylon.js:13t.render @ babylon.js:13t.renderUnsorted @ babylon.js:10t.render @ babylon.js:10t.render @ babylon.js:10i._renderForCamera @ babylon.js:12i._processSubCameras @ babylon.js:12i.render @ babylon.js:12(anonymous function) @ index.html:1374s._renderLoop @ babylon.js:4 babylon.js:3 BJS - [16:18:56]: Defines: #define DIFFUSEX #define DIFFUSEY #define DIFFUSEZ #define BUMPX #define BUMPY #define BUMPZ #define SPECULARTERM #define NORMAL #define NUM_BONE_INFLUENCERS 0 #define BonesPerMesh 0 #define LIGHT0 #define DIRLIGHT0 #define DIRLIGHT1 #define DIRLIGHT2 #define SHADOWS #define SHADOWFULLFLOAT t._ErrorEnabled @ babylon.js:3t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadFragmentShader @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadVertexShader @ babylon.js:15t @ babylon.js:15s.createEffect @ babylon.js:5t.isReady @ babylon.triPlanarMaterial.min.js:1r.render @ babylon.js:13t.render @ babylon.js:13t.renderUnsorted @ babylon.js:10t.render @ babylon.js:10t.render @ babylon.js:10i._renderForCamera @ babylon.js:12i._processSubCameras @ babylon.js:12i.render @ babylon.js:12(anonymous function) @ index.html:1374s._renderLoop @ babylon.js:4 babylon.js:3 BJS - [16:18:56]: Error: ERROR: 0:83: '{' : unexpected token ERROR: 0:83: 'syntax error' : invalid expression ERROR: 0:83: '{' : unexpected token after conditional expression ERROR: 0:163: '{' : unexpected token ERROR: 0:163: 'syntax error' : invalid expression ERROR: 0:163: '{' : unexpected token after conditional expression It's fine up until I enable receiveShadows on the ground mesh.. I can not reproduce this in PG, so not sure how to explain it in much further details than the above. I am using Babylon 2.5-beta which the PG also is using. Perhaps there is another extension I need to have enabled or something? It really didn't look complex at all, so not sure why I am getting this behaviour!

Looks like applying the following shadowGenerator.getShadowMap().refreshRate = BABYLON.RenderTargetTexture.REFRESHRATE_RENDER_ONCE; light.autoUpdateExtends = false; in combination with shadowGenerator.useContactHardeningShadow = true; doesn't really do anything: the frame rate drop is massive and remains low. I can't vouch for other properties (e.i. shadowGenerator.usePercentageCloserFiltering) as the frame rate doesn't seem to get affected.

Hi everybody, I'm looking for a way to get a ground in my scene with the same exact color of the background (scene.clearColor), that reflects the meshes above it and that displays shadows casted by a light on receiving objects. I tried to use EnvironmentHelper to get this result but I always have a halo on the ground, see the following playground: https://www.babylonjs-playground.com/#10D6YT#122 Is there a way to avoid that halo so that the color of the ground is the same as the background? I don't want the user see the ground at all, I only want shadows and mirroring. I tried also to use the BackgroundMaterial directly but without success (see playground) https://www.babylonjs-playground.com/#G3HSAW#15 I tried then to create the ground and the materials by hand but as in the following playground, but I have a problem to show shadows and reflections at the same time. Also, to get the same color of the background I set gammaSpace to true on the MirrorTexture but I get a reflection too dark (and no shadows). https://playground.babylonjs.com/#QUXPMR I saw that exists ShadowOnly material that shows only shadows. Is there a similar material with mirroring too? Any suggestions are welcome, thanks, Matteo

Hello, I have problems casting shadows on objects that have PBR material and environmentTexture. I don't know how to dim the light emitted by the environmentTexture, or even better, make the intensity of the reflection related to the lights of the scene. Since shadows are the areas on the objects where there is no light, and the reflection of the environment texture is not affected by the lights, I can't get shadows on the object. Please, check the following example. http://www.babylonjs-playground.com/#BCHEUP There is a barely visible shadow on the PBR ball, from the torus. My questions are: 1) How can I make the ball dim/brighten according to the lights of the scene to some extend. 2) How can I change the intensity of the light of the environment texture, so that I can change the "intensity" of the reflected light of the ball, regardless of the surrounding lights? So that I can control how much the lights of the scene affect the brightness of the object. Thanks in advance!

Hello, Thanks to Webgl 2, we have been able to introduce two new kind of shadows: PCF (improved version of poisson sampling) and PCSS (contact hardening shadows). They are only available on Webgl 2 and will fallback to poisson sampling on other devices. Here is a quick shot at how contact hardening tries to simulate real life by getting softer when the blocker is further away from the receiver: https://playground.babylonjs.com/#ZT8BKT#2 And a real use in a scene with self shadows: https://www.babylonjs-playground.com/#EYEPRI#3 As usual, the doc have been upgraded: https://doc.babylonjs.com/babylon101/shadows#percentage-closer-filtering-webgl2-only And to properly setup self shadow: https://doc.babylonjs.com/babylon101/shadows#self-shadow Hope you ll enjoy it.

Hello, I am using shadowGenerator.useBlurCloseExponentialShadowMap = true; to cast shadows. Oddly, the closer the shadow casting mesh is to the shadow receiving mesh, the lighter the shadows.. see attached pic. I am not using this for self-shadowing, just to cast a shadow from one mesh to another. I appreciate shadow / lighting setup is or can be complex, but is this behaviour expected or am I misusing useBlurCloseExponentialShadowMap ? Thank you

Hi guys, I recently started with some visual fidelity stuff in my scene and I wanted to add shadows. Now, I load a mesh that I exported from blender and I do this BABYLON.SceneLoader.ImportMesh("", "lib/orteclbvis/themes/defaulttheme/models/","yard.babylon", this.scene, (newMeshes, ParticleSystem, skeletons ) => { newMeshes[0].rotate(BABYLON.Axis.Y, BABYLON.Tools.ToRadians(180), BABYLON.Space.LOCAL); newMeshes[0].position.y = this.getEnvironmentHeight(); newMeshes[0].position.z = 0; newMeshes[0].position.x = 30000; if(this.sceneObjects.sunLight) { var shadowGenerator = new BABYLON.ShadowGenerator(1024*16, this.sceneObjects.sunLight); shadowGenerator.setDarkness(.3); SceneManagerHelper.enableMeshShadowsRecursively( <BABYLON.Mesh[]>newMeshes, shadowGenerator); } }); // recursive shadow enabler method code: static enableMeshShadowsRecursively(meshes : BABYLON.Mesh[], shadowGenerator : BABYLON.ShadowGenerator) { for(var i = 0; i < meshes.length; i++) { var m = meshes[i]; shadowGenerator.getShadowMap().renderList.push(m); m.receiveShadows = true; var childs = m.getChildMeshes(); if(childs && childs.length > 0) { this.enableMeshShadowsRecursively(<BABYLON.Mesh[]>childs, shadowGenerator); } } } } And my shadows are weirdly offset. See attached images. Any idea how that can happen? My scene scale is quiet big (1 babylon unit = 1mm)

My shadows seem to be coming out strange. By default I get splotches, so I used this from an example shadowGenerator.useBlurExponentialShadowMap = true; shadowGenerator.useKernelBlur = true; shadowGenerator.blurKernel = 10; Its slightly better but still weird. Does anyone know what might be the problem? I'm using Babylon v3.2.0-alpha6

Hello Everyone ! I am currently working on an 'indoor' project and can't manage to solve an issue. I would like to render a room with a ceiling light. I am working with StandardMaterial only. I use a single pointLight to avoid heavy computations with multiple lights. Every mesh both cast and receive shadows. To see non-directly-illuminated mesh, I also use an ambientColor on every material on the scene. Thanks to Deltakosh's answers on a previous post, I managed to get correct shadows using Close Exponential Shadow Map by stretching my scene into a unit cube and setting the depthScale of the shadowGenerator to 1. I use shadowGenerator.setDarkness(0) to ensure shadows are the most dark as possible. However, even if these shadows are correct, they are way too light to be seen in my scene. I think this is both due to the depthScale and the fact that receiving-shadows-mesh material have an ambientColor. I thought about apply a filter directly in the shadows texture to increase level of gray in the entire image but I don't know how to get this texture and how to apply filter before the render. Do you know how to do that ? Or any ideas on how to reach my goal ? Because the room I would like to render is fully dynamic, I think I cannot use tricks like static lightMapping. PS : Here is a PG showing my problem. I would like the shadow to be darker. Thank you very much !

http://playground.babylonjs.com/indexstable#XUS5AG#1 In the example above, the sphere is located directly above the torus. As you can see, the shadow that it casts bleeds through the top of the torus and on to the lower portion. Is there any way to prevent this behavior? I have a game where the maps are generated as a single SPS that receives shadows, but objects on upper floors cast shadows that bleed through onto any part of the mesh that's under them, such as lower floors. In my attempts to get around this, I created a custom shader that fades the shadow according to the difference between the shadow map depth and the depth of the caster. While it "works" on the shadow from the object on the floor above (sans the aliasing), you can see where it cuts in to the shadow at the bottom of the attached image. The shadow at the bottom is being cast by an object on a lower level, one that's further from the shadow's light source.

Hey all, Sorry to bother you with yet another shadow related question, but i'v ran into trouble. I'm doing some tests with dynamic world creation and shadows. So i'm using directional light to cast shadows, but for every mesh i import the shadows get more and more "crispy". This is fine as long as i keep light.autoUpdateExtends as false.., BUT i ran into another issue; the "shadow projection" from the light is very slim and parallel with light angle, i simply don't know how to enlarge the shadow projection so it would fit with camera view. Any ideas? - eljuko EDIT: added image. As u can see, the shadows from the rocks doesn't fit in the projection.

Hi. I'm trying to get softer shadows in my scene using a blur exponential shadow map. When enabled, the shadow generator seems to incorrectly affect one of my meshes. Here's my scene with a default shadow generator (blur disabled): Looking good. You can see the hard shadows from the tree, cast onto the clouds in the bottom left corner. And here's with blur enabled: The shadows look softer on the clouds, but the tree mesh got significantly darker. Here's my code: // light & shadows var lightPos = new BABYLON.Vector3(160, 80, 160); var dirLight = new BABYLON.DirectionalLight("dir01", lightPos.negate(), scene); dirLight.position = lightPos; var shadowGenerator = new BABYLON.ShadowGenerator(1024, dirLight); // shadowGenerator.useBlurExponentialShadowMap = true; // materials var treeMat = new BABYLON.StandardMaterial("treeMat", scene); var cloudMat = new BABYLON.StandardMaterial("cloudMat", scene); var atlasTex = new BABYLON.Texture("textures/Website_Atlas.jpg", scene); treeMat.diffuseTexture = atlasTex; cloudMat.diffuseTexture = atlasTex; // meshes var finishedLoadingMeshes = function (task) { task.loadedMeshes.forEach(function (mesh) { switch (task.name) { case 'treeMeshTask': mesh.material = treeMat; mesh.receiveShadows = true; shadowGenerator.getShadowMap().renderList.push(mesh); break; case 'cloudMeshTask': mesh.material = cloudMat; mesh.receiveShadows = true; shadowGenerator.getShadowMap().renderList.push(mesh); // create cloud rings... break; } }); }; var treeMeshTask = assetsManager.addMeshTask("treeMeshTask", "", "meshes/tree/", "Website_Tree.gltf"); treeMeshTask.onSuccess = finishedLoadingMeshes; var cloudMeshTask = assetsManager.addMeshTask("cloudMeshTask", "", "meshes/clouds/", "Website_Cloud.gltf"); cloudMeshTask.onSuccess = finishedLoadingMeshes; Has anyone had this problem before? I searched the forum and couldn't find any similar issues.

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

This may be a dumb typo error, but I'm asking just in case it's something truly weird. I want to utilize the Shadow-Only material, but it's not showing its effects. To clarify, using a default sphere and a directional light, I'm casting shadows on a plane. The shadows show on a non-Shadow-Only material, but once Shadow-Only is activated, the shadows disappear. (as exemplified by "testscene.js") (Efforts to work from the sample playground have been weird. While I got the sample to work by downloading it, it will no longer load my obj files. Either problem is fine, I just want to know what I'm doing wrong, or what's happening. (as exemplified by "index.html")) EDIT: I realised it has something to do with my hemispheric light, but I don't know why that is. I'd really quite prefer if I kept it, so if there are any explanations I'd be happy to hear it! index.html testscene.js

I am having trouble with my shadows. Everything that receives shadows but is not occluded is covered with what I think is elsewhere referred to as "shadow acne". 1 blender exported ESM shadows do not work at all. Why? Are they for a later version of Babylon? 2 I am not clear on how the shadows are being mapped. My first approach was to try to minimize field of illumination to increase the apparent resolution by pointing spot lights at my model and setting the camera clipping plane (which apparently is mapped in the blender exporter to the shadowMinZ/MaxZ) to conservative levels. I have had inconsistent results with this, so I really would like to understand clearly what it does. Is there in fact a Z axis resolution of the shadow map? 3 Of course I toyed with the shadow bias settings as well. However, when I set the map resolution to 512, by the time I get rid of the problems, the shadows begin well, well below the overhangs that create them. Much further than the apparent resolution of the shadow map would suggest is necessary. Then I decided to turn up the shadow map resolution to 4096, but then, even adding .00001 to the default bias setting offsets the shadow map by a huge amount, rendering the setting essentially useless. This makes no sense to me. Also, what does the shadow map "resolution" mean for the directional lights, which have an infinite projection field? Is it somehow using the camera's FOV? In my use case, I don't actually need the shadows to be dynamic, so I can set their resolution high and their refresh rate to 0. Clearly I do not understand the shadows system, and am sorry to load so many questions at once. Any help is welcome! I can't give you the actual file I am working on due to non-disclosure issues, but I tried to recreate it with a simple model that has similar scale, thickness, light position, etc. Thanks! experiments.babylon

I have a large model exported from a software with a lot of nested instances. I added a shadow generator with defaults and added most meshes to its renderList. The console recommends to use Exponential Shadow Maps (ESM) which look also a lot nicer ("VSM are now replaced by ESM. Please use useExponentialShadowMap instead"). With ESM enabled, the scene turns mostly black because shadows are rendered also on top of those meshes that cast that part of the shadow. The issue only disappears when the shadow generator has only a single mesh in the renderList. See here: http://www.babylonjs-playground.com/#7CPG3X Is this a bug? Is ESM not yet stable (although the console recommends using it)? Is there a work-around? --- Another question: My model is mostly static. Are shadow maps regenerated at every frame or only when something (lights, meshes) changes?

Hi, I'm new to babylon I am currently facing this situation: I want to display a mesh with a projected shadow on it: to generate the shadow I use a light and another mesh. I change the alpha level of this second mesh and I see no shadow anymore...is there a way to get a shadow from a transparent mesh? I know it will sound strange but I like to get this behaviour.

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