grass shading

src/shaders/grassFragment.glsl

@@ -2,8 +2,19 @@ precision highp float;
 
 uniform float time;
 
+uniform vec3 lightDirection;
+
+in mat4 normalMatrix;
+in vec3 vNormal;
+
 void main() {
     vec3 finalColor = vec3(0.0, 0.4, 0.0);
 
-    gl_FragColor = vec4(finalColor, 1.0);// apply color and lighting
+    vec3 normalW = normalize((normalMatrix * vec4(vNormal, 0.0)).xyz);
+
+    float ndl1 = max(dot(normalW, lightDirection), 0.0);
+    float ndl2 = max(dot(-normalW, lightDirection), 0.0);
+    float ndl = ndl1 + ndl2;
+
+    gl_FragColor = vec4(finalColor * ndl, 1.0);// apply color and lighting
 } 

src/shaders/grassVertex.glsl

@@ -5,6 +5,9 @@ attribute vec3 normal;
 
 uniform mat4 viewProjection;
 
+out mat4 normalMatrix;
+out vec3 vNormal;
+
 // rotation using https://www.wikiwand.com/en/Rodrigues%27_rotation_formula
 vec3 rotateAround(vec3 vector, vec3 axis, float theta) {
     // Please note that unit vector are required, i did not divided by the norms
@@ -22,4 +25,7 @@ void main() {
 
     vec4 outPosition = viewProjection * finalWorld * vec4(rotatedPosition, 1.0);
     gl_Position = outPosition;
+
+    normalMatrix = transpose(inverse(finalWorld));
+    vNormal = normal;
 }

src/ts/grassBlade.ts

@@ -70,12 +70,5 @@ export function makeGrassBlade(scene: Scene, nbStacks: number) {
 
     vertexData.applyToMesh(mesh);
 
-    /*const material = new StandardMaterial("grassBladeMaterial", scene);
-    material.backFaceCulling = false;
-    material.diffuseColor = new Color3(0.0, 0.5, 0.0);*/
-
-    const material = makeGrassMaterial(scene);
-    mesh.material = material;
-
     return mesh;
 }

src/ts/grassMaterial.ts

@@ -12,7 +12,7 @@ export function makeGrassMaterial(scene: Scene) {
 
     const grassMaterial = new ShaderMaterial("grassMaterial", scene, shaderName, {
         attributes: ["position", "normal"],
-        uniforms: ["world", "viewProjection", "time"],
+        uniforms: ["world", "viewProjection", "time", "lightDirection"],
         defines: ["#define INSTANCES"]
     });
 

src/ts/index.ts

@@ -14,6 +14,7 @@ import "../styles/index.scss";
 import {makeGrassBlade} from "./grassBlade";
 import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";
 import {ArcRotateCamera, DirectionalLight} from "@babylonjs/core";
+import {makeGrassMaterial} from "./grassMaterial";
 
 //import postprocessCode from "../shaders/smallPostProcess.glsl";
 
@@ -28,7 +29,7 @@ const scene = new Scene(engine);
 const camera = new ArcRotateCamera("camera", 3.14/2, 1, 15, Vector3.Zero(), scene);
 camera.attachControl();
 
-new DirectionalLight("light", new Vector3(-5, 5, 10).negateInPlace().normalize(), scene);
+const light = new DirectionalLight("light", new Vector3(-5, 5, 10).negateInPlace().normalize(), scene);
 
 const ground = MeshBuilder.CreateGround("ground", { width: 10, height: 10 }, scene);
 const groundMaterial = new StandardMaterial("groundMaterial", scene);
@@ -39,6 +40,10 @@ ground.material = groundMaterial;
 const grassBlade = makeGrassBlade(scene, 5);
 grassBlade.isVisible = false;
 
+const material = makeGrassMaterial(scene);
+material.setVector3("lightDirection", light.direction);
+grassBlade.material = material;
+
 const grassBlades = [];
 const patchSize = 10;
 const patchResolution = 20;