smoother blade

+ better camera
BarthPaleologue · Nov 6, 2023 · 1522136 · 1522136
1 parent 0150d3e
commit 1522136
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/src/ts/grassBlade.ts b/src/ts/grassBlade.ts
@@ -2,7 +2,6 @@ import {Color3} from "@babylonjs/core/Maths/math.color";
 import {Mesh} from "@babylonjs/core/Meshes/mesh";
 import {VertexData} from "@babylonjs/core/Meshes/mesh.vertexData";
 import {Scene} from "@babylonjs/core/scene";
-import {PBRMaterial} from "@babylonjs/core/Materials/PBR/pbrMaterial";
 import {StandardMaterial} from "@babylonjs/core";
 
 export function makeGrassBlade(scene: Scene, nbStacks: number) {
@@ -19,11 +18,11 @@ export function makeGrassBlade(scene: Scene, nbStacks: number) {
     let indexIndex = 0;
     const step = 1 / nbStacks;
     for (let i = 0; i < nbStacks; i++) {
-        positions[vertexIndex++] = -0.1;
+        positions[vertexIndex++] = -0.05 - 0.05 * (nbStacks - i) * step;
         positions[vertexIndex++] = i * step;
         positions[vertexIndex++] = 0;
 
-        positions[vertexIndex++] = 0.1;
+        positions[vertexIndex++] = 0.05 + 0.05 * (nbStacks - i) * step;
         positions[vertexIndex++] = i * step;
         positions[vertexIndex++] = 0;
 
@@ -72,7 +71,7 @@ export function makeGrassBlade(scene: Scene, nbStacks: number) {
 
     const material = new StandardMaterial("grassBladeMaterial", scene);
     material.backFaceCulling = false;
-    material.diffuseColor = new Color3(0.5, 1, 0.5);
+    material.diffuseColor = new Color3(0.0, 0.5, 0.0);
 
     mesh.material = material;
 

diff --git a/src/ts/index.ts b/src/ts/index.ts
@@ -12,6 +12,8 @@ import "@babylonjs/core/Loading/loadingScreen";
 
 import "../styles/index.scss";
 import {makeGrassBlade} from "./grassBlade";
+import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";
+import {ArcRotateCamera, DirectionalLight} from "@babylonjs/core";
 
 //import postprocessCode from "../shaders/smallPostProcess.glsl";
 
@@ -23,27 +25,33 @@ const engine = new Engine(canvas);
 
 const scene = new Scene(engine);
 
-const camera = new FreeCamera("camera", new Vector3(0, 6, -10), scene);
-camera.setTarget(Vector3.Zero());
+const camera = new ArcRotateCamera("camera", 3.14/2, 1, 15, Vector3.Zero(), scene);
 camera.attachControl();
 
-const light = new PointLight("light", new Vector3(-5, 5, 10), scene);
+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);
+groundMaterial.specularColor.scaleInPlace(0);
+
+ground.material = groundMaterial;
 
 const grassBlade = makeGrassBlade(scene, 5);
 grassBlade.isVisible = false;
 
 const grassBlades = [];
 const patchSize = 10;
 const patchResolution = 20;
+const cellSize = patchSize / patchResolution;
 const patchPosition = new Vector3(0, 0, 0);
 
 for(let x = 0; x < patchResolution; x++) {
     for(let z = 0; z < patchResolution; z++) {
         const blade = grassBlade.createInstance(`blade${x}${z}`);
-        blade.position.x = patchPosition.x + (x / patchResolution) * patchSize - patchSize / 2;
-        blade.position.z = patchPosition.z + (z / patchResolution) * patchSize - patchSize / 2;
+        const randomCellPositionX = Math.random() * cellSize;
+        const randomCellPositionZ = Math.random() * cellSize;
+        blade.position.x = patchPosition.x + (x / patchResolution) * patchSize - patchSize / 2 + randomCellPositionX;
+        blade.position.z = patchPosition.z + (z / patchResolution) * patchSize - patchSize / 2 + randomCellPositionZ;
         grassBlades.push(blade);
     }
 }