infinity terrain in BabylonJs Geometry Builder

[NasimiAsl]

 

 

[NasimiAsl]

http://www.babylonjs-playground.com/#1QC9DP#36

 

http://editor.eash.space/ preview version

[GameMonetize]

Woot this is super cool! Excellent work my friend!

[GameMonetize]

we should highlight this demo on babylonjs.com 

[NasimiAsl]

@Deltakosh thanks i make a good sample in this week for BabylonJs.com

[ian]

Qul stuff.

Will you build planets in Univerze algorithm. Qul !

[Pryme8]

Looks cool NasimiAsl how do you handle the blocks that are a super large distance from origin?  Also I have a ton of noise algorithms you might find of use.

was TERIABLE infinity any use to you on this?

[Pryme8]

20 hours ago, ian said:

Will you build planets in Univerze algorithm.

I have a script for that if your interested... will spawn whole solar systems that are scientifically accurate based off a pseudo random system and calculations off the core star.

[NasimiAsl]

i work on some demo for Babylonjs.com 

i write a full documentation for that too how i manage that . i share it after 2 days 

about noise : just i mix simplex with math 

[ian]

3 hours ago, Pryme8 said:

I have a script for that if your interested... will spawn whole solar systems that are scientifically accurate based off a pseudo random system and calculations off the core star.

Maybe once, for any new game. I'll noted that!  (I just have to finish some things first).  

Pryme8 awsome idea and realization! Realy qul/big THING.

[ian]

On 10/24/2016 at 1:47 PM, NasimiAsl said:

http://www.babylonjs-playground.com/#1QC9DP#36

 

http://editor.eash.space/ preview version

awsome! qul!

[NasimiAsl]

[NasimiAsl]

Http://editor.eash.space/terrain/

[jerome]

excellent ! 

[NasimiAsl]

@jerome thanks my friend

[iiceman]

Looks so niice and runs so smoothly! Very cool, excellent job indeed!!! O_o

[zahachtah]

@NasimiAsl very very cool, I have been waiting for this!!! BTW the link does not work anymore at least when I tested just now

[Dad72]

It's a pity that this is done with ShaderBuilder because I understand nothing about it, it is much too complex and not enough to simplify as Babylon is. 

 The same with Babylon would be really cool.

[NasimiAsl]

@Dad72 hi 

I Build This with Geometry Builder That is familiar a lot with BabylonJs (shader is depend with math  that is reason for complex )

any Way i try Make for you a clean Usable Sample today (thanks for your replay)

[CodeIain]

this is amazing, do you have a tutorial on how it works and how to use it?

 

[NasimiAsl]

hi sorry i see your post now ( ) my bad @CodeIain 

 

[NasimiAsl]

 

Step 1: Init GeometryBuilder to the PG

http://www.babylonjs-playground.com/#1QC9DP#119

** this step just for playground and no need in your code

var url = "http://cdn.rawgit.com/NasimiAsl/Extensions/master/GeometryBuilder/SGB.js";
var s = document.createElement("script");
s.src = url; document.head.appendChild(s);
 var time = 0; var camera;
      
var createScene = function () { 

    var scene = new BABYLON.Scene(engine);
	scene.clearColor = new BABYLON.Color4(0.3,0.4,0.6,1.);  
    camera = new BABYLON.FreeCamera("camera1",  new BABYLON.Vector3(-4, 70, 5), scene);

    camera.setTarget(BABYLON.Vector3.Zero());
    camera.attachControl(canvas, true);
	 
   
    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
    light.intensity = 0.7;
  
	s.onload = function (params) { 
		  var GB = BABYLONX.GeometryBuilder;
		  BABYLONX.GeometryBuilder.InitializeEngine();
		  BABYLONX.ShaderBuilder.InitializeEngine();
		
		 
          // geometry code here
    
			
	      scene.registerBeforeRender(function () {
			 	
			    new BABYLONX.ShaderMaterialHelper().SetUniforms(
                scene.meshes,
                camera.position,
                camera.target,
                 { x: 0, y: 0 },
                 { x: 100, y: 100 },
					time++);
			 
		 }) 
	}
 
    return scene; 
};
 

 

step 2 : define a Geometry Builder

** know more about geometry Builder

	 
        var geo1 = function (op) {
            var builder =    function (s /*{seg:number}*/, geo) {
            
            }; 
            return new BABYLONX.Geometry(GB.GeometryBase(op, builder, op.custom));
	   }

 

3: design a algoritm

so we need camera position (x, z y : not important yet )

and plan size 

and plan segments

we define a builder for make a plan with this parameters

 // define new Builder
		  var geo1 = function (op) {
            var builder =    function (s /*{seg:number}*/, geo) {
            var step = s.size/s.seg;

            // calculate vertex info
                for(var i=0;i<s.seg;i++){for(var j=0;j<s.seg;j++){
                  
                     var p  = {x:s.x+j*step , y:0., z:s.y+i*step };
                        
                     GB.PushVertex(geo,{x:p.x,y:0 ,z:p.z}); 
                     geo.uvs.push( p.x/100. , p.z/100. );   
                } 
           }
           // make face 
           for(var i=1;i<s.seg-1;i++){for(var j=0;j<s.seg-1;j++){ 
                  GB.MakeFace(geo,  [(i-1)*s.seg+ j,(i-1)*s.seg+j+1,i*s.seg+j+0  ,i*s.seg+j+1 ] , { flip:!s.flip    } );}
           } 
        }; 
            return new BABYLONX.Geometry(GB.GeometryBase(op, builder, op.custom));
	  }

http://www.babylonjs-playground.com/#1QC9DP#121

 

4: write algoritm steps

http://www.babylonjs-playground.com/#1QC9DP#123

// make first geo 
 var mesh = geo1( {seg:200,size:1000,x:-500,y: -500 }).toMesh(scene);  
		
  var lastPos = {x:0,z:0};
   scene.registerBeforeRender(function () {
   // calculate distance every frame           
  	var dis = Math.sqrt(Math.pow(lastPos.x - camera.position.x, 2.) + 
                 Math.pow(lastPos.z - camera.position.z, 2.));
	// if dis bigger than 300 (optional item )	   
      if (dis > 300.) {
					lastPos.x = camera.position.x;
					lastPos.z = camera.position.z;
					
// try create plan in new poition
					mesh.dispose(); 
					mesh = geo1({ seg: 200, size: 1000, x: -500+camera.position.x, y: -500+camera.position.z,   }).toMesh(scene);
				  
				}  

})

 

5. Define the height map and use it in Builder

http://www.babylonjs-playground.com/#1QC9DP#124

function height_Map(p){

       var ns =  Math.max(30.,Math.min(80.,Math.abs(
            Math.sin(p.x*0.01)+Math.cos(p.z*0.01))*100.));
       ns = -50.+Math.pow(ns-29.,1.13);
       return ns;

    }

 

6. 

 add your material

and you can  enable collition  of find y position from height map

http://www.babylonjs-playground.com/#1QC9DP#126

 

you can add some simplex func in height map

http://www.babylonjs-playground.com/#1QC9DP#127

and can make a shader for set special material 

http://www.babylonjs-playground.com/#1QC9DP#128

 

my friend @jerome make  the new way to terrain generator in this topic too

 

 

[CodeIain]

@NasimiAsl Thanks for this I will give this a go the next time I have a chance.

 

Thanks

[CodeIain]

Hi @NasimiAsl one question.

 

If i was to run this multiple times would it generate different terrain or would it be the same?

e.g. if i was to run this on 3 different browsers would the out come be the same each time? am currently building a multiple player FPS and was wondering if i could use this to generate the terrain for the game but I would require the terrain to be the same for each player.

 

Regards

Iain

[NasimiAsl]

no 

this is simplex noise and that is not random this depend for vec3 variable so if you change that you have different noise if you fix that you have stable noise