Jump to content

infinity terrain in BabylonJs Geometry Builder


NasimiAsl
 Share

Recommended Posts

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.

Link to comment
Share on other sites

  • 2 weeks later...
  • 4 months later...

 

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

 

 

Link to comment
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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...