Godot Foliage - three.js port

https://github.com/FaRu85/Godot-Foliage

by Cody Bennett

HTML

<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/[email protected]/build/three.module.js"
		}
	}
</script>

CSS

body {
  margin: 0;
  background: rgb(51, 75, 97);
}

canvas {
  cursor: grab;
  display: block;
}

canvas:active {
  cursor: grabbing;
}

JavaScript

import * as THREE from 'three'
import { OrbitControls } from 'https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from 'https://unpkg.com/[email protected]/examples/jsm/loaders/GLTFLoader.js'

const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true })
renderer.setPixelRatio(Math.min(2, Math.max(1, window.devicePixelRatio)))
document.body.appendChild(renderer.domElement)

const camera = new THREE.PerspectiveCamera(80)
camera.position.set(0, 1.3, 3)

const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true

const scene = new THREE.Scene()

const foliageMaterial = new THREE.RawShaderMaterial({
  glslVersion: THREE.GLSL3,
  uniforms: {
    time: { value: 0 },
    alphaMask: { value: new THREE.TextureLoader().load('https://rawcdn.githack.com/FaRu85/Godot-Foliage/e5af6d7e5db503a4109c3b8da9da2d9c31d3be3e/Textures/Leaves001-03.png') },
    topColor: { value: new THREE.Color(0.24, 0.47, 0.2) },
    bottomColor: { value: new THREE.Color(0.13, 0.33, 0.25) },
    fresnelColor: { value: new THREE.Color(0.58, 0.65, 0.33) },
    windScale: { value: 1.0 }, // [1, 20]
    windStrength: { value: 5.0 }, // [1, 20]
    windDensity: { value: 5.0 }, // [1, 20]
    meshScale: { value: -0.333 }, // [-5, 5]
    colorRamp: { value: 0.3 }, // [0.05, 5]
    faceRotationVariation: { value: 1.0 }, // [-3, 3]
    fresnelStrength: { value: 0.5 }, // [-2, 2]
    distanceScale: { value: 0.5 }, // [0, 5]
    distanceStart: { value: 0.0 },
    distanceScaleRange: { value: 70.0 },
  },
  vertexShader: /* glsl */ `
    uniform float time;
    uniform vec3 cameraPosition;
    uniform mat4 projectionMatrix;
    uniform mat4 modelMatrix;
    uniform mat4 viewMatrix;
    uniform float windScale;
    uniform float windStrength;
    uniform float windDensity;
    uniform float meshScale;
    uniform float colorRamp;
    uniform float faceRotationVariation;
    uniform float distanceScale;
    uniform float...