From cb1b0bb541f384abec02615284d85e421fb35b7a Mon Sep 17 00:00:00 2001
From: adrien <adrien@malingrey.fr>
Date: Sat, 18 Nov 2023 11:38:19 +0100
Subject: [PATCH 1/2] import hexTiling
---
index.html | 5 +++--
main.js | 15 +++++++++++++++
2 files changed, 18 insertions(+), 2 deletions(-)
diff --git a/index.html b/index.html
index 6019afc..102a207 100644
--- a/index.html
+++ b/index.html
@@ -12,8 +12,9 @@
<script type="importmap">
{
"imports": {
- "three": "https://unpkg.com/three@0.157/build/three.module.js?module",
- "three/addons/": "https://unpkg.com/three@0.157/examples/jsm/"
+ "three": "https://unpkg.com/three@0.158/build/three.module.js?module",
+ "three/addons/": "https://unpkg.com/three@0.158/examples/jsm/",
+ "three-hex-tiling": "https://cdn.jsdelivr.net/npm/three-hex-tiling@0.1.1/+esm"
}
}
</script>
diff --git a/main.js b/main.js
index d1f1af9..e70337d 100644
--- a/main.js
+++ b/main.js
@@ -10,6 +10,8 @@ import Stats from 'three/addons/libs/stats.module.js';
import MazeMesh from './MazeMesh.js';
+import 'three-hex-tiling';
+
const playerHeight = 0.5;
const mazeWidth = 23
@@ -86,6 +88,7 @@ scene.background = new THREE.CubeTextureLoader(loadMngr)
'lf.jpg',
] );
scene.backgroundBlurriness = 0.03;
+scene.backgroundIntensity = 1.4;
scene.environment = scene.background;
window.scene = scene;
@@ -104,6 +107,12 @@ const wallMaterial = new THREE.MeshStandardMaterial({
aoMap : loader.load('textures/Poly-cobblestone-wall/ao_map.jpg'),
roughnessMap : loader.load('textures/Poly-cobblestone-wall/roughness_map.jpg'),
roughness : 1,
+ hexTiling: {
+ patchScale: 2,
+ useContrastCorrectedBlending: true,
+ lookupSkipThreshold: 0.01,
+ textureSampleCoefficientExponent: 8,
+ }
})
const maze = new MazeMesh(mazeWidth, mazeWidth, 1, wallMaterial);
@@ -169,6 +178,12 @@ const groundMaterial = new THREE.MeshStandardMaterial({
texture.repeat.set(mazeWidth / 4, mazeWidth / 4)
}
),
+ hexTiling: {
+ patchScale: 2,
+ useContrastCorrectedBlending: true,
+ lookupSkipThreshold: 0.01,
+ textureSampleCoefficientExponent: 8,
+ }
})
const sideGroundMaterial = new THREE.MeshStandardMaterial({
--
2.39.5
From a0b2aa96ad552e7d5cf1588dc6c285f4de258873 Mon Sep 17 00:00:00 2001
From: adrien <adrien@malingrey.fr>
Date: Sat, 18 Nov 2023 12:45:50 +0100
Subject: [PATCH 2/2] use three-hex-tiling for ground material
---
index.html | 2 +-
main.js | 31 +++++++++++++++++--------------
2 files changed, 18 insertions(+), 15 deletions(-)
diff --git a/index.html b/index.html
index 102a207..dd7106c 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
"imports": {
"three": "https://unpkg.com/three@0.158/build/three.module.js?module",
"three/addons/": "https://unpkg.com/three@0.158/examples/jsm/",
- "three-hex-tiling": "https://cdn.jsdelivr.net/npm/three-hex-tiling@0.1.1/+esm"
+ "three-hex-tiling": "https://cdn.jsdelivr.net/npm/three-hex-tiling@0.1.1/dist/index.js"
}
}
</script>
diff --git a/main.js b/main.js
index e70337d..88df7a0 100644
--- a/main.js
+++ b/main.js
@@ -106,13 +106,7 @@ const wallMaterial = new THREE.MeshStandardMaterial({
normalMap : loader.load('textures/Poly-cobblestone-wall/normal_map_opengl.jpg'),
aoMap : loader.load('textures/Poly-cobblestone-wall/ao_map.jpg'),
roughnessMap : loader.load('textures/Poly-cobblestone-wall/roughness_map.jpg'),
- roughness : 1,
- hexTiling: {
- patchScale: 2,
- useContrastCorrectedBlending: true,
- lookupSkipThreshold: 0.01,
- textureSampleCoefficientExponent: 8,
- }
+ roughness : 1
})
const maze = new MazeMesh(mazeWidth, mazeWidth, 1, wallMaterial);
@@ -147,42 +141,42 @@ const groundMaterial = new THREE.MeshStandardMaterial({
'textures/angled-blocks-vegetation/albedo.png',
texture => {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping
- texture.repeat.set(mazeWidth / 4, mazeWidth / 4)
+ texture.repeat.set(mazeWidth / 2, mazeWidth / 2)
}
),
aoMap: loader.load(
'textures/angled-blocks-vegetation/ao.png',
texture => {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping
- texture.repeat.set(mazeWidth / 4, mazeWidth / 4)
+ texture.repeat.set(mazeWidth / 2, mazeWidth / 2)
}
),
metalnessMap: loader.load(
'textures/angled-blocks-vegetation/metallic.png',
texture => {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping
- texture.repeat.set(mazeWidth / 4, mazeWidth / 4)
+ texture.repeat.set(mazeWidth / 2, mazeWidth / 2)
}
),
normalMap: loader.load(
'textures/angled-blocks-vegetation/normal-dx.png',
texture => {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping
- texture.repeat.set(mazeWidth / 4, mazeWidth / 4)
+ texture.repeat.set(mazeWidth / 2, mazeWidth / 2)
}
),
roughnessMap: loader.load(
'textures/angled-blocks-vegetation/roughness.png',
texture => {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping
- texture.repeat.set(mazeWidth / 4, mazeWidth / 4)
+ texture.repeat.set(mazeWidth / 2, mazeWidth / 2)
}
),
hexTiling: {
- patchScale: 2,
+ patchScale: 1,
useContrastCorrectedBlending: true,
lookupSkipThreshold: 0.01,
- textureSampleCoefficientExponent: 8,
+ textureSampleCoefficientExponent: 32,
}
})
@@ -400,6 +394,7 @@ if (dev) {
raftRotationFolder.add(raft.rotation, "x")
raftRotationFolder.add(raft.rotation, "y")
raftRotationFolder.add(raft.rotation, "z")
+ raftFolder.close();
const skyFolder = gui.addFolder('Sky');
skyFolder.add(parameters, 'elevation', 0, 90, 0.1).onChange(updateSun);
@@ -503,6 +498,14 @@ if (dev) {
});
waveCFolder.open();
+ const HexTilingFolder = gui.addFolder('Hex Tiling')
+ const groundMaterialFolder = HexTilingFolder.addFolder("ground")
+ groundMaterialFolder.add(groundMaterial.hexTiling, "patchScale", 0, 10)
+ groundMaterialFolder.add(groundMaterial.hexTiling, "useContrastCorrectedBlending")
+ groundMaterialFolder.add(groundMaterial.hexTiling, "lookupSkipThreshold", 0, 1)
+ groundMaterialFolder.add(groundMaterial.hexTiling, "textureSampleCoefficientExponent", 0, 64).name("SampleCoefExp")
+ HexTilingFolder.close()
+
}
//
--
2.39.5