Random Scenery

This example explores several simple ways to automatically position objects in your scene. This is a great starting point if you want to procedurally generate terrain or other scenes. Taking these methods as a starting point, you’ll hopefully be able to find the approach that suits your project.

Manually placing objects is also a good enough approach in many projects. A hybrid approach involves starting out with random scenery, and then saving all the object properties to create a static scene from it.

Basic random

The simplest starting point is using Math.random as is. Every object will be independently placed, this is called a uniform distribution. Starting with a plane, a couple of Svelte’s {#each ... as ...} blocks, and some random numbers, you can position objects like in the simple scene below.

1
<script>
2
  import { Canvas } from '@threlte/core'
3
  import Scene from './Scene.svelte'
4
  import { Pane, Button, Slider } from 'svelte-tweakpane-ui'
5
  import { regen, numberOfObjects } from './stores'
6
</script>
7

8
<Pane
9
  title="Completely Random"
10
  position="fixed"
11
>
12
  <Button
13
    title="regenerate"
14
    on:click={() => {
15
      $regen = !$regen
16
    }}
17
  />
18
  <Slider
19
    bind:value={$numberOfObjects}
20
    label="Number of Objects"
21
    min={20}
22
    max={100}
23
    step={10}
24
  />
25
</Pane>
26

27
<div>
28
  <Canvas>
29
    <Scene />
30
  </Canvas>
31
</div>
32

33
<style>
34
  div {
35
    height: 100%;
36
  }
37
</style>

1
<script lang="ts">
2
  import { watch } from '@threlte/core'
3
  import { regen, numberOfObjects } from './stores'
4
  // The following components started as copies from https://fun-bit.vercel.app/
5
  import BirchTrees from './assets/birch.svelte'
6
  import Trees from './assets/tree.svelte'
7
  import Bushes from './assets/bush.svelte'
8
  import Rocks from './assets/rock.svelte'
9

10
  const distinctObjects = 4
11
  const commonRatio = 0.5
12

13
  let randomBushes: [number, number, number, number][] = []
14
  let randomTrees: [number, number, number, number][] = []
15
  let randomBirchTrees: [number, number, number, number][] = []
16
  let randomRocks: [number, number, number, number][] = []
17

18
  watch([regen, numberOfObjects], () => {
19
    generateRandomNumbers()
20
  })
21

22
  generateRandomNumbers()
23

24
  function generateRandomNumbers() {
25
    const exponentialSumValues = calculateExponentialSumValues(
26
      $numberOfObjects,
27
      distinctObjects,
28
      commonRatio
29
    )
30
    const totalBushes = exponentialSumValues[0] ?? 0
31
    const totalTrees = exponentialSumValues[1] ?? 0
32
    const totalBirchTrees = exponentialSumValues[2] ?? 0
33
    const totalRocks = exponentialSumValues[3] ?? 0
34

35
    randomBushes = []
36
    randomTrees = []
37
    randomBirchTrees = []
38
    randomRocks = []
39

40
    for (let i = 0; i < totalBushes; i++) {
41
      randomBushes.push([Math.random(), Math.random(), Math.random(), Math.random()])
42
      if (i < totalTrees) {
43
        randomTrees.push([Math.random(), Math.random(), Math.random(), Math.random()])
44
      }
45
      if (i < totalBirchTrees) {
46
        randomBirchTrees.push([Math.random(), Math.random(), Math.random(), Math.random()])
47
      }
48
      if (i < totalRocks) {
49
        randomRocks.push([Math.random(), Math.random(), Math.random(), Math.random()])
50
      }
51
    }
52
  }
53

54
  function calculateExponentialSumValues(
55
    total: number,
56
    numberOfValues: number,
57
    commonRatio: number
58
  ): number[] {
59
    let result = []
60
    let remainingTotal = total
61

62
    for (let i = 0; i < numberOfValues - 1; i++) {
63
      let term = Math.ceil(remainingTotal * (1 - commonRatio))
64
      result.push(term)
65
      remainingTotal -= term
66
    }
67

68
    // The last term to ensure the sum is exactly equal to the total
69
    result.push(remainingTotal)
70

71
    return result
72
  }
73
</script>
74

75
<Bushes transformData={randomBushes} />
76

77
<BirchTrees transformData={randomBirchTrees} />
78

79
<Trees transformData={randomTrees} />
80

81
<Rocks transformData={randomRocks} />

1
<script>
2
  import { T } from '@threlte/core'
3
  import { OrbitControls } from '@threlte/extras'
4
  import Scenery from './Random.svelte'
5
</script>
6

7
<T.PerspectiveCamera
8
  makeDefault
9
  position={[20, 20, 20]}
10
>
11
  <OrbitControls maxPolarAngle={1.56} />
12
</T.PerspectiveCamera>
13

14
<T.DirectionalLight
15
  position={[3, 10, 7]}
16
  castShadow
17
  shadow.camera.top={10}
18
  shadow.camera.left={-10}
19
  shadow.camera.right={10}
20
  shadow.camera.bottom={-10}
21
/>
22
<T.AmbientLight />
23

24
<T.Mesh
25
  rotation.x={-Math.PI / 2}
26
  receiveShadow
27
>
28
  <T.PlaneGeometry args={[20, 20, 1, 1]} />
29
  <T.MeshStandardMaterial color="green" />
30
</T.Mesh>
31

32
<Scenery />

1
<script lang="ts">
2
  import * as THREE from 'three'
3
  import { T } from '@threlte/core'
4
  import { useGltf, useTexture, InstancedMesh, Instance } from '@threlte/extras'
5

6
  interface Props {
7
    transformData?: [number, number, number, number][]
8
  }
9

10
  let { transformData = [] }: Props = $props()
11

12
  type GLTFResult = {
13
    nodes: {
14
      Cube004: THREE.Mesh
15
      Cube004_1: THREE.Mesh
16
    }
17
    materials: {
18
      BirchTree_Bark: THREE.MeshStandardMaterial
19
      BirchTree_Leaves: THREE.MeshStandardMaterial
20
    }
21
  }
22

23
  const assets = Promise.all([
24
    useGltf<GLTFResult>('https://fun-bit.vercel.app/Ultimate-Stylized-Nature/BirchTree_1.gltf'),
25
    useTexture('https://fun-bit.vercel.app/Ultimate-Stylized-Nature/Textures/BirchTree_Bark.png'),
26
    useTexture('https://fun-bit.vercel.app/Ultimate-Stylized-Nature/Textures/BirchTree_Leaves.png'),
27
    useTexture(
28
      'https://fun-bit.vercel.app/Ultimate-Stylized-Nature/Textures/BirchTree_Bark_Normal.png'
29
    )
30
  ])
31
</script>
32

33
{#await assets then [$gltf, $texture1, $texture2, $normalMap1]}
34
  <InstancedMesh castShadow>
35
    <T is={$gltf.nodes.Cube004.geometry} />
36
    <T.MeshStandardMaterial
37
      map={$texture1}
38
      map.wrapS={THREE.RepeatWrapping}
39
      map.wrapT={THREE.RepeatWrapping}
40
      normalMap={$normalMap1}
41
      normalMap.wrapS={THREE.RepeatWrapping}
42
      normalMap.wrapT={THREE.RepeatWrapping}
43
    />
44
    {#each transformData as randomValues}
45
      {@const x = randomValues[0] * 20 - 10}
46
      {@const z = randomValues[1] * 20 - 10}
47
      {@const rot = randomValues[2] * Math.PI * 2}
48
      {@const scale = randomValues[3] * 2 + 1}
49
      <Instance
50
        position.x={x}
51
        position.z={z}
52
        rotation.y={rot}
53
        {scale}
54
      />
55
    {/each}
56
  </InstancedMesh>
57
  <InstancedMesh>
58
    <T is={$gltf.nodes.Cube004_1.geometry} />
59
    <T.MeshStandardMaterial
60
      map={$texture2}
61
      side={THREE.DoubleSide}
62
      alphaTest={0.5}
63
    />
64
    {#each transformData as randomValues}
65
      {@const x = randomValues[0] * 20 - 10}
66
      {@const z = randomValues[1] * 20 - 10}
67
      {@const rot = randomValues[2] * Math.PI * 2}
68
      {@const scale = randomValues[3] * 2 + 1}
69
      <Instance
70
        position.x={x}
71
        position.z={z}
72
        rotation.y={rot}
73
        {scale}
74
      />
75
    {/each}
76
  </InstancedMesh>
77
{/await}

1
<script lang="ts">
2
  import * as THREE from 'three'
3
  import { T } from '@threlte/core'
4
  import { useGltf, useTexture, InstancedMesh, Instance } from '@threlte/extras'
5

6
  interface Props {
7
    transformData?: [number, number, number, number][]
8
  }
9

10
  let { transformData = [] }: Props = $props()
11

12
  type GLTFResult = {
13
    nodes: {
14
      Bush: THREE.Mesh
15
    }
16
    materials: {
17
      Bush_Leaves: THREE.MeshStandardMaterial
18
    }
19
  }
20

21
  const gltf = useGltf<GLTFResult>('https://fun-bit.vercel.app/Ultimate-Stylized-Nature/Bush.gltf')
22
  const texture1 = useTexture(
23
    'https://fun-bit.vercel.app/Ultimate-Stylized-Nature/Textures/Bush_Leaves.png'
24
  )
25

26
  const assets = Promise.all([gltf, texture1])
27
</script>
28

29
{#await assets then [$gltf, $texture1]}
30
  <InstancedMesh
31
    castShadow
32
    receiveShadow
33
  >
34
    <T is={$gltf.nodes.Bush.geometry} />
35
    <T.MeshStandardMaterial
36
      map={$texture1}
37
      alphaTest={0.2}
38
    />
39
    {#each transformData as randomValues}
40
      {@const x = randomValues[0] * 20 - 10}
41
      {@const z = randomValues[1] * 20 - 10}
42
      {@const rot = randomValues[2] * Math.PI * 2}
43
      {@const scale = randomValues[3] * 2 + 0.5}
44
      <T.Group
45
        position.x={x}
46
        position.z={z}
47
        rotation.y={rot}
48
        {scale}
49
      >
50
        <Instance rotation={[1.96, -0.48, -0.85]} />
51
      </T.Group>
52
    {/each}
53
  </InstancedMesh>
54
{/await}

1
<script lang="ts">
2
  import * as THREE from 'three'
3
  import { T } from '@threlte/core'
4
  import { useGltf, InstancedMesh, Instance } from '@threlte/extras'
5

6
  interface Props {
7
    transformData?: [number, number, number, number][]
8
  }
9

10
  let { transformData = [] }: Props = $props()
11

12
  type GLTFResult = {
13
    nodes: {
14
      Rock_2: THREE.Mesh
15
    }
16
    materials: {
17
      Rock: THREE.MeshStandardMaterial
18
    }
19
  }
20

21
  const gltf = useGltf<GLTFResult>(
22
    'https://fun-bit.vercel.app/Ultimate-Stylized-Nature/Rock_2.gltf'
23
  )
24
</script>
25

26
{#if $gltf}
27
  <InstancedMesh
28
    castShadow
29
    receiveShadow
30
  >
31
    <T is={$gltf.nodes.Rock_2.geometry} />
32
    <T.MeshStandardMaterial color="grey" />
33
    {#each transformData as randomValues}
34
      {@const x = randomValues[0] * 20 - 10}
35
      {@const z = randomValues[1] * 20 - 10}
36
      {@const rot = randomValues[2] * Math.PI * 2}
37
      {@const scale = randomValues[3] + 0.5}
38
      <Instance
39
        position.x={x}
40
        position.z={z}
41
        rotation.y={rot}
42
        {scale}
43
      />
44
    {/each}
45
  </InstancedMesh>
46
{/if}

1
<script lang="ts">
2
  import * as THREE from 'three'
3
  import { T } from '@threlte/core'
4
  import { useGltf, useTexture, InstancedMesh, Instance } from '@threlte/extras'
5

6
  interface Props {
7
    transformData?: [number, number, number, number][]
8
  }
9

10
  let { transformData = [] }: Props = $props()
11

12
  type GLTFResult = {
13
    nodes: {
14
      Cylinder001: THREE.Mesh
15
      Cylinder001_1: THREE.Mesh
16
    }
17
    materials: {
18
      NormalTree_Bark: THREE.MeshStandardMaterial
19
      NormalTree_Leaves: THREE.MeshStandardMaterial
20
    }
21
  }
22

23
  const assets = Promise.all([
24
    useGltf<GLTFResult>('https://fun-bit.vercel.app/Ultimate-Stylized-Nature/NormalTree_1.gltf'),
25
    useTexture('https://fun-bit.vercel.app/Ultimate-Stylized-Nature/Textures/NormalTree_Bark.png'),
26
    useTexture(
27
      'https://fun-bit.vercel.app/Ultimate-Stylized-Nature/Textures/NormalTree_Leaves.png'
28
    ),
29
    useTexture(
30
      'https://fun-bit.vercel.app/Ultimate-Stylized-Nature/Textures/NormalTree_Bark_Normal.png'
31
    )
32
  ])
33
</script>
34

35
{#await assets then [$gltf, $texture1, $texture2, $normalMap1]}
36
  <InstancedMesh castShadow>
37
    <T is={$gltf.nodes.Cylinder001.geometry} />
38
    <T.MeshStandardMaterial
39
      map={$texture1}
40
      map.wrapS={THREE.RepeatWrapping}
41
      map.wrapT={THREE.RepeatWrapping}
42
      normalMap={$normalMap1}
43
      normalMap.wrapS={THREE.RepeatWrapping}
44
      normalMap.wrapT={THREE.RepeatWrapping}
45
    />
46
    {#each transformData as randomValues}
47
      {@const x = randomValues[0] * 20 - 10}
48
      {@const z = randomValues[1] * 20 - 10}
49
      {@const rot = randomValues[2] * Math.PI * 2}
50
      {@const scale = randomValues[3] * 2 + 1}
51
      <Instance
52
        position.x={x}
53
        position.z={z}
54
        rotation.y={rot}
55
        {scale}
56
      />
57
    {/each}
58
  </InstancedMesh>
59
  <InstancedMesh castShadow>
60
    <T is={$gltf.nodes.Cylinder001_1.geometry} />
61
    <T.MeshStandardMaterial
62
      map={$texture2}
63
      side={THREE.DoubleSide}
64
      alphaTest={0.5}
65
    />
66
    {#each transformData as randomValues}
67
      {@const x = randomValues[0] * 20 - 10}
68
      {@const z = randomValues[1] * 20 - 10}
69
      {@const rot = randomValues[2] * Math.PI * 2}
70
      {@const scale = randomValues[3] * 2 + 1}
71
      <Instance
72
        position.x={x}
73
        position.z={z}
74
        rotation.y={rot}
75
        {scale}
76
      />
77
    {/each}
78
  </InstancedMesh>
79
{/await}

1
import { writable } from 'svelte/store'
2

3
export const regen = writable(false)
4
export const numberOfObjects = writable(50)

Preventing object overlap

There is a limitation in using just Math.random: it does not prevent objects from overlapping. This means that sometimes you’ll see a tree growing from a rock, or two bushes growing into each other.

In order to prevent this you can use Poisson disk sampling. This algorithm guarantees a minimum distance between your objects.

1
<script>
2
  import { Canvas } from '@threlte/core'
3
  import Scene from './Scene.svelte'
4
  import { Pane, Button, Slider } from 'svelte-tweakpane-ui'
5
  import { regen, radius } from './stores'
6
</script>
7

8
<Pane
9
  title="Poisson Disc Sampling"
10
  position="fixed"
11
>
12
  <Button
13
    title="regenerate"
14
    on:click={() => {
15
      $regen = !$regen
16
    }}
17
  />
18
  <Slider
19
    bind:value={$radius}
20
    label="Min Distance Between Objects"
21
    min={1}
22
    max={6}
23
    step={0.5}
24
  />
25
</Pane>
26

27
<div>
28
  <Canvas>
29
    <Scene />
30
  </Canvas>
31
</div>
32

33
<style>
34
  div {
35
    height: 100%;
36
  }
37
</style>

1
<script lang="ts">
2
  import { watch } from '@threlte/core'
3
  import { radius, regen, width, height } from './stores'
4
  import { AdaptedPoissonDiscSample as Sampler } from './sampling'
5
  // The following component started as a copy from https://fun-bit.vercel.app/
6
  import Bushes from './assets/bush.svelte'
7

8
  let sampler = new Sampler($radius, [width, height], undefined, Math.random)
9
  let points = sampler.GeneratePoints()
10
  addRandomValues()
11

12
  function addRandomValues() {
13
    for (let i = 0; i < points.length; i++) {
14
      points[i].push(Math.random(), Math.random())
15
    }
16
  }
17

18
  watch([regen, radius], () => {
19
    sampler = new Sampler($radius, [width, height], undefined, Math.random)
20
    points = sampler.GeneratePoints()
21
    addRandomValues()
22
  })
23
</script>
24

25
<Bushes transformData={points as [number, number, number, number][]} />

1
<script>
2
  import { T } from '@threlte/core'
3
  import { OrbitControls } from '@threlte/extras'
4
  import { width, height } from './stores'
5
  import Random from './Random.svelte'
6
</script>
7

8
<T.PerspectiveCamera
9
  makeDefault
10
  position={[20, 20, 20]}
11
>
12
  <OrbitControls maxPolarAngle={1.56} />
13
</T.PerspectiveCamera>
14

15
<T.DirectionalLight
16
  position={[3, 10, 7]}
17
  castShadow
18
  shadow.camera.top={10}
19
  shadow.camera.left={-10}
20
  shadow.camera.right={10}
21
  shadow.camera.bottom={-10}
22
/>
23
<T.AmbientLight />
24

25
<T.Mesh
26
  rotation.x={-Math.PI / 2}
27
  receiveShadow
28
>
29
  <T.PlaneGeometry args={[width, height, 1, 1]} />
30
  <T.MeshStandardMaterial color="green" />
31
</T.Mesh>
32

33
<Random />

1
<script lang="ts">
2
  import * as THREE from 'three'
3
  import { T } from '@threlte/core'
4
  import { useGltf, useTexture, InstancedMesh, Instance } from '@threlte/extras'
5

6
  interface Props {
7
    transformData?: [number, number, number, number][]
8
  }
9

10
  let { transformData = [] }: Props = $props()
11

12
  type GLTFResult = {
13
    nodes: {
14
      Bush: THREE.Mesh
15
    }
16
    materials: {
17
      Bush_Leaves: THREE.MeshStandardMaterial
18
    }
19
  }
20

21
  const assets = Promise.all([
22
    useGltf<GLTFResult>('https://fun-bit.vercel.app/Ultimate-Stylized-Nature/Bush.gltf'),
23
    useTexture('https://fun-bit.vercel.app/Ultimate-Stylized-Nature/Textures/Bush_Leaves.png')
24
  ])
25
</script>
26

27
{#await assets then [$gltf, $texture1]}
28
  <InstancedMesh castShadow>
29
    <T is={$gltf.nodes.Bush.geometry} />
30
    <T.MeshStandardMaterial
31
      map={$texture1}
32
      alphaTest={0.2}
33
    />
34
    {#each transformData as randomValues}
35
      {@const x = randomValues[0] - 10}
36
      {@const z = randomValues[1] - 10}
37
      {@const rot = randomValues[2] * Math.PI * 2}
38
      {@const scale = randomValues[3] * 2 + 0.5}
39
      <T.Group
40
        position.x={x}
41
        position.z={z}
42
        rotation.y={rot}
43
        {scale}
44
      >
45
        <Instance rotation={[1.96, -0.48, -0.85]} />
46
      </T.Group>
47
    {/each}
48
  </InstancedMesh>
49
{/await}

1
// Adapted from: https://github.com/SebLague/Poisson-Disc-Sampling
2
// https://www.cs.ubc.ca/~rbridson/docs/bridson-siggraph07-poissondisk.pdf
3

4
export class PoissonDiscSample {
5
  random: () => number
6
  radius: number
7
  cellSize: number
8
  maxCandidates: number
9
  width: number
10
  height: number
11
  gridHeight: number
12
  gridWidth: number
13
  grid: any[]
14
  points: [number, number][]
15
  spawnPoints: [number, number][]
16

17
  constructor(radius: number, region: [number, number], maxCandidates: number = 30) {
18
    this.random = Math.random
19

20
    this.radius = radius
21
    this.cellSize = radius / Math.SQRT2
22
    this.maxCandidates = maxCandidates
23

24
    this.width = region[0]
25
    this.height = region[1]
26

27
    this.gridHeight = Math.ceil(this.height / this.cellSize)
28
    this.gridWidth = Math.ceil(this.width / this.cellSize)
29

30
    this.grid = new Array(this.gridHeight)
31
    for (let i = 0; i < this.gridHeight; i++) {
32
      this.grid[i] = [...new Array(this.gridWidth)].map((_) => 0)
33
    }
34

35
    this.points = []
36
    this.spawnPoints = []
37

38
    this.spawnPoints.push([this.width / 2, this.height / 2])
39
  }
40

41
  /**
42
   * @returns {number[][]} an array of points
43
   */
44
  GeneratePoints(): number[][] {
45
    while (this.spawnPoints.length > 0) {
46
      // choose one of the spawn points at random
47
      const spawnIndex = Math.floor(this.random() * this.spawnPoints.length)
48
      const spawnCentre = this.spawnPoints[spawnIndex]!
49
      let candidateAccepted = false
50

51
      // then generate k candidates around it
52
      for (let k = 0; k < this.maxCandidates; k++) {
53
        const angle = this.random() * Math.PI * 2
54
        const dir: [number, number] = [Math.sin(angle), Math.cos(angle)]
55
        const disp = Math.floor(this.random() * (this.radius + 1)) + this.radius
56
        const candidate: [number, number] = [
57
          spawnCentre[0] + dir[0] * disp,
58
          spawnCentre[1] + dir[1] * disp
59
        ]
60

61
        // check if the candidate is valid
62
        if (this.IsValid(candidate)) {
63
          this.points.push(candidate)
64
          this.spawnPoints.push(candidate)
65
          const gridX = Math.ceil(candidate[0] / this.cellSize) - 1
66
          const gridY = Math.ceil(candidate[1] / this.cellSize) - 1
67
          this.grid[gridY][gridX] = this.points.length
68
          candidateAccepted = true
69
          break
70
        }
71
      }
72
      // If no candidates around it were valid
73
      if (!candidateAccepted) {
74
        // Remove it from the spawnpoints list
75
        this.spawnPoints.splice(spawnIndex, 1)
76
      }
77
    }
78
    return this.points
79
  }
80

81
  IsValid(candidate: [number, number]) {
82
    const cX = candidate[0]
83
    const cY = candidate[1]
84
    if (cX >= 0 && cX < this.width && cY >= 0 && cY < this.height) {
85
      const cellX = Math.ceil(cX / this.cellSize)
86
      const cellY = Math.ceil(cY / this.cellSize)
87
      const searchStartX = Math.max(0, cellX - 2)
88
      const searchEndX = Math.min(cellX + 2, this.gridWidth - 1)
89
      const searchStartY = Math.max(0, cellY - 2)
90
      const searchEndY = Math.min(cellY + 2, this.gridHeight - 1)
91

92
      for (let x = searchStartX; x <= searchEndX; x++) {
93
        for (let y = searchStartY; y <= searchEndY; y++) {
94
          const pointIndex = this.grid[y][x]
95
          if (pointIndex != 0) {
96
            const diff = candidate.map((val, i) => val - this.points[pointIndex - 1]![i]!)
97
            // we're not worried about the actual distance, just the equality
98
            const sqrdDst = Math.pow(diff[0]!, 2) + Math.pow(diff[1]!, 2)
99
            if (sqrdDst < Math.pow(this.radius, 2)) {
100
              return false
101
            }
102
          }
103
        }
104
      }
105
      return true
106
    }
107
    return false
108
  }
109
}
110

111
export class AdaptedPoissonDiscSample extends PoissonDiscSample {
112
  constructor(
113
    radius: number,
114
    region: [number, number],
115
    maxCandidates: number = 30,
116
    random: () => number
117
  ) {
118
    super(radius, region, maxCandidates)
119
    this.random = random
120
    this.spawnPoints = []
121
    const x = Math.floor(this.random() * this.width)
122
    const y = Math.floor(this.random() * this.height)
123
    this.spawnPoints.push([x, y])
124
  }
125
}

1
import { writable } from 'svelte/store'
2

3
export const regen = writable(false)
4
export const radius = writable(4)
5
export const width = 20
6
export const height = 20

If you reduce the minimum distance to something smaller than your objects size then there will look like there’s collisions. For the bushes in this example, even a distance of 1 still looks good.

Different object sizes

In many scenes this approach works well. However, sometimes you’ll want different spacing for different objects: a large tree needs more space than a small bush. Below is a variation of poisson disc sampling, but this time it allows for some different spacing, depending on the object type.

1
<script>
2
  import { Canvas } from '@threlte/core'
3
  import Scene from './Scene.svelte'
4
  import { Pane, Button } from 'svelte-tweakpane-ui'
5
  import { regen, radius } from './stores'
6
</script>
7

8
<Pane
9
  title="Adjusted Sampling"
10
  position="fixed"
11
>
12
  <Button
13
    title="regenerate"
14
    on:click={() => {
15
      $regen = !$regen
16
    }}
17
  />
18
</Pane>
19

20
<div>
21
  <Canvas>
22
    <Scene />
23
  </Canvas>
24
</div>
25

26
<style>
27
  div {
28
    height: 100%;
29
  }
30
</style>

1
<script lang="ts">
2
  import { watch } from '@threlte/core'
3
  import { radius, regen, width, height } from './stores'
4
  import { PoissonDiscSample as Sampler, type Point } from './sampling'
5
  // The following components started as copies from https://fun-bit.vercel.app/
6
  import Trees from './assets/tree.svelte'
7
  import Bushes from './assets/bush.svelte'
8
  import Rocks from './assets/rock.svelte'
9

10
  const pointsMatrix = [
11
    { radius: 6, desription: 'large', density: 15 },
12
    { radius: 4, desription: 'medium', density: 35 },
13
    { radius: 2, desription: 'small', density: 50 }
14
  ]
15

16
  let sampler = new Sampler(pointsMatrix, { width, height }, undefined, Math.random)
17
  let points: Point[] = sampler.generatePoints()
18
  let smallObjects: [number, number, number, number][] = points
19
    .filter((obj) => obj.desription == 'small')
20
    .map((value) => {
21
      return [value.x, value.y, Math.random(), Math.random()]
22
    })
23
  let mediumObjects: [number, number, number, number][] = points
24
    .filter((obj) => obj.desription == 'medium')
25
    .map((value) => {
26
      return [value.x, value.y, Math.random(), Math.random()]
27
    })
28
  let largeObjects: [number, number, number, number][] = points
29
    .filter((obj) => obj.desription == 'large')
30
    .map((value) => {
31
      return [value.x, value.y, Math.random(), Math.random()]
32
    })
33

34
  watch([regen, radius], () => {
35
    sampler = new Sampler(pointsMatrix, { width, height }, undefined, Math.random)
36
    points = sampler.generatePoints()
37
    smallObjects = points
38
      .filter((obj) => obj.desription == 'small')
39
      .map((value) => {
40
        return [value.x, value.y, Math.random(), Math.random()]
41
      })
42
    mediumObjects = points
43
      .filter((obj) => obj.desription == 'medium')
44
      .map((value) => {
45
        return [value.x, value.y, Math.random(), Math.random()]
46
      })
47
    largeObjects = points
48
      .filter((obj) => obj.desription == 'large')
49
      .map((value) => {
50
        return [value.x, value.y, Math.random(), Math.random()]
51
      })
52
  })
53
</script>
54

55
<Bushes transformData={smallObjects} />
56
<Trees transformData={mediumObjects} />
57

58
<Rocks transformData={largeObjects} />

1
<script lang="ts">
2
  import { T } from '@threlte/core'
3
  import { OrbitControls } from '@threlte/extras'
4
  import { width, height } from './stores'
5
  import Random from './Random.svelte'
6
</script>
7

8
<T.PerspectiveCamera
9
  makeDefault
10
  position={[20, 20, 20]}
11
>
12
  <OrbitControls maxPolarAngle={1.56} />
13
</T.PerspectiveCamera>
14

15
<T.DirectionalLight
16
  position={[6, 13, 10]}
17
  castShadow
18
  shadow.camera.top={12}
19
  shadow.camera.left={-12}
20
  shadow.camera.right={12}
21
  shadow.camera.bottom={-12}
22
/>
23
<T.AmbientLight />
24

25
<T.Mesh
26
  rotation.x={-Math.PI / 2}
27
  receiveShadow
28
>
29
  <T.PlaneGeometry args={[width, height, 1, 1]} />
30
  <T.MeshStandardMaterial color="green" />
31
</T.Mesh>
32

33
<Random />

1
<script lang="ts">
2
  import * as THREE from 'three'
3
  import { T } from '@threlte/core'
4
  import { useGltf, useTexture, InstancedMesh, Instance } from '@threlte/extras'
5

6
  interface Props {
7
    transformData?: [number, number, number, number][]
8
  }
9

10
  let { transformData = [] }: Props = $props()
11

12
  type GLTFResult = {
13
    nodes: {
14
      Bush: THREE.Mesh
15
    }
16
    materials: {
17
      Bush_Leaves: THREE.MeshStandardMaterial
18
    }
19
  }
20

21
  const assets = Promise.all([
22
    useGltf<GLTFResult>('https://fun-bit.vercel.app/Ultimate-Stylized-Nature/Bush.gltf'),
23
    useTexture('https://fun-bit.vercel.app/Ultimate-Stylized-Nature/Textures/Bush_Leaves.png')
24
  ])
25
</script>
26

27
{#await assets then [$gltf, $texture1]}
28
  <InstancedMesh
29
    castShadow
30
    receiveShadow
31
  >
32
    <T is={$gltf.nodes.Bush.geometry} />
33
    <T.MeshStandardMaterial
34
      map={$texture1}
35
      alphaTest={0.2}
36
    />
37
    {#each transformData as randomValues}
38
      {@const x = randomValues[0] - 10}
39
      {@const z = randomValues[1] - 10}
40
      {@const rot = randomValues[2] * Math.PI * 2}
41
      {@const scale = randomValues[3] * 2 + 0.5}
42
      <T.Group
43
        position.x={x}
44
        position.z={z}
45
        rotation.y={rot}
46
        {scale}
47
      >
48
        <Instance rotation={[1.96, -0.48, -0.85]} />
49
      </T.Group>
50
    {/each}
51
  </InstancedMesh>
52
{/await}

1
<script lang="ts">
2
  import * as THREE from 'three'
3
  import { T } from '@threlte/core'
4
  import { useGltf, InstancedMesh, Instance } from '@threlte/extras'
5

6
  interface Props {
7
    transformData?: [number, number, number, number][]
8
  }
9

10
  let { transformData = [] }: Props = $props()
11

12
  type GLTFResult = {
13
    nodes: {
14
      Rock_2: THREE.Mesh
15
    }
16
    materials: {
17
      Rock: THREE.MeshStandardMaterial
18
    }
19
  }
20

21
  const gltf = useGltf<GLTFResult>(
22
    'https://fun-bit.vercel.app/Ultimate-Stylized-Nature/Rock_2.gltf'
23
  )
24
</script>
25

26
{#if $gltf}
27
  <InstancedMesh
28
    castShadow
29
    receiveShadow
30
  >
31
    <T is={$gltf.nodes.Rock_2.geometry} />
32
    <T.MeshStandardMaterial color="grey" />
33
    {#each transformData as randomValues}
34
      {@const x = randomValues[0] - 10}
35
      {@const z = randomValues[1] - 10}
36
      {@const rot = randomValues[2] * Math.PI * 2}
37
      {@const scale = randomValues[3] * 4 + 2}
38
      <Instance
39
        position.x={x}
40
        position.z={z}
41
        rotation.y={rot}
42
        {scale}
43
      />
44
    {/each}
45
  </InstancedMesh>
46
{/if}

1
<script lang="ts">
2
  import * as THREE from 'three'
3
  import { T } from '@threlte/core'
4
  import { useGltf, useTexture, InstancedMesh, Instance } from '@threlte/extras'
5

6
  interface Props {
7
    transformData?: [number, number, number, number][]
8
  }
9

10
  let { transformData = [] }: Props = $props()
11

12
  type GLTFResult = {
13
    nodes: {
14
      Cylinder001: THREE.Mesh
15
      Cylinder001_1: THREE.Mesh
16
    }
17
    materials: {
18
      NormalTree_Bark: THREE.MeshStandardMaterial
19
      NormalTree_Leaves: THREE.MeshStandardMaterial
20
    }
21
  }
22

23
  const assets = Promise.all([
24
    useGltf<GLTFResult>('https://fun-bit.vercel.app/Ultimate-Stylized-Nature/NormalTree_1.gltf'),
25
    useTexture('https://fun-bit.vercel.app/Ultimate-Stylized-Nature/Textures/NormalTree_Bark.png'),
26
    useTexture(
27
      'https://fun-bit.vercel.app/Ultimate-Stylized-Nature/Textures/NormalTree_Leaves.png'
28
    ),
29
    useTexture(
30
      'https://fun-bit.vercel.app/Ultimate-Stylized-Nature/Textures/NormalTree_Bark_Normal.png'
31
    )
32
  ])
33
</script>
34

35
{#await assets then [$gltf, $texture1, $texture2, $normalMap1]}
36
  <InstancedMesh castShadow>
37
    <T is={$gltf.nodes.Cylinder001.geometry} />
38
    <T.MeshStandardMaterial
39
      map={$texture1}
40
      map.wrapS={THREE.RepeatWrapping}
41
      map.wrapT={THREE.RepeatWrapping}
42
      normalMap={$normalMap1}
43
      normalMap.wrapS={THREE.RepeatWrapping}
44
      normalMap.wrapT={THREE.RepeatWrapping}
45
    />
46
    {#each transformData as randomValues}
47
      {@const x = randomValues[0] - 10}
48
      {@const z = randomValues[1] - 10}
49
      {@const rot = randomValues[2] * Math.PI * 2}
50
      {@const scale = randomValues[3] * 2 + 1}
51
      <Instance
52
        position.x={x}
53
        position.z={z}
54
        rotation.y={rot}
55
        {scale}
56
      />
57
    {/each}
58
  </InstancedMesh>
59
  <InstancedMesh castShadow>
60
    <T is={$gltf.nodes.Cylinder001_1.geometry} />
61
    <T.MeshStandardMaterial
62
      map={$texture2}
63
      side={THREE.DoubleSide}
64
      alphaTest={0.5}
65
    />
66
    {#each transformData as randomValues}
67
      {@const x = randomValues[0] - 10}
68
      {@const z = randomValues[1] - 10}
69
      {@const rot = randomValues[2] * Math.PI * 2}
70
      {@const scale = randomValues[3] * 2 + 1}
71
      <Instance
72
        position.x={x}
73
        position.z={z}
74
        rotation.y={rot}
75
        {scale}
76
      />
77
    {/each}
78
  </InstancedMesh>
79
{/await}

1
// Adapted from: https://github.com/SebLague/Poisson-Disc-Sampling
2
// https://www.cs.ubc.ca/~rbridson/docs/bridson-siggraph07-poissondisk.pdf
3

4
export type Point = {
5
  x: number
6
  y: number
7
  desription: string
8
}
9

10
export class PoissonDiscSample {
11
  random
12
  radiiMatrix: { desription: string; density: number; radius: number }[]
13
  radiiMap: { [key: string]: number }
14
  maxRadius: number
15
  customRanges: { start: number; end: number; desription: string }[] = []
16
  cellSize: number
17
  cellSizeMatrix: { [key: string]: number }
18
  maxCandidates: number
19
  windowSize: number
20
  width = 1
21
  height = 1
22
  /** 2D array of indices of points */
23
  grid: number[][] = []
24
  gridWidth: number
25
  gridHeight: number
26

27
  points: Point[] = []
28
  spawnPoints: Point[] = []
29

30
  constructor(
31
    radiiMatrix: { desription: string; density: number; radius: number }[],
32
    region: { width: number; height: number },
33
    maxCandidates = 30,
34
    random = Math.random
35
  ) {
36
    this.random = random
37

38
    this.radiiMatrix = radiiMatrix
39
    // make sure the density sums to 1 so we can use it later
40
    const densityTotal = this.radiiMatrix.reduce((total, obj) => {
41
      return total + obj.density
42
    }, 0)
43
    if (densityTotal > 1 || densityTotal < 1) {
44
      this.radiiMatrix = this.radiiMatrix.map((obj) => {
45
        return {
46
          ...obj,
47
          density: obj.density / densityTotal
48
        }
49
      }, 0)
50
    }
51
    let currentTotal = 0
52
    this.customRanges = this.radiiMatrix.map((obj) => {
53
      let range = {
54
        start: currentTotal,
55
        end: currentTotal + obj.density,
56
        desription: obj.desription
57
      }
58
      currentTotal += obj.density
59
      return range
60
    })
61

62
    this.maxRadius = this.radiiMatrix.reduce((max, obj) => {
63
      return obj.radius > max ? obj.radius : max
64
    }, -Infinity)
65

66
    this.radiiMap = this.radiiMatrix.reduce((obj: { [key: string]: number }, value) => {
67
      obj[value.desription] = value.radius
68
      return obj
69
    }, {})
70

71
    this.cellSizeMatrix = this.radiiMatrix.reduce((obj: { [key: string]: number }, value) => {
72
      obj[value.desription] = value.radius / Math.SQRT2
73
      return obj
74
    }, {})
75
    this.cellSize = Infinity
76
    for (const key in this.cellSizeMatrix) {
77
      if (this.cellSizeMatrix[key]! < this.cellSize) {
78
        this.cellSize = this.cellSizeMatrix[key]!
79
      }
80
    }
81
    this.windowSize = Math.ceil(this.maxRadius / this.cellSize)
82

83
    this.maxCandidates = maxCandidates
84

85
    this.width = region.width
86
    this.height = region.height
87

88
    this.gridHeight = Math.ceil(this.height / this.cellSize)
89
    this.gridWidth = Math.ceil(this.width / this.cellSize)
90

91
    this.grid = new Array(this.gridHeight)
92
    for (let i = 0; i < this.gridHeight; i++) {
93
      this.grid[i] = [...new Array(this.gridWidth)].map((_) => 0)
94
    }
95

96
    this.points = []
97
    this.spawnPoints = []
98

99
    const x = Math.floor(this.random() * this.width)
100
    const y = Math.floor(this.random() * this.height)
101

102
    this.spawnPoints.push({ x, y, desription: this.createPointType() })
103
  }
104

105
  generatePoints(): Point[] {
106
    while (this.spawnPoints.length > 0) {
107
      // choose one of the spawn points at random
108
      const spawnIndex = Math.floor(this.random() * this.spawnPoints.length)
109
      const spawnCentre = this.spawnPoints[spawnIndex]!
110
      let candidateAccepted = false
111

112
      // then generate k candidates around it
113
      for (let k = 0; k < this.maxCandidates; k++) {
114
        const angle = this.random() * Math.PI * 2
115
        const dir: [number, number] = [Math.sin(angle), Math.cos(angle)]
116
        // TODO-DefinitelyMaybe: select a point and calc it's displacement
117
        const candidateType = this.createPointType()
118

119
        // const disp = Math.floor(this.random() * (this.radius + 1)) + this.radius
120
        const dispScalar = Math.max(
121
          this.radiiMap[candidateType]!,
122
          this.radiiMap[spawnCentre.desription]!
123
        )
124
        const disp = Math.floor(this.random() * (dispScalar + 1)) + dispScalar
125
        const candidate = {
126
          x: spawnCentre.x + dir[0] * disp,
127
          y: spawnCentre.y + dir[1] * disp,
128
          desription: candidateType
129
        }
130
        // spawnCentre.map((val, i) => val + dir[i] * disp)
131

132
        // check if the candidate is valid
133
        if (this.isValid(candidate)) {
134
          this.points.push(candidate)
135
          this.spawnPoints.push(candidate)
136
          const gridX = Math.ceil(candidate.x / this.cellSize) - 1
137
          const gridY = Math.ceil(candidate.y / this.cellSize) - 1
138
          this.grid[gridY]![gridX] = this.points.length
139
          candidateAccepted = true
140
          break
141
        }
142
      }
143
      // If no candidates around it were valid
144
      if (!candidateAccepted) {
145
        // Remove it from the spawnpoints list
146
        this.spawnPoints.splice(spawnIndex, 1)
147
      }
148
    }
149
    return this.points
150
  }
151

152
  createPointType() {
153
    const number = this.random()
154
    let value = ''
155
    for (let i = 0; i < this.customRanges.length; i++) {
156
      const { start, end, desription } = this.customRanges[i]!
157
      if (number > start && number <= end) {
158
        value = desription
159
      }
160
    }
161
    return value
162
  }
163

164
  isValid(candidate: Point) {
165
    const cX = candidate.x
166
    const cY = candidate.y
167
    if (cX >= 0 && cX < this.width && cY >= 0 && cY < this.height) {
168
      const cellX = Math.ceil(cX / this.cellSize)
169
      const cellY = Math.ceil(cY / this.cellSize)
170
      const searchStartX = Math.max(0, cellX - this.windowSize)
171
      const searchEndX = Math.min(cellX + this.windowSize, this.gridWidth - 1)
172
      const searchStartY = Math.max(0, cellY - this.windowSize)
173
      const searchEndY = Math.min(cellY + this.windowSize, this.gridHeight - 1)
174

175
      for (let x = searchStartX; x <= searchEndX; x++) {
176
        for (let y = searchStartY; y <= searchEndY; y++) {
177
          const pointIndex = this.grid[y]![x]!
178
          if (pointIndex != 0) {
179
            const diff: [number, number] = [
180
              candidate.x - this.points[pointIndex - 1]?.x!,
181
              candidate.y - this.points[pointIndex - 1]?.y!
182
            ]
183
            // we're not worried about the actual distance, just the equality
184
            const sqrdDst = Math.pow(diff[0], 2) + Math.pow(diff[1], 2)
185
            if (
186
              sqrdDst <
187
              Math.pow(
188
                Math.max(
189
                  this.radiiMap[this.points[pointIndex - 1]?.desription!]!,
190
                  this.radiiMap[candidate.desription]!
191
                ),
192
                2
193
              )
194
            ) {
195
              return false
196
            }
197
          }
198
        }
199
      }
200
      return true
201
    }
202
    return false
203
  }
204
}

1
import { writable } from 'svelte/store'
2

3
export const regen = writable(false)
4
export const radius = writable(4)
5
export const width = 20
6
export const height = 20

An important parameter to play with when generating scenes with this last approach is the window size. It is inferred from the difference between the largest and smallest radius given. You’ll need to play around with the details if your usecase starts running into performance issues because of this algorithm.