Search the Community

Hi, I am making a Lighting filter for PIXIJS 4 in RPGmaker MV but I've encountered some strange behavior regarding Render Textures. for some strange reason, rendering the scene to a render textures causes the position of the lights to mirror on the Y axis and I have no idea why. here are some photo's of what i mean. Below is a Screenshot of the scene in real time. and this is the resulting render Texture. As you can see, the blue light close to thew center barely moved, while the yellow one moved from the bottom of the screen to the top. neither lights changed in X-axis values. the lights themselves do not move, this only appears in the render texture. the render texture is generated using this code on one of the RPGmaker Events script call, however the effect seems to be affecting all PIXI render textures, including those used by the default engine. here is the code the generate the render texture an make a sprite. the sprite is rendered to the scene. rt = PIXI.RenderTexture.create(1280,720); renderer = Graphics._renderer; renderer.render(SceneManager._scene, rt); sprt = new PIXI.Sprite(rt); SceneManager._scene.addChild(sprt); At first I thought it may have to do with Transformation Matricies within the shader. As far as i know I couln't find anything obvious. here's a test shader I prepared below below. varying vec2 vTextureCoord; uniform sampler2D uSampler; vec4 lightDiffuse(vec2 lposition,vec4 ldiffuse,float lquadratic,float llinear){ float distance=length(lposition-gl_FragCoord.xy); float attenuation=1./(1.+llinear* distance+ lquadratic*(distance*distance)); return ldiffuse*attenuation; } void main(){ vec4 result=vec4(0.,0.,0.,0.); vec4 ambience=vec4(.1,.1,.1,1.); //Hard coded light 2 vec2 lPositionA=vec2(720.,200.); vec4 lDiffuseA=vec4(0.,1.,1.,1.); //Hard coded light 1 vec2 lPositionB=vec2(100.,125.); vec4 lDiffuseB=vec4(1.,1.,0.,1.); result+=lightDiffuse(lPositionA,lDiffuseA,.07,.05); result+=lightDiffuse(lPositionB,lDiffuseB,.007,.005); gl_FragColor=vec4(ambience.rgb+result.rgb,1)*texture2D(uSampler,vTextureCoord); } I've also prepared a test plugin for RPG maker that will load said shader and apply it as a filter the the Scenes Spriteset. (essentially Container containing sprites and tile maps but no UI or system sprites). Even with those hard coded values, the issue still arises, hence why I though it may a matrix issue. The plugin loads the loads the shader on start up and stores globally, then when you enter a Map scene, the map sprite will also create a filter for itself that contains the shader code. I can provide a build if its necessary. The code looks for the shader in "/js/Shaders/". the Shaders folter doesnt normally exist in RPGmaker projects. var DSE = DSE || {}; DSE.Lighting = function (_export) { _export.shader = null; function loadShader(name, type) { var xhr = new XMLHttpRequest(); xhr.open('GET', '/js/Shaders/' + name + type); xhr.onreadystatechange = _onShaderLoad.bind(this, xhr, type); xhr.send(); } function _onShaderLoad(xhr, type) { console.log("shader loaded?"); if (type == ".frag") { _export.shader = xhr.responseText; } } loadShader("LightTest", ".frag"); /** * @override */ Spriteset_Map.prototype.createLowerLayer = function () { Spriteset_Base.prototype.createLowerLayer.call(this); this.createParallax(); this.createTilemap(); this.createCharacters(); this.createShadow(); this.createDestination(); this.createLightLayers(); this.createWeather(); }; Spriteset_Map.prototype.createLightLayers = function () { console.log(_export.shader); this._filters = [new PIXI.Filter('', _export.shader)]; }; return _export; }({}); upon using both of those files and the script call in a new project the result is the same. I've yet to look in the PIXI JS file itself , but i figured I'd start either the PIXI.Filter or Render texture classes. I'm not sure exactly how they work, but I hope its simple enough. I couldn't find anything on google about this nor on this forums aside from this: https://github.com/pixijs/pixijs/issues/2074 which upon reading seems to be an entirely different issue. Anyway , I'm posting this here, to make sure it isn't something silly I've done rather than a bug with PIXIJs. Any advice would be greatly appreciated.

Hi, I'm new to this forum so hi to everyone! :) Currently, I'm trying to build an isometric tilemap that also displays a certain height. Here is a demo: https://www.pixiplayground.com/#/edit/69C1wfNIowvu5wNNccv8w I have the following problems and maybe somebody could guide me in the right direction. 1. Shadows: When I remove the lineStyle, different heights and the depth of the scene are not really recognizable. I think this could be solved with proper lighting and shadows. Any suggestions on how to implement this? 2. Sprites & Performance: I'm currently calculating all vertices manually and then I draw a PIXI.Graphics-Polygon according to the vertices. Is there a more efficient way to do this. I'm not very experienced with PIXI.Mesh, SimpleMesh or SimplePlane. I wanted to use the PIXI.SimplePlane first but the documentation seems to be wrong... In addition to the mesh generation do you have any tips on how to properly cover the mesh with sprites, soften the edges and smoothly transition between different sprites. 3. Player movements & buildings: In the future I'd like to be able to add players and buildings. This is not so important right now but as the objects will heavily interact with the map, I'm happy if you have some guidance on this topic as well. Thank you very much! All the best Tom

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 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: https://www.babylonjs-playground.com/#L76FB1#0 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: \

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. http://www.babylonjs-playground.com/#4GBWI5#36 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.

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?

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!

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: http://www.babylonjs-playground.com/#59ZXVF#11 (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 https://playcanv.as/b/OuZIGpY0/ : 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?

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

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!

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!

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!

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

Lighting of parallax mapped object seems to be inverted when using directional light. playground: http://playground.babylonjs.com/#1SGTPA#5 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): http://playground.babylonjs.com/#1SGTPA#6

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!

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) { Phaser.Sprite.call(this, 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 this.map = this.game.add.tilemap('L1Map', 64, 64); // Now add in the tileset this.map.addTilesetImage('tiles'); // Create our layer this.layer = this.map.createLayer(0); // Resize the world this.layer.resizeWorld(); //Set wall collision with tilemap this.map.setCollisionBetween(1, 1); // //animation for torch //this.torches.callAll('animations.add', 'animations', 'flicker', [0, 1, 2], 3.5, true); //this.torches.callAll('animations.play', 'animations', 'flicker'); this.torches.animations.add('flicker', [0, 1, 2], 3.5, true); this.torches.animations.play('flicker'); //add torch group this.torches = this.game.add.group(); this.torches.add(new torch(this.game, 500, 100)); this.torches.add(new torch(this.game, 500, 400)); // The radius of the circle of light this.LIGHT_RADIUS = 150; // Create the shadow texture this.shadowTexture = this.game.add.bitmapData(2560, 3008); // Create an object that will use the bitmap as a texture var lightSprite = this.game.add.image(0, 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.game.physics.arcade.collide(this.mainChar, 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 + this.game.rnd.integerInRange(1, 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 + this.game.rnd.integerInRange(1, 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; }, };

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: https://jsfiddle.net/dceq2vsu/1/ 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?

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.

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: http://ahamnett.blogspot.co.uk/2013/05/2d-shadows-shader.html 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:

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

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: https://github.com/mattdesl/lwjgl-basics/wiki/2D-Pixel-Perfect-Shadows 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.

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

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

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: