Add README

- huge loading time reducing by simplifiying ocean

.gitignore

@@ -0,0 +1 @@
+textures/old/

MazeMesh.js

@@ -0,0 +1,74 @@
+import * as THREE from 'three';
+
+export default class MazeMesh extends THREE.InstancedMesh {
+    constructor( width, length, height, material ) {
+        super( 
+            new THREE.BoxGeometry( 1, height, 1 ),
+            material,
+            width*length - 2
+        );
+        this.length = length
+        this.width = width
+        this.map = new Array(length).fill().map(() => new Array(width).fill(1))
+        this.start = new THREE.Vector3(width/2, .1, length/2)
+        this.exit = new THREE.Vector3(Math.floor(width/2), 0, 1)
+
+        this.dig(this.exit)
+        this.dig(new THREE.Vector3(Math.floor(width/2), 0, 0))
+        this.build ( this.exit )
+        let matrix = new THREE.Matrix4()
+        this.count = 0
+        this.map.forEach((row, z) => {
+            row.forEach((isWall, x) => {
+                if (isWall) {
+                    matrix.setPosition( x + .5 - width/2, 0.5, z + .5 - length/2)
+                    this.setMatrixAt( this.count, matrix );
+                    this.count++
+                }
+            })
+        })
+    }
+    
+    dig(position) {
+        this.map[position.z][position.x] = 0
+    }
+
+    static DIRECTIONS = [
+        new THREE.Vector3( 0, 0, -1),
+        new THREE.Vector3( 0, 0,  1),
+        new THREE.Vector3(-1, 0,  0),
+        new THREE.Vector3( 1, 0,  0),
+    ]
+    build(position) {
+        for (var direction of Array.from(this.constructor.DIRECTIONS).sort(x => .5 - Math.random())) {
+            var step1 = position.clone().add(direction)
+            var step2 = step1.clone().add(direction)
+            if (this.isWall(step2) == 1) {
+                this.dig(step1)
+                this.dig(step2)
+                this.count -= 2
+                this.build(step2)
+            }
+        }
+    }
+
+    isWall(position) {
+        if (0 <= position.x && position.x < this.width &&
+            0 <= position.y &&
+            0 <= position.z && position.z < this.length) {
+            return this.map[Math.floor(position.z)][Math.floor(position.x)]
+        } else {
+            return -1
+        }
+    }
+
+    collision(position) {
+        return this.isWall(this.worldToLocal(position))
+    }
+
+    toString() {
+        return this.map.map(row => 
+            row.map(isWall => isWall? "██":"  ").join("")
+        ).join("\n")
+    }
+}

README.md

@@ -0,0 +1,5 @@
+# Daedalus
+
+3D Maze Web game made with Three.js library
+
+![screenshot](https://git.malingrey.fr/adrien/daedalus/raw/branch/master/thumbnail.png)

favicon.php

@@ -2,43 +2,15 @@
 header('Content-Type: image/x-icon');
 
 const SIZE = 16;
-const WALL = 1;
-const GROUND = 0;
 
-$favicon     = imagecreatetruecolor(SIZE, SIZE);
-$wallColor   = imagecolorallocate($favicon, 165, 80, 30);
-$groundColor = imagecolorallocate($favicon, 203, 162, 133);
+$x = filter_input(INPUT_GET, "x", FILTER_SANITIZE_NUMBER_INT);
+$y = filter_input(INPUT_GET, "y", FILTER_SANITIZE_NUMBER_INT);
 
-imagefill($favicon, 0, 0, $wallColor);
+$favicon = imagecreatefrombmp("favicon.ico");
 
-$maze = array();
-for ($y = 0; $y < SIZE; $y++) {
-    $maze[$y] = array();
-    for ($x = 0; $x < SIZE; $x++) {
-        $maze[$y][$x] = WALL;
-    }
-}
+$red = imagecolorallocate($favicon, 255, 0, 0);
+imagesetpixel($favicon, $x, $y, $red);
 
-function dig($position) {
-    global $maze;
-    global $favicon;
-    global $groundColor;
-    $directions = [[0, 1], [0, -1], [1, 0], [-1, 0]];
-    shuffle($directions);
-    foreach ($directions as $direction) {
-        $step1 = [$position[0] + $direction[0], $position[1] + $direction[1]];
-        $step2 = [$step1[0] + $direction[0], $step1[1] + $direction[1]];
-        if (0 <= $step2[1] and $step2[1] < SIZE and 0 <= $step2[0] and $step2[0] < SIZE and $maze[$step2[1]][$step2[0]] == WALL) {
-            $maze[$step1[1]][$step1[0]] = GROUND;
-            imagesetpixel($favicon, $step1[0], $step1[1], $groundColor);
-            $maze[$step2[1]][$step2[0]] = GROUND;
-            imagesetpixel($favicon, $step2[0], $step2[1], $groundColor);
-            dig($step2);
-        }
-    }
-}
-
-dig([1, 1]);
 imagebmp($favicon);
 imagedestroy($favicon);
 ?>

index.html

@@ -1,29 +1,170 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fr">
 	<head>
-		<title>Daedalus</title>
 		<meta charset=utf-8 />
+		<title>Daedalus</title>
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link rel="shortcut icon" type="image/x-icon" href="favicon.php"/>
+		<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" id="favicon"/>
+        <meta property="og:title" content="Daedalus"/>
+        <meta property="og:type" content="game"/>
+        <meta property="og:url" content="https://adrien.malingrey.fr/jeux/daedalus/"/>
+        <meta property="og:image" content="https://adrien.malingrey.fr/jeux/daedalus/thumbnail.png"/>
+        <meta property="og:image:width" content="250"/>
+        <meta property="og:image:height" content="250"/>
+        <meta property="og:description" content="Retrouvez la sortie"/>
+        <meta property="og:locale" content="fr_FR"/>
+        <meta property="og:site_name" content="adrien.malingrey.fr"/>
 		<link rel="stylesheet" href="style.css">
-	</head>
-	<body>
-		<div id="container"></div>
-
 		<!-- 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.152.2/build/three.module.js",
-					"three/addons/": "https://unpkg.com/three@0.152.2/examples/jsm/"
+					"three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.min.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/"
 				}
 			}
 		</script>
+		<script id="vertexShader" type="x-shader/x-vertex">
+			uniform mat4 textureMatrix;
+			uniform float time;
 
-		<script type="module" src="main.js"></script>
-		
+			varying vec4 mirrorCoord;
+			varying vec4 worldPosition;
+
+			#include <common>
+			#include <fog_pars_vertex>
+			#include <shadowmap_pars_vertex>
+			#include <logdepthbuf_pars_vertex>
+
+			uniform vec4 waveA;
+			uniform vec4 waveB;
+			uniform vec4 waveC;
+
+			vec3 GerstnerWave (vec4 wave, vec3 p) {
+				float steepness = wave.z;
+				float wavelength = wave.w;
+				float k = 2.0 * PI / wavelength;
+				float c = sqrt(9.8 / k);
+				vec2 d = normalize(wave.xy);
+				float f = k * (dot(d, p.xy) - c * time);
+				float a = steepness / k;
+
+				return vec3(
+					d.x * (a * cos(f)),
+					d.y * (a * cos(f)),
+					a * sin(f)
+				);
+			}
+
+			void main() {
+				mirrorCoord = modelMatrix * vec4( position, 1.0 );
+				worldPosition = mirrorCoord.xyzw;
+				mirrorCoord = textureMatrix * mirrorCoord;
+
+				vec3 p = position.xyz;
+				p += GerstnerWave(waveA, position.xyz);
+				p += GerstnerWave(waveB, position.xyz);
+				p += GerstnerWave(waveC, position.xyz);
+				gl_Position = projectionMatrix * modelViewMatrix * vec4( p.x, p.y, p.z, 1.0);
+
+				#include <beginnormal_vertex>
+				#include <defaultnormal_vertex>
+				#include <logdepthbuf_vertex>
+				#include <fog_vertex>
+				#include <shadowmap_vertex>
+			}
+		</script>
+		<script id="fragmentShader" type="x-shader/x-fragment">
+			uniform sampler2D mirrorSampler;
+			uniform float alpha;
+			uniform float time;
+			uniform float size;
+			uniform float distortionScale;
+			uniform sampler2D normalSampler;
+			uniform vec3 sunColor;
+			uniform vec3 sunDirection;
+			uniform vec3 eye;
+			uniform vec3 waterColor;
+
+			varying vec4 mirrorCoord;
+			varying vec4 worldPosition;
+
+			vec4 getNoise( vec2 uv ) {
+				vec2 uv0 = ( uv / 103.0 ) + vec2(time / 17.0, time / 29.0);
+				vec2 uv1 = uv / 107.0-vec2( time / -19.0, time / 31.0 );
+				vec2 uv2 = uv / vec2( 8907.0, 9803.0 ) + vec2( time / 101.0, time / 97.0 );
+				vec2 uv3 = uv / vec2( 1091.0, 1027.0 ) - vec2( time / 109.0, time / -113.0 );
+				vec4 noise = texture2D( normalSampler, uv0 ) +
+					texture2D( normalSampler, uv1 ) +
+					texture2D( normalSampler, uv2 ) +
+					texture2D( normalSampler, uv3 );
+				return noise * 0.5 - 1.0;
+			}
+
+			void sunLight( const vec3 surfaceNormal, const vec3 eyeDirection, float shiny, float spec, float diffuse, inout vec3 diffuseColor, inout vec3 specularColor ) {
+				vec3 reflection = normalize( reflect( -sunDirection, surfaceNormal ) );
+				float direction = max( 0.0, dot( eyeDirection, reflection ) );
+				specularColor += pow( direction, shiny ) * sunColor * spec;
+				diffuseColor += max( dot( sunDirection, surfaceNormal ), 0.0 ) * sunColor * diffuse;
+			}
+
+			#include <common>
+			#include <packing>
+			#include <bsdfs>
+			#include <fog_pars_fragment>
+			#include <logdepthbuf_pars_fragment>
+			#include <lights_pars_begin>
+			#include <shadowmap_pars_fragment>
+			#include <shadowmask_pars_fragment>
+
+			void main() {
+
+				#include <logdepthbuf_fragment>
+				vec4 noise = getNoise( worldPosition.xz * size );
+				vec3 surfaceNormal = normalize( noise.xzy * vec3( 1.5, 1.0, 1.5 ) );
+
+				vec3 diffuseLight = vec3(0.0);
+				vec3 specularLight = vec3(0.0);
+
+				vec3 worldToEye = eye-worldPosition.xyz;
+				vec3 eyeDirection = normalize( worldToEye );
+				sunLight( surfaceNormal, eyeDirection, 100.0, 2.0, 0.5, diffuseLight, specularLight );
+
+				float distance = length(worldToEye);
+
+				vec2 distortion = surfaceNormal.xz * ( 0.001 + 1.0 / distance ) * distortionScale;
+				vec3 reflectionSample = vec3( texture2D( mirrorSampler, mirrorCoord.xy / mirrorCoord.w + distortion ) );
+
+				float theta = max( dot( eyeDirection, surfaceNormal ), 0.0 );
+				float rf0 = 0.3;
+				float reflectance = rf0 + ( 1.0 - rf0 ) * pow( ( 1.0 - theta ), 5.0 );
+				vec3 scatter = max( 0.0, dot( surfaceNormal, eyeDirection ) ) * waterColor;
+				vec3 albedo = mix( ( sunColor * diffuseLight * 0.3 + scatter ) * getShadowMask(), ( vec3( 0.1 ) + reflectionSample * 0.9 + reflectionSample * specularLight ), reflectance);
+				vec3 outgoingLight = albedo;
+				gl_FragColor = vec4( outgoingLight, alpha );
+
+				#include <tonemapping_fragment>
+				#include <fog_fragment>
+			}
+		</script>
+	</head>
+	<body>
+		<div id="loading">
+			<div id="loadingMazeShadow">
+				<table id="loadingMazeTable"></table>
+			</div>
+			<div id="loadingMessage">Construction du labyrinthe : <span id="progress">0</span>%</div>
+			<div>
+				Se déplacer : ↑←↓→, ZQSD ou clic<br/>
+				Sauter : ESPACE<br/>
+				Regarder : Souris
+			</div>
+		</div>
+		<div id="container"></div>
+		<span id="message"></span>
+
+		<script type="module" src="./main.js"></script>
 	</body>
 </html>

style.css

@@ -1,10 +1,114 @@
 body {
-    margin: 0;
-    background-color: #000;
-    color: #fff;
-    font-family: Monospace;
-    font-size: 13px;
-    line-height: 24px;
-    overscroll-behavior: none;
-    cursor: pointer;
-}
+  margin: 0;
+  background-color: #041626;
+  font-size: 1.3em;
+  overscroll-behavior: none;
+  cursor: progress;
+}
+
+#loading {
+  width: fit-content;
+  color: #2c5c88;
+  font-size: 1.3em;
+  top: 20vh;
+  margin: auto;
+  font-family: sans-serif;
+}
+
+#loadingMessage {
+  margin-bottom: 0.5em;
+}
+
+@keyframes perspective {
+  from {
+    transform: rotateX(0deg) perspective(0px);
+    filter: drop-shadow(0px 00px 0px #0f2437);
+  }
+  to {
+    transform: rotateX(40deg) perspective(150px);
+    filter: drop-shadow(0px 10px 0px #0f2437);
+  }
+}
+
+#loadingMazeShadow {
+  width: 230px;
+  height: 230px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 20vh;
+  margin-bottom: 5vh;
+  animation: perspective 30s;
+}
+
+@keyframes rotation {
+  from {
+    transform: rotateZ(0deg);
+  }
+  to {
+    transform: rotateZ(360deg);
+  }
+}
+
+#loadingMazeTable {
+  border-collapse: collapse;
+  animation: rotation 60s infinite;
+  border: none;
+}
+
+#loadingMazeTable td {
+  width: 10px;
+  height: 10px;
+  transition: background-color 1s;
+  border: none;
+  padding: 0;
+}
+
+.wall {
+  background-color: transparent;
+}
+
+.ground {
+  background-color: #214464;
+}
+
+#container {
+  position: absolute;
+  z-index: 0;
+  cursor: move;
+}
+
+@keyframes escaped{
+  0% {
+    opacity: 0%;
+    top: 90vh; 
+  }
+  100% {
+    opacity: 100%;
+    top: 30vh;
+  }
+}
+
+#message {
+  display: none;
+  position: absolute;
+  left: 0;
+  width: 100%;
+  background: transparent;
+  justify-content: center;
+  z-index: 1;
+  color: gray;
+  font-family: serif;
+}
+
+#message a {
+  color: inherit;
+}
+
+#message.escaped {
+  display: block; 
+  opacity: 100%;
+  font-size: 4vh;
+  text-align: center;
+  top: 30vh;
+  animation: escaped 5s;
+}

textures/Poly-cobblestone-wall/Made with Poly.txt

@@ -0,0 +1,3 @@
+This asset was made with Poly, an AI-generated design asset marketplace that lets you find and create incredibly life-like, detailed, and artistic assets for your next project, in seconds.
+
+Get started for free at https://withpoly.com

textures/Poly-cobblestone-wall/settings.json

@@ -0,0 +1,23 @@
+{
+  "prompt_text": "cobblestone wall with grass and flowers between rocks",
+  "patch": {
+    "ext": "png",
+    "dtype": "uint8",
+    "width": 512,
+    "height": 512,
+    "url": "https://static-dev.withpoly.com/v3-voronoi/textures/patches/486f8eed-0dfd-4bdc-9dee-3776fc72b1f1.png",
+    "patch_id": "GVpEsGuQ8S"
+  },
+  "seamless_prompt_text": "cobblestone wall with grass and flowers between rocks",
+  "seamless_patch_scale": 0.98,
+  "upscale_prompt_text": "cobblestone wall with grass and flowers between rocks",
+  "upscale_resolution": 4096,
+  "is_seamless": true,
+  "pbr_mode": "organic",
+  "pbr_use_render_as_color": true,
+  "pbr_generate_normal": true,
+  "pbr_generate_height": true,
+  "pbr_generate_ao": true,
+  "pbr_generate_roughness": true,
+  "pbr_generate_metallic": false
+}

textures/Poly-wood/Made with Poly.txt

@@ -0,0 +1,3 @@
+This asset was made with Poly, an AI-generated design asset marketplace that lets you find and create incredibly life-like, detailed, and artistic assets for your next project, in seconds.
+
+Get started for free at https://withpoly.com

textures/Poly-wood/settings.json

@@ -0,0 +1,23 @@
+{
+  "prompt_text": "wood, planks, wooden, green paint, painted wood, paint, scrathes, raw wood, peeling paint",
+  "patch": {
+    "ext": "png",
+    "dtype": "uint8",
+    "width": 512,
+    "height": 512,
+    "url": "https://static-dev.withpoly.com/v3-voronoi/textures/patches/0ddfc901-a5dd-40f0-993b-8de3ccefb7f7.png",
+    "patch_id": "a79eceALs5"
+  },
+  "seamless_prompt_text": "wood, planks, wooden, green paint, painted wood, paint, scrathes, raw wood, peeling paint",
+  "seamless_patch_scale": 0.8,
+  "upscale_prompt_text": "wood, planks, wooden, green paint, painted wood, paint, scrathes, raw wood, peeling paint",
+  "upscale_resolution": 4096,
+  "is_seamless": true,
+  "pbr_mode": "matte",
+  "pbr_generate_color": true,
+  "pbr_generate_normal": true,
+  "pbr_generate_height": true,
+  "pbr_generate_ao": true,
+  "pbr_generate_roughness": true,
+  "pbr_generate_metallic": false
+}