Can a realistic desert be made from threejs?

[Umbawa_Sarosong]

Can this desert be done in threejs?

Download

[jimtea44]

Three.js is a library that is extending WebGL/WebGPU.

So, sure, if CPU and GPU (OpenGL/Vulkan/Metal/DirectX) allow this, then it can be made.

Three.js doesn’t have any ready-made desert generator, so you would need to assemble such scene from smaller components that it has (Cube, Plane etc.).

[Attila_Schroeder]

I’m doing the entire earth, mars, moon, … with three.js. At the moment I’m working on an ocean.

The reason why my mountains look more like hills is only because my maps are not of high resolution. Since I have the entire earth in that resolution, that’s huge amounts of data.
Lens flares like with your sun are also possible. Meanwhile a lot is possible with three.js and with webgpu in three.js nearly everything. But you have to know what you’re doing.
Your desert would be something that could be created with the IFFT (inverse fast fourier transformation) system that I’m currently develop because of my ocean in combination with my CDLOD. But I’m probably going into too much detail.

Yes your desert can be realized with three.js

[Chaser_Code]

Yes. Download files and apply shaders.

[Attila_Schroeder]

My work on my ocean made me think back to your desert. Your desert would basically be a still image of my ocean surface with a sand shader or sand texture

For me, everything moves and it moves completely smoothly. Your desert is technically very possible with three.js.
However, my ocean still needs the option to use varyings in wgslFn so that I can implement some important things. But I’m in good spirits about that. The node system has developed a lot and I use it very extensively. I do all this with webgpu.
And there are still significant performance reserves left on my laptop, which only has an onboard graphics chip.
Water waves and sand dunes are both created by wind.

[Umbawa_Sarosong]

We aimed to create a virtual experience of desert safari for Arabian tourists, with a virtual safari we should be able to give a glimpse of the excitement on racing and jumping on and off the desert dunes.

Also in this virtual idea we will be using e-cash as currency of exchange using the github repository to create virtual economies

Sample WebGL virtual island for open world

Rockerbeach

Pyramidia

[manthrax]

[Umbawa_Sarosong]

Whoa this is awesome, please share live demo.

[manthrax]

let v0 = new vec3();
let v1 = new vec3();
let v2 = new vec3();
let v3 = new vec3();
let v4 = new vec3();


let noisefn=(x,y,seconds,v=v0)=>{
    let z = sin((x*.1)+seconds)*cos((y*.13)+seconds);
    let z1 = sin((y*.15)+seconds)*cos((x*.2)+seconds);
    z -= z1;
    return v.set(x,z*3,y)
}

let patchGeometry = new PlaneGeometry(50,50,99,99); 
let material = new MeshStandardMaterial({color:'#ffbe67',dithering:true})
patchGeometry.rotateX(PI*-.5)
    
let createPatch=()=>{
    let m1 = new Mesh(patchGeometry.clone(),material)
    scene.add(m1)
    return m1;
}

let generatePatch=(mesh,seconds,lod=0)=>{
    let a = mesh.geometry.attributes.position.array;
    let na = mesh.geometry.attributes.normal.array;
    
    let sz=100;
    let sz2=sz/2;
    v3.set(-sz2,0,-sz2)
    v4.set(sz2,0,sz2);
    let bb = mesh.geometry.boundingBox || (mesh.geometry.boundingBox = new THREE.Box3())

let cutoff = 6*lod;
let outIndex = []
let gi=mesh.geometry.index.array;
    for(let i=0,ai=0,c=(sz*sz);i<c;i++,ai+=3){
        let ix=(i%sz);
        let iy=((i/sz)|0);
        let x = ix-sz2;
        let y = iy-sz2;
        
        
        let ax=abs(x);
        let ay=abs(y);
        
        if((ax<cutoff)&&(ay<cutoff)){
            a[ai+0]=x;
            a[ai+1]=0;
            a[ai+2]=y;
            continue;
        }
        
        if((ax<sz2)&&(ay<sz2))
        {
            let ei = ((iy*99)+ix)*6;
            outIndex.push(gi[ei],gi[ei+1],gi[ei+2],gi[ei+3],gi[ei+4],gi[ei+5]);
        }
        let nx = (x*mesh.scale.x)+mesh.position.x;
        let ny = (y*mesh.scale.z)+mesh.position.z;
        let pp = noisefn(nx,ny,seconds);
        let vx = noisefn(nx+(.0001*mesh.scale.x),ny,seconds,v1).sub(pp);
        let vy = noisefn(nx,ny+(.0001*mesh.scale.z),seconds,v2).sub(pp);
        let vn = vy.cross(vx)
        vn.y /= 1+lod;
        vn.normalize();
        if(!i){
            v3.y=v4.y=pp.y
        }else{
            if(pp.y<v2.y)v3.y=pp.y
            if(pp.y>v3.y)v4.y=pp.y
        }
        a[ai  ]=x;//pp.x;
        a[ai+1]=pp.y;
        a[ai+2]=y;//pp.z;
        na[ai  ]=vn.x;
        na[ai+1]=vn.y;
        na[ai+2]=vn.z;
    }
    mesh.geometry.setIndex(outIndex);
    mesh.geometry.boundingBox.set(v3,v4);
    mesh.geometry.attributes.position.needsUpdate = true;
    mesh.geometry.attributes.normal.needsUpdate = true;
}


//debugger
let lods = []
for(let i=0;i<4;i++){
    let m = createPatch();
    let scl =  (i+1)**3;
    m.scale.x=scl;
    m.scale.z=scl;
    m.scale.y=i+1;
    
//m.position.y += i;
    lods.push(m);
    generatePatch(m,0,i);
}

[seanwasere]

I was curious how @manthrax code worked, so I created a fiddle.
Desert in Threejs

[manthrax]

Haha nice… you’re actually looks better than mine. Nice work.

In my code, i was trying to do something fancy with level of detail so I could get better draw distance, but I punted on the seams.

Also the wierd rocky bits in my picture were a separate algorithm using marching cubes + perlin noise that was too bulky/unfinished to paste into an answer.

I’d have liked to share a working example but its all tied up in an experimental framework connected to my localstorage… appreciate you doing that @seanwasere

[phil_crowther]

If you are going to race and jump on the desert dunes, you will need more than just the dunes.

If you just want a static demo of vehicles in action, you can create paths for those vehicles to follow. If you want the user to drive a vehicle randomly, you also need collision detection - something like cannon.js.

You might also want to model the effects of sinking into the sand or add the visual appearance of sand flying into the air or the creation of tracks in the sand - those would take more time and effort (especially the last 2).

But, yes, all of that can be done - and has been done - in three.js.

[Umbawa_Sarosong]

do we have sample of the sinking tires on sand dune, that effect would really elevate the desert safari experience

[phil_crowther]

I believe that sinking tires could be done by either putting the hard surface a little bit under the dunes or, if you use cannon.js, there should be a setting to adjust for hardness - which may or may not work well.

Unless there are some wild expectations involved, it appears that this project could be handled in three.js. Given the scale of the investment involved, it seems that your next step should be to hire a programmer to create an amazing demo that could be used to attract potential investors and customers.

[kaan_ozkurkcu]

A Journey Into Journey's Sand Shader - Alan Zucconi

it is not realistic the way you want, but it is beautiful and u can regulate the variables yourself, to have atleast the fundamentals to understand sand shaders