icecreamyou / three.terrain Goto Github PK

Feature request:

It would be great to be able to set an x and y offset for perlin / simplex noise, and potentially other noise functions.

The usage in my case would be to create tiles of THREE.Terrain, each positioned next to each-other, with the same simplex noise seed, but with its x, y axes offset so they match the position, and the edges of the tiles match up. Then you will be able to create many tiles of terrain, loading nearby tiles and unloaded distance tiles.

I did try to implement this by just adding an offsetX and offsetY in the simplex function, but the results were not as expected and I wasn't sure how to do this.

Thanks.

Hi, Isaac,

I'm trying to create an island with a hill in one corner and a more or less flat area on the rest of the island that I can fill with villages, etc. However, I'm unable to succeed. The large flat area does not appear. Maybe I do not understand what the parameters of the terrain really do.

What would be a good way to do this? Which combination of the heightmap, the easing, and the after parameters would be needed to make it happen? Got a small code sample?

Best...
Matthias

Hi,

as promised, I've begun to port this library to Typescript. I ran into a problem with scatter.js.

The function ScatterMeshes() has an option called randomness. I cannot find out the correct type for this option.

The doc for this option says:

randomness: If options.spread is a number, then this property is a
function that determines where meshes are placed. Specifically, it
returns an array of numbers, where each number is the probability that
a mesh is NOT placed on the corresponding face. Valid values include
Math.random and the return value of a call to
THREE.Terrain.ScatterHelper.

So, randomness is supposed to be a function that returns an array of numbers. How can Math.random be a valid value for this option, since Math.random returns only one number, not an array of numbers?

Can you shed some light on this, please?

I'm using the following method to retrieve the heights of the terrain.

const array = THREE.Terrain.toArray1D(geometry.attributes.position.array, {stretch:true, ...options});

This works great, I've got all Y-positions of the terrain, in a width*height long 1D-Array.

But...

What about calculating a Y-position of the heightmap on positions that are not integers, e.g. coordinate (10.58,12.13). I use to just round the number, so it'll become (11,12), but that would give a wrong height in steep terrains.

Lookig online I found some helpful links (Terrain interpolation algorithm), but cannot find the best algorithm to fit all kind of steep terrains.

One of the algorithms I tried is in here (GetTerrainHeightInlined). Which converted into JavaScript on my side looks like this:

const array = THREE.Terrain.toArray1D(geometry.attributes.position.array, {stretch:true, ...options});
const x = position.x * (res/size); //terrain is square sized
const z = position.z * (res/size);

const fx = Math.min(res-1,Math.max(0, Math.floor(x)));
const fz = Math.min(res-1,Math.max(0, Math.floor(z)));
const cx = Math.min(res-1,Math.max(0, Math.ceil(x)));
const cz = Math.min(res-1,Math.max(0, Math.ceil(z)));

const hx0z0 = array[fz*size + fx] || 0;
const hx1z0 = array[fz*size + cx] || 0;
const hx0z1 = array[cz*size + fx] || 0;
const hx1z1 = array[cz*size + cx] || 0;

const height = hx0z0 + (hx1z0 - hx0z0) * (lax - Math.floor(lax)) + (hx0z1 - hx0z0) * (laz - Math.floor(laz)) + (hx0z0 - hx1z0 - hx0z1 + hx1z1) * (lax - Math.floor(lax)) * (laz - Math.floor(laz));

I also tried a bi-linear algorithm, from the same link (GetTerrainHeightBilinear)

With both algorithms, I cannot get a decent heightmap interpolation between segments.

Do you have any suggestion? Has anyone come with a way to calculate these interpolations?

Thanks in advance.

@IceCreamYou

Hi Isaac,
Love your work with Three.js terrains! I have starred your repo and check back regularly for updates.

I have a feature request: the ability to create random mesas, buttes, and canyons. I'm imagining the old "Road Runner" cartoons. :)

Here's a couple of images of desert landscapes:
http://www.mrwallpaper.com/wallpapers/Canyons-Red-Mesas-Canyons-1920x1200.jpg
and
http://www.wallpaperhi.com/thumbnails/detail/20120224/mesas%20canyons%20rivers%201600x1200%20wallpaper_www.wallpaperhi.com_41.jpg
and lastly,
http://www.scienceclarified.com/landforms/images/ueol_02_img0075.jpg

One of the ingredients is that the shelf or ceiling remains flat on top and then the rest drops off all around, creating inverted islands. Is there a mathematical way of describing this natural phenomenon in your terrain plug-in? Something that you could add to THREE.Terrain.js maybe in the future?

The reason I'm asking is that I am a game programmer using Three.js for desktop/mobile gameplay, and I have a couple of ideas for games that could use your terrain engine. Here's a link to my first completed Three.js game:
https://github.com/erichlof/SpacePong3D

Asteroids in first-person 3D is next in the pipeline (doesn't look like much now, it's a WIP): https://github.com/erichlof/AsteroidPatrol3D

Again, great job on your terrain work. I look forward to future updates!
Thanks,
-Erich

I created a small test project here: https://github.com/mattes3/three-terrain-experiment.git
You can clone it, then make it run using these commands:

yarn
yarn serve

Then, open http://localhost:5000

On my machine (Mac OS X 10.14.5 with Chrome 75.0.3770.142) this takes lots of memory:

(I got these numbers from the "top" program that is contained in Mac OS X).

This would mean that each "pixel" of the terrain costs 1753 Bytes! I expected only one triangle per pixel, that means 3 vertices * 3 coords * 8 bytes per coord = 72 Bytes per triangle!

Can you help me understand why it is 1753 and not 72?

My assumptions:

• Going from 511 to 1023, the number of "pixels" increases by 1023 * 1023 - 511 * 511=785408
• The amount of memory increased by 1377 MB.
• So, each "pixel" must have consumed 1377000000/785408=1753 bytes.

hi i have some DEM data.
could THREE.terrain load real world DEM data?Not random terrain

Hi, this lib is very easy to use. Thanks a lot!
However, it's not able to recieve shadows in any materials.

Here is the screenshot.(the under layer which casting shadow correctly is MeshLambertMaterial I implemented.)

I implemented like this:

// Generate a terrain
const map_gras = texLoader.load('./img/snow.jpg');
const map_sand = texLoader.load('./img/sand.jpg');
const map_ston = texLoader.load('./img/ston.jpg');
const map_snow = texLoader.load('./img/snow.jpg');
tex_load_manager.onLoad = function () {
	const blend = THREE.Terrain.generateBlendedMaterial([
		{ texture: map_sand },
		{ texture: map_gras, levels: [-80, -35, 20, 50] },
		{ texture: map_ston, levels: [20, 50, 60, 85] },
		{ texture: map_snow, glsl: '1.0 - smoothstep(65.0 + smoothstep(-256.0, 256.0, vPosition.x) * 10.0, 80.0, vPosition.z)' },
		{ texture: map_ston, glsl: 'slope > 0.7853981633974483 ? 0.2 : 1.0 - smoothstep(0.47123889803846897, 0.7853981633974483, slope) + 0.2' }, // between 27 and 45 degrees
	]);

	let xS = 128, yS = 128;
	let terrainScene = THREE.Terrain({
		easing: THREE.Terrain.Linear,
		frequency: 2.5,
		heightmap: THREE.Terrain.DiamondSquare,
		material: blend,
		maxHeight: 100,
		minHeight: -100,
		steps: 1,
		useBufferGeometry: false,
		xSegments: xS,
		xSize: 1024,
		ySegments: yS,
		ySize: 1024,
	});
	terrainScene.receiveShadow = true;
	// Assuming you already have your global scene, add the terrain to it
	scene.add(terrainScene);
}.bind(this);

I'm using threejs version 100, but it seems not working since ver 91.
It seems related to #6 but I'm new at GLSL so it's bit confusing to investigate this.

would you henp me?

Hello and thanks for this amazing library!

I want to add a physics collider for Rapier, but I have no idea how could I parse the heights from the generated terrain.
Rapier expects it as described:

"A 3D heightfield collider can be created with ColliderDesc.heightfield(heights, scale) where heights is a matrix indicating the altitude of each subdivision point of that heightfield. The number of rows of that matrix is the number of subdivision along the X axis, and the number of columns is the number of subdivision along the Z axis. The scale argument indicates the size of the rectangle of the X-Z plane."

Have anyone tackled this before?

The test code on your Github README isn't working, it's missing the variable 'geo'.

So I looked at your demo javascript and saw that geo was this:
var geo = terrainScene.children[0].geometry;

It worked for me, just a tip.

alright im just going to say i love the way this works and its great but there is one thing i have a problem with how in the world do you add physics to it or like make it solid so my player wont fall through it when i use physi.js

Sorry to ask a question again and again. I have another question.
I want to get blended texture shader material repeated like this:

so I changed the code like this:

/* at line 1694~ */

for (var i = 0, l = textures.length; i < l; i++) {
    // Uniforms
    textures[i].texture.wrapS = textures[i].wrapT = THREE.RepeatWrapping;
    textures[i].texture.repeat.set( 3, 3 ); // I changed this line
    textures[i].texture.needsUpdate = true;
    uniforms['texture_' + i] = {
        type: 't',
        value: textures[i].texture,
    };

However, the result was like this:

in the first row, texture repeating seems to done correctly, but it's collapsed from the next.
I can write shadermaterial with myself, but I want to use this lib because it's extremely useful.

Thank you in advance!

I am attempting to do ground collision detection in a shader using the generated heightmap canvas image as a shader uniform (sampler2D).
I am attempting to check for collision with the shader's position value and comparing it to the heightmap value, but it's not quite right. Hoping you could point me in the right direction...

uniform sampler2D heightMap;
vec2 uv = gl_FragCoord.xy / resolution.xy;
vec2 groundPos = texture2D(heightMap, uv).xy * resolution.xy;
float groundHeight = groundPos.y;

Does this look correct?

Hi,

is there a *.d.ts file to be able to consume this nice library from Typescript?

Best...
Matthias

Hello, I have a basic terrain generation, and I am trying to add the THREE.terrain.edges function to my THREE.terrain object, but I cannot see how I would be able to use it. Is there any way you could provide an example or explanation on how I could apply this?

Thanks in advance.

I think that from your lasts commits, this variable didn't get changed:

I think it should now be:

randomness(i/9);

'Cause loop now looks like this:

Great terrain generator! It saves me a lot of time by preventing me from needing to implement my own.

I only need a static terrain for my project so it'd be useful to have the ability to easily save to a file the positions of the generated geometry. Thankfully I can access them via the terrainScene.children[0]._bufferGeometry variable but it's kind of a pain and has too many vertices (I'm guessing you never decrease the array size, only use the parts you need for performance reasons).

copy(Array.prototype.slice.call(terrainScene.children[0].geometry._bufferGeometry.attributes.position.array.slice(0, 18432))) where 18432 is the segments * segments * 6 is kind of annoying...

Any chance of adding this functionality?

is there a way to export the heightmap so it can be re-used in physics engines like CANNON ? (even for large terrains ?)

Uncaught TypeError: Cannot set properties of undefined (setting 'noise')
at THREE.Terrain.min.js:7:27
at THREE.Terrain.min.js:7:2257

First off, incredible work with THREE.Terrain. This is by far the most seamless and comprehensive Terrain tool I've seen / used for Three.js. Keep it up!

Can you provide an example for how to implement the edge features? After digging around in the source / demo for documentation, I wasn't clear on usage. My last attempt was to use the after option to apply edge transformations, but no dice.

Thanks in advance!

Hi, I'm trying to use 'shading: THREE.FlatShading' but it's not working, have you got it to work on you example?

Thanks and awesome library, it really helped me a lot.

Hi, library does not work with current three.js v71

hi,

i'm trying to load 4 textures and use them as a blended dynamic texture.

what i get is a black terrain, seems i'm doing something wrong with the creation of the blended material...

I've got two parts , from the example:

1. Generating the terrain with material set to "blend"

var xS = 63, yS = 63;
terrainScene = THREE.Terrain({
    easing: THREE.Terrain.Linear,
    frequency: 2.5,
    heightmap: THREE.Terrain.DiamondSquare,
    material: blend,
    maxHeight: 100,
    minHeight: -100,
    steps: 1,
    useBufferGeometry: false,
    xSegments: xS,
    xSize: 1024,
    ySegments: yS,
    ySize: 1024,
});
// Assuming you already have your global scene, add the terrain to it
scene.add(terrainScene);

2. loading 4 textures and creating the "blend" material:

var t1 = new TextureLoader().load('textures/sand1.jpg');
var t2 = new TextureLoader().load('textures/grass1.jpg');
var t3 = new TextureLoader().load('textures/stone1.jpg');
var t4 = new TextureLoader().load('textures/snow1.jpg');

var blend  = THREE.Terrain.generateBlendedMaterial([
    {texture: t1},
    // Start blending in at height -80; opaque between -35 and 20; blend out by 50
    {texture: t2, levels: [-80, -35, 20, 50]},
    {texture: t3, levels: [20, 50, 60, 85]},
    // How quickly this texture is blended in depends on its x-position.
    {texture: t4, glsl: '1.0 - smoothstep(65.0 + smoothstep(-256.0, 256.0, vPosition.x) * 10.0, 80.0, vPosition.z)'},
    // Use this texture if the slope is between 27 and 45 degrees
    {texture: t3, glsl: 'slope > 0.7853981633974483 ? 0.2 : 1.0 - smoothstep(0.47123889803846897, 0.7853981633974483, slope) + 0.2'},
]);

any help is appriciated.
tahnks.

generateBlendedMaterial seems to be designed to support LambertMeshMaterial.

Lambert material does not support normal maps, whereas StandardMeshMaterial does via normalMap.

Below are two screenshots showing the difference between a blended texture and a single texture with a normalMap.

It would be great to have blend textures with normal maps.

Single texture using StandardMeshMaterial with normalMap:

Blend of 2 textures made with generateBlendedMaterial:

I’m interested in implementing optimizations, I see you’ve started naming them, and I have interest in using GEOCLIPMAP, and even try to combine it to also use POLYGONREDUCTION.

Are you planning to release optimizations?

I could try implementing it myself too, where could I add it? Any recommendations?

Hi,

I am trying to understand the generateBlendedMaterial() function and how it is being used in the demo.

The textures that are parameterized with a levels property are easy to understand. They blend in at certain levels, and then they blend out at certain levels. Nice!

I cannot really understand the glsl parameters, however.

In the docs, it says that the glsl property must contain a single GLSL expression evaluating to a float between 0.0 and 1.0. What does this result value mean? 0.0=blended out, 1.0=fully blended in? I cannot really understand why there is often 1.0 - smoothstep(...).

In the demo index.js file, I find a magic expression:
1.0 - smoothstep(65.0 + smoothstep(-256.0, 256.0, vPosition.x) * 10.0, 80.0, vPosition.z)

What do the numbers 65, 256, 10, and 80 mean, respectively? And why does the formula depend on both x and z?

Lastly, the expression used for the stone texture, how does it work?
slope > 0.7853981633974483 ? 0.2 : 1.0 - smoothstep(0.47123889803846897, 0.7853981633974483, slope) + 0.2

Best...
Matthias

Hi, firstly, MAGNIFICENT job with the terrain generator, by far the best one I found.

Minor Issue though... How would I be able to get Object shadows to display on the terrain?

I noticed they were missing on your terrain demo as well?

I do receive shadows when using MeshPhong material though. But not when using your great blended texture shader material :/

Again, great work!
Thanks
Martin

Hello.. First of all let me congratulate you on such a cool terrain generator.. I apologize if my question is too basic, but I am kind of new with three.js.
I am using your terrain generator to build a terrain around a screen so I need a 'static' terrain so it doesn't get in the way of the screen. I am trying to use a heightmap image to load the same terrain always but it is not working for me, nothing shows up.. With all the other dynamic heightmap options (diamondSquare, etc) it does work, but when I try to use an image it simply doesn't show anything. I am sure it must be some small detail that I am not doing correctly.. I am using an image I got from the demo. Also I am using r75. Here is my code for creating a terrain:

`
var materialTest = new THREE.MeshLambertMaterial( {color: 0x21b531} );

	var heightmapImage = new Image();

	heightmapImage.src = 'assets/img/map.png';

        var xS = 63, yS = 63;

	var terrainSettings = {
	    easing: THREE.Terrain.Linear,
	    heightmap: heightmapImage,
	    material: materialTest,
	    maxHeight: 300,
	    minHeight: -1,
	    steps: 1,
	    useBufferGeometry: false,
	    xSegments: xS,
	    xSize: 1024,
	    ySegments: yS,
	    ySize: 1024,
	};
	var terrainScene = THREE.Terrain(terrainSettings);
	scene.add(terrainScene);`

If you could please check it out and let me know what is it taht i am doing wrong I would greatly appreciate it.. Thanks in advance..