JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

JavaScript

function dynamicFog(options, scene){

	if(!options){
  
  	options = {
    
    	fogLowestColor: { r: 120, g: 0, b: 0 },
    	fogHighestColor: { r: 255, g: 25, b: 25 },
      
      minHeight: 0,
      maxHeight: 200
    
    }
    
  }
  
  var t = this;
  
  t.heightDifference = options.maxHeight - options.minHeight;
  t.colorDifference = { r: options.fogHighestColor.r - options.fogLowestColor.r, g: options.fogHighestColor.g - options.fogLowestColor.g, b: options.fogHighestColor.b - options.fogLowestColor.b };
  
  t.getFogColor = function(y){
  
  	// get the percentage of color based on y
    var percentage = ((y-options.minHeight)/t.heightDifference);
    
    return BABLON.Color3(
    	parseInt((t.colorDifference.r*percentage)+options.fogLowestColor.r)/255,
      parseInt((t.colorDifference.g*percentage)+options.fogLowestColor.g)/255,
      parseInt((t.colorDifference.b*percentage)+options.fogLowestColor.b)/255
    );
  
  }
  
  scene.onBeforeRenderObservable(function(){
  
  	scene.fogColor = t.getFogColor(window.playerNode.position.y);
  
  });
	
}

var df = new dynamicFog({
    
    	fogLowestColor: { r: 120, g: 0, b: 0 },
    	fogHighestColor: { r: 255, g: 25, b: 25 },
      
      minHeight: 0,
      maxHeight: 200
    
    });