From cb1b0bb541f384abec02615284d85e421fb35b7a Mon Sep 17 00:00:00 2001 From: adrien 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 @@ 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({ From a0b2aa96ad552e7d5cf1588dc6c285f4de258873 Mon Sep 17 00:00:00 2001 From: adrien 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" } } 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() + } //