NasimiAsl

infinity terrain in BabylonJs Geometry Builder

Recommended Posts

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?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

 

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

awsss.thumb.jpg.77ca73a0384f6e17a0e8f77a23d89d78.jpg

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

 

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.