2nd/10_Wiki/Topics/Topic_Programming/DevOps_and_Security/Raycasting.md

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-raycasting	Raycasting	10_Wiki/Topics	verified	self	ray casting ray-object intersection picking ray-sphere ray-triangle	none	A	0.95	applied	graphics geometry ray-tracing picking collision		2026-05-10	pending	language framework TypeScript/GLSL Three.js, WebGPU, three-mesh-bvh

Raycasting

매 한 줄

"매 ray 와 매 geometry 의 intersection test". 매 1968 Arthur Appel 의 매 first hidden surface paper 매 origin, 매 1992 Wolfenstein 3D 의 매 game engine signature. 매 2026 의 매 universal primitive: mouse picking, hit-test, AR placement, lighting, AI vision-cone, BIM section. 매 Raycasting ≠ Ray Tracing — 매 single ray (no recursion) vs 매 recursive light path.

매 핵심

매 raycasting vs raytracing

	Raycasting	Ray Tracing
Recursion	매 single hit	매 reflection / refraction recursive
Cost	매 O(log N) per ray (BVH)	매 50-1000x heavier
Use	Picking, collision	Photorealistic render

매 Ray = origin + t·direction

• t > 0: 매 forward.
• nearest hit: 매 minimum t > 0.
• ray vs primitive: 매 sphere / plane / triangle / AABB / OBB.

매 acceleration structure

• BVH (Bounding Volume Hierarchy): 매 dominant 매 2026.
• KD-tree: 매 static scene 매 slightly faster build.
• Octree: 매 voxel world.
• Spatial hash: 매 dynamic scene.

매 응용

1. Mouse picking (Three.js Raycaster).
2. AR object placement (hit-test with depth).
3. AI line-of-sight / vision cone.
4. Bullet physics (sweep test).
5. Audio occlusion (raycast for muffle).
6. BIM 의 section plane / clipper.

💻 패턴

1. Three.js mouse picking

import * as THREE from 'three';

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

window.addEventListener('pointerdown', (e) => {
  mouse.x = (e.clientX / innerWidth) * 2 - 1;
  mouse.y = -(e.clientY / innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  const hits = raycaster.intersectObjects(scene.children, true);
  if (hits.length) console.log('Hit:', hits[0].object.name, hits[0].point);
});

2. Ray-sphere intersection (analytic)

function raySphere(ro: V3, rd: V3, center: V3, r: number): number {
  const oc = sub(ro, center);
  const b = dot(oc, rd);
  const c = dot(oc, oc) - r * r;
  const h = b * b - c;
  if (h < 0) return -1;
  const t = -b - Math.sqrt(h);
  return t >= 0 ? t : -1;
}

3. Ray-triangle (Möller-Trumbore)

function rayTriangle(ro: V3, rd: V3, a: V3, b: V3, c: V3): number {
  const e1 = sub(b, a), e2 = sub(c, a);
  const p = cross(rd, e2);
  const det = dot(e1, p);
  if (Math.abs(det) < 1e-8) return -1;
  const inv = 1 / det;
  const tv = sub(ro, a);
  const u = dot(tv, p) * inv;
  if (u < 0 || u > 1) return -1;
  const q = cross(tv, e1);
  const v = dot(rd, q) * inv;
  if (v < 0 || u + v > 1) return -1;
  return dot(e2, q) * inv;
}

4. BVH-accelerated picking (three-mesh-bvh)

import { computeBoundsTree, acceleratedRaycast } from 'three-mesh-bvh';

THREE.BufferGeometry.prototype.computeBoundsTree = computeBoundsTree;
THREE.Mesh.prototype.raycast = acceleratedRaycast;

mesh.geometry.computeBoundsTree();   // 매 once
// 매 매 raycast 100x+ faster

5. AR hit-test (WebXR)

const session = await navigator.xr.requestSession('immersive-ar', {
  requiredFeatures: ['hit-test']
});
const refSpace = await session.requestReferenceSpace('viewer');
const hitSource = await session.requestHitTestSource({ space: refSpace });

session.requestAnimationFrame(function frame(t, frame) {
  const results = frame.getHitTestResults(hitSource);
  if (results.length) {
    const pose = results[0].getPose(refSpace);
    placeReticleAt(pose.transform.matrix);
  }
  session.requestAnimationFrame(frame);
});

6. Vision cone (AI agent)

function canSee(agent: Agent, target: V3, world: BVH): boolean {
  const dir = normalize(sub(target, agent.pos));
  const angle = Math.acos(dot(dir, agent.forward));
  if (angle > agent.fov / 2) return false;
  const dist = length(sub(target, agent.pos));
  if (dist > agent.sightRange) return false;
  const hit = world.raycastFirst(agent.pos, dir);
  return !hit || hit.t >= dist - 0.01;
}

7. WebGPU compute-shader raycast

@compute @workgroup_size(64)
fn cs_raycast(@builtin(global_invocation_id) id: vec3u) {
  let ray = rays[id.x];
  var t_min = 1e30;
  var hit_idx = -1;
  for (var i = 0u; i < tri_count; i++) {
    let t = ray_triangle(ray, tris[i]);
    if (t > 0.0 && t < t_min) { t_min = t; hit_idx = i32(i); }
  }
  results[id.x] = Hit(t_min, hit_idx);
}

매 결정 기준

상황	Approach
< 1k triangles	Naive Three.js raycaster 충분
1k-100k triangles	three-mesh-bvh (BVH on CPU)
100k-10M, dynamic	refit BVH per frame + worker
10M+ static	WebGPU compute + GPU BVH
Voxel world (Minecraft-ish)	DDA / Amanatides-Woo (매 grid traversal)
AR placement	WebXR hit-test API (매 system-provided)

기본값: Three.js + three-mesh-bvh 매 web 의 standard. 매 dynamic 매 BVH refit. 매 GPU compute 매 last resort.

🔗 Graph

• 부모: Computational Geometry · Computer Graphics
• 응용: Collision Detection
• Adjacent: KD-Tree

🤖 LLM 활용

언제: 매 3D scene 매 user input mapping (click/touch/AR). 매 line-of-sight / occlusion query. 매 sweep collision 1-shot. 언제 X: 매 2D UI hit-test (DOM event 매 충분). 매 dense per-pixel intersection — 매 GPU rasterization 매 더 fast.

❌ 안티패턴

• 매 frame 의 brute-force intersect 모든 triangle: 매 100k tri scene 매 60fps 의 X — 매 BVH 필수.
• BVH refit 의 X 매 dynamic mesh: 매 stale tree → 매 missed hits.
• Far plane 무시: 매 무한 ray 매 매 distant unimportant geom hit.
• Ray direction 매 unnormalized: 매 t value 매 distance 의 X — 매 모든 distance compare 매 broken.
• Single-precision float 의 self-intersection: 매 origin offset (+ 0.001 * normal) 매 epsilon 처리.

🧪 검증 / 중복

• Verified (Möller-Trumbore 1997 paper, Three.js 2026 source, three-mesh-bvh 0.7+).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — Möller-Trumbore + BVH + WebXR hit-test + WebGPU compute