# Sliced ground building it from height map using Uint8Array and one byte per height point

**URL:** <https://forum.babylonjs.com/t/sliced-ground-building-it-from-height-map-using-uint8array-and-one-byte-per-height-point/61377>\
**Category:** Questions\
**Tags:** heightmap, ground\
**Created:** [November 10, 2025, 6:24pm UTC](https://forum.babylonjs.com/t/sliced-ground-building-it-from-height-map-using-uint8array-and-one-byte-per-height-point/61377 "2025-11-10T18:24:38Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Khanon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/khanon/32/14980_2.png) [@Khanon](https://forum.babylonjs.com/u/Khanon)\
**Post date:** [November 10, 2025, 6:24pm UTC](https://forum.babylonjs.com/t/sliced-ground-building-it-from-height-map-using-uint8array-and-one-byte-per-height-point/61377/1 "2025-11-10T18:24:38Z")

</div>

Creating a ground height map from a custom Uint8Array seems to be sliced by 1/4 of its height.

Some idea?

> **[Babylon.js Playground](https://playground.babylonjs.com/#LQ4LI1%23759)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

---

<div class="post-metadata">

**Author:** ![docEdub](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/docedub/32/14525_2.png) [@docEdub](https://forum.babylonjs.com/u/docEdub)\
**Post date:** [November 10, 2025, 8:41pm UTC](https://forum.babylonjs.com/t/sliced-ground-building-it-from-height-map-using-uint8array-and-one-byte-per-height-point/61377/2 "2025-11-10T20:41:13Z")

</div>

You need 3 times more values in the Uint8Array:

> **[Babylon.js Playground](https://playground.babylonjs.com/#LQ4LI1%23760)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

---

<div class="post-metadata">

**Author:** ![Khanon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/khanon/32/14980_2.png) [@Khanon](https://forum.babylonjs.com/u/Khanon)\
**Post date:** [November 11, 2025, 9:05am UTC](https://forum.babylonjs.com/t/sliced-ground-building-it-from-height-map-using-uint8array-and-one-byte-per-height-point/61377/3 "2025-11-11T09:05:46Z")

</div>

@docEdub It is actually 4 times more.

For what I see, Babylon uses the RGB values for the height map, ignoring the Alpha of the color.

I’m reading this in the docs: `The whiter the pixel the higher the displacement`, so it takes the maximum value of the three RGB bytes? [Babylon.js docs](https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/set/height_map/)

@Deltakosh just to confirm, is it like that?

> **[Babylon.js Playground](https://playground.babylonjs.com/#LQ4LI1%23763)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

Woudl it be right to documment in `groundBuilder.d.ts` , `CreateGroundFromHeightMap` `@params url` the next:

```auto
* @param url sets the URL of@paramsparamsparamsparamsthe height map image resource. Or an object `{ data: Image Uint8Array 4 bytes (RGBA) per height point using the max value from RGB and ignoring Alpha; width: widht of the image; height: height of the image }`

```

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [November 11, 2025, 4:55pm UTC](https://forum.babylonjs.com/t/sliced-ground-building-it-from-height-map-using-uint8array-and-one-byte-per-height-point/61377/4 "2025-11-11T16:55:19Z")

</div>

Yes this is correct!

you can see here that we build the final value from the overall luminance:  
[Babylon.js/packages/dev/core/src/Meshes/Builders/groundBuilder.ts at ce69ba2cc13f65f5da9bd3f355b7f23c379c0c3d · BabylonJS/Babylon.js](https://github.com/BabylonJS/Babylon.js/blob/ce69ba2cc13f65f5da9bd3f355b7f23c379c0c3d/packages/dev/core/src/Meshes/Builders/groundBuilder.ts#L241)

---

<div class="post-metadata">

**Author:** ![Khanon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/khanon/32/14980_2.png) [@Khanon](https://forum.babylonjs.com/u/Khanon)\
**Post date:** [November 11, 2025, 5:06pm UTC](https://forum.babylonjs.com/t/sliced-ground-building-it-from-height-map-using-uint8array-and-one-byte-per-height-point/61377/5 "2025-11-11T17:06:01Z")

</div>

Ok, I got it, thanks!

@docEdub please update your answer to 4 bytes instead 3, commenting the RGBA then I can select your answer for the solution.

---

<div class="post-metadata">

**Author:** ![docEdub](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/docedub/32/14525_2.png) [@docEdub](https://forum.babylonjs.com/u/docEdub)\
**Post date:** [November 13, 2025, 3:30pm UTC](https://forum.babylonjs.com/t/sliced-ground-building-it-from-height-map-using-uint8array-and-one-byte-per-height-point/61377/6 "2025-11-13T15:30:05Z")

</div>

Sure, here’s the updated PG using 4 times more values:

> **[Babylon.js Playground](https://playground.babylonjs.com/#LQ4LI1%23764)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes