"blend" overlapping light?

[aWeirdo]

Hi guys,

i'm trying to simulate a view-range of some meshes by adding a light to them and light up the ground up around them. (Think RTS style "Fog of war")
the problem i'm facing is that the lights doesn't blend when overlapping, the overlapping area is instead increased in intensity.
which then means that if several meshes are close to each other the ground gets really bright and produces an unwanted white effect.

Take a look at this PG which simulates the effect.

http://www.babylonjs-playground.com/#1WARHD#2

 

Any thoughts on the area?

[V!nc3r]

I never used yet in BJS, but i think you can try to setup your scene with PBR https://doc.babylonjs.com/overviews/Physically_Based_Rendering

[GameMonetize]

When two lights are lighting a mesh, the mesh will receive twice the intensity (because two lights:))

If I understand correctly, you want the mesh to receive half of each light intensity?

[aWeirdo]

@Deltakosh exactly :-)

and if three lights, 1/3 of the intensity of each light, etc,

thus avoiding a bright/intensified area when/where lights are overlapping each other.

[NasimiAsl]

hi

i think this is right result

http://www.babylonjs-playground.com/#1WARHD#5

when you look that with natural texture that is write

but if you wanna correct i thing you most be normalize last result of Light

vec4 final = normalize(light1+light2+light3); 

http://www.babylonjs-playground.com/#1WARHD#10

http://www.babylonjs-playground.com/#1WARHD#9

[aWeirdo]

Hi @NasimiAsl the problem with the first pg is that while it looks okay with 2 lights, if you add more lights which overlaps, at some point the ground will start turning white.

The shader solution looks nice, but i don't know much about shaders, can you dynamicly add/remove lights on the go? Aswell as apply changes?(increase/decrease range, etc)

Cheers. 

[NasimiAsl]

aWeirdo : if you wanna use shade you most try it first with some sample if you search shaderBuilder you can find a lot of sample

but for this example make playground and explain what you want i help you to make that in short time and explain what i do.

 

[aWeirdo]

Dusting off this old thread  

@NasimiAsl 

I've finally got some time to come back to this topic, so if your offer still stands i sure could some some help  

 

The basic idea was to attach lights to meshes,
so as those meshes (player units) move around, their view-range is lit up, (other meshes, e.g, the ground, tree's, buildings and so fourth.)
kinda like a fog of war where everything out of view-range is blacked out / darkend.

and being able to add/remove specific lights @ run-time, e.g. when adding / disposing meshes on the go.

[NasimiAsl]

hi 

http://www.babylonjs-playground.com/#1WARHD#12

we can make it with CustomMaterial too  (for BJS V3) i think that can be better wait for me 4 of 5 hours 

[aWeirdo]

 

i spend the last few hours looking around the babylon engine code that "talks" with webGL
in the hopes of being able to change the way lights are being applied or atleast set some kind of "max intensity", but it all just looks like some kind of dark magic  very confusing to me atleast.

 

I do have a few concerns about applying light directly to materials,
like handling other meshes, http://www.babylonjs-playground.com/#1WARHD#13

would we need to create a new ShaderMaterial or CustomMaterial for each other mesh?

Also, i fould this fog of war shader which is almost exactly what i'm looking for, but it's writen in unity shader.

// FogOfWar shader
// Copyright (C) 2013 Sergey Taraban <http://staraban.com>
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
// The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//

Shader "Custom/FogOfWar" {
Properties {
    _Color ("Main Color", Color) = (1,1,1,1)
    _MainTex ("Base (RGB) Trans (A)", 2D) = "white" {}
    _FogRadius ("FogRadius", Float) = 1.0
    _FogMaxRadius("FogMaxRadius", Float) = 0.5
    _Player1_Pos ("_Player1_Pos", Vector) = (0,0,0,1)
    _Player2_Pos ("_Player2_Pos", Vector) = (0,0,0,1)
    _Player3_Pos ("_Player3_Pos", Vector) = (0,0,0,1)
}

SubShader {
    Tags {"Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent"}
    LOD 200
    Blend SrcAlpha OneMinusSrcAlpha
    Cull Off

    CGPROGRAM
    #pragma surface surf Lambert vertex:vert

    sampler2D _MainTex;
    fixed4     _Color;
    float     _FogRadius;
    float     _FogMaxRadius;
    float4     _Player1_Pos;
    float4     _Player2_Pos;
    float4     _Player3_Pos;

    struct Input {
        float2 uv_MainTex;
        float2 location;
    };

    float powerForPos(float4 pos, float2 nearVertex);

    void vert(inout appdata_full vertexData, out Input outData) {
        float4 pos = mul(UNITY_MATRIX_MVP, vertexData.vertex);
        float4 posWorld = mul(_Object2World, vertexData.vertex);
        outData.uv_MainTex = vertexData.texcoord;
        outData.location = posWorld.xz;
    }

    void surf (Input IN, inout SurfaceOutput o) {
        fixed4 baseColor = tex2D(_MainTex, IN.uv_MainTex) * _Color;

        float alpha = (1.0 - (baseColor.a + powerForPos(_Player1_Pos, IN.location) + powerForPos(_Player2_Pos, IN.location) + powerForPos(_Player3_Pos, IN.location)));

        o.Albedo = baseColor.rgb;
        o.Alpha = alpha;
    }

    //return 0 if (pos - nearVertex) > _FogRadius
    float powerForPos(float4 pos, float2 nearVertex) {
        float atten = clamp(_FogRadius - length(pos.xz - nearVertex.xy), 0.0, _FogRadius);

        return (1.0/_FogMaxRadius)*atten/_FogRadius;
    }

    ENDCG
}

Fallback "Transparent/VertexLit"
}

 

Mesh / player class;

using UnityEngine;
using System.Collections;

public class FogOfWarPlayer : MonoBehaviour {

	public Transform FogOfWarPlane;
	public int Number = 1;

	// Use this for initialization
	void Start () {

	}

	// Update is called once per frame
	void Update () {
		Vector3 screenPos = Camera.mainCamera.WorldToScreenPoint(transform.position);
		Ray rayToPlayerPos = Camera.mainCamera.ScreenPointToRay(screenPos);
		int layermask = (int)(1<<8);
		RaycastHit hit;
		if(Physics.Raycast(rayToPlayerPos, out hit, 1000, layermask)) {
			FogOfWarPlane.GetComponent<Renderer>().material.SetVector("_Player" + Number.ToString() +"_Pos", hit.point);
		}
	}
}

 

[NasimiAsl]

you wanna light on camera position?

http://www.babylonjs-playground.com/#ILYHF7#4

 

[aWeirdo]

@NasimiAsl nice PG!

That is roughly what i'm looking to do, but in a almost top-down view and multiple lights,

Kind of like this image, (except the black areas will be lit with a low intensity ambient light, so it looks dark like the left top corner of the image).
 

[aWeirdo]

I'm getting a headache from all this  

Having serious thoughts about just doing it with sprites and sprite.color modifications for now.. 

On the plus side
it's SO much easier to work with, 
and it's lightweight with a very big L..
easy to add 3 layers instead of just the last two (black/unexplored, dark-transparent/explored and full color/in active view range)

the con being that it looks so.. 90's  

 

[aWeirdo]

Another attempt i've been working on, a transparent plane being rendered above the game ground,  (only works from a bird-view setup)

and modifying the texture context around specified meshes.. still needs some work, like an offset so the meshes always appears centered.

as canvas function setContext is not yet supported by any browsers, i'm a bit unsure if and how easy it will be to also support blacked out / unexplorered areas like the previous post, but thats not a big concern anyways.

it looks better than the 90's version above, (unless making a retro-style game ofcourse) and it runs surprisingly fast as there's no image textures involved.