mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-22 20:11:24 +01:00
Subdivision added. Removed toggle wireframe as an option.
Reverted to previous rendering method.
This commit is contained in:
Efruz Yıldırır
parent
a2ba10be78
commit
a591b8eebd
5 changed files with 217 additions and 180 deletions
31
index.html
31
index.html
|
|
@ -5673,14 +5673,7 @@
|
|||
<input id="options3dSunZ" type="number" min="-1500" max="1500" step="100" style="width: 4.7em" />
|
||||
</div>
|
||||
|
||||
<div data-tip="Set Sun Color" id="options3dSunColorSection">
|
||||
<span>Sun Color:</span
|
||||
><input
|
||||
id="options3dSunColor"
|
||||
type="color"
|
||||
style="width: 4.4em; height: 1em; border: 0; padding: 0; margin: 0 0.2em"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div data-tip="Toggle 3d labels" style="margin: 0.6em 0 0.3em -0.2em">
|
||||
<input id="options3dMeshLabels3d" class="checkbox" type="checkbox" />
|
||||
|
|
@ -5692,9 +5685,23 @@
|
|||
<label for="options3dMeshSkyMode" class="checkbox-label"><i>Show sky and extend water</i></label>
|
||||
</div>
|
||||
|
||||
<div data-tip="Toggle wireframe mode, generally used for debugging." style="margin: 0.6em 0 0.3em -0.2em">
|
||||
<div data-tip="Toggle 3d subdivision. Increases the polygon count. Opening this will take some time. WARNING: Can smooth the sharp points in progress." style="margin: 0.6em 0 0.3em -0.2em">
|
||||
<input id="options3dSubdivide" class="checkbox" type="checkbox" />
|
||||
<label for="options3dSubdivide" class="checkbox-label"><i>Subdivide Model.</i></label>
|
||||
</div>
|
||||
|
||||
<!-- <div data-tip="Toggle wireframe mode, generally used for debugging." style="margin: 0.6em 0 0.3em -0.2em">
|
||||
<input id="options3dMeshWireframeMode" class="checkbox" type="checkbox" />
|
||||
<label for="options3dMeshWireframeMode" class="checkbox-label"><i>Show mesh material as wireframe</i></label>
|
||||
</div> -->
|
||||
|
||||
<div data-tip="Set Sun Color" id="options3dSunColorSection">
|
||||
<span>Sun Color:</span
|
||||
><input
|
||||
id="options3dSunColor"
|
||||
type="color"
|
||||
style="width: 4.4em; height: 1em; border: 0; padding: 0; margin: 0 0.2em"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div data-tip="Set sky and water color" id="options3dColorSection" style="display: none">
|
||||
|
|
@ -7913,7 +7920,7 @@
|
|||
<script src="modules/ui/stylePresets.js?v=1.89.11"></script>
|
||||
|
||||
<script src="modules/ui/general.js?v=1.87.03"></script>
|
||||
<script src="modules/ui/options.js?v=1.89.20"></script>
|
||||
<script src="modules/ui/options.js?v=1.89.35"></script>
|
||||
<script src="main.js?v=1.89.32"></script>
|
||||
|
||||
<script defer src="modules/relief-icons.js"></script>
|
||||
|
|
@ -7949,14 +7956,14 @@
|
|||
<script defer src="modules/ui/battle-screen.js"></script>
|
||||
<script defer src="modules/ui/emblems-editor.js?v=1.89.21"></script>
|
||||
<script defer src="modules/ui/markers-editor.js"></script>
|
||||
<script defer src="modules/ui/3d.js?v=1.89.33"></script>
|
||||
<script defer src="modules/ui/3d.js?v=1.89.35"></script>
|
||||
<script defer src="modules/ui/submap.js"></script>
|
||||
<script defer src="modules/ui/hotkeys.js?v=1.88.00"></script>
|
||||
<script defer src="modules/coa-renderer.js?v=1.87.08"></script>
|
||||
<script defer src="libs/rgbquant.min.js"></script>
|
||||
<script defer src="libs/jquery.ui.touch-punch.min.js"></script>
|
||||
<script defer src="libs/three.min.js"></script>
|
||||
<script defer src="libs/LoopSubdivision.js"></script>
|
||||
<script defer src="libs/loopSubdivision.js"></script>
|
||||
|
||||
<script defer src="modules/io/save.js?v=1.89.29"></script>
|
||||
<script defer src="modules/io/load.js?v=1.89.30"></script>
|
||||
|
|
|
|||
|
|
@ -67,47 +67,46 @@
|
|||
//
|
||||
/////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
const loopSubdivision = {};
|
||||
(()=>{
|
||||
///// Constants
|
||||
|
||||
const POSITION_DECIMALS = 2;
|
||||
|
||||
///// Constants
|
||||
///// Local Variables
|
||||
|
||||
const POSITION_DECIMALS = 2;
|
||||
const _average = new THREE.Vector3();
|
||||
const _center = new THREE.Vector3();
|
||||
const _midpoint = new THREE.Vector3();
|
||||
const _normal = new THREE.Vector3();
|
||||
const _temp = new THREE.Vector3();
|
||||
|
||||
///// Local Variables
|
||||
const _vector0 = new THREE.Vector3(); // .Vector4();
|
||||
const _vector1 = new THREE.Vector3(); // .Vector4();
|
||||
const _vector2 = new THREE.Vector3(); // .Vector4();
|
||||
const _vec0to1 = new THREE.Vector3();
|
||||
const _vec1to2 = new THREE.Vector3();
|
||||
const _vec2to0 = new THREE.Vector3();
|
||||
|
||||
const _average = new THREE.Vector3();
|
||||
const _center = new THREE.Vector3();
|
||||
const _midpoint = new THREE.Vector3();
|
||||
const _normal = new THREE.Vector3();
|
||||
const _temp = new THREE.Vector3();
|
||||
|
||||
const _vector0 = new THREE.Vector3(); // .Vector4();
|
||||
const _vector1 = new THREE.Vector3(); // .Vector4();
|
||||
const _vector2 = new THREE.Vector3(); // .Vector4();
|
||||
const _vec0to1 = new THREE.Vector3();
|
||||
const _vec1to2 = new THREE.Vector3();
|
||||
const _vec2to0 = new THREE.Vector3();
|
||||
|
||||
const _position = [
|
||||
const _position = [
|
||||
new THREE.Vector3(),
|
||||
new THREE.Vector3(),
|
||||
new THREE.Vector3(),
|
||||
];
|
||||
];
|
||||
|
||||
const _vertex = [
|
||||
const _vertex = [
|
||||
new THREE.Vector3(),
|
||||
new THREE.Vector3(),
|
||||
new THREE.Vector3(),
|
||||
];
|
||||
];
|
||||
|
||||
const _triangle = new THREE.Triangle();
|
||||
const _triangle = new THREE.Triangle();
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////////////
|
||||
///// Loop Subdivision Surface
|
||||
/////////////////////////////////////////////////////////////////////////////////////
|
||||
/////////////////////////////////////////////////////////////////////////////////////
|
||||
///// Loop Subdivision Surface
|
||||
/////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/** Loop subdivision surface modifier for use with modern three.js BufferGeometry */
|
||||
class LoopSubdivision {
|
||||
/** Loop subdivision surface modifier for use with modern three.js BufferGeometry */
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////////////
|
||||
///// Modify
|
||||
|
|
@ -128,8 +127,8 @@ class LoopSubdivision {
|
|||
* @param {Boolean} flatOnly - If true, subdivision generates triangles, but does not modify positions
|
||||
* @param {Number} maxTriangles - If geometry contains more than this many triangles, subdivision will not continue
|
||||
*/
|
||||
static modify(bufferGeometry, iterations = 1, params = {}) {
|
||||
if (arguments.length > 3) console.warn(`LoopSubdivision.modify() now uses a parameter object. See readme for more info!`);
|
||||
function modify(bufferGeometry, iterations = 1, params = {}) {
|
||||
if (arguments.length > 3) console.warn(`modify() now uses a parameter object. See readme for more info!`);
|
||||
|
||||
if (typeof params !== 'object') params = {};
|
||||
|
||||
|
|
@ -141,12 +140,12 @@ class LoopSubdivision {
|
|||
if (params.maxTriangles === undefined) params.maxTriangles = Infinity;
|
||||
|
||||
///// Geometries
|
||||
if (! verifyGeometry(bufferGeometry)) return bufferGeometry;
|
||||
if (!verifyGeometry(bufferGeometry)) return bufferGeometry;
|
||||
let modifiedGeometry = bufferGeometry.clone();
|
||||
|
||||
///// Presplit
|
||||
if (params.split) {
|
||||
const splitGeometry = LoopSubdivision.edgeSplit(modifiedGeometry)
|
||||
const splitGeometry = edgeSplit(modifiedGeometry)
|
||||
modifiedGeometry.dispose();
|
||||
modifiedGeometry = splitGeometry;
|
||||
}
|
||||
|
|
@ -159,9 +158,9 @@ class LoopSubdivision {
|
|||
|
||||
// Subdivide
|
||||
if (params.flatOnly) {
|
||||
subdividedGeometry = LoopSubdivision.flat(modifiedGeometry);
|
||||
subdividedGeometry = flat(modifiedGeometry);
|
||||
} else {
|
||||
subdividedGeometry = LoopSubdivision.smooth(modifiedGeometry, params);
|
||||
subdividedGeometry = smooth(modifiedGeometry, params);
|
||||
}
|
||||
|
||||
// Copy and Resize Groups
|
||||
|
|
@ -178,7 +177,8 @@ class LoopSubdivision {
|
|||
///// Return New Geometry
|
||||
return modifiedGeometry;
|
||||
}
|
||||
|
||||
loopSubdivision.modify = modify;
|
||||
console.log("Hello World");
|
||||
/////////////////////////////////////////////////////////////////////////////////////
|
||||
///// Split Hypotenuse
|
||||
////////////////////
|
||||
|
|
@ -188,10 +188,10 @@ class LoopSubdivision {
|
|||
* Starts by splitting at longest shared edge, followed by splitting from that new center edge point to the
|
||||
* center of any other shared edges.
|
||||
*/
|
||||
static edgeSplit(geometry) {
|
||||
function edgeSplit(geometry) {
|
||||
|
||||
///// Geometries
|
||||
if (! verifyGeometry(geometry)) return geometry;
|
||||
if (!verifyGeometry(geometry)) return geometry;
|
||||
const existing = (geometry.index !== null) ? geometry.toNonIndexed() : geometry.clone();
|
||||
const split = new THREE.BufferGeometry();
|
||||
|
||||
|
|
@ -219,8 +219,8 @@ class LoopSubdivision {
|
|||
|
||||
// Verify Area
|
||||
const triangleSize = _triangle.set(_vector0, _vector1, _vector2).getArea();
|
||||
triangleExist.push(! fuzzy(triangleSize, 0));
|
||||
if (! triangleExist[i / 3]) {
|
||||
triangleExist.push(!fuzzy(triangleSize, 0));
|
||||
if (!triangleExist[i / 3]) {
|
||||
triangleEdgeHashes.push([]);
|
||||
continue;
|
||||
}
|
||||
|
|
@ -243,11 +243,11 @@ class LoopSubdivision {
|
|||
const index = i / 3;
|
||||
for (let j = 0; j < hashes.length; j++) {
|
||||
// Attach Triangle Index to Edge Hash
|
||||
if (! edgeHashToTriangle[hashes[j]]) edgeHashToTriangle[hashes[j]] = [];
|
||||
if (!edgeHashToTriangle[hashes[j]]) edgeHashToTriangle[hashes[j]] = [];
|
||||
edgeHashToTriangle[hashes[j]].push(index);
|
||||
|
||||
// Edge Length
|
||||
if (! edgeLength[hashes[j]]) {
|
||||
if (!edgeLength[hashes[j]]) {
|
||||
if (j === 0 || j === 1) edgeLength[hashes[j]] = _vector0.distanceTo(_vector1);
|
||||
if (j === 2 || j === 3) edgeLength[hashes[j]] = _vector1.distanceTo(_vector2);
|
||||
if (j === 4 || j === 5) edgeLength[hashes[j]] = _vector2.distanceTo(_vector0);
|
||||
|
|
@ -255,13 +255,13 @@ class LoopSubdivision {
|
|||
}
|
||||
|
||||
// Triangle Edge Reference
|
||||
triangleEdgeHashes.push([ hashes[0], hashes[2], hashes[4] ]);
|
||||
triangleEdgeHashes.push([hashes[0], hashes[2], hashes[4]]);
|
||||
}
|
||||
|
||||
///// Build Geometry, Set Attributes
|
||||
attributeList.forEach((attributeName) => {
|
||||
const attribute = existing.getAttribute(attributeName);
|
||||
if (! attribute) return;
|
||||
if (!attribute) return;
|
||||
const floatArray = splitAttribute(attribute, attributeName);
|
||||
split.setAttribute(attributeName, new THREE.BufferAttribute(floatArray, attribute.itemSize));
|
||||
});
|
||||
|
|
@ -292,7 +292,7 @@ class LoopSubdivision {
|
|||
const arrayLength = (vertexCount * attribute.itemSize) * newTriangles;
|
||||
const floatArray = new attribute.array.constructor(arrayLength);
|
||||
|
||||
const processGroups = (attributeName === 'position' && ! morph && existing.groups.length > 0);
|
||||
const processGroups = (attributeName === 'position' && !morph && existing.groups.length > 0);
|
||||
let groupStart = undefined, groupMaterial = undefined;
|
||||
|
||||
let index = 0;
|
||||
|
|
@ -301,7 +301,7 @@ class LoopSubdivision {
|
|||
for (let i = 0; i < vertexCount; i += 3) {
|
||||
|
||||
// Verify Triangle is Valid
|
||||
if (! triangleExist[i / 3]) {
|
||||
if (!triangleExist[i / 3]) {
|
||||
skipped += 3;
|
||||
continue;
|
||||
}
|
||||
|
|
@ -431,10 +431,10 @@ class LoopSubdivision {
|
|||
////////////////////
|
||||
|
||||
/** Applies one iteration of Loop (flat) subdivision (1 triangle split into 4 triangles) */
|
||||
static flat(geometry) {
|
||||
function flat(geometry) {
|
||||
|
||||
///// Geometries
|
||||
if (! verifyGeometry(geometry)) return geometry;
|
||||
if (!verifyGeometry(geometry)) return geometry;
|
||||
const existing = (geometry.index !== null) ? geometry.toNonIndexed() : geometry.clone();
|
||||
const loop = new THREE.BufferGeometry();
|
||||
|
||||
|
|
@ -445,9 +445,9 @@ class LoopSubdivision {
|
|||
///// Build Geometry
|
||||
attributeList.forEach((attributeName) => {
|
||||
const attribute = existing.getAttribute(attributeName);
|
||||
if (! attribute) return;
|
||||
if (!attribute) return;
|
||||
|
||||
loop.setAttribute(attributeName, LoopSubdivision.flatAttribute(attribute, vertexCount));
|
||||
loop.setAttribute(attributeName, flatAttribute(attribute, vertexCount));
|
||||
});
|
||||
|
||||
///// Morph Attributes
|
||||
|
|
@ -459,7 +459,7 @@ class LoopSubdivision {
|
|||
// Process Array of Float32BufferAttributes
|
||||
for (let i = 0, l = morphAttribute.length; i < l; i++) {
|
||||
if (morphAttribute[i].count !== vertexCount) continue;
|
||||
array.push(LoopSubdivision.flatAttribute(morphAttribute[i], vertexCount));
|
||||
array.push(flatAttribute(morphAttribute[i], vertexCount));
|
||||
}
|
||||
loop.morphAttributes[attributeName] = array;
|
||||
}
|
||||
|
|
@ -470,7 +470,7 @@ class LoopSubdivision {
|
|||
return loop;
|
||||
}
|
||||
|
||||
static flatAttribute(attribute, vertexCount) {
|
||||
function flatAttribute(attribute, vertexCount) {
|
||||
const newTriangles = 4;
|
||||
const arrayLength = (vertexCount * attribute.itemSize) * newTriangles;
|
||||
const floatArray = new attribute.array.constructor(arrayLength);
|
||||
|
|
@ -504,7 +504,7 @@ class LoopSubdivision {
|
|||
////////////////////
|
||||
|
||||
/** Applies one iteration of Loop (smooth) subdivision (1 triangle split into 4 triangles) */
|
||||
static smooth(geometry, params = {}) {
|
||||
function smooth(geometry, params = {}) {
|
||||
|
||||
if (typeof params !== 'object') params = {};
|
||||
|
||||
|
|
@ -513,34 +513,34 @@ class LoopSubdivision {
|
|||
if (params.preserveEdges === undefined) params.preserveEdges = false;
|
||||
|
||||
///// Geometries
|
||||
if (! verifyGeometry(geometry)) return geometry;
|
||||
if (!verifyGeometry(geometry)) return geometry;
|
||||
const existing = (geometry.index !== null) ? geometry.toNonIndexed() : geometry.clone();
|
||||
const flat = LoopSubdivision.flat(existing);
|
||||
const flatGeometry = flat(existing);
|
||||
const loop = new THREE.BufferGeometry();
|
||||
|
||||
///// Attributes
|
||||
const attributeList = gatherAttributes(existing);
|
||||
const vertexCount = existing.attributes.position.count;
|
||||
const posAttribute = existing.getAttribute('position');
|
||||
const flatPosition = flat.getAttribute('position');
|
||||
const flatPosition = flatGeometry.getAttribute('position');
|
||||
const hashToIndex = {}; // Position hash mapped to index values of same position
|
||||
const existingNeighbors = {}; // Position hash mapped to existing vertex neighbors
|
||||
const flatOpposites = {}; // Position hash mapped to new edge point opposites
|
||||
const existingEdges = {};
|
||||
|
||||
function addNeighbor(posHash, neighborHash, index) {
|
||||
if (! existingNeighbors[posHash]) existingNeighbors[posHash] = {};
|
||||
if (! existingNeighbors[posHash][neighborHash]) existingNeighbors[posHash][neighborHash] = [];
|
||||
if (!existingNeighbors[posHash]) existingNeighbors[posHash] = {};
|
||||
if (!existingNeighbors[posHash][neighborHash]) existingNeighbors[posHash][neighborHash] = [];
|
||||
existingNeighbors[posHash][neighborHash].push(index);
|
||||
}
|
||||
|
||||
function addOpposite(posHash, index) {
|
||||
if (! flatOpposites[posHash]) flatOpposites[posHash] = [];
|
||||
if (!flatOpposites[posHash]) flatOpposites[posHash] = [];
|
||||
flatOpposites[posHash].push(index);
|
||||
}
|
||||
|
||||
function addEdgePoint(posHash, edgeHash) {
|
||||
if (! existingEdges[posHash]) existingEdges[posHash] = new Set();
|
||||
if (!existingEdges[posHash]) existingEdges[posHash] = new Set();
|
||||
existingEdges[posHash].add(edgeHash);
|
||||
}
|
||||
|
||||
|
|
@ -579,16 +579,16 @@ class LoopSubdivision {
|
|||
}
|
||||
|
||||
///// Flat Position to Index Map
|
||||
for (let i = 0; i < flat.attributes.position.count; i++) {
|
||||
for (let i = 0; i < flatGeometry.attributes.position.count; i++) {
|
||||
const posHash = hashFromVector(_temp.fromBufferAttribute(flatPosition, i));
|
||||
if (! hashToIndex[posHash]) hashToIndex[posHash] = [];
|
||||
if (!hashToIndex[posHash]) hashToIndex[posHash] = [];
|
||||
hashToIndex[posHash].push(i);
|
||||
}
|
||||
|
||||
///// Build Geometry, Set Attributes
|
||||
attributeList.forEach((attributeName) => {
|
||||
const existingAttribute = existing.getAttribute(attributeName);
|
||||
const flatAttribute = flat.getAttribute(attributeName);
|
||||
const flatAttribute = flatGeometry.getAttribute(attributeName);
|
||||
if (existingAttribute === undefined || flatAttribute === undefined) return;
|
||||
|
||||
const floatArray = subdivideAttribute(attributeName, existingAttribute, flatAttribute);
|
||||
|
|
@ -605,7 +605,7 @@ class LoopSubdivision {
|
|||
for (let i = 0, l = morphAttribute.length; i < l; i++) {
|
||||
if (morphAttribute[i].count !== vertexCount) continue;
|
||||
const existingAttribute = morphAttribute[i];
|
||||
const flatAttribute = LoopSubdivision.flatAttribute(morphAttribute[i], morphAttribute[i].count)
|
||||
const flatAttribute = flatAttribute(morphAttribute[i], morphAttribute[i].count)
|
||||
|
||||
const floatArray = subdivideAttribute(attributeName, existingAttribute, flatAttribute);
|
||||
array.push(new THREE.BufferAttribute(floatArray, flatAttribute.itemSize));
|
||||
|
|
@ -615,7 +615,7 @@ class LoopSubdivision {
|
|||
loop.morphTargetsRelative = existing.morphTargetsRelative;
|
||||
|
||||
///// Clean Up
|
||||
flat.dispose();
|
||||
flatGeometry.dispose();
|
||||
existing.dispose();
|
||||
return loop;
|
||||
|
||||
|
|
@ -623,17 +623,17 @@ class LoopSubdivision {
|
|||
|
||||
// Loop Subdivide Function
|
||||
function subdivideAttribute(attributeName, existingAttribute, flatAttribute) {
|
||||
const arrayLength = (flat.attributes.position.count * flatAttribute.itemSize);
|
||||
const arrayLength = (flatGeometry.attributes.position.count * flatAttribute.itemSize);
|
||||
const floatArray = new existingAttribute.array.constructor(arrayLength);
|
||||
|
||||
// Process Triangles
|
||||
let index = 0;
|
||||
for (let i = 0; i < flat.attributes.position.count; i += 3) {
|
||||
for (let i = 0; i < flatGeometry.attributes.position.count; i += 3) {
|
||||
|
||||
// Process Triangle Points
|
||||
for (let v = 0; v < 3; v++) {
|
||||
|
||||
if (attributeName === 'uv' && ! params.uvSmooth) {
|
||||
if (attributeName === 'uv' && !params.uvSmooth) {
|
||||
|
||||
_vertex[v].fromBufferAttribute(flatAttribute, i + v);
|
||||
|
||||
|
|
@ -676,14 +676,14 @@ class LoopSubdivision {
|
|||
for (const edgeHash of edgeSet) {
|
||||
if (flatOpposites[edgeHash].length % 2 !== 0) hasPair = false;
|
||||
}
|
||||
if (! hasPair) continue;
|
||||
if (!hasPair) continue;
|
||||
}
|
||||
|
||||
// Number of Neighbors
|
||||
const k = Object.keys(neighbors).length;
|
||||
|
||||
///// Loop's Formula
|
||||
const beta = 1 / k * ((5/8) - Math.pow((3/8) + (1/4) * Math.cos(2 * Math.PI / k), 2));
|
||||
const beta = 1 / k * ((5 / 8) - Math.pow((3 / 8) + (1 / 4) * Math.cos(2 * Math.PI / k), 2));
|
||||
|
||||
///// Warren's Formula
|
||||
// const beta = (k > 3) ? 3 / (8 * k) : ((k === 3) ? 3 / 16 : 0);
|
||||
|
|
@ -734,53 +734,53 @@ class LoopSubdivision {
|
|||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////////////
|
||||
///// Local Functions, Hash
|
||||
/////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
const _positionShift = Math.pow(10, POSITION_DECIMALS);
|
||||
/////////////////////////////////////////////////////////////////////////////////////
|
||||
///// Local Functions, Hash
|
||||
/////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/** Compares two numbers to see if they're almost the same */
|
||||
function fuzzy(a, b, tolerance = 0.00001) {
|
||||
const _positionShift = Math.pow(10, POSITION_DECIMALS);
|
||||
|
||||
/** Compares two numbers to see if they're almost the same */
|
||||
function fuzzy(a, b, tolerance = 0.00001) {
|
||||
return ((a < (b + tolerance)) && (a > (b - tolerance)));
|
||||
}
|
||||
}
|
||||
|
||||
/** Generates hash strong from Number */
|
||||
function hashFromNumber(num, shift = _positionShift) {
|
||||
/** Generates hash strong from Number */
|
||||
function hashFromNumber(num, shift = _positionShift) {
|
||||
let roundedNumber = round(num * shift);
|
||||
if (roundedNumber == 0) roundedNumber = 0; /* prevent -0 (signed 0 can effect Math.atan2(), etc.) */
|
||||
return `${roundedNumber}`;
|
||||
}
|
||||
}
|
||||
|
||||
/** Generates hash strong from Vector3 */
|
||||
function hashFromVector(vector, shift = _positionShift) {
|
||||
/** Generates hash strong from Vector3 */
|
||||
function hashFromVector(vector, shift = _positionShift) {
|
||||
return `${hashFromNumber(vector.x, shift)},${hashFromNumber(vector.y, shift)},${hashFromNumber(vector.z, shift)}`;
|
||||
}
|
||||
}
|
||||
|
||||
function round(x) {
|
||||
function round(x) {
|
||||
return (x + ((x > 0) ? 0.5 : -0.5)) << 0;
|
||||
}
|
||||
}
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////////////
|
||||
///// Local Functions, Geometry
|
||||
/////////////////////////////////////////////////////////////////////////////////////
|
||||
/////////////////////////////////////////////////////////////////////////////////////
|
||||
///// Local Functions, Geometry
|
||||
/////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
function calcNormal(target, vec1, vec2, vec3) {
|
||||
function calcNormal(target, vec1, vec2, vec3) {
|
||||
_temp.subVectors(vec1, vec2);
|
||||
target.subVectors(vec2, vec3);
|
||||
target.cross(_temp).normalize();
|
||||
}
|
||||
}
|
||||
|
||||
function gatherAttributes(geometry) {
|
||||
const desired = [ 'position', 'normal', 'uv' ];
|
||||
function gatherAttributes(geometry) {
|
||||
const desired = ['position', 'normal', 'uv'];
|
||||
const contains = Object.keys(geometry.attributes);
|
||||
const attributeList = Array.from(new Set(desired.concat(contains)));
|
||||
return attributeList;
|
||||
}
|
||||
}
|
||||
|
||||
function setTriangle(positions, index, step, vec0, vec1, vec2) {
|
||||
function setTriangle(positions, index, step, vec0, vec1, vec2) {
|
||||
if (step >= 1) {
|
||||
positions[index + 0 + (step * 0)] = vec0.x;
|
||||
positions[index + 0 + (step * 1)] = vec1.x;
|
||||
|
|
@ -801,15 +801,15 @@ function setTriangle(positions, index, step, vec0, vec1, vec2) {
|
|||
positions[index + 3 + (step * 1)] = vec1.w;
|
||||
positions[index + 3 + (step * 2)] = vec2.w;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function verifyGeometry(geometry) {
|
||||
function verifyGeometry(geometry) {
|
||||
if (geometry === undefined) {
|
||||
console.warn(`LoopSubdivision: Geometry provided is undefined`);
|
||||
return false;
|
||||
}
|
||||
|
||||
if (! geometry.isBufferGeometry) {
|
||||
if (!geometry.isBufferGeometry) {
|
||||
console.warn(`LoopSubdivision: Geometry provided is not 'BufferGeometry' type`);
|
||||
return false;
|
||||
}
|
||||
|
|
@ -823,4 +823,6 @@ function verifyGeometry(geometry) {
|
|||
geometry.computeVertexNormals();
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
})()
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ window.ThreeD = (function () {
|
|||
scale: 50,
|
||||
lightness: 0.7,
|
||||
shadow: 0.5,
|
||||
sun: {x: 300, y: 1500, z: 800},
|
||||
sun: {x: 100, y: 600, z: 1000},
|
||||
rotateMesh: 0,
|
||||
rotateGlobe: 0.5,
|
||||
skyColor: "#9ecef5",
|
||||
|
|
@ -15,7 +15,8 @@ window.ThreeD = (function () {
|
|||
wireframe: 0,
|
||||
resolution: 2,
|
||||
resolutionScale: 3,
|
||||
sunColor: "#ffffff"
|
||||
sunColor: "#cccccc",
|
||||
subdivide: 0
|
||||
};
|
||||
|
||||
// set variables
|
||||
|
|
@ -95,7 +96,11 @@ window.ThreeD = (function () {
|
|||
|
||||
const setScale = function (scale) {
|
||||
options.scale = scale;
|
||||
geometry.vertices.forEach((v, i) => (v.z = getMeshHeight(i)));
|
||||
let vertices = geometry.getAttribute('position');
|
||||
for(let i = 0; i < vertices.count; i++){
|
||||
vertices.setZ(i,getMeshHeight(i));
|
||||
}
|
||||
geometry.setAttribute('position',vertices);
|
||||
geometry.verticesNeedUpdate = true;
|
||||
geometry.computeVertexNormals();
|
||||
geometry.verticesNeedUpdate = false;
|
||||
|
|
@ -163,6 +168,12 @@ window.ThreeD = (function () {
|
|||
}
|
||||
};
|
||||
|
||||
const toggle3dSubdivision = function(){
|
||||
console.log("toggle 3d subdivision");
|
||||
options.subdivide = !options.subdivide;
|
||||
redraw();
|
||||
}
|
||||
|
||||
const toggleWireframe = function () {
|
||||
options.wireframe = !options.wireframe;
|
||||
redraw();
|
||||
|
|
@ -222,7 +233,7 @@ window.ThreeD = (function () {
|
|||
Renderer = new THREE.WebGLRenderer({canvas, antialias: true, preserveDrawingBuffer: true});
|
||||
Renderer.setSize(canvas.width, canvas.height);
|
||||
Renderer.shadowMap.enabled = true;
|
||||
Renderer.shadowMap.type = THREE.PCFSoftShadowMap;
|
||||
// Renderer.shadowMap.type = THREE.PCFSoftShadowMap;
|
||||
if (options.extendedWater) extendWater(graphWidth, graphHeight);
|
||||
createMesh(graphWidth, graphHeight, grid.cellsX, grid.cellsY);
|
||||
|
||||
|
|
@ -480,9 +491,8 @@ window.ThreeD = (function () {
|
|||
material = new THREE.MeshLambertMaterial();
|
||||
material.wireframe = true;
|
||||
}else{
|
||||
material = new THREE.MeshStandardMaterial();
|
||||
material = new THREE.MeshLambertMaterial();
|
||||
material.map = texture;
|
||||
material.roughness = 0.9;
|
||||
material.transparent = true;
|
||||
}
|
||||
|
||||
|
|
@ -493,14 +503,24 @@ window.ThreeD = (function () {
|
|||
for(let i = 0; i < vertices.count; i++){
|
||||
vertices.setZ(i,getMeshHeight(i));
|
||||
}
|
||||
// vertices.forEach((v, i) => (v.z = getMeshHeight(i)));
|
||||
geometry.setAttribute('position',vertices);
|
||||
geometry.computeVertexNormals();
|
||||
|
||||
//This takes too long
|
||||
const smoothGeometry = LoopSubdivision.modify(geometry,1,undefined);
|
||||
if (mesh) scene.remove(mesh);
|
||||
if(options.subdivide){
|
||||
const subdivideParams = {
|
||||
split: true,
|
||||
uvSmooth: false,
|
||||
preserveEdges: true,
|
||||
flatOnly: false,
|
||||
maxTriangles: Infinity
|
||||
};
|
||||
const smoothGeometry = loopSubdivision.modify(geometry,1,subdivideParams);
|
||||
mesh = new THREE.Mesh(smoothGeometry, material);
|
||||
}else{
|
||||
mesh = new THREE.Mesh(geometry, material);
|
||||
}
|
||||
mesh.rotation.x = -Math.PI / 2;
|
||||
mesh.castShadow = true;
|
||||
mesh.receiveShadow = true;
|
||||
|
|
@ -704,6 +724,7 @@ window.ThreeD = (function () {
|
|||
setSun,
|
||||
setRotation,
|
||||
toggleLabels,
|
||||
toggle3dSubdivision,
|
||||
toggleWireframe,
|
||||
toggleSky,
|
||||
setResolution,
|
||||
|
|
|
|||
|
|
@ -1070,8 +1070,9 @@ function toggle3dOptions() {
|
|||
document.getElementById("options3dMeshSky").addEventListener("input", changeColors);
|
||||
document.getElementById("options3dMeshWater").addEventListener("input", changeColors);
|
||||
document.getElementById("options3dGlobeResolution").addEventListener("change", changeResolution);
|
||||
document.getElementById("options3dMeshWireframeMode").addEventListener("change",toggleWireframe3d);
|
||||
// document.getElementById("options3dMeshWireframeMode").addEventListener("change",toggleWireframe3d);
|
||||
document.getElementById("options3dSunColor").addEventListener("input", changeSunColor);
|
||||
document.getElementById("options3dSubdivide").addEventListener("change",toggle3dSubdivision);
|
||||
|
||||
|
||||
function updateValues() {
|
||||
|
|
@ -1094,6 +1095,7 @@ function toggle3dOptions() {
|
|||
options3dMeshWater.value = ThreeD.options.waterColor;
|
||||
options3dGlobeResolution.value = ThreeD.options.resolution;
|
||||
options3dSunColor.value = ThreeD.options.sunColor;
|
||||
options3dSubdivide.value = ThreeD.options.subdivide;
|
||||
console.log("options3dSunColor.value =",ThreeD.options.sunColor);
|
||||
}
|
||||
|
||||
|
|
@ -1134,10 +1136,15 @@ function toggle3dOptions() {
|
|||
ThreeD.toggleLabels();
|
||||
}
|
||||
|
||||
function toggleWireframe3d() {
|
||||
ThreeD.toggleWireframe();
|
||||
function toggle3dSubdivision(){
|
||||
console.log(options.subdivide);
|
||||
ThreeD.toggle3dSubdivision();
|
||||
}
|
||||
|
||||
// function toggleWireframe3d() {
|
||||
// ThreeD.toggleWireframe();
|
||||
// }
|
||||
|
||||
function toggleSkyMode() {
|
||||
const hide = ThreeD.options.extendedWater;
|
||||
options3dColorSection.style.display = hide ? "none" : "block";
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
"use strict";
|
||||
|
||||
// version and caching control
|
||||
const version = "1.89.34"; // generator version, update each time
|
||||
const version = "1.89.35"; // generator version, update each time
|
||||
|
||||
{
|
||||
document.title += " v" + version;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue