snap to painting

src/fps.js

@@ -19,8 +19,10 @@ const height = 2;
 const stepHeight = 0.03;
 const distToWalls = 0.5;
 const viewingDist = 3;
+const paintingSnapDist = 1.3;
 const yLimitTouch = 5;
 const touchDistLimit = 40;
+const rayStep = 4;
 const tpDuration = 1;
 
 const sdLine = (p, a, b, tmp1, tmp2) => {
@@ -59,7 +61,7 @@ const lerp = (x, a, b) => (1 - x) * a + x * b;
 const easeInOutQuad = x =>
 	x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2;
 
-module.exports = function ({getGridSegments}, fovY) {
+module.exports = function ({getGridSegments, getGridParts}, fovY) {
 	var mouse = [0, Math.PI * 3 / 4];
 	var fmouse = [0, Math.PI * 3 / 4];
 	var dir = [0, 0, 0];
@@ -101,7 +103,6 @@ module.exports = function ({getGridSegments}, fovY) {
 			pointer.destroy();
 			pointer = false;
 			//document.querySelector("canvas").requestFullscreen();
-			return;
 		}
 		if(e.type === "touchstart"){
 			firstTouch = lastTouch = e.touches[0];
@@ -122,19 +123,18 @@ module.exports = function ({getGridSegments}, fovY) {
 				// project to the floor and the ceilling
 				let {intersection: floorPos, dist: floorDist} = planeProject(pos, touchDir, [0,1,0,0]);
 				let {dist: ceilingDist} = planeProject(pos, touchDir, [0,1,0,yLimitTouch]);
-				console.log(floorDist, ceilingDist);
+				//console.log(floorDist, ceilingDist);
 				// get the walls suceptibles to intersect with the raycast
 				let [x,,z] = pos;
 				let [dx,,dz] = touchDir;
 				dx /= Math.hypot(dx, dz);
 				dz /= Math.hypot(dx, dz);
 				let walls = getGridSegments(x, z);
-				for(let i = 0; i < touchDistLimit / 8; i++) {
-					x += dx * 8; z += dz * 8;
-					// select cells every 8m shifted 4m left and right to miss none
-					walls = [...walls, ...getGridSegments(x - dz*4, z + dx*4)];
-					walls = [...walls, ...getGridSegments(x + dz*4, z - dx*4)];
+				for(let i = 0; i < touchDistLimit / rayStep; i++) {
+					x += dx * rayStep; z += dz * rayStep;
+					walls = [...walls, ...getGridSegments(x, z)];
 				}
+				//console.log([... new Set(walls)]);
 				// project to walls
 				let intersections = [... new Set(walls)]
 					.map(([a, b]) => wallProject(pos, touchDir, a, b))
@@ -143,7 +143,19 @@ module.exports = function ({getGridSegments}, fovY) {
 				//console.log(intersections);
 				if (intersections.length !== 0) { 
 					// teleport to wall
-					const {intersection: [xpos,, zpos]} = intersections[0];
+					let {intersection: [xpos,, zpos]} = intersections[0];
+					const nearParts = getGridParts(xpos, zpos);
+					for(const [a, b] of nearParts) {
+						const midX = (a[0]+b[0]) / 2;
+						const midZ = (a[1]+b[1]) / 2;
+						//console.log(Math.hypot(xpos - midX, zpos - midZ));
+						// Snap to the front of the painting
+						if(Math.hypot(xpos - midX, zpos - midZ) < paintingSnapDist) {
+							xpos = midX;
+							zpos = midZ;
+							break;
+						}
+					}
 					vec3.copy(startPos, pos);
 					vec3.set(endPos, xpos, pos[1], zpos);
 				} else if(floorDist > 0) {
@@ -177,7 +189,7 @@ module.exports = function ({getGridSegments}, fovY) {
 				tpProgress = 0;
 			}
 			firstTouch = lastTouch = false;
-		} else if(e.type === "touchmove") {
+		} else if(e.type === "touchmove" && lastTouch) {
 			orientCamera(e.touches[0].pageX - lastTouch.pageX, 
 						 e.touches[0].pageY - lastTouch.pageY,
 						 touchSensibility);

src/map.js

@@ -167,7 +167,8 @@ function genGrid(segments, n) {
 	console.time('gen grid');
 	let splittedSegments = splitSegments(segments);
 	const cellCount = Math.pow(2, n-1);
-	let grid = Array(cellCount * cellCount).fill().map(() => []);
+	let gridSegs = Array(cellCount * cellCount).fill().map(() => []);
+	let gridParts = Array(cellCount * cellCount).fill().map(() => []);
 	splittedSegments.map(({seg, parts}) =>
 		parts.map(part => {
 			const indexes = [
@@ -179,13 +180,18 @@ function genGrid(segments, n) {
 				Math.round((part[0][1] + part[1][1]) / 16 - 0.5) * cellCount
 			];
 			for(let i of indexes) {
-				if(!grid[i]) grid[i] = [];
-				if(!grid[i].includes(seg)) grid[i].push(seg);
+				if(!gridSegs[i]) gridSegs[i] = [];
+				if(!gridSegs[i].includes(seg)) gridSegs[i].push(seg);
+				if(!gridParts[i]) gridParts[i] = [];
+				if(!gridParts[i].includes(part)) gridParts[i].push(part);
 			}
 		})
 	);
+	//console.log(gridSegs, gridParts);
 	const getGridSegments = (x, y) =>
-		grid[Math.round(x/8 - 0.5) + Math.round(y/8 - 0.5) * cellCount] || [];
+		gridSegs[Math.round(x/8 - 0.5) + Math.round(y/8 - 0.5) * cellCount] || [];
+	const getGridParts = (x, y) =>
+		gridParts[Math.round(x/8 - 0.5) + Math.round(y/8 - 0.5) * cellCount] || [];
 	let placements = splittedSegments.flatMap(({parts}) => parts);
 	// Ignore short segments for painting placement
 	placements = placements.filter(([[ax, ay], [bx, by]]) => Math.hypot(ax - bx, ay - by) > 1);
@@ -201,7 +207,7 @@ function genGrid(segments, n) {
 		return index;
 	};
 	console.timeEnd('gen grid');
-	return {getGridSegments, getAreaIndex, placements};
+	return {getGridSegments, getGridParts, getAreaIndex, placements};
 }
 
 module.exports = function (n = 7, w = 0.9, m = 0.5, h = 7) {
@@ -213,7 +219,7 @@ module.exports = function (n = 7, w = 0.9, m = 0.5, h = 7) {
 		.map(([[x1, y1], [x2, y2]]) => [Math.sign(y1 - y2), 0, Math.sign(x2 - x1)])
 		.flatMap((v) => Array(4).fill(v));
 	let position = segments.flat().flatMap(([x, y]) => [[x, 0, y], [x, h, y]]);
-	let {getAreaIndex, getGridSegments, placements} = genGrid(segments, n);
+	let {getAreaIndex, getGridSegments, getGridParts, placements} = genGrid(segments, n);
 	//Add floor and ceilling
 	normal.push([0, -1, 0], [0, -1, 0], [0, -1, 0], [0, -1, 0], [0, 1, 0], [0, 1, 0], [0, 1, 0], [0, 1, 0]);
 	position.push([0, h, 0], [0, h, s], [s, h, 0], [s, h, s], [0, 0.01, 0], [s, 0.01, 0], [0, 0.01, s], [s, 0.01, s]);
@@ -226,6 +232,7 @@ module.exports = function (n = 7, w = 0.9, m = 0.5, h = 7) {
 		placements,
 		getAreaIndex,
 		getGridSegments,
+		getGridParts,
 		position,
 		normal,
 		elements

src/placement.js

@@ -5,6 +5,7 @@ const mat4 = require('gl-mat4');
 const renderDist = 20;
 const loadDist = 20;
 const unloadDist = 40;
+const fovxMargin = Math.PI/32;
 
 const dynamicResPeriod = 3000;
 let dynamicRes = "high";
@@ -15,7 +16,7 @@ const culling = (ppos, pangle, fovx, {vseg, angle}) => {
     const sy1 = vseg[0][1] - ppos[2];
     const sx2 = vseg[1][0] - ppos[0];
     const sy2 = vseg[1][1] - ppos[2];
-    const angles = [angle, pangle - fovx/2 + Math.PI/2, pangle + fovx/2 - Math.PI/2];
+    const angles = [angle, pangle - fovx/2 - fovxMargin + Math.PI/2, pangle + fovx/2 + fovxMargin - Math.PI/2];
     for(let a of angles) {
         const nx = Math.sin(a);
         const ny = -Math.cos(a);