Search the Community

Showing results for tags 'lighting'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • 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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 22 results

  1. 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
  2. I'm wondering if anyone might know the solution to my issue, so far I cannot find anything on it. Does anyone know how to stop this bright spot? It doesn't matter where I move the camera, there is a big bright spot directly underneath it at all times. You can see it in some of the examples on the babylonjs website: In the picture is a plane: var ground = BABYLON.MeshBuilder.CreateGround('ground1', {height:128, width:128, subdivisions: 128}, this.scene) var material = new BABYLON.StandardMaterial('grass', this.scene) material.ambientTexture = new BABYLON.Texture('textures/grass.jpg', this.scene) material.ambientTexture.uScale = 128 material.ambientTexture.vScale = 128 material.ambientColor = new BABYLON.Color3(1, 1, 1) ground.material = material The light is a hemispheric light: var light = new BABYLON.HemisphericLight(name, new BABYLON.Vector3(0,1,0), this.scene); Zoomed in: Zoomed way out: \
  3. I am trying to build a closed attic with multiple roof windows. I will have the windows configurable in the attic. And a directional light (the sun) pointing to it. I would like to know if I add more windows, will the room be brighter? Can we see the difference of light brightening the room based on the number of windows? Not only the shadow falling on the floor, but I am looking for the complete room brightness based on the number of windows. Can this effect be seen with the standard material in babylon? Thanks. [EDIT] Here is a demo of what I have tried. The shadow area remains the same with no difference based on the number of holes. So, does that mean babylonjs cannot render the above situation like what I have described in the standard material? If not, is it possible with PBR material? Thanks.
  4. I have a dynamically generated "celestial star sphere" mesh of independent triangles each mapped with an opacity texture representing the star. The underlying vertex colors of each triangle (representing the color of real stars) shine through but currently the entire mesh is affected by lighting and I can't set the emissive color on the material otherwise it'll wash out the vertex colors. I want the vertex colors to always contribute 100% of the triangle color, but masked by the opacity texture and unaffected by lighting. Is this possible somehow?
  5. Art Vandelay

    Lighting a Room

    Hi all, I have a (supposedly) simple task of lighting a regular square bedroom with furniture. Turns out it's quite complicated to do well. So far I have been playing around with point lights and hemispheric lights (changing location, intensity, color etc) but it's pretty hard to get a "real" feel. Anyone have any recommendations? Thanks!
  6. Hi guys! Since I use BJS, I always be kind of stucked with lightmap blending with my materials. I was working on standard workflow, but now I'm testing PBR, I have still the same issue, so this thread to understand deeper the blocking factor. I never succeeded to get (basically) the same render from my 3D lighting scene to BJS, after many many tests So I consistently had to tweak my hundred of lightmaps files in Photoshop to increase contrast/luminosity. These lightmaps could came from the usuals RenderToTextures passes from 3D softwares: 3DSMax & VRay, from a RawTotalLighting pass Blender & Cycles, from a Diffuse Direct & Indirect pass Having to manually tweak these lightmaps cause me to lighting my scenes in a blind way (which is of course very annoying), and to not have a WYSIWYG workflow (like: tweak a lightmap > save > reload BJS scene > retweak > etc). So here a test scene to discuss about: (sources) (here the lightmap of the room). You can easily switch or add lightmap mode using the line 32, default here is lightmap file set in lightmapTexture as shadowMap. Because I'm a devianted person, I wanted to compare with another engine, so I made a scene on : here you can see that my white data on my lightmaps files are read in a better way, they burn materials a little ; I think dark data are darker too. (note that PlayCanvas allow to send HDR files and convert them to RGBM, giving an interesting result, but in the link above I used the exactly same png file than in BJS, of course). And the result is totally satisfying. So, have I missed a magic parameter? Is the shader need a little tweaking? Is my workflow totally wrong? How do you personally deal with lightmaps?
  7. PixelPush

    Volumetric Light

    Having a play with volumetric lighting scattering post process. I'm trying to achieve a beam of light, like that from a torch or spot light. So far I've only managed to get points of light to emit from the mesh in a radial/global pattern. Is it possible to control how the rays are emitted from the mesh and/or light Ta
  8. Art Vandelay

    Shape of light source

    Hi, I couldn't seem to find an answer to this question I want to create a light source that has a specific shape, or make an object also be a light source. Whichever. How would I do that? Thanks for the help!
  9. Hi folks, I am a beginner for babylon.js and blender. So I imported a cube with one face textured from blender to babylon js using BABYLON.SceneLoader.Load. The scene has the default point light in blender and the HemisphericLight I created using babylon.js. Everything looks good (please see the 2.jpg in the attachment), but after I resize the cube to make the cube flat (using cube.scaling.y = 0.1), the lower part of the textured face will be always shadowed, no matter how i adjust the light or how to move the cube (please see the 1.jpg). I already made the scene as simple as possible to narrow down the cause of the issue, but I still cannot figure out why the lighting cannot be rendered properly. So any help will be much appreciated!
  10. JTronLabs

    How to Create Dynamic Lighting in Phaser?

    So I'm interested in creating a 2D game (currently partially implemented in Phaser-CE) in JS using dynamic lighting. I want directional lights to cast shadows behind P2 sprites, be customizable by blur, dropoff, intensity, and interact with 2D normal maps (created with Sprite Illuminator), and maybe more (that I don't know yet). After doing some research, I've found a variety of tutorials for implementing point lighting in JS - Game Mechanic Explorer, Red Blob Games, 3D by Mozilla, and Byron Knoll. Phaser-CE has a Filter class for accessing GPU accelerated shaders, but its seems difficult to interface between game sprites and shaders, and there seems to be no ready-made lighting solution. Phaser3 seems to be planning some sort of lighting support, but release is far away. So I don't really want to use these options as they seem fragile or overly difficult. Illuminated seems to be the most popular 2D lighting library, though I remember reading somewhere it has some perf issues (doesn't use WebGL or something, not sure). I also came across this LightingEngine project, which while small/unknown has some really cool demos and really great documentation. Neither of these appear to have SpriteIlluminator integration though. All in all, I'm new to this and want to find the easiest way to get dynamic lighting started in a Phaser-CE game. Before I go down the rabbit hole of a specific library/start re-implementing things, I was wondering if anybody has done something similar and has some guidance. Thanks!
  11. Hey @Deltakosh, @Sebavan or @RaananW can i pick you guys brains for a sec... I am trying to use the Simple Material with lighting support. But for some reason the 'BACK-SIDE' of the lighted surface is really black. This is the simple code i use to create a SimpleMaterial: var tester:BABYLON.AbstractMesh = this.scene.getMeshByName("Tester Cube 3"); var material:BABYLON.SimpleMaterial = new BABYLON.SimpleMaterial("simpleMaterial", this.scene); material.diffuseColor = BABYLON.Color3.White(); material.diffuseTexture = new BABYLON.Texture("/scenes/amiga.png", this.scene); tester.material = material; But take a look a t the Cube on the LEFT... That is using the BABYLON.SimpleMaterial and the Cube on the right with looks perfect is using a standard shader and material. Why is the back side too black when i thought SimpleMaterial supports the basic lighting workflow??? Note the Beautiful shadows ... One is BAKED using Lightmaps and the Other is realtime ... But the look beautiful
  12. Lighting of parallax mapped object seems to be inverted when using directional light. playground: The scene contains paralax mapped rectagle and few spheres, the only light on the scene is directional light with the direction equal to (0,-1,0) The mirror is not so important here. When looking from the side of spheres, light on the plane goes from down, on spheres it goes from the top but when we rotate the camera and look on the back face of plane, suddenly light there goes from the top same example, but light direction changed to (1,-1,0):
  13. Hi All, I would like to replicate what I've seen referred to in some other engines as ambient light; definition of which being - a light that evenly distributes across the whole scene; e.g. doesn't cast shadows, and no parts of the scene look darker / lighter than any other part. My main reason for this is that some of my 3D content will need to have light maps baked into the texture images (for other non-babylon related reasons) & I don't want the default babylon lighting to affect this light mapping. I noticed this topic asked a similar question: However the answer they got didn't seem to satisfy my requirements. So far - the closest solution I've come up with is: for (i = 0; i < newScene.lights.length; i++){ newScene.lights.setEnabled(false); } for (i = 0; i < newScene.materials.length; i++){ newScene.materials.emissiveColor = newScene.materials.diffuseColor; } However this assumes that all my materials are solid colour; which they won't all be; some of them will have image textures. Any advice would be greatly appreciated? Perhaps a shader effect might be of help? Thanks!
  14. WholemealDrop

    Animation Issues

    I'm working on a dungeon/cave exploration game and created some torches to scatter throughout the gamespace to guide the player via a tutorial here: Game Mechanic Explorer Lighting. Got the lighting working wonderfully finally but when I try to animate the sprite linked to the torches nothing happens or it breaks the game. I've tried standard animation add and play calls along with the shown callAll animation.Both animations and callAll throws errors of cannot read property animations/callAll of undefined. Any thoughts as to why I can't get the torch to animate? Relevant code below (my game is broken out to gamestates so assume that the sprite calls for the preload are correct): var PrototypeMaze = PrototypeMaze || {}; PrototypeMaze.Game = function() {}; PrototypeMaze.Level1 = { create: function() { // Create torch objects // Torch constructor var torch = function(game, x, y) {, game, x, y, 'torch'); // Set the pivot point for this sprite to the center this.anchor.setTo(0.5, 0.5); }; // Torches are a type of Phaser.Sprite torch.prototype = Object.create(Phaser.Sprite.prototype); torch.prototype.constructor = torch; //Tilemap setup var map; var layer; //specify the tile size here or we can't render it ='L1Map', 64, 64); // Now add in the tileset'tiles'); // Create our layer this.layer =; // Resize the world this.layer.resizeWorld(); //Set wall collision with tilemap, 1); // //animation for torch //this.torches.callAll('animations.add', 'animations', 'flicker', [0, 1, 2], 3.5, true); //this.torches.callAll('', 'animations', 'flicker'); this.torches.animations.add('flicker', [0, 1, 2], 3.5, true);'flicker'); //add torch group this.torches =; this.torches.add(new torch(, 500, 100)); this.torches.add(new torch(, 500, 400)); // The radius of the circle of light this.LIGHT_RADIUS = 150; // Create the shadow texture this.shadowTexture =, 3008); // Create an object that will use the bitmap as a texture var lightSprite =, 0, this.shadowTexture); // Set the blend mode to MULTIPLY. This will darken the colors of // everything below this sprite. lightSprite.blendMode = Phaser.blendModes.MULTIPLY; }, update: function() { //tilemap collision, this.layer); // Update the shadow texture each frame this.updateShadowTexture(); }, render: function() { }, updateShadowTexture: function() { // This function updates the shadow texture (this.shadowTexture). // First, it fills the entire texture with a dark shadow color. // Then it draws a white circle centered on the pointer position. // Because the texture is drawn to the screen using the MULTIPLY // blend mode, the dark areas of the texture make all of the colors // underneath it darker, while the white area is unaffected. // Draw shadow, rgb dictates how dark the shadow is this.shadowTexture.context.fillStyle = 'rgb(100, 100, 100)'; this.shadowTexture.context.fillRect(0, 0, 2560, 3008); //Draw circle of light around torch this.torches.forEach(function(torch) { var radius = this.LIGHT_RADIUS +, 10); var gradient = this.shadowTexture.context.createRadialGradient(torch.x, torch.y, this.LIGHT_RADIUS * 0.75, torch.x, torch.y, radius); gradient.addColorStop(0, 'rgba(255, 255, 255, 1.0)'); gradient.addColorStop(1, 'rgba(255, 255, 255, 0.0)'); this.shadowTexture.context.beginPath(); this.shadowTexture.context.fillStyle = gradient; this.shadowTexture.context.arc(torch.x, torch.y, this.LIGHT_RADIUS, 0, Math.PI * 2); this.shadowTexture.context.fill(); }, this); // Draw circle of light around companion var radius = this.LIGHT_RADIUS +, 10); var gradient = this.shadowTexture.context.createRadialGradient(this.sideChar.x, this.sideChar.y, this.LIGHT_RADIUS * 0.75, this.sideChar.x, this.sideChar.y, radius); gradient.addColorStop(0, 'rgba(255, 255, 255, 1.0)'); gradient.addColorStop(1, 'rgba(255, 255, 255, 0.0)'); this.shadowTexture.context.beginPath(); this.shadowTexture.context.fillStyle = gradient; this.shadowTexture.context.arc(this.sideChar.x, this.sideChar.y, this.LIGHT_RADIUS, 0, Math.PI * 2); this.shadowTexture.context.fill(); // This just tells the engine it should update the texture cache this.shadowTexture.dirty = true; }, };
  15. Hi everyone, I am making an app with Phaser and the Intel XDK. I tried to implement some simple lighting and found a simple example online. As a reference: It works as expected on desktop, it also works in the mobile browser, but the shadow overlay does not show, if I compile it as an app. Is bitmap not working well on mobile phones?
  16. CodingMadeEasy

    Backface lighting

    I'm trying to get lighting to work on the backface of a mesh, but it doesn't work. After reading through the lighting tutorial, it seems like it's not possible due to the normals. I was wondering if there was any trick I could use in order to get light to reflect off the opposite sides of a mesh.
  17. Yo! I've started developing a game and I've been learning a hell of a lot about WebGL for lighting and shadows, and I'm hoping to implement some sort of lighting pipeline, following a technique like this: This means I'll need to process textures in a fragment shader, and then process scene using the resulting bitmap in another shader. Just to test, I tried rendering a part of a game world to a render texture. This worked fine without any shaders (Phaser/PIXI filters) applied. The render texture is displayed using a Sprite on the right hand side, just so I could see the result. Cool. However, if I add filters to what I'm rendering, the perspective gets all messed up. For example, my lighting fragment shader: So instead of scratching my head over this, having done quite a bit of Googling the past couple of days, I thought I'd ask for help here. Is there a way to render to a render texture with shaders applied correctly? Is there a typical approach to setting up a pipeline like this? Essentially I'm looking to perform transformations as described in the above article so I can start casting some sweet shadows, but I can't quite see how yet. The perspective is fine if I apply shaders to the stage instead, but of course then I have no shader processing for the resulting render texture:
  18. Hi all, Is there a way to set a lightmap on a mesh rather than its materials ? I always use this workflow on others 3d engine, and i think it's more efficient ; but after some searches i don't find a procedure to do this on BJS. Thanks
  19. First, i know that 2.2.9 is pretty outdated, but it's what i have to work with. I'm currently trying to achieve 2d lighting by using this tutorial: Rendering the occlusion map is trivial and i can theoretically create the 1D shadowmap, but it seems to ignore pixels, that are too far away from the center. This is my fragment shader: new PIXI.AbstractFilter([ '#define PI 3.14', 'precision mediump float;', 'varying vec2 vTextureCoord;', 'uniform sampler2D uSampler;', 'const float h = 400.0;', 'void main(void) {', ' if((vTextureCoord.y * h) > 1.0) {', ' gl_FragColor = vec4(0.0);', ' return;', ' }', ' float distance = 1.0;', ' for(float y = 0.0; y < h; y += 1.0) {', ' float dst = y / h;', ' vec2 norm = vec2(vTextureCoord.x, dst) * 2.0 - 1.0;', ' float theta = PI + norm.x * PI;', ' float r = (1.0 + norm.y) * 0.5;', ' vec2 coord = vec2(-r * sin(theta), -r * cos(theta)) / 2.0 + 0.5;', ' if(texture2D(uSampler, coord).a > 0.0) {', ' distance = dst;', ' break;', ' }', ' }', ' gl_FragColor = vec4(vec3(distance), 1.0);', '}' ]); I'm currently hardcoding the height of the occlusion map, because i can't use uniforms as loop boundaries. I have to admit, my math isn't good enough to completely understand, what's going on in the transformation, but it seems to work as long as the occluder is near enough to the light. I tried increasing the occlusion map by adding empty space, but it didn't help. Has someone attempted something like this and can point me in the right direction? Sure, i could try to create the 1D map on CPU, but that's going to be really slow, when i have to include moving objects and need to recalculate often.
  20. Hey folks, is there any setting for the shadowgenerator or something else to get a colored shadow through a mesh which's material is colored and has its alpha = 0 < alpha < 1? As I'm getting for forward with our project, there is a roof that concludes glas. And one type is a colored glas. It would be nice if it threw the colored shadow on the wall. Look on the image for more details. Thanks for any adwises. Kevin
  21. Hello fellow 3D engineers, at the moment I'm working on a replacment of our old 3D system (was a plugin). I am using babylon for this and I am really impressed so far. The work flows easily through the hands. So I have a small problem, might be a really small one. We have a costumizeable pavillon. I build the Roof construction for one side of the roof. (it has a repeating triangular form). Then merged the mesh, created six instances and rotated them around the center to place them properbly. The main work is finished (calculation and boolean subtractions). Now I just want to polish the scene with shadows etc. I have already read what to do to sovle the problem with self shadowing (bias value). But what I see now is that the roof parts a illuminated the wrong for me. Please look at the screenshot. Is this right? It looks wrong. I can't say whether this is a bug or I am doing something wrong. Thanks for any help and best regards Kevin
  22. Sigmag

    How To: Animate and Light Weapons

    Hey guys! I've been working on animations for our upcoming game, Dragonfly Zero, and wanted to share the process including the technical facets I used to create the weapon firing animations. The write-up ended up being fairly long, but I added in pictures and humor where I could to make it more accessible. This post should be useful for artists and non-artists alike! You can either click the banner at the top, or click this URL: How To: Animate and Light Weapons Let me know what you guys think! A few of the animations: