Animated Grass Shader

by black strings

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
<head>
	<canvas id="canvas"></canvas>
</head>
<body>
	<div class="instructions">WASD/ARROW KEYS TO MOVE, MOUSE TO LOOK</div>
</body>

CSS

body {
    background-color: #fff;    
    margin: 0;
		overflow: hidden;
}
.label {
	position: absolute;
	top: 0;
	left: 0;
	padding: 5px 15px;
	color: #fff;
	font-size: 13px;
	background-color: rgba(0, 0, 0, .15);
}
.instructions {
	position: absolute;
	bottom: 0%;
	left: 0;
	padding: 5px 15px;
	color: #fff;
	font-size: 13px;
	background-color: rgba(0, 0, 0, .15);
}
canvas { display:block; }

JavaScript

//Update of
//https://codepen.io/al-ro/pen/jJJygQ
//Added lighting, translucency and movement on an infinite rounded world

//Based on:
//"Realistic real-time grass rendering" by Eddie Lee, 2010
//https://www.eddietree.com/grass
//https://en.wikibooks.org/wiki/GLSL_Programming/Unity/Translucent_Surfaces

//There are two scenes: one for the sky/sun and another for the grass. The sky is rendered without depth information on a plane geometry that fills the screen. Automatic clearing is disabled and after the sky has been rendered, we draw the grass scene on top of the background. Both scenes share a camera and light direction information.
import * as THREE from "https://unpkg.com/[email protected]/build/three.module.js";
import { OrbitControls } from "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js";
var canvas = document.getElementById("canvas");

const mobile = ( navigator.userAgent.match(/Android/i)
      || navigator.userAgent.match(/webOS/i)
      || navigator.userAgent.match(/iPhone/i)
      || navigator.userAgent.match(/BlackBerry/i)
      || navigator.userAgent.match(/Windows Phone/i)
      );

//Variables for blade mesh
var canAnimateGrass = true;
var joints = 1; // 1-6
var bladeWidth = .05; // .01-5
var bladeHeight = .1; // .01-5
var windNoiseReduction = .01;

//Patch side length
var width = 500; // 500
//Number of vertices on ground plane side
var resolution = 22;
//Distance between two ground plane vertices
var delta = width/resolution;
//Radius of the sphere onto which the ground plane is bent
var radius = 250;
//User movement speed
var speed = 3;

//The global coordinates
//The geometry never leaves a box of width*width around (0, 0)
//But we track where in space the camera would be globally
var pos = new THREE.Vector2(0.01, 0.01);

//Number of blades
var instances = 10000;
if(mobile){
	instances = 7000;
	width = 50;
}

//Sun
//Height over horizon in range [0, PI/2.0]
var elevation = 0.2;
//Rotation around Y axis in range [0, 2*PI]
var...