Enable WebGPU when available

- fixed shader compilation errors: the compiler expects explicit locations for in/out and works fine with varying

src/shaders/butterflyFragment.glsl

@@ -6,13 +6,13 @@ uniform vec3 lightDirection;
 
 uniform sampler2D butterflyTexture;
 
-in vec3 vPosition;
-in vec2 vUV;
+varying vec3 vPosition;
+varying vec2 vUV;
 
-in mat4 normalMatrix;
-in vec3 vNormal;
+varying mat4 normalMatrix;
+varying vec3 vNormal;
 
-in vec3 vOriginalWorldPosition;
+varying vec3 vOriginalWorldPosition;
 
 // src: https://gist.github.com/mairod/a75e7b44f68110e1576d77419d608786
 vec3 hueShift( vec3 color, float hueAdjust ){

src/shaders/butterflyVertex.glsl

@@ -1,8 +1,8 @@
 precision highp float;
 
-in vec3 position;
-in vec3 normal;
-in vec2 uv;
+attribute vec3 position;
+attribute vec3 normal;
+attribute vec2 uv;
 
 uniform mat4 viewProjection;
 
@@ -12,13 +12,13 @@ uniform vec3 playerPosition;
 
 uniform float time;
 
-out vec3 vPosition;
-out vec2 vUV;
+varying vec3 vPosition;
+varying vec2 vUV;
 
-out mat4 normalMatrix;
-out vec3 vNormal;
+varying mat4 normalMatrix;
+varying vec3 vNormal;
 
-out vec3 vOriginalWorldPosition;
+varying vec3 vOriginalWorldPosition;
 
 // rotation using https://www.wikiwand.com/en/Rodrigues%27_rotation_formula
 vec3 rotateAround(vec3 vector, vec3 axis, float theta) {

src/shaders/grassFragment.glsl

@@ -4,10 +4,10 @@ uniform float time;
 
 uniform vec3 lightDirection;
 
-in vec3 vPosition;
+varying vec3 vPosition;
 
-in mat4 normalMatrix;
-in vec3 vNormal;
+varying mat4 normalMatrix;
+varying vec3 vNormal;
 
 void main() {
     vec3 baseColor = vec3(0.05, 0.2, 0.01);

src/shaders/grassVertex.glsl

@@ -1,7 +1,7 @@
 precision highp float;
 
-in vec3 position;
-in vec3 normal;
+attribute vec3 position;
+attribute vec3 normal;
 
 uniform mat4 view;
 uniform mat4 projection;
@@ -13,10 +13,10 @@ uniform float time;
 
 uniform sampler2D perlinNoise;
 
-out vec3 vPosition;
+varying vec3 vPosition;
 
-out mat4 normalMatrix;
-out vec3 vNormal;
+varying mat4 normalMatrix;
+varying vec3 vNormal;
 
 // rotation using https://www.wikiwand.com/en/Rodrigues%27_rotation_formula
 vec3 rotateAround(vec3 vector, vec3 axis, float theta) {

src/ts/index.ts

@@ -43,12 +43,13 @@ import { TerrainChunk } from "./terrain/terrainChunk";
 import { createButterfly } from "./butterfly/butterfly";
 import { createButterflyMaterial } from "./butterfly/butterflyMaterial";
 import { createTree } from "./utils/tree";
+import { EngineFactory } from "@babylonjs/core";
 
 const canvas = document.getElementById("renderer") as HTMLCanvasElement;
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 
-const engine = new Engine(canvas, true);
+const engine = await EngineFactory.CreateAsync(canvas, {});
 engine.displayLoadingUI();
 
 const havokInstance = await HavokPhysics();