use webp textures

index.html

@@ -8,12 +8,12 @@
 		<link rel="stylesheet" href="style.css">
 		<!-- Import maps polyfill -->
 		<!-- Remove this when import maps will be widely supported -->
-		<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
+		<script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1.8.3/dist/es-module-shims.min.js"></script>
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "https://unpkg.com/three@0.158/build/three.module.js?module",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.161.0/build/three.module.min.js",
-					"three/addons/": "https://unpkg.com/three@0.158/examples/jsm/",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.161.0/examples/jsm/",
 					"three-hex-tiling": "https://cdn.jsdelivr.net/npm/three-hex-tiling@0.1.1/dist/index.js"
 				}
 			}

main.js

@@ -1,15 +1,15 @@
-import * as THREE from 'three';
+import * as THREE from 'three'
-import { Octree } from 'three/addons/math/Octree.js';
+import { Octree } from 'three/addons/math/Octree.js'
-import { Capsule } from 'three/addons/math/Capsule.js';
+import { Capsule } from 'three/addons/math/Capsule.js'
-import { Water } from 'three/addons/objects/Water.js';
+import { Water } from 'three/addons/objects/Water.js'
-import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
+import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js'
-import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+import { GUI } from 'three/addons/libs/lil-gui.module.min.js'
-import { OctreeHelper } from 'three/addons/helpers/OctreeHelper.js';
+import { OctreeHelper } from 'three/addons/helpers/OctreeHelper.js'
-import Stats from 'three/addons/libs/stats.module.js';
+import Stats from 'three/addons/libs/stats.module.js'
 
-//import 'three-hex-tiling';
+//import 'three-hex-tiling'
 
-import MazeMesh from './MazeMesh.js';
+import MazeMesh from './MazeMesh.js'
 
 
 const playerHeight = 0.5;
@@ -80,12 +80,12 @@ const scene = new THREE.Scene();
 scene.background = new THREE.CubeTextureLoader(loadMngr)
     .setPath( 'textures/calm-sea-skybox/' )
     .load( [
-        'ft.jpg',
+        'ft.webp',
-        'bk.jpg',
+        'bk.webp',
-        'up.jpg',
+        'up.webp',
-        'dn.jpg',
+        'dn.webp',
-        'rt.jpg',
+        'rt.webp',
-        'lf.jpg',
+        'lf.webp',
     ] );
 scene.backgroundBlurriness = 0.03;
 scene.backgroundIntensity  = 1.4;
@@ -102,10 +102,10 @@ const mazeCollisionner = new THREE.Group();
 // Maze
 
 const wallMaterial = new THREE.MeshStandardMaterial({
-    map            : loader.load('textures/Poly-cobblestone-wall/color_map.jpg'),
+    map            : loader.load('textures/Poly-cobblestone-wall/color_map.webp'),
-    normalMap      : loader.load('textures/Poly-cobblestone-wall/normal_map_opengl.jpg'),
+    normalMap      : loader.load('textures/Poly-cobblestone-wall/normal_map_opengl.webp'),
-	aoMap          : loader.load('textures/Poly-cobblestone-wall/ao_map.jpg'),
+	aoMap          : loader.load('textures/Poly-cobblestone-wall/ao_map.webp'),
-	roughnessMap   : loader.load('textures/Poly-cobblestone-wall/roughness_map.jpg'),
+	roughnessMap   : loader.load('textures/Poly-cobblestone-wall/roughness_map.webp'),
 	roughness      : 1
 })
 
@@ -139,11 +139,11 @@ function repeatGroundMaterial (texture) {
     texture.repeat.set(mazeWidth / 4, mazeWidth / 4)
 }
 const groundMaterial = new THREE.MeshStandardMaterial({
-    map         : loader.load('textures/angled-blocks-vegetation/albedo.png', repeatGroundMaterial),
+    map         : loader.load('textures/angled-blocks-vegetation/albedo.webp', repeatGroundMaterial),
-    aoMap       : loader.load('textures/angled-blocks-vegetation/ao-roughness-metalness.png', repeatGroundMaterial),
+    aoMap       : loader.load('textures/angled-blocks-vegetation/ao.webp', repeatGroundMaterial),
-    metalnessMap: loader.load('textures/angled-blocks-vegetation/ao-roughness-metalness.png', repeatGroundMaterial),
+    metalnessMap: loader.load('textures/angled-blocks-vegetation/metallic.webp', repeatGroundMaterial),
-    normalMap   : loader.load('textures/angled-blocks-vegetation/normal-dx.png', repeatGroundMaterial),
+    normalMap   : loader.load('textures/angled-blocks-vegetation/normal-dx.webp', repeatGroundMaterial),
-    roughnessMap: loader.load('textures/angled-blocks-vegetation/ao-roughness-metalness.png', repeatGroundMaterial),
+    roughnessMap: loader.load('textures/angled-blocks-vegetation/roughness.webp', repeatGroundMaterial),
     /*hexTiling   : {
         patchScale: 1,
         useContrastCorrectedBlending: true,
@@ -204,7 +204,7 @@ const ocean = new Water(waterGeometry, {
     textureWidth : 512,
     textureHeight: 512,
     waterNormals : loader.load(
-        'textures/waternormals.jpg',
+        'textures/waternormals.webp',
         function (texture) {
             texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
         }
@@ -302,15 +302,15 @@ function repeatRaftMaterial(texture) {
     texture.repeat.set(2, 1)
 }
 const raftMaterial = new THREE.MeshStandardMaterial({
-    map: loader.load("textures/Poly-wood/color_map.jpg", repeatRaftMaterial),
+    map: loader.load("textures/Poly-wood/color_map.webp", repeatRaftMaterial),
-    aoMap: loader.load("textures/Poly-wood/ao_map.jpg", repeatRaftMaterial),
+    aoMap: loader.load("textures/Poly-wood/ao_map.webp", repeatRaftMaterial),
-    normalMap: loader.load("textures/Poly-wood/normal_map_opengl.jpg", repeatRaftMaterial),
+    normalMap: loader.load("textures/Poly-wood/normal_map_opengl.webp", repeatRaftMaterial),
     normalScale : new THREE.Vector2(2, 2),
-    roughnessMap: loader.load("textures/Poly-wood/roughness_map.jpg", repeatRaftMaterial),
+    roughnessMap: loader.load("textures/Poly-wood/roughness_map.webp", repeatRaftMaterial),
     depthFunc: 3,
     depthTest: true,
     depthWrite: true,
-    displacementMap: loader.load("textures/Poly-wood/displacement_map.jpg", repeatRaftMaterial),
+    displacementMap: loader.load("textures/Poly-wood/displacement_map.webp", repeatRaftMaterial),
     displacementScale: -0.3,
     displacementBias: 0.15,
 })